@psnext/design-system 1.5.1 → 2.0.0

package/dist/primitives/Heading/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Heading/Heading.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Heading — display/section titles using the design-system HEADING scale\n// (Outfit): the Figma \"heading 1–7\" steps (tokens in styles/tokens/typography.css).\n// `size` drives the visual step (font-size + line-height + the spec's per-step\n// weight: 1–4 Regular, 5–7 Medium); `as` controls the semantic level\n// independently; `gradient` enables the brand gradient text fill.\nconst headingVariants = cva(\"font-heading text-balance\", {\n  variants: {\n    size: {\n      \"1\": \"text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal\",\n      \"2\": \"text-[length:var(--heading-2-font-size)] leading-[var(--heading-2-line-height)] font-normal\",\n      \"3\": \"text-[length:var(--heading-3-font-size)] leading-[var(--heading-3-line-height)] font-normal\",\n      \"4\": \"text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n      \"5\": \"text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\",\n      \"6\": \"text-[length:var(--heading-6-font-size)] leading-[var(--heading-6-line-height)] font-medium\",\n      \"7\": \"text-[length:var(--heading-7-font-size)] leading-[var(--heading-7-line-height)] font-medium\",\n    },\n    // Optional override of the per-step default weight.\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    gradient: {\n      true: \"bg-gradient-to-r from-[var(--gradient-heading-from)] to-[var(--gradient-heading-to)] bg-clip-text text-transparent\",\n      false: \"text-foreground\",\n    },\n  },\n  defaultVariants: {\n    size: \"2\",\n    gradient: false,\n  },\n});\n\ntype HeadingProps = React.ComponentProps<\"h2\"> &\n  VariantProps<typeof headingVariants> & {\n    /** Semantic heading level/element. Defaults to `h2`. */\n    as?: React.ElementType;\n    /** Visual step on the Figma heading scale (1 largest → 7 smallest); also sets the per-step default weight. */\n    size?: VariantProps<typeof headingVariants>[\"size\"];\n    /** Override the per-step default weight. */\n    weight?: VariantProps<typeof headingVariants>[\"weight\"];\n    /** Text alignment. */\n    align?: VariantProps<typeof headingVariants>[\"align\"];\n    /** When true, fills the text with the brand gradient instead of the foreground colour. */\n    gradient?: VariantProps<typeof headingVariants>[\"gradient\"];\n  };\n\n/** Display/section title using the design-system heading scale; `size` sets the visual step, `as` the semantic element. */\nfunction Heading({ as, className, size, weight, align, gradient, ...props }: HeadingProps) {\n  const Comp = as ?? \"h2\";\n  return (\n    <Comp\n      data-slot=\"heading\"\n      className={cn(headingVariants({ size, weight, align, gradient }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Heading, headingVariants, type HeadingProps };\n"],"mappings":";;;;AAUA,MAAM,mBAAA,qCAAA,EAAA,KAAsB,6BAA6B;CACvD,UAAU;EACR,MAAM;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;EACP;EAEA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;;AAiBD,SAAS,QAAQ,EAAE,IAAI,WAAW,MAAM,QAAQ,OAAO,UAAU,GAAG,SAAuB;CAEzF,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,MAEjB;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,gBAAgB;GAAE;GAAM;GAAQ;GAAO;EAAS,CAAC,GAAG,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Heading/Heading.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Heading — display/section titles using the design-system HEADING scale\n// (Outfit): the Figma \"heading 1–7\" steps (tokens in styles/tokens/typography.css).\n// `size` drives the visual step (font-size + line-height + the spec's per-step\n// weight: 1–4 Regular, 5–7 Medium); `as` controls the semantic level\n// independently; `gradient` enables the brand gradient text fill.\nconst headingVariants = cva(\"font-heading text-balance\", {\n  variants: {\n    size: {\n      \"1\": \"text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal\",\n      \"2\": \"text-[length:var(--heading-2-font-size)] leading-[var(--heading-2-line-height)] font-normal\",\n      \"3\": \"text-[length:var(--heading-3-font-size)] leading-[var(--heading-3-line-height)] font-normal\",\n      \"4\": \"text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n      \"5\": \"text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\",\n      \"6\": \"text-[length:var(--heading-6-font-size)] leading-[var(--heading-6-line-height)] font-medium\",\n      \"7\": \"text-[length:var(--heading-7-font-size)] leading-[var(--heading-7-line-height)] font-medium\",\n    },\n    // Optional override of the per-step default weight.\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    gradient: {\n      true: \"bg-gradient-to-r from-[var(--theme-brand-700)] to-[var(--theme-brand-500-primary)] bg-clip-text text-transparent\",\n      false: \"text-primary-txt\",\n    },\n  },\n  defaultVariants: {\n    size: \"2\",\n    gradient: false,\n  },\n});\n\ntype HeadingProps = React.ComponentProps<\"h2\"> &\n  VariantProps<typeof headingVariants> & {\n    /** Semantic heading level/element. Defaults to `h2`. */\n    as?: React.ElementType;\n    /** Visual step on the Figma heading scale (1 largest → 7 smallest); also sets the per-step default weight. */\n    size?: VariantProps<typeof headingVariants>[\"size\"];\n    /** Override the per-step default weight. */\n    weight?: VariantProps<typeof headingVariants>[\"weight\"];\n    /** Text alignment. */\n    align?: VariantProps<typeof headingVariants>[\"align\"];\n    /** When true, fills the text with the brand gradient instead of the foreground colour. */\n    gradient?: VariantProps<typeof headingVariants>[\"gradient\"];\n  };\n\n/** Display/section title using the design-system heading scale; `size` sets the visual step, `as` the semantic element. */\nfunction Heading({ as, className, size, weight, align, gradient, ...props }: HeadingProps) {\n  const Comp = as ?? \"h2\";\n  return (\n    <Comp\n      data-slot=\"heading\"\n      className={cn(headingVariants({ size, weight, align, gradient }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Heading, headingVariants, type HeadingProps };\n"],"mappings":";;;;AAUA,MAAM,mBAAA,qCAAA,EAAA,KAAsB,6BAA6B;CACvD,UAAU;EACR,MAAM;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;EACP;EAEA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;;AAiBD,SAAS,QAAQ,EAAE,IAAI,WAAW,MAAM,QAAQ,OAAO,UAAU,GAAG,SAAuB;CAEzF,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,MAEjB;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,gBAAgB;GAAE;GAAM;GAAQ;GAAO;EAAS,CAAC,GAAG,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Heading/index.js

