@devalok/shilp-sutra 0.50.0 → 0.52.0

package/dist/ui/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps, springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// Bundlers (Vite, Next.js, webpack) define process.env.NODE_ENV; guard for raw ESM.\ndeclare const process: { env: { NODE_ENV?: string } } | undefined\n\ntype CardSize = 'sm' | 'md' | 'lg'\n\nconst cardVariants = cva(\n  // Gap model, variable-driven: `size` sets --card-spacing / --card-gap once on the\n  // container; the container reads them for its vertical edge (py) and inter-slot\n  // rhythm (gap), slots read the same variables for their horizontal inset (px), and\n  // CardAction/CardBleed read them for corner offsets / negative margins. One variable\n  // pair is the whole size system — override it with a single arbitrary property\n  // (`[--card-spacing:var(--spacing-ds-07)]`) and every part follows.\n  // No per-slot py, no pt-0, no per-element margins — adding/removing a slot can't\n  // unbalance the bottom edge (make-kit rule: shadow ring is the edge, gap is the rhythm).\n  // `relative` establishes the positioning context for <CardAction> corner slots.\n  'relative flex text-surface-fg rounded-surface transition-shadow duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        // Elevation-led: the shadow's own ring is the edge (make-kit rule #6 — no\n        // border+shadow double-edge). border-transparent keeps the `color` prop able to\n        // paint a deliberate colored edge without a grey one by default.\n        default: 'bg-surface-raised border border-transparent shadow-raised',\n        elevated: 'bg-surface-raised border border-transparent shadow-raised-hover',\n        // Border-led: a visible edge, no shadow.\n        outline: 'bg-transparent border border-surface-border-strong shadow-none',\n        flat: 'bg-surface-raised border-none shadow-none',\n      },\n      color: {\n        default: '',\n        accent: 'border-accent-7',\n        error: 'border-error-7',\n        success: 'border-success-7',\n        warning: 'border-warning-7',\n        info: 'border-info-7',\n        neutral: '',\n      },\n      // size only assigns the two variables; the orientation axis decides where\n      // they're consumed (container in vertical, <CardSection> in horizontal).\n      size: {\n        sm: '[--card-spacing:var(--spacing-ds-05)] [--card-gap:var(--spacing-ds-03)]',\n        md: '[--card-spacing:var(--spacing-ds-05b)] [--card-gap:var(--spacing-ds-04)]',\n        lg: '[--card-spacing:var(--spacing-ds-06)] [--card-gap:var(--spacing-ds-05)]',\n      },\n      // vertical: the container owns py + gap (the default gap model).\n      // horizontal: the container is a padding-less row; a <CardSection> child\n      // re-establishes py + gap for the text column while a media pane owns an edge.\n      orientation: {\n        vertical: 'flex-col py-(--card-spacing) gap-(--card-gap)',\n        horizontal: 'flex-row items-stretch',\n      },\n    },\n    defaultVariants: { variant: 'default', color: 'default', size: 'md', orientation: 'vertical' },\n  },\n)\n\n/**\n * Props for Card — a general-purpose content container with 4 elevation/style variants and\n * an optional interactive hover state.\n *\n * **Variants (elevation-led vs border-led — never both):** `default` (ring-in-shadow, no border) |\n * `elevated` (stronger shadow-raised-hover, no border) | `outline` (visible border, no shadow) |\n * `flat` (filled background, no edge). The shadow tokens carry their own 1px ring, so elevated\n * variants need no explicit border (make-kit rule #6).\n *\n * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,\n * `<CardContent>`, and `<CardFooter>` for consistent internal spacing. Text content must live\n * inside a slot — raw text as a direct child gets no horizontal inset (direct children span the\n * full card width by design, which is what makes full-width dividers and bands free).\n *\n * **Spacing:** `size` sets `--card-spacing` / `--card-gap` once; container, slots, `CardAction`,\n * and `CardBleed` all read the same pair. Retune a card with a single override:\n * `className=\"[--card-spacing:var(--spacing-ds-07)]\"`.\n *\n * **Interactive:** Pass `interactive` to enable hover shadow lift and pointer cursor —\n * useful for clickable cards in grids.\n *\n * @example\n * // Standard content card with header and body:\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Project Alpha</CardTitle>\n *     <CardDescription>Last updated 2 hours ago</CardDescription>\n *   </CardHeader>\n *   <CardContent>\n *     <p>Sprint 4 is in progress with 12 open tasks.</p>\n *   </CardContent>\n * </Card>\n *\n * @example\n * // Full-bleed cover image + edge-to-edge divider:\n * <Card>\n *   <CardBleed side=\"top\"><img src={cover} alt=\"\" /></CardBleed>\n *   <CardHeader><CardTitle>Muhurat launch site</CardTitle></CardHeader>\n *   <Separator />\n *   <CardFooter><Badge color=\"success\">On track</Badge></CardFooter>\n * </Card>\n *\n * @example\n * // Horizontal media card — media pane owns the left edge, CardSection restores rhythm:\n * <Card orientation=\"horizontal\">\n *   <div className=\"w-32 shrink-0 rounded-l-surface overflow-hidden\">\n *     <img src={thumb} alt=\"\" className=\"h-full w-full object-cover\" />\n *   </div>\n *   <CardSection>\n *     <CardHeader><CardTitle>Field notes</CardTitle></CardHeader>\n *     <CardFooter>edited yesterday</CardFooter>\n *   </CardSection>\n * </Card>\n *\n * @example\n * // Flat card for a sidebar panel section (no shadow):\n * <Card variant=\"flat\">\n *   <CardContent>\n *     <p className=\"text-surface-fg-muted text-body-sm\">No recent activity</p>\n *   </CardContent>\n * </Card>\n */\nexport interface CardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof cardVariants> {\n  interactive?: boolean\n}\n\nexport type { CardSize }\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, color, size, orientation, interactive, children, ...props }, ref) => {\n    if (typeof process !== 'undefined' && process?.env.NODE_ENV !== 'production') {\n      warnOnUnwrappedTextChildren(children)\n    }\n    const classes = cn(\n      cardVariants({ variant, color, size, orientation }),\n      interactive && 'hover:shadow-raised-hover cursor-pointer transition-shadow duration-fast-02 ease-productive-standard',\n      className,\n    )\n\n    if (interactive) {\n      return (\n        <motion.div\n          ref={ref}\n          whileHover={{ y: -3 }}\n          whileTap={{ scale: 0.98 }}\n          transition={springs.snappy}\n          className={classes}\n          {...motionProps(props)}\n        >\n          {children}\n        </motion.div>\n      )\n    }\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    )\n  },\n)\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-ds-02b px-(--card-spacing) [&>:first-child]:mt-0 [&>:last-child]:mb-0',\n      className,\n    )}\n    {...props}\n  />\n))\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('font-sans font-semibold leading-ds-none tracking-normal text-surface-fg', className)}\n    {...props}\n  />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-body-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      // Reset first/last child margins so a raw <p>/<h*>'s UA margin can't leak\n      // past the slot onto the container's gap-model padding (the bottom-heavy bug).\n      'px-(--card-spacing) [&>:first-child]:mt-0 [&>:last-child]:mb-0',\n      className,\n    )}\n    {...props}\n  />\n))\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center gap-ds-03 px-(--card-spacing)', className)}\n    {...props}\n  />\n))\nCardFooter.displayName = 'CardFooter'\n\n/**\n * A vertical stack that re-establishes the card's padding + gap rhythm — the text column\n * of a `<Card orientation=\"horizontal\">`. Reads the same `--card-spacing` / `--card-gap`\n * variables the container sets, so the horizontal card's content column matches a vertical\n * card of the same `size` exactly.\n */\nconst CardSection = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col py-(--card-spacing) gap-(--card-gap)', className)}\n    {...props}\n  />\n))\nCardSection.displayName = 'CardSection'\n\ntype CardBleedSide = 'x' | 'top' | 'bottom' | 'y' | 'all'\n\nconst bleedSideClasses: Record<CardBleedSide, string> = {\n  // Inside a slot: escape the slot's horizontal inset.\n  x: '-mx-(--card-spacing)',\n  // As a direct child: escape the container's vertical edge (direct children are\n  // already full-width — never add `x` bleed to a direct child, it would overflow).\n  top: '-mt-(--card-spacing) rounded-t-surface overflow-hidden',\n  bottom: '-mb-(--card-spacing) rounded-b-surface overflow-hidden',\n  y: '-my-(--card-spacing) rounded-surface overflow-hidden',\n  // Inside a slot, escaping every edge (e.g. an image-only card body).\n  all: '-my-(--card-spacing) -mx-(--card-spacing) rounded-surface overflow-hidden',\n}\n\nexport interface CardBleedProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Which card padding to negate. `top`/`bottom`/`y` are for direct children of Card\n   * (full-bleed media, edge bands) and inherit the card's corner radius; `x`/`all` are\n   * for content INSIDE a slot that needs to escape the slot's horizontal inset.\n   * Direct children of Card already span its full width — don't use `x`/`all` there.\n   * @default 'x'\n   */\n  side?: CardBleedSide\n}\n\n/**\n * Escape hatch from the card's padding — the shilp-sutra equivalent of Radix Themes'\n * `Inset` / Polaris `Bleed`. Negates the same `--card-spacing` variable the padding\n * reads, so it stays exact across sizes and overrides.\n *\n * @example\n * // Cover image touching the card's top + side edges:\n * <Card>\n *   <CardBleed side=\"top\"><img src={cover} alt=\"\" /></CardBleed>\n *   <CardHeader><CardTitle>Project</CardTitle></CardHeader>\n * </Card>\n *\n * @example\n * // A tinted band inside CardContent, running edge-to-edge:\n * <CardContent>\n *   <CardBleed><div className=\"bg-accent-2 px-(--card-spacing) py-ds-03\">Heads up…</div></CardBleed>\n * </CardContent>\n */\nconst CardBleed = React.forwardRef<HTMLDivElement, CardBleedProps>(\n  ({ className, side = 'x', ...props }, ref) => (\n    <div ref={ref} className={cn(bleedSideClasses[side], className)} {...props} />\n  ),\n)\nCardBleed.displayName = 'CardBleed'\n\ntype CardActionPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n// Corner inset reads --card-spacing so an action's edge lines up with the slot\n// content edge at every size.\nconst cornerPositions: Record<CardActionPlacement, string> = {\n  'top-right': 'top-(--card-spacing) right-(--card-spacing)',\n  'top-left': 'top-(--card-spacing) left-(--card-spacing)',\n  'bottom-right': 'bottom-(--card-spacing) right-(--card-spacing)',\n  'bottom-left': 'bottom-(--card-spacing) left-(--card-spacing)',\n}\n\nexport interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Which corner the action sits in. @default 'top-right' */\n  placement?: CardActionPlacement\n  /**\n   * Pull the action a step toward its corner (`-m-ds-02`) so an icon button's GLYPH —\n   * not its padding box — aligns to the content-edge line. Use for ghost/icon buttons\n   * placed in a corner; leave off for badges/text where the padding box is the edge.\n   */\n  tuck?: boolean\n}\n\n/**\n * An absolutely-positioned corner slot for a Card — a menu/icon button, a status badge,\n * an overflow action. The Card is `relative`, so this pins to one of its four corners\n * with an inset that matches the card's content padding.\n *\n * @example\n * <Card>\n *   <CardAction><IconButton aria-label=\"More\" icon={<IconDots />} variant=\"ghost\" tuck /></CardAction>\n *   <CardHeader><CardTitle>Project Alpha</CardTitle></CardHeader>\n * </Card>\n *\n * @example\n * // Accent status badge in the top-right:\n * <Card>\n *   <CardAction><Badge color=\"accent\" size=\"xs\">LIVE</Badge></CardAction>\n *   ...\n * </Card>\n */\nconst CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(\n  ({ className, placement = 'top-right', tuck, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'absolute z-[1] flex items-center gap-ds-02',\n        cornerPositions[placement],\n        tuck && '-m-ds-02',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nCardAction.displayName = 'CardAction'\n\n// Text-shaped tags that almost certainly expected a slot's horizontal inset.\n// Structural tags (div, section, img, table, hr…) are legitimate full-width direct\n// children, so they stay silent.\nconst TEXTUAL_TAGS = new Set(['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'label', 'small', 'strong', 'em'])\nlet warnedUnwrappedText = false\n\nfunction warnOnUnwrappedTextChildren(children: React.ReactNode): void {\n  if (warnedUnwrappedText) return\n  React.Children.forEach(children, (child) => {\n    const isBareText = typeof child === 'string' && child.trim() !== ''\n    const isTextualTag =\n      React.isValidElement(child) &&\n      typeof child.type === 'string' &&\n      TEXTUAL_TAGS.has(child.type)\n    if (isBareText || isTextualTag) {\n      warnedUnwrappedText = true\n      console.warn(\n        '[shilp-sutra] <Card> received text content as a direct child. Direct children span the full card width and get no horizontal inset — wrap text in <CardContent> (or <CardHeader>/<CardFooter>). See the Card docs, \"Composition\".',\n      )\n    }\n  })\n}\n\nexport { Card, CardAction, CardBleed, CardContent, CardDescription, CardFooter, CardHeader, CardSection, CardTitle, cardVariants }\nexport type { CardActionPlacement, CardBleedSide }\n"],"mappings":"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"}
+{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps, springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// Bundlers (Vite, Next.js, webpack) define process.env.NODE_ENV; guard for raw ESM.\ndeclare const process: { env: { NODE_ENV?: string } } | undefined\n\ntype CardSize = 'sm' | 'md' | 'lg'\n\nconst cardVariants = cva(\n  // Gap model, variable-driven: `size` sets --card-spacing / --card-gap once on the\n  // container; the container reads them for its vertical edge (py) and inter-slot\n  // rhythm (gap), slots read the same variables for their horizontal inset (px), and\n  // CardAction/CardBleed read them for corner offsets / negative margins. One variable\n  // pair is the whole size system — override it with a single arbitrary property\n  // (`[--card-spacing:var(--spacing-ds-07)]`) and every part follows.\n  // No per-slot py, no pt-0, no per-element margins — adding/removing a slot can't\n  // unbalance the bottom edge (make-kit rule: shadow ring is the edge, gap is the rhythm).\n  // `relative` establishes the positioning context for <CardAction> corner slots.\n  'relative flex text-surface-fg rounded-surface transition-shadow duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        // Tonal (default): depth from a surface-tone shift + a whisper hairline in the\n        // surface's own colour (`border-card`), NO shadow — the DS-wide anti-slop edge\n        // (Setu tonal-elevation). The `color` prop overrides the hairline colour to paint\n        // a deliberate accent/status edge.\n        default: 'bg-surface-raised border border-card shadow-none',\n        // Elevation-led: the shadow's own ring is the edge (make-kit rule #6 — no\n        // border+shadow double-edge). Reach for it when a card should visibly pop\n        // (a dragged tile, a spotlight panel). border-transparent keeps `color` paintable.\n        elevated: 'bg-surface-raised border border-transparent shadow-raised-hover',\n        // Border-led, strong: a firmly visible edge, no shadow.\n        outline: 'bg-transparent border border-surface-border-strong shadow-none',\n        flat: 'bg-surface-raised border-none shadow-none',\n      },\n      color: {\n        default: '',\n        accent: 'border-accent-7',\n        error: 'border-error-7',\n        success: 'border-success-7',\n        warning: 'border-warning-7',\n        info: 'border-info-7',\n        neutral: '',\n      },\n      // size only assigns the two variables; the orientation axis decides where\n      // they're consumed (container in vertical, <CardSection> in horizontal).\n      size: {\n        sm: '[--card-spacing:var(--spacing-ds-05)] [--card-gap:var(--spacing-ds-03)]',\n        md: '[--card-spacing:var(--spacing-ds-05b)] [--card-gap:var(--spacing-ds-04)]',\n        lg: '[--card-spacing:var(--spacing-ds-06)] [--card-gap:var(--spacing-ds-05)]',\n      },\n      // vertical: the container owns py + gap (the default gap model).\n      // horizontal: the container is a padding-less row; a <CardSection> child\n      // re-establishes py + gap for the text column while a media pane owns an edge.\n      orientation: {\n        vertical: 'flex-col py-(--card-spacing) gap-(--card-gap)',\n        horizontal: 'flex-row items-stretch',\n      },\n    },\n    defaultVariants: { variant: 'default', color: 'default', size: 'md', orientation: 'vertical' },\n  },\n)\n\n/**\n * Props for Card — a general-purpose content container with 4 elevation/style variants and\n * an optional interactive hover state.\n *\n * **Variants (tonal, elevation-led, or border-led — never border+shadow together):** `default`\n * (tonal — surface shift + `border-card` hairline, no shadow) | `elevated` (shadow-raised-hover,\n * no border — use when a card should visibly pop) | `outline` (strong visible border, no shadow) |\n * `flat` (filled background, no edge). The shadow tokens carry their own 1px ring, so `elevated`\n * needs no explicit border (make-kit rule #6).\n *\n * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,\n * `<CardContent>`, and `<CardFooter>` for consistent internal spacing. Text content must live\n * inside a slot — raw text as a direct child gets no horizontal inset (direct children span the\n * full card width by design, which is what makes full-width dividers and bands free).\n *\n * **Spacing:** `size` sets `--card-spacing` / `--card-gap` once; container, slots, `CardAction`,\n * and `CardBleed` all read the same pair. Retune a card with a single override:\n * `className=\"[--card-spacing:var(--spacing-ds-07)]\"`.\n *\n * **Interactive:** Pass `interactive` to enable hover shadow lift and pointer cursor —\n * useful for clickable cards in grids.\n *\n * @example\n * // Standard content card with header and body:\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Project Alpha</CardTitle>\n *     <CardDescription>Last updated 2 hours ago</CardDescription>\n *   </CardHeader>\n *   <CardContent>\n *     <p>Sprint 4 is in progress with 12 open tasks.</p>\n *   </CardContent>\n * </Card>\n *\n * @example\n * // Full-bleed cover image + edge-to-edge divider:\n * <Card>\n *   <CardBleed side=\"top\"><img src={cover} alt=\"\" /></CardBleed>\n *   <CardHeader><CardTitle>Muhurat launch site</CardTitle></CardHeader>\n *   <Separator />\n *   <CardFooter><Badge color=\"success\">On track</Badge></CardFooter>\n * </Card>\n *\n * @example\n * // Horizontal media card — media pane owns the left edge, CardSection restores rhythm:\n * <Card orientation=\"horizontal\">\n *   <div className=\"w-32 shrink-0 rounded-l-surface overflow-hidden\">\n *     <img src={thumb} alt=\"\" className=\"h-full w-full object-cover\" />\n *   </div>\n *   <CardSection>\n *     <CardHeader><CardTitle>Field notes</CardTitle></CardHeader>\n *     <CardFooter>edited yesterday</CardFooter>\n *   </CardSection>\n * </Card>\n *\n * @example\n * // Flat card for a sidebar panel section (no shadow):\n * <Card variant=\"flat\">\n *   <CardContent>\n *     <p className=\"text-surface-fg-muted text-body-sm\">No recent activity</p>\n *   </CardContent>\n * </Card>\n */\nexport interface CardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof cardVariants> {\n  interactive?: boolean\n}\n\nexport type { CardSize }\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, color, size, orientation, interactive, children, ...props }, ref) => {\n    if (typeof process !== 'undefined' && process?.env.NODE_ENV !== 'production') {\n      warnOnUnwrappedTextChildren(children)\n    }\n    const classes = cn(\n      cardVariants({ variant, color, size, orientation }),\n      interactive && 'hover:shadow-raised-hover cursor-pointer transition-shadow duration-fast-02 ease-productive-standard',\n      className,\n    )\n\n    if (interactive) {\n      return (\n        <motion.div\n          ref={ref}\n          whileHover={{ y: -3 }}\n          whileTap={{ scale: 0.98 }}\n          transition={springs.snappy}\n          className={classes}\n          {...motionProps(props)}\n        >\n          {children}\n        </motion.div>\n      )\n    }\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    )\n  },\n)\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-ds-02b px-(--card-spacing) [&>:first-child]:mt-0 [&>:last-child]:mb-0',\n      className,\n    )}\n    {...props}\n  />\n))\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('font-sans font-semibold leading-ds-none tracking-normal text-surface-fg', className)}\n    {...props}\n  />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-body-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      // Reset first/last child margins so a raw <p>/<h*>'s UA margin can't leak\n      // past the slot onto the container's gap-model padding (the bottom-heavy bug).\n      'px-(--card-spacing) [&>:first-child]:mt-0 [&>:last-child]:mb-0',\n      className,\n    )}\n    {...props}\n  />\n))\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center gap-ds-03 px-(--card-spacing)', className)}\n    {...props}\n  />\n))\nCardFooter.displayName = 'CardFooter'\n\n/**\n * A vertical stack that re-establishes the card's padding + gap rhythm — the text column\n * of a `<Card orientation=\"horizontal\">`. Reads the same `--card-spacing` / `--card-gap`\n * variables the container sets, so the horizontal card's content column matches a vertical\n * card of the same `size` exactly.\n */\nconst CardSection = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col py-(--card-spacing) gap-(--card-gap)', className)}\n    {...props}\n  />\n))\nCardSection.displayName = 'CardSection'\n\ntype CardBleedSide = 'x' | 'top' | 'bottom' | 'y' | 'all'\n\nconst bleedSideClasses: Record<CardBleedSide, string> = {\n  // Inside a slot: escape the slot's horizontal inset.\n  x: '-mx-(--card-spacing)',\n  // As a direct child: escape the container's vertical edge (direct children are\n  // already full-width — never add `x` bleed to a direct child, it would overflow).\n  top: '-mt-(--card-spacing) rounded-t-surface overflow-hidden',\n  bottom: '-mb-(--card-spacing) rounded-b-surface overflow-hidden',\n  y: '-my-(--card-spacing) rounded-surface overflow-hidden',\n  // Inside a slot, escaping every edge (e.g. an image-only card body).\n  all: '-my-(--card-spacing) -mx-(--card-spacing) rounded-surface overflow-hidden',\n}\n\nexport interface CardBleedProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Which card padding to negate. `top`/`bottom`/`y` are for direct children of Card\n   * (full-bleed media, edge bands) and inherit the card's corner radius; `x`/`all` are\n   * for content INSIDE a slot that needs to escape the slot's horizontal inset.\n   * Direct children of Card already span its full width — don't use `x`/`all` there.\n   * @default 'x'\n   */\n  side?: CardBleedSide\n}\n\n/**\n * Escape hatch from the card's padding — the shilp-sutra equivalent of Radix Themes'\n * `Inset` / Polaris `Bleed`. Negates the same `--card-spacing` variable the padding\n * reads, so it stays exact across sizes and overrides.\n *\n * @example\n * // Cover image touching the card's top + side edges:\n * <Card>\n *   <CardBleed side=\"top\"><img src={cover} alt=\"\" /></CardBleed>\n *   <CardHeader><CardTitle>Project</CardTitle></CardHeader>\n * </Card>\n *\n * @example\n * // A tinted band inside CardContent, running edge-to-edge:\n * <CardContent>\n *   <CardBleed><div className=\"bg-accent-2 px-(--card-spacing) py-ds-03\">Heads up…</div></CardBleed>\n * </CardContent>\n */\nconst CardBleed = React.forwardRef<HTMLDivElement, CardBleedProps>(\n  ({ className, side = 'x', ...props }, ref) => (\n    <div ref={ref} className={cn(bleedSideClasses[side], className)} {...props} />\n  ),\n)\nCardBleed.displayName = 'CardBleed'\n\ntype CardActionPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n// Corner inset reads --card-spacing so an action's edge lines up with the slot\n// content edge at every size.\nconst cornerPositions: Record<CardActionPlacement, string> = {\n  'top-right': 'top-(--card-spacing) right-(--card-spacing)',\n  'top-left': 'top-(--card-spacing) left-(--card-spacing)',\n  'bottom-right': 'bottom-(--card-spacing) right-(--card-spacing)',\n  'bottom-left': 'bottom-(--card-spacing) left-(--card-spacing)',\n}\n\nexport interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Which corner the action sits in. @default 'top-right' */\n  placement?: CardActionPlacement\n  /**\n   * Pull the action a step toward its corner (`-m-ds-02`) so an icon button's GLYPH —\n   * not its padding box — aligns to the content-edge line. Use for ghost/icon buttons\n   * placed in a corner; leave off for badges/text where the padding box is the edge.\n   */\n  tuck?: boolean\n}\n\n/**\n * An absolutely-positioned corner slot for a Card — a menu/icon button, a status badge,\n * an overflow action. The Card is `relative`, so this pins to one of its four corners\n * with an inset that matches the card's content padding.\n *\n * @example\n * <Card>\n *   <CardAction><IconButton aria-label=\"More\" icon={<IconDots />} variant=\"ghost\" tuck /></CardAction>\n *   <CardHeader><CardTitle>Project Alpha</CardTitle></CardHeader>\n * </Card>\n *\n * @example\n * // Accent status badge in the top-right:\n * <Card>\n *   <CardAction><Badge color=\"accent\" size=\"xs\">LIVE</Badge></CardAction>\n *   ...\n * </Card>\n */\nconst CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(\n  ({ className, placement = 'top-right', tuck, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'absolute z-[1] flex items-center gap-ds-02',\n        cornerPositions[placement],\n        tuck && '-m-ds-02',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nCardAction.displayName = 'CardAction'\n\n// Text-shaped tags that almost certainly expected a slot's horizontal inset.\n// Structural tags (div, section, img, table, hr…) are legitimate full-width direct\n// children, so they stay silent.\nconst TEXTUAL_TAGS = new Set(['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'label', 'small', 'strong', 'em'])\nlet warnedUnwrappedText = false\n\nfunction warnOnUnwrappedTextChildren(children: React.ReactNode): void {\n  if (warnedUnwrappedText) return\n  React.Children.forEach(children, (child) => {\n    const isBareText = typeof child === 'string' && child.trim() !== ''\n    const isTextualTag =\n      React.isValidElement(child) &&\n      typeof child.type === 'string' &&\n      TEXTUAL_TAGS.has(child.type)\n    if (isBareText || isTextualTag) {\n      warnedUnwrappedText = true\n      console.warn(\n        '[shilp-sutra] <Card> received text content as a direct child. Direct children span the full card width and get no horizontal inset — wrap text in <CardContent> (or <CardHeader>/<CardFooter>). See the Card docs, \"Composition\".',\n      )\n    }\n  })\n}\n\nexport { Card, CardAction, CardBleed, CardContent, CardDescription, CardFooter, CardHeader, CardSection, CardTitle, cardVariants }\nexport type { CardActionPlacement, CardBleedSide }\n"],"mappings":"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"}

package/dist/ui/color-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../src/ui/color-input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoF9B,KAAK,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;AAIxC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC7F,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,gFAAgF;IAChF,OAAO,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,CAAA;IAC7D,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,WAAW,CAAA;IAC3B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC/B;AAuDD,QAAA,MAAM,UAAU,wFAqYf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../src/ui/color-input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoF9B,KAAK,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;AAIxC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC7F,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,gFAAgF;IAChF,OAAO,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,CAAA;IAC7D,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,WAAW,CAAA;IAC3B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC/B;AAuDD,QAAA,MAAM,UAAU,wFA2Yf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/ui/color-input.js

@@ -48,7 +48,7 @@ function g(e, t, n) {
 	};
 	return m(o(0), o(8), o(4));
 }
