@zentauri-ui/zentauri-components 1.5.31 → 1.6.2

package/dist/ui/typography.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/typography/variants.ts","../../src/ui/typography/heading-base.tsx","../../src/ui/typography/heading.tsx","../../src/ui/typography/text-base.tsx","../../src/ui/typography/text.tsx","../../src/ui/typography/list-base.tsx","../../src/ui/typography/list.tsx","../../src/ui/typography/blockquote-base.tsx","../../src/ui/typography/blockquote.tsx","../../src/ui/typography/inline-code-base.tsx","../../src/ui/typography/inline-code.tsx","../../src/ui/typography/code-block-base.tsx","../../src/ui/typography/code-block.tsx"],"names":["jsx","tone","className","children","ref","ordered","marker","rest"],"mappings":"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","file":"typography.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/** Semantic text colors aligned with slate/cyan/violet accents used across the kit (dark-first). */\nexport const typographyToneVariants = cva(\"\", {\n  variants: {\n    tone: {\n      default: \"text-slate-50 border-white/15\",\n      muted: \"text-slate-400 border-white/15\",\n      primary: \"text-cyan-300 border-cyan-300/40\",\n      secondary: \"text-slate-300 border-white/15\",\n      accent: \"text-violet-300 border-violet-300/40\",\n      destructive: \"text-rose-400 border-rose-300/40\",\n      info: \"text-sky-300 border-sky-300/40\",\n      success: \"text-emerald-300 border-emerald-300/40\",\n      warning: \"text-amber-300 border-amber-300/40\",\n      error: \"text-red-300 border-red-300/40\",\n      \"gradient-pink-violet\":\n        \"bg-linear-to-r from-pink-400 to-violet-400 bg-clip-text text-transparent\",\n      \"gradient-cyan-violet\":\n        \"bg-linear-to-r from-cyan-400 to-violet-400 bg-clip-text text-transparent\",\n      \"gradient-cyan-blue\":\n        \"bg-linear-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent\",\n      \"gradient-cyan-green\":\n        \"bg-linear-to-r from-cyan-400 to-green-400 bg-clip-text text-transparent\",\n      \"gradient-cyan-orange\":\n        \"bg-linear-to-r from-cyan-400 to-orange-400 bg-clip-text text-transparent\",\n      \"gradient-cyan-red\":\n        \"bg-linear-to-r from-cyan-400 to-red-400 bg-clip-text text-transparent\",\n      \"gradient-cyan-purple\":\n        \"bg-linear-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent\",\n      \"gradient-cyan-pink\":\n        \"bg-linear-to-r from-cyan-400 to-pink-400 bg-clip-text text-transparent\",\n    },\n  },\n  defaultVariants: {\n    tone: \"default\",\n  },\n});\n\nexport const headingLevelVariants = cva(\"scroll-m-20\", {\n  variants: {\n    level: {\n      1: \"text-4xl font-bold tracking-tight md:text-5xl\",\n      2: \"text-3xl font-semibold tracking-tight\",\n      3: \"text-2xl font-semibold tracking-tight\",\n      4: \"text-xl font-semibold tracking-tight\",\n      5: \"text-lg font-medium\",\n      6: \"text-base font-medium\",\n    },\n  },\n});\n\nexport const textSizeVariants = cva(\"\", {\n  variants: {\n    size: {\n      sm: \"text-sm leading-relaxed\",\n      base: \"text-base leading-relaxed\",\n      lg: \"text-lg leading-relaxed\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n  },\n});\n\n/** Marker style for unordered lists; ignored when `ordered` is true (decimal numbering). */\nexport const unorderedListMarkerVariants = cva(\"space-y-2 pl-5\", {\n  variants: {\n    marker: {\n      disc: \"list-disc\",\n      circle: \"[list-style-type:circle]\",\n      none: \"list-none pl-0\",\n    },\n  },\n  defaultVariants: {\n    marker: \"disc\",\n  },\n});\n\nexport const orderedListVariants = cva(\"list-decimal space-y-2 pl-5\");\n","import { cn } from \"../../lib/utils\";\n\nimport type { HeadingProps } from \"./types\";\nimport { headingLevelVariants, typographyToneVariants } from \"./variants\";\n\nconst HEADING_TAGS = {\n  1: \"h1\",\n  2: \"h2\",\n  3: \"h3\",\n  4: \"h4\",\n  5: \"h5\",\n  6: \"h6\",\n} as const;\n\nexport const HeadingBase = (props: HeadingProps) => {\n  const {\n    level,\n    displayLevel,\n    tone,\n    bold,\n    italic,\n    underline,\n    strikethrough,\n    ref,\n    className,\n    children,\n    ...rest\n  } = props;\n\n  const Tag = HEADING_TAGS[level];\n  const scale = displayLevel ?? level;\n\n  return (\n    <Tag\n      ref={ref}\n      data-slot=\"typography-heading\"\n      data-level={level}\n      className={cn(\n        typographyToneVariants({ tone }),\n        headingLevelVariants({ level: scale }),\n        bold && \"font-bold\",\n        italic && \"italic\",\n        underline && \"underline underline-offset-4\",\n        strikethrough && \"line-through\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nHeadingBase.displayName = \"Heading\";\n","import { HeadingBase } from \"./heading-base\";\nimport type { HeadingProps } from \"./types\";\n\nexport const Heading = (props: HeadingProps) => {\n  return <HeadingBase {...props} />;\n};\n\nHeading.displayName = \"Heading\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { TextProps } from \"./types\";\nimport { textSizeVariants, typographyToneVariants } from \"./variants\";\n\nexport const TextBase = (props: TextProps) => {\n  const {\n    as = \"p\",\n    size = \"base\",\n    tone,\n    bold,\n    italic,\n    underline,\n    strikethrough,\n    highlight,\n    className,\n    children,\n    ...rest\n  } = props;\n\n  const Component = as;\n\n  return (\n    <Component\n      data-slot=\"typography-text\"\n      className={cn(\n        typographyToneVariants({ tone }),\n        textSizeVariants({ size }),\n        bold && \"font-semibold\",\n        italic && \"italic\",\n        underline && \"underline underline-offset-2\",\n        strikethrough && \"line-through\",\n        highlight && \"rounded bg-amber-400/15 px-0.5\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\n\nTextBase.displayName = \"Text\";\n","import { TextBase } from \"./text-base\";\nimport type { TextProps } from \"./types\";\n\nexport const Text = (props: TextProps) => {\n  return <TextBase {...props} />;\n};\n\nText.displayName = \"Text\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { ListProps, ListItemProps } from \"./types\";\nimport {\n  orderedListVariants,\n  typographyToneVariants,\n  unorderedListMarkerVariants,\n} from \"./variants\";\n\nexport function ListBase(props: ListProps) {\n  if (\"ordered\" in props && props.ordered === true) {\n    const { tone, className, children, ref, ordered, marker, ...rest } = props;\n\n    void ordered;\n    void marker;\n\n    return (\n      <ol\n        ref={ref}\n        data-slot=\"typography-list\"\n        data-list-type=\"ordered\"\n        className={cn(\n          typographyToneVariants({ tone }),\n          orderedListVariants(),\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </ol>\n    );\n  }\n\n  const {\n    marker = \"disc\",\n    tone,\n    className,\n    children,\n    ref,\n    ordered,\n    ...rest\n  } = props;\n\n  void ordered;\n\n  return (\n    <ul\n      ref={ref}\n      data-slot=\"typography-list\"\n      data-list-type=\"unordered\"\n      className={cn(\n        typographyToneVariants({ tone }),\n        unorderedListMarkerVariants({ marker }),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </ul>\n  );\n}\n\nListBase.displayName = \"List\";\n\nexport function ListItemBase(props: ListItemProps) {\n  const { className, children, ref, ...rest } = props;\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"typography-list-item\"\n      className={cn(\"leading-relaxed\", className)}\n      {...rest}\n    >\n      {children}\n    </li>\n  );\n}\n\nListItemBase.displayName = \"ListItem\";\n","import type { ListProps } from \"./types\";\n\nimport { ListBase, ListItemBase } from \"./list-base\";\n\nexport const ListItem = ListItemBase;\n\nfunction ListRoot(props: ListProps) {\n  return <ListBase {...props} />;\n}\n\nexport const List = Object.assign(ListRoot, {\n  Item: ListItem,\n});\n\nListRoot.displayName = \"List\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { BlockquoteProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const BlockquoteBase = (props: BlockquoteProps) => {\n  const { tone, attribution, className, children, ref, ...rest } = props;\n\n  return (\n    <blockquote\n      ref={ref}\n      data-slot=\"typography-blockquote\"\n      className={cn(\n        typographyToneVariants({ tone }),\n        \"border-l-4 py-1 pl-4 italic\",\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"space-y-2 leading-relaxed\">{children}</div>\n      {attribution ? (\n        <footer className=\"mt-3 text-sm not-italic\">\n          <cite>{attribution}</cite>\n        </footer>\n      ) : null}\n    </blockquote>\n  );\n};\n\nBlockquoteBase.displayName = \"Blockquote\";\n","import { BlockquoteBase } from \"./blockquote-base\";\nimport type { BlockquoteProps } from \"./types\";\n\nexport const Blockquote = (props: BlockquoteProps) => {\n  return <BlockquoteBase {...props} />;\n};\n\nBlockquote.displayName = \"Blockquote\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { InlineCodeProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const InlineCodeBase = (props: InlineCodeProps) => {\n  const { tone, className, children, ref, ...rest } = props;\n\n  return (\n    <code\n      ref={ref}\n      data-slot=\"typography-inline-code\"\n      className={cn(\n        typographyToneVariants({ tone }),\n        \"rounded-md border border-white/10 bg-white/6 px-1.5 py-0.5 font-mono text-[0.925em] font-normal\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </code>\n  );\n};\n\nInlineCodeBase.displayName = \"InlineCode\";\n","import { InlineCodeBase } from \"./inline-code-base\";\nimport type { InlineCodeProps } from \"./types\";\n\nexport const InlineCode = (props: InlineCodeProps) => {\n  return <InlineCodeBase {...props} />;\n};\n\nInlineCode.displayName = \"InlineCode\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { CodeBlockProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const CodeBlockBase = (props: CodeBlockProps) => {\n  const { tone, language, className, children, ref, ...rest } = props;\n\n  const ariaLabel = language ? `Code sample (${language})` : \"Code sample\";\n\n  return (\n    <pre\n      ref={ref}\n      data-slot=\"typography-code-block\"\n      aria-label={ariaLabel}\n      className={cn(\n        typographyToneVariants({ tone }),\n        \"overflow-x-auto rounded-xl border border-white/10 bg-slate-950/80 p-4 text-sm leading-relaxed shadow-inner shadow-slate-950/40\",\n        className,\n      )}\n      {...rest}\n    >\n      <code className=\"font-mono text-[0.95em] whitespace-pre-wrap wrap-break-word\">\n        {children}\n      </code>\n    </pre>\n  );\n};\n\nCodeBlockBase.displayName = \"CodeBlock\";\n","import { CodeBlockBase } from \"./code-block-base\";\nimport type { CodeBlockProps } from \"./types\";\n\nexport const CodeBlock = (props: CodeBlockProps) => {\n  return <CodeBlockBase {...props} />;\n};\n\nCodeBlock.displayName = \"CodeBlock\";\n"]}
+{"version":3,"sources":["../../src/ui/typography/variants.ts","../../src/ui/typography/heading-base.tsx","../../src/ui/typography/heading.tsx","../../src/ui/typography/text-base.tsx","../../src/ui/typography/text.tsx","../../src/ui/typography/list-base.tsx","../../src/ui/typography/list.tsx","../../src/ui/typography/blockquote-base.tsx","../../src/ui/typography/blockquote.tsx","../../src/ui/typography/inline-code-base.tsx","../../src/ui/typography/inline-code.tsx","../../src/ui/typography/code-block-base.tsx","../../src/ui/typography/code-block.tsx"],"names":["jsx","tone","className","children","ref","ordered","marker","rest"],"mappings":"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","file":"typography.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/** Semantic text colors aligned with slate/cyan/violet accents used across the kit (dark-first). */\nexport const typographyToneVariants = cva(\"\", {\n  variants: {\n    tone: {\n      default:\n        \"text-slate-900 dark:text-slate-50 border-black/15 dark:border-white/15\",\n      muted:\n        \"text-slate-500 dark:text-slate-400 border-black/15 dark:border-white/15\",\n      primary: \"text-cyan-700 dark:text-cyan-300 border-cyan-300/40\",\n      secondary:\n        \"text-slate-600 dark:text-slate-300 border-black/15 dark:border-white/15\",\n      accent: \"text-violet-700 dark:text-violet-300 border-violet-300/40\",\n      destructive: \"text-rose-600 dark:text-rose-400 border-rose-300/40\",\n      info: \"text-sky-700 dark:text-sky-300 border-sky-300/40\",\n      success: \"text-emerald-700 dark:text-emerald-300 border-emerald-300/40\",\n      warning: \"text-amber-700 dark:text-amber-300 border-amber-300/40\",\n      error: \"text-red-700 dark:text-red-300 border-red-300/40\",\n      \"gradient-pink-violet\":\n        \"bg-linear-to-r from-pink-600 dark:from-pink-400 to-violet-600 dark:to-violet-400 bg-clip-text text-transparent border-violet-300/40\",\n      \"gradient-cyan-violet\":\n        \"bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-violet-600 dark:to-violet-400 bg-clip-text text-transparent border-violet-300/40\",\n      \"gradient-cyan-blue\":\n        \"bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-blue-600 dark:to-blue-400 bg-clip-text text-transparent border-blue-300/40\",\n      \"gradient-cyan-green\":\n        \"bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-green-600 dark:to-green-400 bg-clip-text text-transparent border-green-300/40\",\n      \"gradient-cyan-orange\":\n        \"bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-orange-600 dark:to-orange-400 bg-clip-text text-transparent border-orange-300/40\",\n      \"gradient-cyan-red\":\n        \"bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-red-600 dark:to-red-400 bg-clip-text text-transparent border-red-300/40\",\n      \"gradient-cyan-purple\":\n        \"bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-purple-600 dark:to-purple-400 bg-clip-text text-transparent border-purple-300/40\",\n      \"gradient-cyan-pink\":\n        \"bg-linear-to-r from-cyan-600 dark:from-cyan-400 to-pink-600 dark:to-pink-400 bg-clip-text text-transparent border-pink-300/40\",\n    },\n  },\n  defaultVariants: {\n    tone: \"default\",\n  },\n});\n\nexport const headingLevelVariants = cva(\"scroll-m-20\", {\n  variants: {\n    level: {\n      1: \"text-4xl font-bold tracking-tight md:text-5xl\",\n      2: \"text-3xl font-semibold tracking-tight\",\n      3: \"text-2xl font-semibold tracking-tight\",\n      4: \"text-xl font-semibold tracking-tight\",\n      5: \"text-lg font-medium\",\n      6: \"text-base font-medium\",\n    },\n  },\n});\n\nexport const textSizeVariants = cva(\"\", {\n  variants: {\n    size: {\n      sm: \"text-sm leading-relaxed\",\n      base: \"text-base leading-relaxed\",\n      lg: \"text-lg leading-relaxed\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n  },\n});\n\n/** Marker style for unordered lists; ignored when `ordered` is true (decimal numbering). */\nexport const unorderedListMarkerVariants = cva(\"space-y-2 pl-5\", {\n  variants: {\n    marker: {\n      disc: \"list-disc\",\n      circle: \"[list-style-type:circle]\",\n      none: \"list-none pl-0\",\n    },\n  },\n  defaultVariants: {\n    marker: \"disc\",\n  },\n});\n\nexport const orderedListVariants = cva(\"list-decimal space-y-2 pl-5\");\n","import { cn } from \"../../lib/utils\";\n\nimport type { HeadingProps } from \"./types\";\nimport { headingLevelVariants, typographyToneVariants } from \"./variants\";\n\nconst HEADING_TAGS = {\n  1: \"h1\",\n  2: \"h2\",\n  3: \"h3\",\n  4: \"h4\",\n  5: \"h5\",\n  6: \"h6\",\n} as const;\n\nexport const HeadingBase = (props: HeadingProps) => {\n  const {\n    level,\n    displayLevel,\n    tone,\n    bold,\n    italic,\n    underline,\n    strikethrough,\n    ref,\n    className,\n    children,\n    ...rest\n  } = props;\n\n  const Tag = HEADING_TAGS[level];\n  const scale = displayLevel ?? level;\n\n  return (\n    <Tag\n      ref={ref}\n      data-slot=\"typography-heading\"\n      data-level={level}\n      className={cn(\n        typographyToneVariants({ tone }),\n        headingLevelVariants({ level: scale }),\n        bold && \"font-bold\",\n        italic && \"italic\",\n        underline && \"underline underline-offset-4\",\n        strikethrough && \"line-through\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nHeadingBase.displayName = \"Heading\";\n","import { HeadingBase } from \"./heading-base\";\nimport type { HeadingProps } from \"./types\";\n\nexport const Heading = (props: HeadingProps) => {\n  return <HeadingBase {...props} />;\n};\n\nHeading.displayName = \"Heading\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { TextProps } from \"./types\";\nimport { textSizeVariants, typographyToneVariants } from \"./variants\";\n\nexport const TextBase = (props: TextProps) => {\n  const {\n    as = \"p\",\n    size = \"base\",\n    tone,\n    bold,\n    italic,\n    underline,\n    strikethrough,\n    highlight,\n    className,\n    children,\n    ...rest\n  } = props;\n\n  const Component = as;\n\n  return (\n    <Component\n      data-slot=\"typography-text\"\n      className={cn(\n        typographyToneVariants({ tone }),\n        textSizeVariants({ size }),\n        bold && \"font-semibold\",\n        italic && \"italic\",\n        underline && \"underline underline-offset-2\",\n        strikethrough && \"line-through\",\n        highlight && \"rounded bg-amber-400/15 px-0.5\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\n\nTextBase.displayName = \"Text\";\n","import { TextBase } from \"./text-base\";\nimport type { TextProps } from \"./types\";\n\nexport const Text = (props: TextProps) => {\n  return <TextBase {...props} />;\n};\n\nText.displayName = \"Text\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { ListProps, ListItemProps } from \"./types\";\nimport {\n  orderedListVariants,\n  typographyToneVariants,\n  unorderedListMarkerVariants,\n} from \"./variants\";\n\nexport function ListBase(props: ListProps) {\n  if (\"ordered\" in props && props.ordered === true) {\n    const { tone, className, children, ref, ordered, marker, ...rest } = props;\n\n    void ordered;\n    void marker;\n\n    return (\n      <ol\n        ref={ref}\n        data-slot=\"typography-list\"\n        data-list-type=\"ordered\"\n        className={cn(\n          typographyToneVariants({ tone }),\n          orderedListVariants(),\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </ol>\n    );\n  }\n\n  const {\n    marker = \"disc\",\n    tone,\n    className,\n    children,\n    ref,\n    ordered,\n    ...rest\n  } = props;\n\n  void ordered;\n\n  return (\n    <ul\n      ref={ref}\n      data-slot=\"typography-list\"\n      data-list-type=\"unordered\"\n      className={cn(\n        typographyToneVariants({ tone }),\n        unorderedListMarkerVariants({ marker }),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </ul>\n  );\n}\n\nListBase.displayName = \"List\";\n\nexport function ListItemBase(props: ListItemProps) {\n  const { className, children, ref, ...rest } = props;\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"typography-list-item\"\n      className={cn(\"leading-relaxed\", className)}\n      {...rest}\n    >\n      {children}\n    </li>\n  );\n}\n\nListItemBase.displayName = \"ListItem\";\n","import type { ListProps } from \"./types\";\n\nimport { ListBase, ListItemBase } from \"./list-base\";\n\nexport const ListItem = ListItemBase;\n\nfunction ListRoot(props: ListProps) {\n  return <ListBase {...props} />;\n}\n\nexport const List = Object.assign(ListRoot, {\n  Item: ListItem,\n});\n\nListRoot.displayName = \"List\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { BlockquoteProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const BlockquoteBase = (props: BlockquoteProps) => {\n  const { tone, attribution, className, children, ref, ...rest } = props;\n\n  return (\n    <blockquote\n      ref={ref}\n      data-slot=\"typography-blockquote\"\n      className={cn(\n        typographyToneVariants({ tone }),\n        \"border-l-4 py-1 pl-4 italic\",\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"space-y-2 leading-relaxed\">{children}</div>\n      {attribution ? (\n        <footer className=\"mt-3 text-sm not-italic\">\n          <cite>{attribution}</cite>\n        </footer>\n      ) : null}\n    </blockquote>\n  );\n};\n\nBlockquoteBase.displayName = \"Blockquote\";\n","import { BlockquoteBase } from \"./blockquote-base\";\nimport type { BlockquoteProps } from \"./types\";\n\nexport const Blockquote = (props: BlockquoteProps) => {\n  return <BlockquoteBase {...props} />;\n};\n\nBlockquote.displayName = \"Blockquote\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { InlineCodeProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const InlineCodeBase = (props: InlineCodeProps) => {\n  const { tone, className, children, ref, ...rest } = props;\n\n  return (\n    <code\n      ref={ref}\n      data-slot=\"typography-inline-code\"\n      className={cn(\n        typographyToneVariants({ tone }),\n        \"rounded-md border border-white/10 bg-white/6 px-1.5 py-0.5 font-mono text-[0.925em] font-normal\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </code>\n  );\n};\n\nInlineCodeBase.displayName = \"InlineCode\";\n","import { InlineCodeBase } from \"./inline-code-base\";\nimport type { InlineCodeProps } from \"./types\";\n\nexport const InlineCode = (props: InlineCodeProps) => {\n  return <InlineCodeBase {...props} />;\n};\n\nInlineCode.displayName = \"InlineCode\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { CodeBlockProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const CodeBlockBase = (props: CodeBlockProps) => {\n  const { tone, language, className, children, ref, ...rest } = props;\n\n  const ariaLabel = language ? `Code sample (${language})` : \"Code sample\";\n\n  return (\n    <pre\n      ref={ref}\n      data-slot=\"typography-code-block\"\n      aria-label={ariaLabel}\n      className={cn(\n        typographyToneVariants({ tone }),\n        \"overflow-x-auto rounded-xl border border-white/10 bg-white/90 dark:bg-slate-950/80 p-4 text-sm leading-relaxed shadow-inner shadow-slate-950/40\",\n        className,\n      )}\n      {...rest}\n    >\n      <code className=\"font-mono text-[0.95em] whitespace-pre-wrap wrap-break-word\">\n        {children}\n      </code>\n    </pre>\n  );\n};\n\nCodeBlockBase.displayName = \"CodeBlock\";\n","import { CodeBlockBase } from \"./code-block-base\";\nimport type { CodeBlockProps } from \"./types\";\n\nexport const CodeBlock = (props: CodeBlockProps) => {\n  return <CodeBlockBase {...props} />;\n};\n\nCodeBlock.displayName = \"CodeBlock\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.5.31",
+  "version": "1.6.2",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "license": "MIT",
   "files": [
@@ -47,8 +47,8 @@
     }
   },
   "scripts": {
-    "dev": "NODE_OPTIONS=--max-old-space-size=8192 tsup --watch",
-    "build:js": "NODE_OPTIONS=--max-old-space-size=8192 tsup",
+    "dev": "cross-env NODE_OPTIONS=--max-old-space-size=8192 tsup --watch",
+    "build:js": "cross-env NODE_OPTIONS=--max-old-space-size=8192 tsup",
     "build:types": "tsc -p tsconfig.emit-types.json",
     "build": "npm run build:js && npm run build:types",
     "generate:registry": "node scripts/generate-registry.mjs",
@@ -79,6 +79,7 @@
   },
   "devDependencies": {
     "@repo/typescript-config": "workspace:*",
+    "cross-env": "^7.0.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

package/src/charts/area/Area.tsx

@@ -79,7 +79,7 @@ export function AreaChart<
         />
         {series.map((item, index) => {
           const color = resolveColor(item.color, index);
-          const fill = getSeriesFill(item, index)
+          const fill = getSeriesFill(item, index);
           return (
             <Area
               key={item.dataKey}

package/src/charts/bubble/Bubble.tsx

@@ -59,7 +59,11 @@ export function BubbleChart<
             <>
               <XAxis
                 dataKey={xAxisKey}
-                type={typeof data[0]?.[xAxisKey] === "number" ? "number" : "category"}
+                type={
+                  typeof data[0]?.[xAxisKey] === "number"
+                    ? "number"
+                    : "category"
+                }
                 minTickGap={24}
                 tickLine={false}
                 tickMargin={10}
@@ -68,7 +72,11 @@ export function BubbleChart<
               />
               <YAxis
                 dataKey="__chartY"
-                type={typeof data[0]?.[xAxisKey] === "number" ? "number" : "category"}
+                type={
+                  typeof data[0]?.[xAxisKey] === "number"
+                    ? "number"
+                    : "category"
+                }
                 width={40}
                 tickLine={false}
                 tickMargin={8}

package/src/charts/pie/Pie.tsx

@@ -13,7 +13,15 @@ import type { PieChartProps } from "../shared/types";
 
 const RADIAN = Math.PI / 180;
 
-const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, fill }: PieLabelRenderProps) => {
+const renderCustomizedLabel = ({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  percent,
+  fill,
+}: PieLabelRenderProps) => {
   if (cx == null || cy == null || innerRadius == null || outerRadius == null) {
     return null;
   }
@@ -24,7 +32,13 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, per
   const y = ncy + radius * Math.sin(-(midAngle ?? 0) * RADIAN);
 
   return (
-    <text x={x} y={y} fill={fill} textAnchor={x > ncx ? 'start' : 'end'} dominantBaseline="central">
+    <text
+      x={x}
+      y={y}
+      fill={fill}
+      textAnchor={x > ncx ? "start" : "end"}
+      dominantBaseline="central"
+    >
       {`${((percent ?? 0) * 100).toFixed(0)}%`}
     </text>
   );
@@ -90,7 +104,12 @@ export function PieChart<
           paddingAngle={paddingAngle}
           cornerRadius={cornerRadius}
           labelLine={labelLine}
-          label={label ? (props: PieLabelRenderProps) => renderCustomizedLabel({...props, fill: labelColor}) : undefined}
+          label={
+            label
+              ? (props: PieLabelRenderProps) =>
+                  renderCustomizedLabel({ ...props, fill: labelColor })
+              : undefined
+          }
           stroke={stroke}
           fill={fill}
           shape={shape}

package/src/charts/shared/types.ts

@@ -82,5 +82,5 @@ export type PieChartProps<TDatum extends ChartDatum = ChartDatum> =
       fill?: PieProps["fill"];
       innerRadius?: PieProps["innerRadius"];
       outerRadius?: PieProps["outerRadius"];
-      shape?: PieProps["shape"]
+      shape?: PieProps["shape"];
     };

package/src/hooks/useDynamicStepper/index.ts

@@ -1,3 +1 @@
-export {
-  useDynamicStepper,
-} from "./useDynamicStepper";
+export { useDynamicStepper } from "./useDynamicStepper";

package/src/hooks/useDynamicStepper/useDynamicStepper.ts

@@ -62,13 +62,7 @@ export function useDynamicStepper({
     const nextStep = clampDynamicStepperIndex(activeStep - 1, stepCount);
     setStoredStep(nextStep);
     onPrevious?.(nextStep);
-  }, [
-    activeStep,
-    canGoPrevious,
-    onPrevious,
-    setStoredStep,
-    stepCount,
-  ]);
+  }, [activeStep, canGoPrevious, onPrevious, setStoredStep, stepCount]);
 
   const goNext = useCallback(() => {
     if (!canGoNext) {

package/src/ui/accordion/variants.ts

@@ -3,39 +3,45 @@ import { cva } from "class-variance-authority";
 export const accordionVariants = cva("w-full", {
   variants: {
     appearance: {
-      default: "divide-y divide-white/10 rounded-xl border border-white/10",
-      outline: "divide-y divide-white/10 rounded-xl border border-white/15",
-      ghost: "divide-y divide-white/5",
+      default:
+        "divide-y divide-black/10 dark:divide-white/10 rounded-xl border border-black/10 dark:border-white/10",
+      outline:
+        "divide-y divide-black/10 dark:divide-white/10 rounded-xl border border-black/15 dark:border-white/15",
+      ghost: "divide-y divide-black/5 dark:divide-white/5",
       card: "space-y-2",
       separated: "space-y-3",
-      sky: "divide-y divide-sky-600 rounded-xl border border-sky-600",
-      rose: "divide-y divide-rose-600 rounded-xl border border-rose-600",
-      purple: "divide-y divide-purple-600 rounded-xl border border-purple-600",
-      pink: "divide-y divide-pink-600 rounded-xl border border-pink-600",
-      orange: "divide-y divide-orange-600 rounded-xl border border-orange-600",
-      yellow: "divide-y divide-yellow-600 rounded-xl border border-yellow-600",
-      teal: "divide-y divide-teal-600 rounded-xl border border-teal-600",
-      indigo: "divide-y divide-indigo-600 rounded-xl border border-indigo-600",
+      sky: "divide-y divide-sky-800 dark:divide-sky-600 rounded-xl border border-sky-800 dark:border-sky-600",
+      rose: "divide-y divide-rose-800 dark:divide-rose-600 rounded-xl border border-rose-800 dark:border-rose-600",
+      purple:
+        "divide-y divide-purple-800 dark:divide-purple-600 rounded-xl border border-purple-800 dark:border-purple-600",
+      pink: "divide-y divide-pink-800 dark:divide-pink-600 rounded-xl border border-pink-800 dark:border-pink-600",
+      orange:
+        "divide-y divide-orange-800 dark:divide-orange-600 rounded-xl border border-orange-800 dark:border-orange-600",
+      yellow:
+        "divide-y divide-yellow-800 dark:divide-yellow-600 rounded-xl border border-yellow-800 dark:border-yellow-600",
+      teal: "divide-y divide-teal-800 dark:divide-teal-600 rounded-xl border border-teal-800 dark:border-teal-600",
+      indigo:
+        "divide-y divide-indigo-800 dark:divide-indigo-600 rounded-xl border border-indigo-800 dark:border-indigo-600",
       emerald:
-        "divide-y divide-emerald-600 rounded-xl border border-emerald-600",
+        "divide-y divide-emerald-800 dark:divide-emerald-600 rounded-xl border border-emerald-800 dark:border-emerald-600",
       "gradient-blue":
-        "divide-y divide-blue-600 rounded-xl border border-blue-600",
+        "divide-y divide-blue-800 dark:divide-blue-600 rounded-xl border border-blue-800 dark:border-blue-600",
       "gradient-green":
-        "divide-y divide-green-600 rounded-xl border border-green-600",
+        "divide-y divide-green-800 dark:divide-green-600 rounded-xl border border-green-800 dark:border-green-600",
       "gradient-red":
-        "divide-y divide-red-600 rounded-xl border border-red-600",
+        "divide-y divide-red-800 dark:divide-red-600 rounded-xl border border-red-800 dark:border-red-600",
       "gradient-yellow":
-        "divide-y divide-yellow-600 rounded-xl border border-yellow-600",
+        "divide-y divide-yellow-800 dark:divide-yellow-600 rounded-xl border border-yellow-800 dark:border-yellow-600",
       "gradient-purple":
-        "divide-y divide-purple-600 rounded-xl border border-purple-600",
+        "divide-y divide-purple-800 dark:divide-purple-600 rounded-xl border border-purple-800 dark:border-purple-600",
       "gradient-teal":
-        "divide-y divide-teal-600 rounded-xl border border-teal-600",
+        "divide-y divide-teal-800 dark:divide-teal-600 rounded-xl border border-teal-800 dark:border-teal-600",
       "gradient-indigo":
-        "divide-y divide-indigo-600 rounded-xl border border-indigo-600",
+        "divide-y divide-indigo-800 dark:divide-indigo-600 rounded-xl border border-indigo-800 dark:border-indigo-600",
       "gradient-pink":
-        "divide-y divide-pink-600 rounded-xl border border-pink-600",
+        "divide-y divide-pink-800 dark:divide-pink-600 rounded-xl border border-pink-800 dark:border-pink-600",
       "gradient-orange":
-        "divide-y divide-orange-600 rounded-xl border border-orange-600",
+        "divide-y divide-orange-800 dark:divide-orange-600 rounded-xl border border-orange-800 dark:border-orange-600",
     },
     size: {
       sm: "px-3 py-2 text-sm",
@@ -49,48 +55,54 @@ export const accordionVariants = cva("w-full", {
   },
 });
 
-export const accordionItemVariants = cva("", {
+export const accordionItemVariants = cva("text-slate-900 dark:text-slate-200", {
   variants: {
     appearance: {
       default: "",
       outline: "",
       ghost: "",
-      card: "rounded-xl border border-white/10 bg-white/[0.03] p-2",
-      separated: "rounded-xl border border-white/10 bg-slate-950/40 p-2",
-      sky: "rounded-xl border border-sky-600 bg-sky-600/[0.03] p-2",
-      rose: "rounded-xl border border-rose-600 bg-rose-600/[0.03] p-2",
-      purple: "rounded-xl border border-purple-600 bg-purple-600/[0.03] p-2",
-      pink: "rounded-xl border border-pink-600 bg-pink-600/[0.03] p-2",
-      orange: "rounded-xl border border-orange-600 bg-orange-600/[0.03] p-2",
-      yellow: "rounded-xl border border-yellow-600 bg-yellow-600/[0.03] p-2",
-      teal: "rounded-xl border border-teal-600 bg-teal-600/[0.03] p-2",
-      indigo: "rounded-xl border border-indigo-600 bg-indigo-600/[0.03] p-2",
-      emerald: "rounded-xl border border-emerald-600 bg-emerald-600/[0.03] p-2",
+      card: "rounded-xl border border-black/10 bg-black/5 p-2",
+      separated:
+        "rounded-xl border border-black/10 dark:border-white/10 bg-slate-50/40 dark:bg-slate-950/40 p-2",
+      sky: "rounded-xl border border-sky-800 dark:border-sky-600 bg-sky-100/50 dark:bg-sky-600/[0.03] p-2",
+      rose: "rounded-xl border border-rose-800 dark:border-rose-600 bg-rose-100/50 dark:bg-rose-600/[0.03] p-2",
+      purple:
+        "rounded-xl border border-purple-800 dark:border-purple-600 bg-purple-100/50 dark:bg-purple-600/[0.03] p-2",
+      pink: "rounded-xl border border-pink-800 dark:border-pink-600 bg-pink-100/50 dark:bg-pink-600/[0.03] p-2",
+      orange:
+        "rounded-xl border border-orange-800 dark:border-orange-600 bg-orange-100/50 dark:bg-orange-600/[0.03] p-2",
+      yellow:
+        "rounded-xl border border-yellow-800 dark:border-yellow-600 bg-yellow-100/50 dark:bg-yellow-600/[0.03] p-2",
+      teal: "rounded-xl border border-teal-800 dark:border-teal-600 bg-teal-100/50 dark:bg-teal-600/[0.03] p-2",
+      indigo:
+        "rounded-xl border border-indigo-800 dark:border-indigo-600 bg-indigo-100/50 dark:bg-indigo-600/[0.03] p-2",
+      emerald:
+        "rounded-xl border border-emerald-800 dark:border-emerald-600 bg-emerald-100/50 dark:bg-emerald-600/[0.03] p-2",
       "gradient-blue":
-        "rounded-xl bg-linear-to-r from-blue-600 to-purple-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-blue-300 dark:from-blue-600 to-purple-300 dark:to-purple-600 p-2",
       "gradient-green":
-        "rounded-xl bg-linear-to-r from-green-600 to-lime-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-green-300 dark:from-green-600 to-lime-300 dark:to-lime-600 p-2",
       "gradient-red":
-        "rounded-xl bg-linear-to-r from-red-600 to-pink-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-red-300 dark:from-red-600 to-pink-300 dark:to-pink-600 p-2",
       "gradient-yellow":
-        "rounded-xl bg-linear-to-r from-yellow-600 to-orange-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-yellow-300 dark:from-yellow-600 to-orange-300 dark:to-orange-600 p-2",
       "gradient-purple":
-        "rounded-xl bg-linear-to-r from-purple-600 to-pink-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-purple-300 dark:from-purple-600 to-pink-300 dark:to-pink-600 p-2",
       "gradient-teal":
-        "rounded-xl bg-linear-to-r from-teal-600 to-cyan-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-teal-300 dark:from-teal-600 to-cyan-300 dark:to-cyan-600 p-2",
       "gradient-indigo":
-        "rounded-xl bg-linear-to-r from-indigo-600 to-purple-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-indigo-300 dark:from-indigo-600 to-purple-300 dark:to-purple-600 p-2",
       "gradient-pink":
-        "rounded-xl bg-linear-to-r from-pink-600 to-rose-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-pink-300 dark:from-pink-600 to-rose-300 dark:to-rose-600 p-2",
       "gradient-orange":
-        "rounded-xl bg-linear-to-r from-orange-600 to-red-600/[0.03] p-2 text-white",
+        "rounded-xl bg-linear-to-r from-orange-300 dark:from-orange-600 to-red-300 dark:to-red-600 p-2",
     },
   },
   defaultVariants: { appearance: "default" },
 });
 
 export const accordionTriggerVariants = cva(
-  "flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-slate-50 outline-none transition hover:text-white focus-visible:ring-2 focus-visible:ring-white/30",
+  "flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-slate-800 dark:text-slate-200 outline-none transition hover:text-slate-900 dark:hover:text-white focus-visible:ring-2 focus-visible:ring-black/30 dark:focus-visible:ring-white/30",
   {
     variants: {
       size: {

package/src/ui/alert/variants.ts

@@ -1,42 +1,52 @@
 import { cva } from "class-variance-authority";
 
 export const alertVariants = cva(
-  "relative flex w-full gap-3 border text-sm ring-offset-slate-950 transition-colors",
+  "relative flex w-full gap-3 border text-sm ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
   {
     variants: {
       appearance: {
-        default: "border-white/10 bg-white/5 text-slate-50",
-        success: "border-emerald-500/40 bg-emerald-500/10 text-emerald-50",
-        warning: "border-amber-500/40 bg-amber-500/10 text-amber-50",
-        error: "border-rose-500/50 bg-rose-500/10 text-rose-50",
-        info: "border-sky-500/40 bg-sky-500/10 text-sky-50",
-        ghost: "border-transparent bg-transparent text-slate-200",
-        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
-        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
-        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
-        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
-        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
-        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
-        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        default:
+          "border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-slate-900 dark:text-slate-50",
+        success:
+          "border-emerald-500/40 bg-emerald-500/10 text-emerald-950 dark:text-emerald-50",
+        warning:
+          "border-amber-500/40 bg-amber-500/10 text-amber-950 dark:text-amber-50",
+        error:
+          "border-rose-500/50 bg-rose-500/10 text-rose-950 dark:text-rose-50",
+        info: "border-sky-500/40 bg-sky-500/10 text-sky-950 dark:text-sky-50",
+        ghost:
+          "border-transparent bg-transparent text-slate-700 dark:text-slate-200",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
         "gradient-blue":
-          "border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
         "gradient-green":
-          "border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
         "gradient-red":
-          "border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
         "gradient-yellow":
-          "border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
         "gradient-purple":
-          "border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
         "gradient-teal":
-          "border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
         "gradient-indigo":
-          "border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
         "gradient-pink":
-          "border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
         "gradient-orange":
-          "border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
       },
       size: {
         sm: "rounded-lg p-3",
@@ -62,13 +72,16 @@ export const alertTitleVariants = cva("font-semibold leading-tight", {
   defaultVariants: { size: "md" },
 });
 
-export const alertDescriptionVariants = cva("text-slate-300", {
-  variants: {
-    size: {
-      sm: "text-xs md:text-sm",
-      md: "text-xs md:text-sm",
-      lg: "text-xs md:text-sm",
+export const alertDescriptionVariants = cva(
+  "text-slate-600 dark:text-slate-300",
+  {
+    variants: {
+      size: {
+        sm: "text-xs md:text-sm",
+        md: "text-xs md:text-sm",
+        lg: "text-xs md:text-sm",
+      },
     },
+    defaultVariants: { size: "md" },
   },
-  defaultVariants: { size: "md" },
-});
+);

package/src/ui/avatar/variants.ts

@@ -1,43 +1,51 @@
 import { cva } from "class-variance-authority";
 
 export const avatarVariants = cva(
-  "relative flex shrink-0 overflow-hidden rounded-full border border-white/10 bg-white/10 text-slate-200",
+  "relative flex shrink-0 overflow-hidden rounded-full border border-black/10 dark:border-white/10 text-slate-700 dark:text-slate-200",
   {
     variants: {
       appearance: {
-        default: "border-white/10 bg-white/10 text-slate-200",
+        default:
+          "border-black/10 dark:border-white/10 bg-black/10 dark:bg-white/10 text-slate-700 dark:text-slate-200",
         muted:
-          "border-black/40 bg-slate-950 dark:border-white/10 dark:bg-slate-950/40 text-slate-200",
-        sky: "border-sky-600 bg-sky-600/[0.03] text-slate-200",
-        rose: "border-rose-600 bg-rose-600/[0.03] text-slate-200",
-        purple: "border-purple-600 bg-purple-600/[0.03] text-slate-200",
-        pink: "border-pink-600 bg-pink-600/[0.03] text-slate-200",
-        orange: "border-orange-600 bg-orange-600/[0.03] text-slate-200",
-        yellow: "border-yellow-600 bg-yellow-600/[0.03] text-slate-200",
-        teal: "border-teal-600 bg-teal-600/[0.03] text-slate-200",
-        indigo: "border-indigo-600 bg-indigo-600/[0.03] text-slate-200",
-        emerald: "border-emerald-600 bg-emerald-600/[0.03] text-slate-200",
-        gray: "border-gray-600 bg-gray-600/[0.03] text-slate-200",
-        amber: "border-amber-600 bg-amber-600/[0.03] text-slate-200",
-        violet: "border-violet-600 bg-violet-600/[0.03] text-slate-200",
+          "border-black/40 bg-slate-50 dark:border-white/10 dark:bg-slate-950/40 text-slate-700 dark:text-slate-200",
+        sky: "border-sky-800 dark:border-sky-600 bg-sky-100/50 dark:bg-sky-600/[0.03] text-slate-700 dark:text-slate-200",
+        rose: "border-rose-800 dark:border-rose-600 bg-rose-100/50 dark:bg-rose-600/[0.03] text-slate-700 dark:text-slate-200",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-100/50 dark:bg-purple-600/[0.03] text-slate-700 dark:text-slate-200",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-100/50 dark:bg-pink-600/[0.03] text-slate-700 dark:text-slate-200",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-100/50 dark:bg-orange-600/[0.03] text-slate-700 dark:text-slate-200",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-100/50 dark:bg-yellow-600/[0.03] text-slate-700 dark:text-slate-200",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-100/50 dark:bg-teal-600/[0.03] text-slate-700 dark:text-slate-200",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-100/50 dark:bg-indigo-600/[0.03] text-slate-700 dark:text-slate-200",
+        emerald:
+          "border-emerald-800 dark:border-emerald-600 bg-emerald-100/50 dark:bg-emerald-600/[0.03] text-slate-700 dark:text-slate-200",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-100/50 dark:bg-gray-600/[0.03] text-slate-700 dark:text-slate-200",
+        amber:
+          "border-amber-800 dark:border-amber-600 bg-amber-100/50 dark:bg-amber-600/[0.03] text-slate-700 dark:text-slate-200",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-100/50 dark:bg-violet-600/[0.03] text-slate-700 dark:text-slate-200",
         "gradient-blue":
-          "bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-blue-500 dark:from-blue-600 to-purple-500 dark:to-purple-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-green":
-          "bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-green-500 dark:from-green-600 to-lime-500 dark:to-lime-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-red":
-          "bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-red-500 dark:from-red-600 to-pink-500 dark:to-pink-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-yellow-500 dark:from-yellow-600 to-orange-500 dark:to-orange-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-purple":
-          "bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-purple-500 dark:from-purple-600 to-pink-500 dark:to-pink-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-teal":
-          "bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-teal-500 dark:from-teal-600 to-cyan-500 dark:to-cyan-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-indigo-500 dark:from-indigo-600 to-purple-500 dark:to-purple-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-pink":
-          "bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-pink-500 dark:from-pink-600 to-rose-500 dark:to-rose-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
         "gradient-orange":
-          "bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-slate-200",
+          "bg-linear-to-r from-orange-500 dark:from-orange-600 to-red-500 dark:to-red-600 backdrop-blur-xl text-slate-700 dark:text-slate-200",
       },
       size: {
         sm: "size-8 text-xs",
@@ -56,9 +64,9 @@ export const avatarVariants = cva(
 export const avatarImageVariants = cva("aspect-square size-full object-cover");
 
 export const avatarFallbackVariants = cva(
-  "flex size-full items-center justify-center bg-slate-800 font-medium text-slate-100",
+  "flex size-full items-center justify-center bg-slate-200 dark:bg-slate-800 font-medium text-slate-800 dark:text-slate-100",
 );
 
 export const avatarGroupVariants = cva(
-  "flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0",
+  "flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-white dark:[&_[data-slot=avatar]]:ring-slate-950 [&_[data-slot=avatar]]:first:ml-0",
 );