@@ -24,8 +24,8 @@ const headingVariants = cva("font-heading text-balance", {
 			right: "text-right"
 		},
 		gradient: {
-			true: "bg-gradient-to-r from-[var(--gradient-heading-from)] to-[var(--gradient-heading-to)] bg-clip-text text-transparent",
-			false: "text-foreground"
+			true: "bg-gradient-to-r from-[var(--theme-brand-700)] to-[var(--theme-brand-500-primary)] bg-clip-text text-transparent",
+			false: "text-primary-txt"
 		}
 	},
 	defaultVariants: {

package/dist/primitives/Heading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Heading/Heading.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Heading — display/section titles using the design-system HEADING scale\n// (Outfit): the Figma \"heading 1–7\" steps (tokens in styles/tokens/typography.css).\n// `size` drives the visual step (font-size + line-height + the spec's per-step\n// weight: 1–4 Regular, 5–7 Medium); `as` controls the semantic level\n// independently; `gradient` enables the brand gradient text fill.\nconst headingVariants = cva(\"font-heading text-balance\", {\n  variants: {\n    size: {\n      \"1\": \"text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal\",\n      \"2\": \"text-[length:var(--heading-2-font-size)] leading-[var(--heading-2-line-height)] font-normal\",\n      \"3\": \"text-[length:var(--heading-3-font-size)] leading-[var(--heading-3-line-height)] font-normal\",\n      \"4\": \"text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n      \"5\": \"text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\",\n      \"6\": \"text-[length:var(--heading-6-font-size)] leading-[var(--heading-6-line-height)] font-medium\",\n      \"7\": \"text-[length:var(--heading-7-font-size)] leading-[var(--heading-7-line-height)] font-medium\",\n    },\n    // Optional override of the per-step default weight.\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    gradient: {\n      true: \"bg-gradient-to-r from-[var(--gradient-heading-from)] to-[var(--gradient-heading-to)] bg-clip-text text-transparent\",\n      false: \"text-foreground\",\n    },\n  },\n  defaultVariants: {\n    size: \"2\",\n    gradient: false,\n  },\n});\n\ntype HeadingProps = React.ComponentProps<\"h2\"> &\n  VariantProps<typeof headingVariants> & {\n    /** Semantic heading level/element. Defaults to `h2`. */\n    as?: React.ElementType;\n    /** Visual step on the Figma heading scale (1 largest → 7 smallest); also sets the per-step default weight. */\n    size?: VariantProps<typeof headingVariants>[\"size\"];\n    /** Override the per-step default weight. */\n    weight?: VariantProps<typeof headingVariants>[\"weight\"];\n    /** Text alignment. */\n    align?: VariantProps<typeof headingVariants>[\"align\"];\n    /** When true, fills the text with the brand gradient instead of the foreground colour. */\n    gradient?: VariantProps<typeof headingVariants>[\"gradient\"];\n  };\n\n/** Display/section title using the design-system heading scale; `size` sets the visual step, `as` the semantic element. */\nfunction Heading({ as, className, size, weight, align, gradient, ...props }: HeadingProps) {\n  const Comp = as ?? \"h2\";\n  return (\n    <Comp\n      data-slot=\"heading\"\n      className={cn(headingVariants({ size, weight, align, gradient }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Heading, headingVariants, type HeadingProps };\n"],"mappings":";;;;AAUA,MAAM,kBAAkB,IAAI,6BAA6B;CACvD,UAAU;EACR,MAAM;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;EACP;EAEA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;;AAiBD,SAAS,QAAQ,EAAE,IAAI,WAAW,MAAM,QAAQ,OAAO,UAAU,GAAG,SAAuB;CAEzF,OACE,oBAFW,MAAM,MAEjB;EACE,aAAU;EACV,WAAW,GAAG,gBAAgB;GAAE;GAAM;GAAQ;GAAO;EAAS,CAAC,GAAG,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Heading/Heading.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Heading — display/section titles using the design-system HEADING scale\n// (Outfit): the Figma \"heading 1–7\" steps (tokens in styles/tokens/typography.css).\n// `size` drives the visual step (font-size + line-height + the spec's per-step\n// weight: 1–4 Regular, 5–7 Medium); `as` controls the semantic level\n// independently; `gradient` enables the brand gradient text fill.\nconst headingVariants = cva(\"font-heading text-balance\", {\n  variants: {\n    size: {\n      \"1\": \"text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal\",\n      \"2\": \"text-[length:var(--heading-2-font-size)] leading-[var(--heading-2-line-height)] font-normal\",\n      \"3\": \"text-[length:var(--heading-3-font-size)] leading-[var(--heading-3-line-height)] font-normal\",\n      \"4\": \"text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n      \"5\": \"text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\",\n      \"6\": \"text-[length:var(--heading-6-font-size)] leading-[var(--heading-6-line-height)] font-medium\",\n      \"7\": \"text-[length:var(--heading-7-font-size)] leading-[var(--heading-7-line-height)] font-medium\",\n    },\n    // Optional override of the per-step default weight.\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    gradient: {\n      true: \"bg-gradient-to-r from-[var(--theme-brand-700)] to-[var(--theme-brand-500-primary)] bg-clip-text text-transparent\",\n      false: \"text-primary-txt\",\n    },\n  },\n  defaultVariants: {\n    size: \"2\",\n    gradient: false,\n  },\n});\n\ntype HeadingProps = React.ComponentProps<\"h2\"> &\n  VariantProps<typeof headingVariants> & {\n    /** Semantic heading level/element. Defaults to `h2`. */\n    as?: React.ElementType;\n    /** Visual step on the Figma heading scale (1 largest → 7 smallest); also sets the per-step default weight. */\n    size?: VariantProps<typeof headingVariants>[\"size\"];\n    /** Override the per-step default weight. */\n    weight?: VariantProps<typeof headingVariants>[\"weight\"];\n    /** Text alignment. */\n    align?: VariantProps<typeof headingVariants>[\"align\"];\n    /** When true, fills the text with the brand gradient instead of the foreground colour. */\n    gradient?: VariantProps<typeof headingVariants>[\"gradient\"];\n  };\n\n/** Display/section title using the design-system heading scale; `size` sets the visual step, `as` the semantic element. */\nfunction Heading({ as, className, size, weight, align, gradient, ...props }: HeadingProps) {\n  const Comp = as ?? \"h2\";\n  return (\n    <Comp\n      data-slot=\"heading\"\n      className={cn(headingVariants({ size, weight, align, gradient }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Heading, headingVariants, type HeadingProps };\n"],"mappings":";;;;AAUA,MAAM,kBAAkB,IAAI,6BAA6B;CACvD,UAAU;EACR,MAAM;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;EACP;EAEA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;;AAiBD,SAAS,QAAQ,EAAE,IAAI,WAAW,MAAM,QAAQ,OAAO,UAAU,GAAG,SAAuB;CAEzF,OACE,oBAFW,MAAM,MAEjB;EACE,aAAU;EACV,WAAW,GAAG,gBAAgB;GAAE;GAAM;GAAQ;GAAO;EAAS,CAAC,GAAG,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/HoverCard/index.cjs

@@ -25,7 +25,7 @@ function HoverCardContent({ className, align = "center", sideOffset = 4, ...prop
 			"data-slot": "hover-card-content",
 			align,
 			sideOffset,
-			className: require_cn.cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 text-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+			className: require_cn.cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-8 border bg-glass-none-bg p-2 text-primary-txt shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
 			...props
 		})
 	});