-var _ = [
+var ee = [
 	{
 		hex: "#C53637",
 		label: "Red"
@@ -90,7 +90,7 @@ var _ = [
 		label: "Pink"
 	}
 ];
-function v(e) {
+function te(e) {
 	let t = p(e);
 	if (!t) return !1;
 	let [n, r, i] = [
@@ -103,7 +103,7 @@ function v(e) {
 	});
 	return .2126 * n + .7152 * r + .0722 * i > .4;
 }
-function y({ label: e, value: t, onChange: r, onBlur: i, disabled: a, maxLength: o = 3, prefix: s, className: c, id: d }) {
+function _({ label: e, value: t, onChange: r, onBlur: i, disabled: a, maxLength: o = 3, prefix: s, className: c, id: d }) {
 	return /* @__PURE__ */ u("div", {
 		className: n("flex flex-col gap-ds-01", c),
 		children: [/* @__PURE__ */ l("label", {
@@ -128,33 +128,33 @@ function y({ label: e, value: t, onChange: r, onBlur: i, disabled: a, maxLength:
 		})]
 	});
 }
-var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled: C = !1, showPicker: w = !0, defaultFormat: T = "hex", align: E = "start", variant: D = "default", className: O, id: k, ...ee }, te) => {
-	let [A, ne] = c.useState(T), [j, M] = c.useState(!1), N = c.useId(), P = r(), F = k ?? P.inputId, [I, L] = c.useState(b);
+var v = c.forwardRef(({ value: v = "#000000", onChange: y, presets: b, disabled: x = !1, showPicker: S = !0, defaultFormat: C = "hex", align: ne = "start", variant: re = "default", className: w, id: ie, ...T }, E) => {
+	let [D, O] = c.useState(C), [k, A] = c.useState(!1), j = c.useId(), M = r(), N = ie ?? M.inputId, [P, F] = c.useState(v), [I, L] = c.useState(null);
 	c.useEffect(() => {
-		L(b);
-	}, [b]);
-	let [R, z] = c.useState(b), [B, V] = c.useState([]), H = c.useRef(!1), U = (e) => {
-		C || (e && (z(I), V([])), M(e));
+		F(v), L(null);
+	}, [v]);
+	let [R, z] = c.useState(v), [B, V] = c.useState([]), H = c.useRef(!1), U = (e) => {
+		x || (e && (z(P), V([])), L(null), A(e));
 	}, W = (e) => {
-		if (C) return;
+		if (x) return;
 		let t = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
-		V((e) => e[e.length - 1] === I ? e : [...e.slice(-19), I]), L(t), x?.(t);
+		V((e) => e[e.length - 1] === P ? e : [...e.slice(-19), P]), F(t), L(null), y?.(t);
 	}, G = (e) => {
-		if (C) return;
+		if (x) return;
 		let t = (e.startsWith("#") ? e : `#${e}`).toLowerCase();
-		H.current || (H.current = !0, V((e) => e[e.length - 1] === I ? e : [...e.slice(-19), I])), L(t), x?.(t);
+		H.current || (H.current = !0, V((e) => e[e.length - 1] === P ? e : [...e.slice(-19), P])), F(t), y?.(t);
 	}, K = () => {
 		H.current = !1;
 	}, q = () => {
 		if (B.length === 0) return;
 		let e = B[B.length - 1];
-		V((e) => e.slice(0, -1)), L(e), x?.(e);
+		V((e) => e.slice(0, -1)), F(e), y?.(e);
 	}, J = () => {
-		L(R), x?.(R), V([]);
-	}, Y = S === !1 ? [] : S ? S.map((e) => typeof e == "string" ? {
+		F(R), y?.(R), V([]);
+	}, Y = b === !1 ? [] : b ? b.map((e) => typeof e == "string" ? {
 		hex: e,
 		label: e
-	} : e) : _, X = p(I), Z = h(I), Q = (e, t) => {
+	} : e) : ee, X = p(P), Z = h(P), Q = (e, t) => {
 		if (!X) return;
 		let n = parseInt(t, 10);
 		if (isNaN(n)) return;
@@ -166,27 +166,27 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 		if (isNaN(n)) return;
 		let r = Math.max(0, Math.min(e === "h" ? 360 : 100, n));
 		W(g(e === "h" ? r : Z.h, e === "s" ? r : Z.s, e === "l" ? r : Z.l));
-	}, re = [
+	}, ae = [
 		"hex",
 		"rgb",
 		"hsl"
 	];
 	return /* @__PURE__ */ l("div", {
-		ref: te,
-		className: n("inline-flex flex-col", O),
-		...ee,
+		ref: E,
+		className: n("inline-flex flex-col", w),
+		...T,
 		children: /* @__PURE__ */ u(a, {
-			open: j,
+			open: k,
 			onOpenChange: U,
 			children: [/* @__PURE__ */ l(s, {
 				asChild: !0,
-				children: D === "inline" ? /* @__PURE__ */ l(f.button, {
+				children: re === "inline" ? /* @__PURE__ */ l(f.button, {
 					type: "button",
-					disabled: C,
-					className: n("group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-body-sm font-medium", "focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base", C && "cursor-not-allowed opacity-50"),
+					disabled: x,
+					className: n("group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-body-sm font-medium", "focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base", x && "cursor-not-allowed opacity-50"),
 					animate: {
-						backgroundColor: I,
-						color: v(I) ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.95)"
+						backgroundColor: P,
+						color: te(P) ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.95)"
 					},
 					whileHover: {
 						y: -1,
@@ -194,26 +194,26 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 					},
 					whileTap: { scale: .97 },
 					transition: t.smooth,
-					id: F,
-					"aria-describedby": P.helperTextId,
-					"aria-invalid": P.state === "error" || void 0,
-					"aria-label": P.inputId ? void 0 : `Color picker: ${I}`,
-					children: I.toUpperCase()
+					id: N,
+					"aria-describedby": M.helperTextId,
+					"aria-invalid": M.state === "error" || void 0,
+					"aria-label": M.inputId ? void 0 : `Color picker: ${P}`,
+					children: P.toUpperCase()
 				}) : /* @__PURE__ */ u(f.button, {
 					type: "button",
-					disabled: C,
-					className: n("group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong", "hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", C && "cursor-not-allowed opacity-50"),
+					disabled: x,
+					className: n("group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong", "hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", x && "cursor-not-allowed opacity-50"),
 					whileHover: { scale: 1.02 },
 					whileTap: { scale: .98 },
 					transition: t.snappy,
-					id: F,
-					"aria-describedby": P.helperTextId,
-					"aria-invalid": P.state === "error" || void 0,
-					"aria-label": P.inputId ? void 0 : `Color picker: ${I}`,
+					id: N,
+					"aria-describedby": M.helperTextId,
+					"aria-invalid": M.state === "error" || void 0,
+					"aria-label": M.inputId ? void 0 : `Color picker: ${P}`,
 					children: [
 						/* @__PURE__ */ l(f.span, {
 							className: "absolute inset-0",
-							animate: { background: `linear-gradient(to right, ${I} 0%, ${I} 35%, transparent 70%)` },
+							animate: { background: `linear-gradient(to right, ${P} 0%, ${P} 35%, transparent 70%)` },
 							transition: { duration: .3 }
 						}),
 						/* @__PURE__ */ l("span", {
@@ -225,25 +225,25 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 						}),
 						/* @__PURE__ */ l("span", {
 							className: "relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-body-sm text-surface-fg",
-							children: I.toUpperCase()
+							children: P.toUpperCase()
 						})
 					]
 				})
 			}), /* @__PURE__ */ l(o, {
 				role: "dialog",
 				"aria-label": "Color picker",
-				align: E,
+				align: ne,
 				sideOffset: 8,
 				className: "w-[272px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating",
 				children: /* @__PURE__ */ u("div", {
 					className: "flex flex-col",
 					children: [
-						w && /* @__PURE__ */ l("div", {
+						S && /* @__PURE__ */ l("div", {
 							className: "p-ds-04 pb-ds-03",
 							onPointerUp: K,
 							onPointerLeave: K,
 							children: /* @__PURE__ */ l(i, {
-								color: I,
+								color: P,
 								onChange: G,
 								className: "w-full!",
 								style: { height: 160 }
@@ -253,12 +253,12 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 							className: "border-t border-surface-border px-ds-04 py-ds-03",
 							children: [/* @__PURE__ */ l("div", {
 								className: "mb-ds-03 flex items-center gap-ds-01",
-								children: re.map((e) => /* @__PURE__ */ u("button", {
+								children: ae.map((e) => /* @__PURE__ */ u("button", {
 									type: "button",
-									onClick: () => ne(e),
-									className: n("relative min-h-6 rounded-control-inner px-ds-02 py-px text-label-xs font-semibold uppercase tracking-wider transition-colors", A === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"),
-									children: [A === e && /* @__PURE__ */ l(f.span, {
-										layoutId: `color-input-format-pill-${N}`,
+									onClick: () => O(e),
+									className: n("relative min-h-6 rounded-control-inner px-ds-02 py-px text-label-xs font-semibold uppercase tracking-wider transition-colors", D === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"),
+									children: [D === e && /* @__PURE__ */ l(f.span, {
+										layoutId: `color-input-format-pill-${j}`,
 										className: "absolute inset-0 rounded-control-inner bg-accent-3",
 										transition: t.snappy
 									}), /* @__PURE__ */ l("span", {
@@ -269,7 +269,7 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 							}), /* @__PURE__ */ u(d, {
 								mode: "wait",
 								children: [
-									A === "hex" && /* @__PURE__ */ l(f.div, {
+									D === "hex" && /* @__PURE__ */ l(f.div, {
 										initial: {
 											opacity: 0,
 											y: 4
@@ -284,24 +284,24 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 										},
 										transition: { duration: e.moderate01 },
 										className: "flex gap-ds-02",
-										children: /* @__PURE__ */ l(y, {
-											id: `${N}-hex`,
+										children: /* @__PURE__ */ l(_, {
+											id: `${j}-hex`,
 											label: "Hex",
-											value: I.replace("#", "").toUpperCase(),
+											value: I ?? P.replace("#", "").toUpperCase(),
 											onChange: (e) => {
 												let t = e.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-												t.length === 6 && W(`#${t}`);
+												L(t.toUpperCase()), t.length === 6 && W(`#${t}`);
 											},
 											onBlur: () => {
-												I.replace("#", "").toUpperCase().length !== 6 && L(I);
+												L(null);
 											},
-											disabled: C,
+											disabled: x,
 											maxLength: 6,
 											prefix: "#",
 											className: "flex-1"
 										})
 									}, "hex"),
-									A === "rgb" && X && /* @__PURE__ */ u(f.div, {
+									D === "rgb" && X && /* @__PURE__ */ u(f.div, {
 										initial: {
 											opacity: 0,
 											y: 4
@@ -317,33 +317,33 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 										transition: { duration: e.moderate01 },
 										className: "flex gap-ds-02",
 										children: [
-											/* @__PURE__ */ l(y, {
-												id: `${N}-r`,
+											/* @__PURE__ */ l(_, {
+												id: `${j}-r`,
 												label: "R",
 												value: String(X.r),
 												onChange: (e) => Q("r", e),
-												disabled: C,
+												disabled: x,
 												className: "flex-1"
 											}),
-											/* @__PURE__ */ l(y, {
-												id: `${N}-g`,
+											/* @__PURE__ */ l(_, {
+												id: `${j}-g`,
 												label: "G",
 												value: String(X.g),
 												onChange: (e) => Q("g", e),
-												disabled: C,
+												disabled: x,
 												className: "flex-1"
 											}),
-											/* @__PURE__ */ l(y, {
-												id: `${N}-b`,
+											/* @__PURE__ */ l(_, {
+												id: `${j}-b`,
 												label: "B",
 												value: String(X.b),
 												onChange: (e) => Q("b", e),
-												disabled: C,
+												disabled: x,
 												className: "flex-1"
 											})
 										]
 									}, "rgb"),
-									A === "hsl" && Z && /* @__PURE__ */ u(f.div, {
+									D === "hsl" && Z && /* @__PURE__ */ u(f.div, {
 										initial: {
 											opacity: 0,
 											y: 4
@@ -359,28 +359,28 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 										transition: { duration: e.moderate01 },
 										className: "flex gap-ds-02",
 										children: [
-											/* @__PURE__ */ l(y, {
-												id: `${N}-h`,
+											/* @__PURE__ */ l(_, {
+												id: `${j}-h`,
 												label: "H",
 												value: String(Z.h),
 												onChange: (e) => $("h", e),
-												disabled: C,
+												disabled: x,
 												className: "flex-1"
 											}),
-											/* @__PURE__ */ l(y, {
-												id: `${N}-s`,
+											/* @__PURE__ */ l(_, {
+												id: `${j}-s`,
 												label: "S",
 												value: String(Z.s),
 												onChange: (e) => $("s", e),
-												disabled: C,
+												disabled: x,
 												className: "flex-1"
 											}),
-											/* @__PURE__ */ l(y, {
-												id: `${N}-l`,
+											/* @__PURE__ */ l(_, {
+												id: `${j}-l`,
 												label: "L",
 												value: String(Z.l),
 												onChange: (e) => $("l", e),
-												disabled: C,
+												disabled: x,
 												className: "flex-1"
 											})
 										]
@@ -393,10 +393,10 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 							children: /* @__PURE__ */ l("div", {
 								className: "flex flex-wrap gap-ds-02",
 								children: Y.map((e, r) => {
-									let i = I.toLowerCase() === e.hex.toLowerCase();
+									let i = P.toLowerCase() === e.hex.toLowerCase();
 									return /* @__PURE__ */ l(f.button, {
 										type: "button",
-										disabled: C,
+										disabled: x,
 										onClick: () => W(e.hex),
 										initial: {
 											opacity: 0,
@@ -412,7 +412,7 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 											...t.bouncy,
 											delay: r * .02
 										},
-										className: n("h-6 w-6 rounded-control-inner border", i ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border hover:border-surface-border-strong", C && "cursor-not-allowed opacity-50"),
+										className: n("h-6 w-6 rounded-control-inner border", i ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border hover:border-surface-border-strong", x && "cursor-not-allowed opacity-50"),
 										style: { backgroundColor: e.hex },
 										title: e.label,
 										"aria-label": `${e.label}: ${e.hex}`
@@ -420,7 +420,7 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 								})
 							})
 						}),
-						(B.length > 0 || I !== R) && /* @__PURE__ */ u(f.div, {
+						(B.length > 0 || P !== R) && /* @__PURE__ */ u(f.div, {
 							initial: {
 								opacity: 0,
 								height: 0
@@ -451,7 +451,7 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 									className: "min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-surface-fg",
 									children: "Undo"
 								}),
-								I !== R && /* @__PURE__ */ l("button", {
+								P !== R && /* @__PURE__ */ l("button", {
 									type: "button",
 									onClick: J,
 									className: "min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-error-11",
@@ -465,6 +465,6 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 		})
 	});
 });
-b.displayName = "ColorInput";
+v.displayName = "ColorInput";
 //#endregion
-export { b as ColorInput };
+export { v as ColorInput };