export default {
  name: "Text",
  acceptsChildren: false,
  category: "Basic",
  styleProps: [
    {
      label: "Size",
      name: "size",
      type: { kind: "select" },
      options: [
        {
          label: "Inherit",
          value: "inherit",
          selector: '[data-size="inherit"]',
          styles: {
            "": {
              "font-size": "inherit",
              "line-height": "inherit",
            },
          },
        },
        {
          label: "2xs",
          value: "2xs",
          selector: '[data-size="2xs"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-2xs)",
              "line-height": "0.75rem",
            },
          },
        },
        {
          label: "xs",
          value: "xs",
          selector: '[data-size="xs"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-xs)",
              "line-height": "1rem",
            },
          },
        },
        {
          label: "sm",
          value: "sm",
          selector: '[data-size="sm"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-sm)",
              "line-height": "1.25rem",
            },
          },
        },
        {
          label: "md",
          value: "md",
          selector: '[data-size="md"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-md)",
              "line-height": "1.5rem",
            },
          },
        },
        {
          label: "lg",
          value: "lg",
          selector: '[data-size="lg"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-lg)",
              "line-height": "1.75rem",
            },
          },
        },
        {
          label: "xl",
          value: "xl",
          selector: '[data-size="xl"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-xl)",
              "line-height": "1.875rem",
            },
          },
        },
        {
          label: "2xl",
          value: "2xl",
          selector: '[data-size="2xl"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-2xl)",
              "line-height": "2rem",
            },
          },
        },
        {
          label: "3xl",
          value: "3xl",
          selector: '[data-size="3xl"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-3xl)",
              "line-height": "2.375rem",
            },
          },
        },
        {
          label: "4xl",
          value: "4xl",
          selector: '[data-size="4xl"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-4xl)",
              "line-height": "2.75rem",
              "letter-spacing": "-0.025em",
            },
          },
        },
        {
          label: "5xl",
          value: "5xl",
          selector: '[data-size="5xl"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-5xl)",
              "line-height": "3.75rem",
              "letter-spacing": "-0.025em",
            },
          },
        },
        {
          label: "6xl",
          value: "6xl",
          selector: '[data-size="6xl"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-6xl)",
              "line-height": "4.5rem",
              "letter-spacing": "-0.025em",
            },
          },
        },
        {
          label: "7xl",
          value: "7xl",
          selector: '[data-size="7xl"]',
          styles: {
            "": {
              "font-size": "var(--theme-fontSizes-7xl)",
              "line-height": "5.75rem",
              "letter-spacing": "-0.025em",
            },
          },
        },
      ],
      default: "inherit",
      help: 'The size of the avatr. "md" is the default size',
    },
    {
      label: "Variant",
      name: "variant",
      type: { kind: "select" },
      default: "body",
      options: [
        {
          label: "Body",
          value: "body",
          selector: '[data-variant="body"]',
          styles: {
            "": {
              "font-family": "var(--theme-fonts-body)",
              "font-weight": "var(--theme-fontWeights-normal)",
            },
          },
        },
        {
          label: "Heading",
          value: "heading",
          selector: '[data-variant="heading"]',
          styles: {
            "": {
              "font-family": "var(--theme-fonts-heading)",
              "font-weight": "var(--theme-fontWeights-semibold)",
            },
          },
        },
        {
          label: "label",
          value: "label",
          selector: '[data-variant="label"]',
          styles: {
            "": {
              "font-family": "var(--theme-fonts-body)",
              "line-height": "1.25rem",
              "font-weight": "var(--theme-fontWeights-medium)",
            },
          },
        },
        {
          label: "Inherit",
          value: "inherit",
          selector: '[data-variant="inherit"]',
          styles: {
            "": {
              "font-family": "inherit",
              "line-height": "inherit",
              "font-weight": "inherit",
            },
          },
        },
      ],
      help: "The variant of the text",
    },
  ],
  props: [
    {
      label: "Text Content",
      name: "value",
      type: { kind: "text", isDynamic: true },
      required: true,
      default: "Edit me...",
      placeholder: "Enter some text...",
      help: "The text to display",
    },
    {
      label: "Truncate number of lines",
      name: "noOfLines",
      type: { kind: "number" },
      default: null,
      placeholder: "none",
      help: "0 or empty means no truncation",
    },
    {
      label: "Semantic Element",
      name: "as",
      type: { kind: "select" },
      default: "span",
      options: [
        { label: "span (default)", value: "span" },
        { label: "h1", value: "h1" },
        { label: "h2", value: "h2" },
        { label: "h3", value: "h3" },
        { label: "h4", value: "h4" },
        { label: "h5", value: "h5" },
        { label: "h6", value: "h6" },
      ],
      placeholder: "",
      help: "The html tag to use. When in doubt, use 'span'.",
    },
  ],
  defaultStyles: {
    "": {
      position: "relative",
      "white-space": "pre-wrap",
      "overflow-wrap": "normal",
      gap: "0px",
      color: "inherit",
      width: "auto",
      height: "auto",
      display: "flex",
      "flex-direction": "column",
      "flex-grow": "0",
      "font-size": "inherit",
      "max-width": "100%",
      "min-width": "auto",
      "flex-basis": "auto",
      "font-weight": "inherit",
      "max-height": "100%",
      "min-height": "auto",
      "text-align": "left",
      "align-items": "flex-start",
      "flex-shrink": "1",
      "font-family": "var(--theme-fonts-body)",
      "padding-top": "0px",
      "border-color": "var(--theme-brand-neutral-200)",
      "border-style": "solid",
      "border-width": "0px",
      "padding-left": "0px",
      "border-radius": "0px",
      "padding-right": "0px",
      "padding-bottom": "0px",
      "justify-content": "flex-start",
      "background-color": "transparent",
    },
  },
  sources: [],
} as const;