package/dist/primitives/HoverCard/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["HoverCardPrimitive","cn"],"sources":["../../../src/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["import { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that opens the hover card on pointer hover or keyboard focus. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating, portalled surface shown while the trigger is hovered/focused. */\nfunction HoverCardContent({\n  className,\n  /** Alignment of the content relative to the trigger along the chosen side. */\n  align = \"center\",\n  /** Gap in pixels between the trigger and the content. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 text-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;;AAMA,SAAS,UAAU,EAAE,GAAG,SAA+D;CACrF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,QAAQ,UAER,aAAa,GACb,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,QAApB;EAA2B,aAAU;YACnC,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,SAApB;GACE,aAAU;GACH;GACK;GACZ,WAAWC,WAAAA,GACT,6dACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B"}
+{"version":3,"file":"index.cjs","names":["HoverCardPrimitive","cn"],"sources":["../../../src/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["import { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that opens the hover card on pointer hover or keyboard focus. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating, portalled surface shown while the trigger is hovered/focused. */\nfunction HoverCardContent({\n  className,\n  /** Alignment of the content relative to the trigger along the chosen side. */\n  align = \"center\",\n  /** Gap in pixels between the trigger and the content. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-8 border bg-glass-none-bg p-2 text-primary-txt shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;;AAMA,SAAS,UAAU,EAAE,GAAG,SAA+D;CACrF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,QAAQ,UAER,aAAa,GACb,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,QAApB;EAA2B,aAAU;YACnC,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,SAApB;GACE,aAAU;GACH;GACK;GACZ,WAAWC,WAAAA,GACT,meACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B"}

package/dist/primitives/HoverCard/index.js

@@ -24,7 +24,7 @@ function HoverCardContent({ className, align = "center", sideOffset = 4, ...prop
 			"data-slot": "hover-card-content",
 			align,
 			sideOffset,
-			className: cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 text-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+			className: cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-8 border bg-glass-none-bg p-2 text-primary-txt shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
 			...props
 		})
 	});

package/dist/primitives/HoverCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HoverCardPrimitive"],"sources":["../../../src/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["import { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that opens the hover card on pointer hover or keyboard focus. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating, portalled surface shown while the trigger is hovered/focused. */\nfunction HoverCardContent({\n  className,\n  /** Alignment of the content relative to the trigger along the chosen side. */\n  align = \"center\",\n  /** Gap in pixels between the trigger and the content. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 text-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;AAMA,SAAS,UAAU,EAAE,GAAG,SAA+D;CACrF,OAAO,oBAACA,YAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,oBAACA,YAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,QAAQ,UAER,aAAa,GACb,GAAG,SACuD;CAC1D,OACE,oBAACA,YAAmB,QAApB;EAA2B,aAAU;YACnC,oBAACA,YAAmB,SAApB;GACE,aAAU;GACH;GACK;GACZ,WAAW,GACT,6dACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B"}
+{"version":3,"file":"index.js","names":["HoverCardPrimitive"],"sources":["../../../src/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["import { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that opens the hover card on pointer hover or keyboard focus. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating, portalled surface shown while the trigger is hovered/focused. */\nfunction HoverCardContent({\n  className,\n  /** Alignment of the content relative to the trigger along the chosen side. */\n  align = \"center\",\n  /** Gap in pixels between the trigger and the content. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-8 border bg-glass-none-bg p-2 text-primary-txt shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;AAMA,SAAS,UAAU,EAAE,GAAG,SAA+D;CACrF,OAAO,oBAACA,YAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,oBAACA,YAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,QAAQ,UAER,aAAa,GACb,GAAG,SACuD;CAC1D,OACE,oBAACA,YAAmB,QAApB;EAA2B,aAAU;YACnC,oBAACA,YAAmB,SAApB;GACE,aAAU;GACH;GACK;GACZ,WAAW,GACT,meACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B"}

package/dist/primitives/InfoBanner/index.cjs

@@ -4,13 +4,13 @@ let react = require("react");
 let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/InfoBanner/InfoBanner.tsx
-const infoBannerVariants = (0, require("class-variance-authority").cva)("flex w-full gap-3 rounded-xl px-4 py-3", {
+const infoBannerVariants = (0, require("class-variance-authority").cva)("flex w-full gap-4 rounded-12 px-4 py-3", {
 	variants: { variant: {
-		info: "bg-[var(--bg-info-subtle)] text-[var(--content-info-bold)]",
-		success: "bg-[var(--bg-success-subtle)] text-[var(--content-success-bold)]",
-		warning: "bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]",
-		error: "bg-destructive/10 text-destructive",
-		neutral: "bg-muted text-foreground"
+		info: "bg-info-bg text-info-txt",
+		success: "bg-success-bg text-success-txt",
+		warning: "bg-warning-bg text-warning-txt",
+		error: "bg-danger-bg text-danger-txt",
+		neutral: "bg-muted-bg text-primary-txt"
 	} },
 	defaultVariants: { variant: "info" }
 });
@@ -35,25 +35,25 @@ function InfoBanner({ title, description, variant, icon, dismissible = true, vis
 		"data-slot": "info-banner",
 		"data-variant": variant ?? "info",
 		role: "status",
-		className: require_cn.cn(infoBannerVariants({ variant }), description != null ? "items-start" : "items-center", className),
+		className: require_cn.cn(infoBannerVariants({ variant }), "items-start", className),
 		...props,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"data-slot": "info-banner-icon",
-				className: "shrink-0",
+				className: "shrink-0 pt-0.5",
 				"aria-hidden": "true",
 				children: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VariantIcon, { className: "size-5" })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-slot": "info-banner-content",
-				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				className: "flex min-w-0 flex-1 flex-col gap-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"data-slot": "info-banner-title",
-					className: "font-medium text-sm",
+					className: "font-heading text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium",
 					children: title
 				}), description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"data-slot": "info-banner-description",
-					className: "text-sm opacity-80",
+					className: "text-sm leading-5 font-medium text-secondary-txt",
 					children: description
 				})]
 			}),
@@ -62,7 +62,7 @@ function InfoBanner({ title, description, variant, icon, dismissible = true, vis
 				type: "button",
 				"aria-label": "Dismiss",
 				onClick: handleDismiss,
-				className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-foreground/5",
+				className: "-mr-2 flex size-8 shrink-0 items-center justify-center rounded-8 text-primary-txt transition-colors hover:bg-primary-txt/5",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
 					"data-slot": "info-banner-dismiss-icon",
 					className: "size-4",

package/dist/primitives/InfoBanner/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Info","CircleCheck","TriangleAlert","CircleAlert","cn","X"],"sources":["../../../src/primitives/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// InfoBanner — a dismissible inline status banner. Colored by intent via the\n// semantic --bg-*-subtle / --content-*-bold token sets (info/success/warning/\n// error) plus a neutral option. Distinct from Alert (which is not dismissible).\nconst infoBannerVariants = cva(\"flex w-full gap-3 rounded-xl px-4 py-3\", {\n  variants: {\n    variant: {\n      info: \"bg-[var(--bg-info-subtle)] text-[var(--content-info-bold)]\",\n      success: \"bg-[var(--bg-success-subtle)] text-[var(--content-success-bold)]\",\n      warning: \"bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]\",\n      error: \"bg-destructive/10 text-destructive\",\n      neutral: \"bg-muted text-foreground\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst variantIcons = {\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n  neutral: Info,\n} as const;\n\nexport type InfoBannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof infoBannerVariants> & {\n    /** Intent that drives the banner colors and default icon. Default `info`. */\n    variant?: VariantProps<typeof infoBannerVariants>[\"variant\"];\n    /** Banner heading. */\n    title: string;\n    /** Optional supporting copy below the title. */\n    description?: React.ReactNode;\n    /** Override the default per-variant leading icon. */\n    icon?: React.ReactNode;\n    /** Show the trailing dismiss button. Default true. */\n    dismissible?: boolean;\n    /** Controlled visibility. When provided, overrides internal state. */\n    visible?: boolean;\n    /** Called when the dismiss button is pressed. */\n    onDismiss?: () => void;\n  };\n\n/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */\nfunction InfoBanner({\n  title,\n  description,\n  variant,\n  icon,\n  dismissible = true,\n  visible,\n  onDismiss,\n  className,\n  ...props\n}: InfoBannerProps) {\n  const [internalVisible, setInternalVisible] = useState(true);\n  const isControlled = visible !== undefined;\n  const isVisible = isControlled ? visible : internalVisible;\n\n  if (!isVisible) return null;\n\n  const handleDismiss = () => {\n    if (!isControlled) setInternalVisible(false);\n    onDismiss?.();\n  };\n\n  const VariantIcon = variantIcons[variant ?? \"info\"];\n\n  return (\n    <div\n      data-slot=\"info-banner\"\n      data-variant={variant ?? \"info\"}\n      role=\"status\"\n      className={cn(\n        infoBannerVariants({ variant }),\n        // Center a single-line (title-only) banner; top-align when a description wraps.\n        description != null ? \"items-start\" : \"items-center\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Icon inherits the variant's text color via currentColor. */}\n      <span data-slot=\"info-banner-icon\" className=\"shrink-0\" aria-hidden=\"true\">\n        {icon ?? <VariantIcon className=\"size-5\" />}\n      </span>\n\n      <div data-slot=\"info-banner-content\" className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span data-slot=\"info-banner-title\" className=\"font-medium text-sm\">\n          {title}\n        </span>\n        {description != null && (\n          <span data-slot=\"info-banner-description\" className=\"text-sm opacity-80\">\n            {description}\n          </span>\n        )}\n      </div>\n\n      {dismissible && (\n        <button\n          data-slot=\"info-banner-dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={handleDismiss}\n          className=\"-mr-1 flex size-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-foreground/5\"\n        >\n          <X data-slot=\"info-banner-dismiss-icon\" className=\"size-4\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { InfoBanner, infoBannerVariants };\n"],"mappings":";;;;;;AAUA,MAAM,sBAAA,qCAAA,EAAA,KAAyB,0CAA0C;CACvE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC;AAED,MAAM,eAAe;CACnB,MAAMA,aAAAA;CACN,SAASC,aAAAA;CACT,SAASC,aAAAA;CACT,OAAOC,aAAAA;CACP,SAASH,aAAAA;AACX;;AAqBA,SAAS,WAAW,EAClB,OACA,aACA,SACA,MACA,cAAc,MACd,SACA,WACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAA+B,IAAI;CAC3D,MAAM,eAAe,YAAY,KAAA;CAGjC,IAAI,EAFc,eAAe,UAAU,kBAE3B,OAAO;CAEvB,MAAM,sBAAsB;EAC1B,IAAI,CAAC,cAAc,mBAAmB,KAAK;EAC3C,YAAY;CACd;CAEA,MAAM,cAAc,aAAa,WAAW;CAE5C,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAWI,WAAAA,GACT,mBAAmB,EAAE,QAAQ,CAAC,GAE9B,eAAe,OAAO,gBAAgB,gBACtC,SACF;EACA,GAAI;YAVN;GAaE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,aAAU;IAAmB,WAAU;IAAW,eAAY;cACjE,QAAQ,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACtC,CAAA;GAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,aAAU;IAAsB,WAAU;cAA/C,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,aAAU;KAAoB,WAAU;eAC3C;IACG,CAAA,GACL,eAAe,QACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,aAAU;KAA0B,WAAU;eACjD;IACG,CAAA,CAEL;;GAEJ,eACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,aAAU;IACV,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,aAAAA,GAAD;KAAG,aAAU;KAA2B,WAAU;KAAS,eAAY;IAAQ,CAAA;GACzE,CAAA;EAEP;;AAET"}
+{"version":3,"file":"index.cjs","names":["Info","CircleCheck","TriangleAlert","CircleAlert","cn","X"],"sources":["../../../src/primitives/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// InfoBanner — a dismissible inline status banner (Figma \"Toast Messages\" on\n// the Alert page, node 3962:11659): status-bg surface, rounded-12, px-4 py-3,\n// heading-5 title in the status text color, 14/20 medium secondary description.\n// Distinct from Alert (which is not dismissible).\nconst infoBannerVariants = cva(\"flex w-full gap-4 rounded-12 px-4 py-3\", {\n  variants: {\n    variant: {\n      info: \"bg-info-bg text-info-txt\",\n      success: \"bg-success-bg text-success-txt\",\n      warning: \"bg-warning-bg text-warning-txt\",\n      error: \"bg-danger-bg text-danger-txt\",\n      neutral: \"bg-muted-bg text-primary-txt\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst variantIcons = {\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n  neutral: Info,\n} as const;\n\nexport type InfoBannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof infoBannerVariants> & {\n    /** Intent that drives the banner colors and default icon. Default `info`. */\n    variant?: VariantProps<typeof infoBannerVariants>[\"variant\"];\n    /** Banner heading. */\n    title: string;\n    /** Optional supporting copy below the title. */\n    description?: React.ReactNode;\n    /** Override the default per-variant leading icon. */\n    icon?: React.ReactNode;\n    /** Show the trailing dismiss button. Default true. */\n    dismissible?: boolean;\n    /** Controlled visibility. When provided, overrides internal state. */\n    visible?: boolean;\n    /** Called when the dismiss button is pressed. */\n    onDismiss?: () => void;\n  };\n\n/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */\nfunction InfoBanner({\n  title,\n  description,\n  variant,\n  icon,\n  dismissible = true,\n  visible,\n  onDismiss,\n  className,\n  ...props\n}: InfoBannerProps) {\n  const [internalVisible, setInternalVisible] = useState(true);\n  const isControlled = visible !== undefined;\n  const isVisible = isControlled ? visible : internalVisible;\n\n  if (!isVisible) return null;\n\n  const handleDismiss = () => {\n    if (!isControlled) setInternalVisible(false);\n    onDismiss?.();\n  };\n\n  const VariantIcon = variantIcons[variant ?? \"info\"];\n\n  return (\n    <div\n      data-slot=\"info-banner\"\n      data-variant={variant ?? \"info\"}\n      role=\"status\"\n      className={cn(\n        infoBannerVariants({ variant }),\n        // Top-aligned like Alert; the icon aligner below sits it on the first line.\n        \"items-start\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Icon inherits the variant's text color via currentColor. */}\n      <span data-slot=\"info-banner-icon\" className=\"shrink-0 pt-0.5\" aria-hidden=\"true\">\n        {icon ?? <VariantIcon className=\"size-5\" />}\n      </span>\n\n      <div data-slot=\"info-banner-content\" className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span\n          data-slot=\"info-banner-title\"\n          className=\"font-heading text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\"\n        >\n          {title}\n        </span>\n        {description != null && (\n          <span\n            data-slot=\"info-banner-description\"\n            className=\"text-sm leading-5 font-medium text-secondary-txt\"\n          >\n            {description}\n          </span>\n        )}\n      </div>\n\n      {dismissible && (\n        <button\n          data-slot=\"info-banner-dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={handleDismiss}\n          className=\"-mr-2 flex size-8 shrink-0 items-center justify-center rounded-8 text-primary-txt transition-colors hover:bg-primary-txt/5\"\n        >\n          <X data-slot=\"info-banner-dismiss-icon\" className=\"size-4\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { InfoBanner, infoBannerVariants };\n"],"mappings":";;;;;;AAWA,MAAM,sBAAA,qCAAA,EAAA,KAAyB,0CAA0C;CACvE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC;AAED,MAAM,eAAe;CACnB,MAAMA,aAAAA;CACN,SAASC,aAAAA;CACT,SAASC,aAAAA;CACT,OAAOC,aAAAA;CACP,SAASH,aAAAA;AACX;;AAqBA,SAAS,WAAW,EAClB,OACA,aACA,SACA,MACA,cAAc,MACd,SACA,WACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAA+B,IAAI;CAC3D,MAAM,eAAe,YAAY,KAAA;CAGjC,IAAI,EAFc,eAAe,UAAU,kBAE3B,OAAO;CAEvB,MAAM,sBAAsB;EAC1B,IAAI,CAAC,cAAc,mBAAmB,KAAK;EAC3C,YAAY;CACd;CAEA,MAAM,cAAc,aAAa,WAAW;CAE5C,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAWI,WAAAA,GACT,mBAAmB,EAAE,QAAQ,CAAC,GAE9B,eACA,SACF;EACA,GAAI;YAVN;GAaE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,aAAU;IAAmB,WAAU;IAAkB,eAAY;cACxE,QAAQ,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACtC,CAAA;GAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,aAAU;IAAsB,WAAU;cAA/C,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,GACL,eAAe,QACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,CAEL;;GAEJ,eACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,aAAU;IACV,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,aAAAA,GAAD;KAAG,aAAU;KAA2B,WAAU;KAAS,eAAY;IAAQ,CAAA;GACzE,CAAA;EAEP;;AAET"}

package/dist/primitives/InfoBanner/index.js

@@ -4,13 +4,13 @@ import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/primitives/InfoBanner/InfoBanner.tsx
-const infoBannerVariants = cva("flex w-full gap-3 rounded-xl px-4 py-3", {
+const infoBannerVariants = cva("flex w-full gap-4 rounded-12 px-4 py-3", {
 	variants: { variant: {
-		info: "bg-[var(--bg-info-subtle)] text-[var(--content-info-bold)]",
-		success: "bg-[var(--bg-success-subtle)] text-[var(--content-success-bold)]",
-		warning: "bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]",
-		error: "bg-destructive/10 text-destructive",
-		neutral: "bg-muted text-foreground"
+		info: "bg-info-bg text-info-txt",
+		success: "bg-success-bg text-success-txt",
+		warning: "bg-warning-bg text-warning-txt",
+		error: "bg-danger-bg text-danger-txt",
+		neutral: "bg-muted-bg text-primary-txt"
 	} },
 	defaultVariants: { variant: "info" }
 });
@@ -35,25 +35,25 @@ function InfoBanner({ title, description, variant, icon, dismissible = true, vis
 		"data-slot": "info-banner",
 		"data-variant": variant ?? "info",
 		role: "status",
-		className: cn(infoBannerVariants({ variant }), description != null ? "items-start" : "items-center", className),
+		className: cn(infoBannerVariants({ variant }), "items-start", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "info-banner-icon",
-				className: "shrink-0",
+				className: "shrink-0 pt-0.5",
 				"aria-hidden": "true",
 				children: icon ?? /* @__PURE__ */ jsx(VariantIcon, { className: "size-5" })
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				"data-slot": "info-banner-content",
-				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				className: "flex min-w-0 flex-1 flex-col gap-1",
 				children: [/* @__PURE__ */ jsx("span", {
 					"data-slot": "info-banner-title",
-					className: "font-medium text-sm",
+					className: "font-heading text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium",
 					children: title
 				}), description != null && /* @__PURE__ */ jsx("span", {
 					"data-slot": "info-banner-description",
-					className: "text-sm opacity-80",
+					className: "text-sm leading-5 font-medium text-secondary-txt",
 					children: description
 				})]
 			}),
@@ -62,7 +62,7 @@ function InfoBanner({ title, description, variant, icon, dismissible = true, vis
 				type: "button",
 				"aria-label": "Dismiss",
 				onClick: handleDismiss,
-				className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-foreground/5",
+				className: "-mr-2 flex size-8 shrink-0 items-center justify-center rounded-8 text-primary-txt transition-colors hover:bg-primary-txt/5",
 				children: /* @__PURE__ */ jsx(X, {
 					"data-slot": "info-banner-dismiss-icon",
 					className: "size-4",

package/dist/primitives/InfoBanner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// InfoBanner — a dismissible inline status banner. Colored by intent via the\n// semantic --bg-*-subtle / --content-*-bold token sets (info/success/warning/\n// error) plus a neutral option. Distinct from Alert (which is not dismissible).\nconst infoBannerVariants = cva(\"flex w-full gap-3 rounded-xl px-4 py-3\", {\n  variants: {\n    variant: {\n      info: \"bg-[var(--bg-info-subtle)] text-[var(--content-info-bold)]\",\n      success: \"bg-[var(--bg-success-subtle)] text-[var(--content-success-bold)]\",\n      warning: \"bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]\",\n      error: \"bg-destructive/10 text-destructive\",\n      neutral: \"bg-muted text-foreground\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst variantIcons = {\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n  neutral: Info,\n} as const;\n\nexport type InfoBannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof infoBannerVariants> & {\n    /** Intent that drives the banner colors and default icon. Default `info`. */\n    variant?: VariantProps<typeof infoBannerVariants>[\"variant\"];\n    /** Banner heading. */\n    title: string;\n    /** Optional supporting copy below the title. */\n    description?: React.ReactNode;\n    /** Override the default per-variant leading icon. */\n    icon?: React.ReactNode;\n    /** Show the trailing dismiss button. Default true. */\n    dismissible?: boolean;\n    /** Controlled visibility. When provided, overrides internal state. */\n    visible?: boolean;\n    /** Called when the dismiss button is pressed. */\n    onDismiss?: () => void;\n  };\n\n/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */\nfunction InfoBanner({\n  title,\n  description,\n  variant,\n  icon,\n  dismissible = true,\n  visible,\n  onDismiss,\n  className,\n  ...props\n}: InfoBannerProps) {\n  const [internalVisible, setInternalVisible] = useState(true);\n  const isControlled = visible !== undefined;\n  const isVisible = isControlled ? visible : internalVisible;\n\n  if (!isVisible) return null;\n\n  const handleDismiss = () => {\n    if (!isControlled) setInternalVisible(false);\n    onDismiss?.();\n  };\n\n  const VariantIcon = variantIcons[variant ?? \"info\"];\n\n  return (\n    <div\n      data-slot=\"info-banner\"\n      data-variant={variant ?? \"info\"}\n      role=\"status\"\n      className={cn(\n        infoBannerVariants({ variant }),\n        // Center a single-line (title-only) banner; top-align when a description wraps.\n        description != null ? \"items-start\" : \"items-center\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Icon inherits the variant's text color via currentColor. */}\n      <span data-slot=\"info-banner-icon\" className=\"shrink-0\" aria-hidden=\"true\">\n        {icon ?? <VariantIcon className=\"size-5\" />}\n      </span>\n\n      <div data-slot=\"info-banner-content\" className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span data-slot=\"info-banner-title\" className=\"font-medium text-sm\">\n          {title}\n        </span>\n        {description != null && (\n          <span data-slot=\"info-banner-description\" className=\"text-sm opacity-80\">\n            {description}\n          </span>\n        )}\n      </div>\n\n      {dismissible && (\n        <button\n          data-slot=\"info-banner-dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={handleDismiss}\n          className=\"-mr-1 flex size-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-foreground/5\"\n        >\n          <X data-slot=\"info-banner-dismiss-icon\" className=\"size-4\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { InfoBanner, infoBannerVariants };\n"],"mappings":";;;;;;AAUA,MAAM,qBAAqB,IAAI,0CAA0C;CACvE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;AACX;;AAqBA,SAAS,WAAW,EAClB,OACA,aACA,SACA,MACA,cAAc,MACd,SACA,WACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,IAAI;CAC3D,MAAM,eAAe,YAAY,KAAA;CAGjC,IAAI,EAFc,eAAe,UAAU,kBAE3B,OAAO;CAEvB,MAAM,sBAAsB;EAC1B,IAAI,CAAC,cAAc,mBAAmB,KAAK;EAC3C,YAAY;CACd;CAEA,MAAM,cAAc,aAAa,WAAW;CAE5C,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAW,GACT,mBAAmB,EAAE,QAAQ,CAAC,GAE9B,eAAe,OAAO,gBAAgB,gBACtC,SACF;EACA,GAAI;YAVN;GAaE,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAU;IAAW,eAAY;cACjE,QAAQ,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACtC,CAAA;GAEN,qBAAC,OAAD;IAAK,aAAU;IAAsB,WAAU;cAA/C,CACE,oBAAC,QAAD;KAAM,aAAU;KAAoB,WAAU;eAC3C;IACG,CAAA,GACL,eAAe,QACd,oBAAC,QAAD;KAAM,aAAU;KAA0B,WAAU;eACjD;IACG,CAAA,CAEL;;GAEJ,eACC,oBAAC,UAAD;IACE,aAAU;IACV,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,oBAAC,GAAD;KAAG,aAAU;KAA2B,WAAU;KAAS,eAAY;IAAQ,CAAA;GACzE,CAAA;EAEP;;AAET"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// InfoBanner — a dismissible inline status banner (Figma \"Toast Messages\" on\n// the Alert page, node 3962:11659): status-bg surface, rounded-12, px-4 py-3,\n// heading-5 title in the status text color, 14/20 medium secondary description.\n// Distinct from Alert (which is not dismissible).\nconst infoBannerVariants = cva(\"flex w-full gap-4 rounded-12 px-4 py-3\", {\n  variants: {\n    variant: {\n      info: \"bg-info-bg text-info-txt\",\n      success: \"bg-success-bg text-success-txt\",\n      warning: \"bg-warning-bg text-warning-txt\",\n      error: \"bg-danger-bg text-danger-txt\",\n      neutral: \"bg-muted-bg text-primary-txt\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst variantIcons = {\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n  neutral: Info,\n} as const;\n\nexport type InfoBannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof infoBannerVariants> & {\n    /** Intent that drives the banner colors and default icon. Default `info`. */\n    variant?: VariantProps<typeof infoBannerVariants>[\"variant\"];\n    /** Banner heading. */\n    title: string;\n    /** Optional supporting copy below the title. */\n    description?: React.ReactNode;\n    /** Override the default per-variant leading icon. */\n    icon?: React.ReactNode;\n    /** Show the trailing dismiss button. Default true. */\n    dismissible?: boolean;\n    /** Controlled visibility. When provided, overrides internal state. */\n    visible?: boolean;\n    /** Called when the dismiss button is pressed. */\n    onDismiss?: () => void;\n  };\n\n/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */\nfunction InfoBanner({\n  title,\n  description,\n  variant,\n  icon,\n  dismissible = true,\n  visible,\n  onDismiss,\n  className,\n  ...props\n}: InfoBannerProps) {\n  const [internalVisible, setInternalVisible] = useState(true);\n  const isControlled = visible !== undefined;\n  const isVisible = isControlled ? visible : internalVisible;\n\n  if (!isVisible) return null;\n\n  const handleDismiss = () => {\n    if (!isControlled) setInternalVisible(false);\n    onDismiss?.();\n  };\n\n  const VariantIcon = variantIcons[variant ?? \"info\"];\n\n  return (\n    <div\n      data-slot=\"info-banner\"\n      data-variant={variant ?? \"info\"}\n      role=\"status\"\n      className={cn(\n        infoBannerVariants({ variant }),\n        // Top-aligned like Alert; the icon aligner below sits it on the first line.\n        \"items-start\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Icon inherits the variant's text color via currentColor. */}\n      <span data-slot=\"info-banner-icon\" className=\"shrink-0 pt-0.5\" aria-hidden=\"true\">\n        {icon ?? <VariantIcon className=\"size-5\" />}\n      </span>\n\n      <div data-slot=\"info-banner-content\" className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span\n          data-slot=\"info-banner-title\"\n          className=\"font-heading text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\"\n        >\n          {title}\n        </span>\n        {description != null && (\n          <span\n            data-slot=\"info-banner-description\"\n            className=\"text-sm leading-5 font-medium text-secondary-txt\"\n          >\n            {description}\n          </span>\n        )}\n      </div>\n\n      {dismissible && (\n        <button\n          data-slot=\"info-banner-dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={handleDismiss}\n          className=\"-mr-2 flex size-8 shrink-0 items-center justify-center rounded-8 text-primary-txt transition-colors hover:bg-primary-txt/5\"\n        >\n          <X data-slot=\"info-banner-dismiss-icon\" className=\"size-4\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { InfoBanner, infoBannerVariants };\n"],"mappings":";;;;;;AAWA,MAAM,qBAAqB,IAAI,0CAA0C;CACvE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;AACX;;AAqBA,SAAS,WAAW,EAClB,OACA,aACA,SACA,MACA,cAAc,MACd,SACA,WACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,IAAI;CAC3D,MAAM,eAAe,YAAY,KAAA;CAGjC,IAAI,EAFc,eAAe,UAAU,kBAE3B,OAAO;CAEvB,MAAM,sBAAsB;EAC1B,IAAI,CAAC,cAAc,mBAAmB,KAAK;EAC3C,YAAY;CACd;CAEA,MAAM,cAAc,aAAa,WAAW;CAE5C,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAW,GACT,mBAAmB,EAAE,QAAQ,CAAC,GAE9B,eACA,SACF;EACA,GAAI;YAVN;GAaE,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAU;IAAkB,eAAY;cACxE,QAAQ,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACtC,CAAA;GAEN,qBAAC,OAAD;IAAK,aAAU;IAAsB,WAAU;cAA/C,CACE,oBAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,GACL,eAAe,QACd,oBAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,CAEL;;GAEJ,eACC,oBAAC,UAAD;IACE,aAAU;IACV,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,oBAAC,GAAD;KAAG,aAAU;KAA2B,WAAU;KAAS,eAAY;IAAQ,CAAA;GACzE,CAAA;EAEP;;AAET"}

package/dist/primitives/Input/index.cjs

@@ -2,30 +2,36 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/Input/Input.tsx
-const inputVariants = (0, require("class-variance-authority").cva)(require_cn.cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-ring-error aria-invalid:border-destructive"), {
+const inputVariants = (0, require("class-variance-authority").cva)(require_cn.cn("file:text-primary-txt text-primary-txt placeholder:text-muted-txt selection:bg-primary-invert-bg selection:text-primary-invert-txt flex w-full min-w-0 transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:ring-focus focus-visible:ring-3", "aria-invalid:ring-focus-error"), {
 	variants: {
+		variant: {
+			default: "border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border",
+			ai: "ai-border [--ai-surface:var(--input-bg)]"
+		},
 		size: {
-			xs: "h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs",
-			sm: "h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs",
-			default: "h-9 px-3 py-1 text-sm file:h-7 file:text-sm",
-			lg: "h-10 px-4 py-2 text-sm file:h-8 file:text-sm"
+			xs: "h-6 px-1.5 py-1 text-xs leading-4 file:h-5 file:text-xs",
+			sm: "h-8 px-2 py-1.5 text-sm leading-5 file:h-6 file:text-xs",
+			default: "h-9 px-3 py-2 text-sm leading-5 file:h-7 file:text-sm",
+			lg: "h-10 px-4 py-2.5 text-sm leading-5 file:h-8 file:text-sm"
 		},
 		shape: {
-			default: "rounded-xl",
+			default: "rounded-12",
 			round: "rounded-full"
 		}
 	},
 	defaultVariants: {
+		variant: "default",
 		size: "default",
 		shape: "default"
 	}
 });
 /** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */
-function Input({ className, type, size, shape, ...props }) {
+function Input({ className, type, variant, size, shape, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		type,
 		"data-slot": "input",
 		className: require_cn.cn(inputVariants({
+			variant,
 			size,
 			shape
 		}), className),

package/dist/primitives/Input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst inputVariants = cva(\n  cn(\n    \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-ring-error aria-invalid:border-destructive\",\n  ),\n  {\n    variants: {\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs\",\n        sm: \"h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-1 text-sm file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2 text-sm file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (rounded-xl) and Round (pill).\n      shape: {\n        default: \"rounded-xl\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (rounded-xl) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAKA,MAAM,iBAAA,qCAAA,EAAA,KACJA,WAAAA,GACE,0WACA,iFACA,8DACF,GACA;CACE,UAAU;EAER,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAWA,WAAAA,GAAG,cAAc;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACvD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Input & Input Group (node 16:1738). Paddings with\n   half-pixel values are Figma's \"hacks to fit scale\" tokens (no spacing step). */\nconst inputVariants = cva(\n  cn(\n    \"file:text-primary-txt text-primary-txt placeholder:text-muted-txt selection:bg-primary-invert-bg selection:text-primary-invert-txt flex w-full min-w-0 transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:ring-focus focus-visible:ring-3\",\n    \"aria-invalid:ring-focus-error\",\n  ),\n  {\n    variants: {\n      // `ai` swaps the border for the AI gradient; text/placeholder are unchanged.\n      variant: {\n        default:\n          \"border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border\",\n        ai: \"ai-border [--ai-surface:var(--input-bg)]\",\n      },\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-1.5 py-1 text-xs leading-4 file:h-5 file:text-xs\",\n        sm: \"h-8 px-2 py-1.5 text-sm leading-5 file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-2 text-sm leading-5 file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2.5 text-sm leading-5 file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (12px) and Round (pill).\n      shape: {\n        default: \"rounded-12\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Chrome style — `default` bordered field or `ai` (AI gradient border). */\n  variant,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (12px) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ variant, size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAOA,MAAM,iBAAA,qCAAA,EAAA,KACJA,WAAAA,GACE,sVACA,iDACA,+BACF,GACA;CACE,UAAU;EAER,SAAS;GACP,SACE;GACF,IAAI;EACN;EAEA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,SAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAWA,WAAAA,GAAG,cAAc;GAAE;GAAS;GAAM;EAAM,CAAC,GAAG,SAAS;EAChE,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Input/index.js

@@ -2,30 +2,36 @@ import { t as cn } from "../../cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/primitives/Input/Input.tsx
-const inputVariants = cva(cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-ring-error aria-invalid:border-destructive"), {
+const inputVariants = cva(cn("file:text-primary-txt text-primary-txt placeholder:text-muted-txt selection:bg-primary-invert-bg selection:text-primary-invert-txt flex w-full min-w-0 transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:ring-focus focus-visible:ring-3", "aria-invalid:ring-focus-error"), {
 	variants: {
+		variant: {
+			default: "border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border",
+			ai: "ai-border [--ai-surface:var(--input-bg)]"
+		},
 		size: {
-			xs: "h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs",
-			sm: "h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs",
-			default: "h-9 px-3 py-1 text-sm file:h-7 file:text-sm",
-			lg: "h-10 px-4 py-2 text-sm file:h-8 file:text-sm"
+			xs: "h-6 px-1.5 py-1 text-xs leading-4 file:h-5 file:text-xs",
+			sm: "h-8 px-2 py-1.5 text-sm leading-5 file:h-6 file:text-xs",
+			default: "h-9 px-3 py-2 text-sm leading-5 file:h-7 file:text-sm",
+			lg: "h-10 px-4 py-2.5 text-sm leading-5 file:h-8 file:text-sm"
 		},
 		shape: {
-			default: "rounded-xl",
+			default: "rounded-12",
 			round: "rounded-full"
 		}
 	},
 	defaultVariants: {
+		variant: "default",
 		size: "default",
 		shape: "default"
 	}
 });
 /** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */
-function Input({ className, type, size, shape, ...props }) {
+function Input({ className, type, variant, size, shape, ...props }) {
 	return /* @__PURE__ */ jsx("input", {
 		type,
 		"data-slot": "input",
 		className: cn(inputVariants({
+			variant,
 			size,
 			shape
 		}), className),

package/dist/primitives/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst inputVariants = cva(\n  cn(\n    \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-ring-error aria-invalid:border-destructive\",\n  ),\n  {\n    variants: {\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs\",\n        sm: \"h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-1 text-sm file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2 text-sm file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (rounded-xl) and Round (pill).\n      shape: {\n        default: \"rounded-xl\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (rounded-xl) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAKA,MAAM,gBAAgB,IACpB,GACE,0WACA,iFACA,8DACF,GACA;CACE,UAAU;EAER,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GAAG,cAAc;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACvD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Input & Input Group (node 16:1738). Paddings with\n   half-pixel values are Figma's \"hacks to fit scale\" tokens (no spacing step). */\nconst inputVariants = cva(\n  cn(\n    \"file:text-primary-txt text-primary-txt placeholder:text-muted-txt selection:bg-primary-invert-bg selection:text-primary-invert-txt flex w-full min-w-0 transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:ring-focus focus-visible:ring-3\",\n    \"aria-invalid:ring-focus-error\",\n  ),\n  {\n    variants: {\n      // `ai` swaps the border for the AI gradient; text/placeholder are unchanged.\n      variant: {\n        default:\n          \"border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border\",\n        ai: \"ai-border [--ai-surface:var(--input-bg)]\",\n      },\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-1.5 py-1 text-xs leading-4 file:h-5 file:text-xs\",\n        sm: \"h-8 px-2 py-1.5 text-sm leading-5 file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-2 text-sm leading-5 file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2.5 text-sm leading-5 file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (12px) and Round (pill).\n      shape: {\n        default: \"rounded-12\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Chrome style — `default` bordered field or `ai` (AI gradient border). */\n  variant,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (12px) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ variant, size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAOA,MAAM,gBAAgB,IACpB,GACE,sVACA,iDACA,+BACF,GACA;CACE,UAAU;EAER,SAAS;GACP,SACE;GACF,IAAI;EACN;EAEA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,SAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GAAG,cAAc;GAAE;GAAS;GAAM;EAAM,CAAC,GAAG,SAAS;EAChE,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/InputGroup/index.cjs

@@ -7,15 +7,15 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 //#region src/primitives/InputGroup/InputGroup.tsx
 /** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */
-function InputGroup({ className, ...props }) {
+function InputGroup({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "input-group",
 		role: "group",
-		className: require_cn.cn("group/input-group relative flex w-full items-center rounded-xl border border-input shadow-xs transition-[color,box-shadow] outline-none", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50", "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-ring-error", className),
+		className: require_cn.cn("group/input-group relative flex w-full items-center rounded-12 transition-[color,box-shadow] outline-none", variant === "ai" ? "ai-border [--ai-surface:var(--input-bg)]" : "border border-primary-border", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-primary-invert-border has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-focus", "has-[[data-slot][aria-invalid=true]]:border-danger-border has-[[data-slot][aria-invalid=true]]:ring-focus-error", className),
 		...props
 	});
 }
-const inputGroupAddonVariants = (0, class_variance_authority.cva)("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-5 [&>svg:not([class*='size-'])]:size-4", {
+const inputGroupAddonVariants = (0, class_variance_authority.cva)("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-txt select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-4 [&>svg:not([class*='size-'])]:size-4", {
 	variants: { align: {
 		"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
 		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
@@ -40,9 +40,9 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 }
 const inputGroupButtonVariants = (0, class_variance_authority.cva)("flex items-center gap-2 text-sm shadow-none", {
 	variants: { size: {
-		xs: "h-6 gap-1 rounded-5 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-		sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-		"icon-xs": "size-6 rounded-5 p-0 has-[>svg]:p-0",
+		xs: "h-6 gap-1 rounded-4 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "h-8 gap-1.5 rounded-6 px-2.5 has-[>svg]:px-2.5",
+		"icon-xs": "size-6 rounded-4 p-0 has-[>svg]:p-0",
 		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
 	} },
 	defaultVariants: { size: "xs" }
@@ -60,7 +60,7 @@ function InputGroupButton({ className, type = "button", variant = "ghost", size
 /** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */
 function InputGroupText({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_cn.cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		className: require_cn.cn("flex items-center gap-2 text-sm text-muted-txt [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }

package/dist/primitives/InputGroup/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","Button","Input","Textarea"],"sources":["../../../src/primitives/InputGroup/InputGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Input } from \"@/primitives/Input\";\nimport { Textarea } from \"@/primitives/Textarea\";\nimport { cn } from \"@/utils\";\n\n/** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex w-full items-center rounded-xl border border-input shadow-xs transition-[color,box-shadow] outline-none\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-ring-error\",\n\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-5 [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\": \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\n/** A leading/trailing or stacked slot for icons, text, or buttons; clicking it focuses the group's input. */\nfunction InputGroupAddon({\n  className,\n  /** Where the addon sits relative to the control: inline (left/right) or block (top/bottom). */\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-5 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n      \"icon-xs\": \"size-6 rounded-5 p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n\n/** A compact Button sized to sit inside an addon without overflowing the group's height. */\nfunction InputGroupButton({\n  className,\n  /** The button's HTML type; defaults to `\"button\"` so it does not submit forms. */\n  type = \"button\",\n  /** Visual style forwarded to the underlying Button; defaults to `\"ghost\"`. */\n  variant = \"ghost\",\n  /** Compact sizing tuned for the group: text (`xs`/`sm`) or square icon (`icon-xs`/`icon-sm`). */\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Input control for the group: borderless and transparent so the group container provides the chrome. */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Textarea control for the group: borderless, transparent, and non-resizing so the group provides the chrome. */\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n"],"mappings":";;;;;;;;;AAWA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAWA,WAAAA,GACT,2IACA,sCAGA,mDACA,iDACA,kIACA,4HAGA,mMAGA,gHAEA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAAA,GAAA,yBAAA,KACJ,mOACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;;AAGA,SAAS,gBAAgB,EACvB,WAEA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAWA,WAAAA,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,MAAM;GACd,IAAK,EAAE,OAAuB,QAAQ,QAAQ,GAC5C;GAEF,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EAC/D;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAAA,GAAA,yBAAA,KAA+B,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAGD,SAAS,iBAAiB,EACxB,WAEA,OAAO,UAEP,UAAU,SAEV,OAAO,MACP,GAAG,SAE4C;CAC/C,OACE,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAWD,WAAAA,GAAG,yBAAyB,EAAE,KAAK,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,WAAWA,WAAAA,GACT,0HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA6C;CACpF,OACE,iBAAA,GAAA,kBAAA,KAACE,+BAAAA,OAAD;EACE,aAAU;EACV,WAAWF,WAAAA,GACT,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAA2C;CACrF,OACE,iBAAA,GAAA,kBAAA,KAACG,kCAAAA,UAAD;EACE,aAAU;EACV,WAAWH,WAAAA,GACT,iGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn","Button","Input","Textarea"],"sources":["../../../src/primitives/InputGroup/InputGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Input } from \"@/primitives/Input\";\nimport { Textarea } from \"@/primitives/Textarea\";\nimport { cn } from \"@/utils\";\n\n/** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */\nfunction InputGroup({\n  className,\n  /** Chrome style — `default` bordered group or `ai` (AI gradient border). */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { variant?: \"default\" | \"ai\" }) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex w-full items-center rounded-12 transition-[color,box-shadow] outline-none\",\n        // `ai` swaps the border for the AI gradient; contents are unchanged.\n        variant === \"ai\"\n          ? \"ai-border [--ai-surface:var(--input-bg)]\"\n          : \"border border-primary-border\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-primary-invert-border has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-focus\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-danger-border has-[[data-slot][aria-invalid=true]]:ring-focus-error\",\n\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-txt select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-4 [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\": \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\n/** A leading/trailing or stacked slot for icons, text, or buttons; clicking it focuses the group's input. */\nfunction InputGroupAddon({\n  className,\n  /** Where the addon sits relative to the control: inline (left/right) or block (top/bottom). */\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-4 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"h-8 gap-1.5 rounded-6 px-2.5 has-[>svg]:px-2.5\",\n      \"icon-xs\": \"size-6 rounded-4 p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n\n/** A compact Button sized to sit inside an addon without overflowing the group's height. */\nfunction InputGroupButton({\n  className,\n  /** The button's HTML type; defaults to `\"button\"` so it does not submit forms. */\n  type = \"button\",\n  /** Visual style forwarded to the underlying Button; defaults to `\"ghost\"`. */\n  variant = \"ghost\",\n  /** Compact sizing tuned for the group: text (`xs`/`sm`) or square icon (`icon-xs`/`icon-sm`). */\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-txt [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Input control for the group: borderless and transparent so the group container provides the chrome. */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Textarea control for the group: borderless, transparent, and non-resizing so the group provides the chrome. */\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n"],"mappings":";;;;;;;;;AAWA,SAAS,WAAW,EAClB,WAEA,UAAU,WACV,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAWA,WAAAA,GACT,6GAEA,YAAY,OACR,6CACA,gCACJ,sCAGA,mDACA,iDACA,kIACA,4HAGA,8MAGA,mHAEA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAAA,GAAA,yBAAA,KACJ,4NACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;;AAGA,SAAS,gBAAgB,EACvB,WAEA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAWA,WAAAA,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,MAAM;GACd,IAAK,EAAE,OAAuB,QAAQ,QAAQ,GAC5C;GAEF,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EAC/D;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAAA,GAAA,yBAAA,KAA+B,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAGD,SAAS,iBAAiB,EACxB,WAEA,OAAO,UAEP,UAAU,SAEV,OAAO,MACP,GAAG,SAE4C;CAC/C,OACE,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAWD,WAAAA,GAAG,yBAAyB,EAAE,KAAK,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,WAAWA,WAAAA,GACT,mHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA6C;CACpF,OACE,iBAAA,GAAA,kBAAA,KAACE,+BAAAA,OAAD;EACE,aAAU;EACV,WAAWF,WAAAA,GACT,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAA2C;CACrF,OACE,iBAAA,GAAA,kBAAA,KAACG,kCAAAA,UAAD;EACE,aAAU;EACV,WAAWH,WAAAA,GACT,iGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/InputGroup/index.js

@@ -6,15 +6,15 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/primitives/InputGroup/InputGroup.tsx
 /** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */
-function InputGroup({ className, ...props }) {
+function InputGroup({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
 		role: "group",
-		className: cn("group/input-group relative flex w-full items-center rounded-xl border border-input shadow-xs transition-[color,box-shadow] outline-none", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50", "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-ring-error", className),
+		className: cn("group/input-group relative flex w-full items-center rounded-12 transition-[color,box-shadow] outline-none", variant === "ai" ? "ai-border [--ai-surface:var(--input-bg)]" : "border border-primary-border", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-primary-invert-border has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-focus", "has-[[data-slot][aria-invalid=true]]:border-danger-border has-[[data-slot][aria-invalid=true]]:ring-focus-error", className),
 		...props
 	});
 }
-const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-5 [&>svg:not([class*='size-'])]:size-4", {
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-txt select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-4 [&>svg:not([class*='size-'])]:size-4", {
 	variants: { align: {
 		"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
 		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
@@ -39,9 +39,9 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 }
 const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
 	variants: { size: {
-		xs: "h-6 gap-1 rounded-5 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-		sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-		"icon-xs": "size-6 rounded-5 p-0 has-[>svg]:p-0",
+		xs: "h-6 gap-1 rounded-4 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "h-8 gap-1.5 rounded-6 px-2.5 has-[>svg]:px-2.5",
+		"icon-xs": "size-6 rounded-4 p-0 has-[>svg]:p-0",
 		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
 	} },
 	defaultVariants: { size: "xs" }
@@ -59,7 +59,7 @@ function InputGroupButton({ className, type = "button", variant = "ghost", size
 /** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */
 function InputGroupText({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("flex items-center gap-2 text-sm text-muted-txt [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }