@devalok/shilp-sutra 0.57.0 → 0.60.0

package/dist/ui/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/ui/alert-dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as AlertDialogPrimitive from '@primitives/react-alert-dialog'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\ntype AlertDialogContextValue = { open: boolean }\nconst AlertDialogContext = React.createContext<AlertDialogContextValue>({ open: false })\nconst useAlertDialogOpen = () => React.useContext(AlertDialogContext)\n\nconst AlertDialog: React.FC<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>> = ({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}) => {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const isControlled = openProp !== undefined\n  const open = isControlled ? openProp : internalOpen\n\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) setInternalOpen(nextOpen)\n      onOpenChange?.(nextOpen)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const contextValue = React.useMemo(() => ({ open }), [open])\n\n  return (\n    <AlertDialogContext.Provider value={contextValue}>\n      <AlertDialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </AlertDialogContext.Provider>\n  )\n}\nAlertDialog.displayName = 'AlertDialog'\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    ref={ref}\n    forceMount\n    className={cn(\n      'fixed inset-0 z-modal bg-overlay',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\ninterface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {\n  /** When true (default), AlertDialog fills the screen on mobile (<768px). Set false to always use centered modal. */\n  responsive?: boolean\n}\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(({ className, children, responsive, ...props }, ref) => {\n  const { open } = useAlertDialogOpen()\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <AlertDialogPortal forceMount>\n          <AlertDialogOverlay asChild>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            />\n          </AlertDialogOverlay>\n          <AlertDialogPrimitive.Content\n            ref={ref}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              animate={isMobile ? { y: 0 } : { opacity: 1, scale: 1, x: '-50%', y: '-50%' }}\n              exit={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              transition={isMobile\n                ? springs.smooth\n                : { ...springs.smooth, opacity: tweens.fade }\n              }\n              className={cn(\n                'fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06',\n                responsive !== false\n                  ? 'inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay'\n                  : 'left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </AlertDialogPrimitive.Content>\n        </AlertDialogPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col space-y-ds-02b text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nAlertDialogHeader.displayName = 'AlertDialogHeader'\n\nconst AlertDialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nAlertDialogFooter.displayName = 'AlertDialogFooter'\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'text-heading-xs font-semibold',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn('text-body-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(\n      'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(\n      'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-panel-hover hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport type { AlertDialogContentProps }\nexport type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\nexport type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/ui/alert-dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as AlertDialogPrimitive from '@primitives/react-alert-dialog'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { MotionPreference } from '../motion/motion-preference'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\ntype AlertDialogContextValue = { open: boolean }\nconst AlertDialogContext = React.createContext<AlertDialogContextValue>({ open: false })\nconst useAlertDialogOpen = () => React.useContext(AlertDialogContext)\n\nconst AlertDialog: React.FC<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>> = ({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}) => {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const isControlled = openProp !== undefined\n  const open = isControlled ? openProp : internalOpen\n\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) setInternalOpen(nextOpen)\n      onOpenChange?.(nextOpen)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const contextValue = React.useMemo(() => ({ open }), [open])\n\n  return (\n    <AlertDialogContext.Provider value={contextValue}>\n      <AlertDialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </AlertDialogContext.Provider>\n  )\n}\nAlertDialog.displayName = 'AlertDialog'\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    ref={ref}\n    forceMount\n    className={cn(\n      'fixed inset-0 z-modal bg-overlay',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\ninterface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {\n  /** When true (default), AlertDialog fills the screen on mobile (<768px). Set false to always use centered modal. */\n  responsive?: boolean\n}\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(({ className, children, responsive, ...props }, ref) => {\n  const { open } = useAlertDialogOpen()\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n\n  return (\n    <MotionPreference>\n      <AnimatePresence>\n        {open && (\n          <AlertDialogPortal forceMount>\n            <AlertDialogOverlay asChild>\n              <motion.div\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              />\n            </AlertDialogOverlay>\n            <AlertDialogPrimitive.Content\n              ref={ref}\n              forceMount\n              asChild\n              {...props}\n            >\n              <motion.div\n                initial={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n                animate={isMobile ? { y: 0 } : { opacity: 1, scale: 1, x: '-50%', y: '-50%' }}\n                exit={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n                transition={isMobile\n                  ? springs.smooth\n                  : { ...springs.smooth, opacity: tweens.fade }\n                }\n                className={cn(\n                  'fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06',\n                  responsive !== false\n                    ? 'inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay'\n                    : 'left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay',\n                  className,\n                )}\n              >\n                {children}\n              </motion.div>\n            </AlertDialogPrimitive.Content>\n          </AlertDialogPortal>\n        )}\n      </AnimatePresence>\n    </MotionPreference>\n  )\n})\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col space-y-ds-02b text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nAlertDialogHeader.displayName = 'AlertDialogHeader'\n\nconst AlertDialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nAlertDialogFooter.displayName = 'AlertDialogFooter'\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'text-heading-xs font-semibold',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn('text-body-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(\n      'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(\n      'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-interactive hover:bg-surface-panel-hover hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport type { AlertDialogContentProps }\nexport type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\nexport type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"],"mappings":"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"}

package/dist/ui/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,QAAA,MAAM,aAAa;;;;8EA4ClB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,mFAkEV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,QAAA,MAAM,aAAa;;;;8EAiDlB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,mFAqEV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/alert.js

@@ -1,19 +1,20 @@
 "use client";
 import { motionProps as e, springs as t } from "./lib/motion.js";
-import { cn as n } from "./lib/utils.js";
-import { Icon as r } from "./icon.js";
-import * as i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { IconAlertCircle as s, IconAlertTriangle as c, IconCircleCheck as l, IconInfoCircle as u, IconX as d } from "@tabler/icons-react";
-import { AnimatePresence as f, motion as p } from "framer-motion";
-import { cva as m } from "class-variance-authority";
+import { MotionPreference as n } from "../_chunks/motion-preference.js";
+import { cn as r } from "./lib/utils.js";
+import { Icon as i } from "./icon.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { IconAlertCircle as c, IconAlertTriangle as l, IconCircleCheck as u, IconInfoCircle as d, IconX as f } from "@tabler/icons-react";
+import { AnimatePresence as p, motion as m } from "framer-motion";
+import { cva as h } from "class-variance-authority";
 //#region src/ui/alert.tsx
-var h = m("relative flex rounded-surface border", {
+var g = h("relative flex rounded-surface border", {
 	variants: {
 		variant: {
-			subtle: "",
-			solid: "",
-			outline: ""
+			subtle: "bg-palette-subtle border-palette-border text-palette-text",
+			solid: "bg-palette-solid text-palette-fg border-transparent [&>svg]:text-palette-fg",
+			outline: "bg-transparent border-palette-border text-palette-text"
 		},
 		color: {
 			info: "",
@@ -29,80 +30,20 @@ var h = m("relative flex rounded-surface border", {
 		}
 	},
 	compoundVariants: [
-		{
-			variant: "subtle",
-			color: "info",
-			className: "bg-info-2 border-info-4 text-info-11"
-		},
-		{
-			variant: "subtle",
-			color: "success",
-			className: "bg-success-2 border-success-4 text-success-11"
-		},
-		{
-			variant: "subtle",
-			color: "warning",
-			className: "bg-warning-2 border-warning-4 text-warning-11"
-		},
-		{
-			variant: "subtle",
-			color: "error",
-			className: "bg-error-2 border-error-4 text-error-11"
-		},
 		{
 			variant: "subtle",
 			color: "neutral",
-			className: "bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted"
-		},
-		{
-			variant: "solid",
-			color: "info",
-			className: "bg-info-9 text-info-fg border-transparent [&>svg]:text-info-fg"
-		},
-		{
-			variant: "solid",
-			color: "success",
-			className: "bg-success-9 text-success-fg border-transparent [&>svg]:text-success-fg"
-		},
-		{
-			variant: "solid",
-			color: "warning",
-			className: "bg-warning-9 text-warning-fg border-transparent [&>svg]:text-warning-fg"
-		},
-		{
-			variant: "solid",
-			color: "error",
-			className: "bg-error-9 text-error-fg border-transparent [&>svg]:text-error-fg"
+			className: "bg-surface-panel text-surface-fg [&>svg]:text-surface-fg-muted"
 		},
 		{
 			variant: "solid",
 			color: "neutral",
-			className: "bg-surface-panel-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted"
-		},
-		{
-			variant: "outline",
-			color: "info",
-			className: "bg-transparent border-info-7 text-info-11"
-		},
-		{
-			variant: "outline",
-			color: "success",
-			className: "bg-transparent border-success-7 text-success-11"
-		},
-		{
-			variant: "outline",
-			color: "warning",
-			className: "bg-transparent border-warning-7 text-warning-11"
-		},
-		{
-			variant: "outline",
-			color: "error",
-			className: "bg-transparent border-error-7 text-error-11"
+			className: "bg-surface-panel-hover text-surface-fg [&>svg]:text-surface-fg-muted"
 		},
 		{
 			variant: "outline",
 			color: "neutral",
-			className: "bg-transparent border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted"
+			className: "text-surface-fg [&>svg]:text-surface-fg-muted"
 		}
 	],
 	defaultVariants: {
@@ -110,20 +51,20 @@ var h = m("relative flex rounded-surface border", {
 		color: "info",
 		size: "md"
 	}
-}), g = {
-	info: u,
-	success: l,
-	warning: c,
-	error: s,
-	neutral: u
-}, _ = i.forwardRef(({ className: s, variant: c = "subtle", color: l = "info", size: u = "md", title: m, onDismiss: _, children: v, ...y }, b) => {
-	let x = g[l ?? "info"], [S, C] = i.useState(!0), w = i.useCallback(() => {
-		C(!1);
-	}, []), T = u === "sm" ? "sm" : u === "lg" ? "lg" : "md", E = u === "sm" ? "xs" : "sm", D = u === "sm" ? "text-body-xs" : "text-body-md", O = u === "sm" ? "text-body-sm" : u === "lg" ? "text-heading-xs" : "text-body-md";
-	return /* @__PURE__ */ a(f, {
-		onExitComplete: _,
-		children: S && /* @__PURE__ */ o(p.div, {
-			ref: b,
+}), _ = {
+	info: d,
+	success: u,
+	warning: l,
+	error: c,
+	neutral: d
+}, v = a.forwardRef(({ className: c, variant: l = "subtle", color: u = "info", size: d = "md", title: h, onDismiss: v, children: y, ...b }, x) => {
+	let S = _[u ?? "info"], [C, w] = a.useState(!0), T = a.useCallback(() => {
+		w(!1);
+	}, []), E = d === "sm" ? "sm" : d === "lg" ? "lg" : "md", D = d === "sm" ? "xs" : "sm", O = d === "sm" ? "text-body-xs" : "text-body-md", k = d === "sm" ? "text-body-sm" : d === "lg" ? "text-heading-xs" : "text-body-md";
+	return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(p, {
+		onExitComplete: v,
+		children: C && /* @__PURE__ */ s(m.div, {
+			ref: x,
 			initial: {
 				opacity: 1,
 				y: 0
@@ -137,43 +78,44 @@ var h = m("relative flex rounded-surface border", {
 				y: -8
 			},
 			transition: t.snappy,
-			className: n(h({
-				variant: c,
-				color: l,
-				size: u
-			}), s),
+			"data-palette": u,
+			className: r(g({
+				variant: l,
+				color: u,
+				size: d
+			}), c),
 			role: "alert",
-			...e(y),
+			...e(b),
 			children: [
-				/* @__PURE__ */ a(r, {
-					icon: x,
-					size: T,
+				/* @__PURE__ */ o(i, {
+					icon: S,
+					size: E,
 					className: "mt-ds-01 shrink-0"
 				}),
-				/* @__PURE__ */ o("div", {
+				/* @__PURE__ */ s("div", {
 					className: "flex-1 min-w-0",
-					children: [m && /* @__PURE__ */ a("p", {
-						className: n(O, "font-semibold mb-ds-01"),
-						children: m
-					}), /* @__PURE__ */ a("div", {
-						className: n(D, c !== "solid" && "text-surface-fg-muted"),
-						children: v
+					children: [h && /* @__PURE__ */ o("p", {
+						className: r(k, "font-semibold mb-ds-01"),
+						children: h
+					}), /* @__PURE__ */ o("div", {
+						className: r(O, l !== "solid" && "text-surface-fg-muted"),
+						children: y
 					})]
 				}),
-				_ && /* @__PURE__ */ a("button", {
+				v && /* @__PURE__ */ o("button", {
 					type: "button",
-					onClick: w,
-					className: n("shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-fast-01 ease-productive-standard active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", c === "solid" ? "text-current opacity-80 hover:opacity-100" : "text-surface-fg-subtle hover:text-surface-fg-muted hover:bg-surface-panel-hover"),
+					onClick: T,
+					className: r("shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-fast-01 ease-productive-standard active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", l === "solid" ? "text-current opacity-80 hover:opacity-100" : "text-surface-fg-subtle hover:text-surface-fg-muted hover:bg-surface-panel-hover"),
 					"aria-label": "Dismiss",
-					children: /* @__PURE__ */ a(r, {
-						icon: d,
-						size: E
+					children: /* @__PURE__ */ o(i, {
+						icon: f,
+						size: D
 					})
 				})
 			]
 		})
-	});
+	}) });
 });
-_.displayName = "Alert";
+v.displayName = "Alert";
 //#endregion
-export { _ as Alert, h as alertVariants };
+export { v as Alert, g as alertVariants };

package/dist/ui/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../src/ui/alert.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst alertVariants = cva(\n  'relative flex rounded-surface border',\n  {\n    variants: {\n      variant: {\n        subtle: '',\n        solid: '',\n        outline: '',\n      },\n      color: {\n        info: '',\n        success: '',\n        warning: '',\n        error: '',\n        neutral: '',\n      },\n      size: {\n        sm: 'gap-ds-03 p-ds-03',\n        md: 'gap-ds-04 p-ds-05',\n        lg: 'gap-ds-05 p-ds-07',\n      },\n    },\n    compoundVariants: [\n      // subtle (surface bg) — default, matches previous behavior\n      { variant: 'subtle', color: 'info', className: 'bg-info-2 border-info-4 text-info-11' },\n      { variant: 'subtle', color: 'success', className: 'bg-success-2 border-success-4 text-success-11' },\n      { variant: 'subtle', color: 'warning', className: 'bg-warning-2 border-warning-4 text-warning-11' },\n      { variant: 'subtle', color: 'error', className: 'bg-error-2 border-error-4 text-error-11' },\n      { variant: 'subtle', color: 'neutral', className: 'bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted' },\n      // solid (solid bg, contrasting text) — canonical name\n      { variant: 'solid', color: 'info', className: 'bg-info-9 text-info-fg border-transparent [&>svg]:text-info-fg' },\n      { variant: 'solid', color: 'success', className: 'bg-success-9 text-success-fg border-transparent [&>svg]:text-success-fg' },\n      { variant: 'solid', color: 'warning', className: 'bg-warning-9 text-warning-fg border-transparent [&>svg]:text-warning-fg' },\n      { variant: 'solid', color: 'error', className: 'bg-error-9 text-error-fg border-transparent [&>svg]:text-error-fg' },\n      { variant: 'solid', color: 'neutral', className: 'bg-surface-panel-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted' },\n      // outline (transparent bg, colored border)\n      { variant: 'outline', color: 'info', className: 'bg-transparent border-info-7 text-info-11' },\n      { variant: 'outline', color: 'success', className: 'bg-transparent border-success-7 text-success-11' },\n      { variant: 'outline', color: 'warning', className: 'bg-transparent border-warning-7 text-warning-11' },\n      { variant: 'outline', color: 'error', className: 'bg-transparent border-error-7 text-error-11' },\n      { variant: 'outline', color: 'neutral', className: 'bg-transparent border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted' },\n    ],\n    defaultVariants: { variant: 'subtle', color: 'info', size: 'md' },\n  },\n)\n\nconst ALERT_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Alert — an inline message block with a colored icon, optional title, optional body,\n * and an optional dismiss button. Renders with `role=\"alert\"` for screen reader announcements.\n *\n * **Variants:** `subtle` (default, tinted surface) | `solid` (solid colored bg) | `outline` (transparent bg, colored border)\n *\n * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`\n * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.\n *\n * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification\n * strip rendered at the top of a page/section (see `<Banner>`).\n *\n * **Dismissible:** Provide `onDismiss` to show an × button. Absence of the prop = non-dismissible.\n *\n * @example\n * // Informational tip inside a settings form:\n * <Alert title=\"Tip\" color=\"info\">\n *   Changes take effect after you save and reload the page.\n * </Alert>\n *\n * @example\n * // Error feedback after a failed API call (dismissible):\n * <Alert color=\"error\" title=\"Save failed\" onDismiss={() => setError(null)}>\n *   Your changes could not be saved. Please try again.\n * </Alert>\n *\n * @example\n * // Success confirmation after publishing:\n * <Alert color=\"success\" title=\"Published!\">\n *   Your post is now live and visible to all subscribers.\n * </Alert>\n *\n * @example\n * // Neutral inline note (no colored intent):\n * <Alert color=\"neutral\">This field is auto-populated from your profile.</Alert>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof alertVariants> {\n  title?: string\n  /**\n   * Called after the exit animation completes, not immediately on click.\n   * The dismiss button sets internal visibility to false, triggering the exit\n   * animation; `onDismiss` fires via `AnimatePresence.onExitComplete`.\n   */\n  onDismiss?: () => void\n}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant = 'subtle', color = 'info', size = 'md', title, onDismiss, children, ...props }, ref) => {\n    const AlertIcon = ALERT_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    const iconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'\n    const dismissIconSize = size === 'sm' ? 'xs' : 'sm'\n    const textClass = size === 'sm' ? 'text-body-xs' : size === 'lg' ? 'text-body-md' : 'text-body-md'\n    const titleClass = size === 'sm' ? 'text-body-sm' : size === 'lg' ? 'text-heading-xs' : 'text-body-md'\n\n    return (\n      <AnimatePresence onExitComplete={onDismiss}>\n        {isVisible && (\n          <motion.div\n            ref={ref}\n            initial={{ opacity: 1, y: 0 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -8 }}\n            transition={springs.snappy}\n            className={cn(alertVariants({ variant, color, size }), className)}\n            role=\"alert\"\n            {...motionProps(props)}\n          >\n            <Icon icon={AlertIcon} size={iconSize} className=\"mt-ds-01 shrink-0\" />\n            <div className=\"flex-1 min-w-0\">\n              {title && <p className={cn(titleClass, 'font-semibold mb-ds-01')}>{title}</p>}\n              {/* Body: on solid variants the CVA sets text-accent-fg (white) on\n                  saturated step-9 backgrounds. Muting the body to surface-fg (grey)\n                  there drops contrast below WCAG AA. Only mute on subtle/outline\n                  variants where the root color is a readable step-11. */}\n              <div\n                className={cn(\n                  textClass,\n                  variant !== 'solid' && 'text-surface-fg-muted',\n                )}\n              >\n                {children}\n              </div>\n            </div>\n            {onDismiss && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className={cn(\n                  'shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-fast-01 ease-productive-standard active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n                  // On solid the fill is a saturated step 9, where a mid grey\n                  // measures as low as 1.01:1. Inherit the alert's own foreground,\n                  // exactly as the title and body already do.\n                  variant === 'solid'\n                    ? 'text-current opacity-80 hover:opacity-100'\n                    : 'text-surface-fg-subtle hover:text-surface-fg-muted hover:bg-surface-panel-hover',\n                )}\n                aria-label=\"Dismiss\"\n              >\n                <Icon icon={IconX} size={dismissIconSize} />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n  },\n)\nAlert.displayName = 'Alert'\n\nexport { Alert, alertVariants }\n"],"mappings":"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"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../src/ui/alert.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst alertVariants = cva(\n  'relative flex rounded-surface border',\n  {\n    variants: {\n      // Colour is a role; the hue arrives via `data-palette` on the element.\n      // Alert's subtle edge was already step 4, which is what the `border` role\n      // now resolves to, so it is an exact match rather than a compromise.\n      variant: {\n        subtle: 'bg-palette-subtle border-palette-border text-palette-text',\n        solid:\n          'bg-palette-solid text-palette-fg border-transparent [&>svg]:text-palette-fg',\n        outline: 'bg-transparent border-palette-border text-palette-text',\n      },\n      color: {\n        info: '',\n        success: '',\n        warning: '',\n        error: '',\n        neutral: '',\n      },\n      size: {\n        sm: 'gap-ds-03 p-ds-03',\n        md: 'gap-ds-04 p-ds-05',\n        lg: 'gap-ds-05 p-ds-07',\n      },\n    },\n    // Fifteen compounds become three, all of them `neutral`. A neutral alert is\n    // not a grey version of a coloured one — it is a plain panel, so its ground\n    // and its text come from the surface family rather than a ramp, and its icon\n    // steps back to muted instead of matching the label.\n    compoundVariants: [\n      {\n        variant: 'subtle',\n        color: 'neutral',\n        className: 'bg-surface-panel text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n      {\n        variant: 'solid',\n        color: 'neutral',\n        className: 'bg-surface-panel-hover text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n      {\n        variant: 'outline',\n        color: 'neutral',\n        className: 'text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n    ],\n    defaultVariants: { variant: 'subtle', color: 'info', size: 'md' },\n  },\n)\n\nconst ALERT_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Alert — an inline message block with a colored icon, optional title, optional body,\n * and an optional dismiss button. Renders with `role=\"alert\"` for screen reader announcements.\n *\n * **Variants:** `subtle` (default, tinted surface) | `solid` (solid colored bg) | `outline` (transparent bg, colored border)\n *\n * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`\n * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.\n *\n * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification\n * strip rendered at the top of a page/section (see `<Banner>`).\n *\n * **Dismissible:** Provide `onDismiss` to show an × button. Absence of the prop = non-dismissible.\n *\n * @example\n * // Informational tip inside a settings form:\n * <Alert title=\"Tip\" color=\"info\">\n *   Changes take effect after you save and reload the page.\n * </Alert>\n *\n * @example\n * // Error feedback after a failed API call (dismissible):\n * <Alert color=\"error\" title=\"Save failed\" onDismiss={() => setError(null)}>\n *   Your changes could not be saved. Please try again.\n * </Alert>\n *\n * @example\n * // Success confirmation after publishing:\n * <Alert color=\"success\" title=\"Published!\">\n *   Your post is now live and visible to all subscribers.\n * </Alert>\n *\n * @example\n * // Neutral inline note (no colored intent):\n * <Alert color=\"neutral\">This field is auto-populated from your profile.</Alert>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof alertVariants> {\n  title?: string\n  /**\n   * Called after the exit animation completes, not immediately on click.\n   * The dismiss button sets internal visibility to false, triggering the exit\n   * animation; `onDismiss` fires via `AnimatePresence.onExitComplete`.\n   */\n  onDismiss?: () => void\n}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant = 'subtle', color = 'info', size = 'md', title, onDismiss, children, ...props }, ref) => {\n    const AlertIcon = ALERT_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    const iconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'\n    const dismissIconSize = size === 'sm' ? 'xs' : 'sm'\n    const textClass = size === 'sm' ? 'text-body-xs' : size === 'lg' ? 'text-body-md' : 'text-body-md'\n    const titleClass = size === 'sm' ? 'text-body-sm' : size === 'lg' ? 'text-heading-xs' : 'text-body-md'\n\n    return (\n      <MotionPreference>\n        <AnimatePresence onExitComplete={onDismiss}>\n          {isVisible && (\n            <motion.div\n              ref={ref}\n              initial={{ opacity: 1, y: 0 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -8 }}\n              transition={springs.snappy}\n              data-palette={color}\n              className={cn(alertVariants({ variant, color, size }), className)}\n              role=\"alert\"\n              {...motionProps(props)}\n            >\n              <Icon icon={AlertIcon} size={iconSize} className=\"mt-ds-01 shrink-0\" />\n              <div className=\"flex-1 min-w-0\">\n                {title && <p className={cn(titleClass, 'font-semibold mb-ds-01')}>{title}</p>}\n                {/* Body: on solid variants the CVA sets text-accent-fg (white) on\n                    saturated step-9 backgrounds. Muting the body to surface-fg (grey)\n                    there drops contrast below WCAG AA. Only mute on subtle/outline\n                    variants where the root color is a readable step-11. */}\n                <div\n                  className={cn(\n                    textClass,\n                    variant !== 'solid' && 'text-surface-fg-muted',\n                  )}\n                >\n                  {children}\n                </div>\n              </div>\n              {onDismiss && (\n                <button\n                  type=\"button\"\n                  onClick={handleDismiss}\n                  className={cn(\n                    'shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-fast-01 ease-productive-standard active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n                    // On solid the fill is a saturated step 9, where a mid grey\n                    // measures as low as 1.01:1. Inherit the alert's own foreground,\n                    // exactly as the title and body already do.\n                    variant === 'solid'\n                      ? 'text-current opacity-80 hover:opacity-100'\n                      : 'text-surface-fg-subtle hover:text-surface-fg-muted hover:bg-surface-panel-hover',\n                  )}\n                  aria-label=\"Dismiss\"\n                >\n                  <Icon icon={IconX} size={dismissIconSize} />\n                </button>\n              )}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </MotionPreference>\n    )\n  },\n)\nAlert.displayName = 'Alert'\n\nexport { Alert, alertVariants }\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,IAAgB,EACpB,wCACA;CACE,UAAU;EAIR,SAAS;GACP,QAAQ;GACR,OACE;GACF,SAAS;EACX;EACA,OAAO;GACL,MAAM;GACN,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;EACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CAKA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,WAAW;EACb;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW;EACb;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW;EACb;CACF;CACA,iBAAiB;EAAE,SAAS;EAAU,OAAO;EAAQ,MAAM;CAAK;AAClE,CACF,GAEM,IAAoE;CACxE,MAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,SAAS;AACX,GAmDM,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,UAAU,WAAQ,QAAQ,UAAO,MAAM,UAAO,cAAW,aAAU,GAAG,KAAS,MAAQ;CAC7G,IAAM,IAAY,EAAY,KAAS,SACjC,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAI,GAE/C,IAAgB,EAAM,kBAAkB;EAC5C,EAAa,EAAK;CACpB,GAAG,CAAC,CAAC,GAEC,IAAW,MAAS,OAAO,OAAO,MAAS,OAAO,OAAO,MACzD,IAAkB,MAAS,OAAO,OAAO,MACzC,IAAY,MAAS,OAAO,iBAAiC,gBAC7D,IAAa,MAAS,OAAO,iBAAiB,MAAS,OAAO,oBAAoB;CAExF,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAiB,gBAAgB;YAC9B,KACC,kBAAC,EAAO,KAAR;GACO;GACL,SAAS;IAAE,SAAS;IAAG,GAAG;GAAE;GAC5B,SAAS;IAAE,SAAS;IAAG,GAAG;GAAE;GAC5B,MAAM;IAAE,SAAS;IAAG,GAAG;GAAG;GAC1B,YAAY,EAAQ;GACpB,gBAAc;GACd,WAAW,EAAG,EAAc;IAAE;IAAS;IAAO;GAAK,CAAC,GAAG,CAAS;GAChE,MAAK;GACL,GAAI,EAAY,CAAK;aATvB;IAWE,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAM;KAAU,WAAU;IAAqB,CAAA;IACtE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,KAAS,kBAAC,KAAD;MAAG,WAAW,EAAG,GAAY,wBAAwB;gBAAI;KAAS,CAAA,GAK5E,kBAAC,OAAD;MACE,WAAW,EACT,GACA,MAAY,WAAW,uBACzB;MAEC;KACE,CAAA,CACF;;IACJ,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAW,EACT,qPAIA,MAAY,UACR,8CACA,iFACN;KACA,cAAW;eAEX,kBAAC,GAAD;MAAM,MAAM;MAAO,MAAM;KAAkB,CAAA;IACrC,CAAA;GAEA;;CAEC,CAAA,EACD,CAAA;AAEtB,CACF;AACA,EAAM,cAAc"}

package/dist/ui/autocomplete.js

@@ -1,17 +1,17 @@
 "use client";
-import { autoUpdate as e, flip as t, offset as n, shift as r, size as i, useFloating as a } from "../_chunks/primitives-internal.js";
-import { tweens as o } from "./lib/motion.js";
+import { autoUpdate as e, flip as t, offset as n, shift as ee, size as r, useFloating as i } from "../_chunks/primitives-internal.js";
+import { tweens as a } from "./lib/motion.js";
+import { useMotion as o } from "../_chunks/motion-provider.js";
 import { cn as s } from "./lib/utils.js";
 import { Spinner as c } from "./spinner.js";
-import { useMotion as l } from "../_chunks/motion-provider.js";
-import { useFormField as u } from "./form.js";
-import { Input as ee } from "./input.js";
+import { useFormField as l } from "./form.js";
+import { Input as u } from "./input.js";
 import * as d from "react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { createPortal as h } from "react-dom";
-import { AnimatePresence as g, motion as _ } from "framer-motion";
+import { createPortal as te } from "react-dom";
+import { AnimatePresence as h, motion as g } from "framer-motion";
 //#region src/ui/autocomplete.tsx
-function v({ label: e, query: t }) {
+function _({ label: e, query: t }) {
 	let n = t ? e.toLowerCase().indexOf(t.toLowerCase()) : -1;
 	return n === -1 ? /* @__PURE__ */ p(f, { children: e }) : /* @__PURE__ */ m(f, { children: [
 		e.slice(0, n),
@@ -22,130 +22,130 @@ function v({ label: e, query: t }) {
 		e.slice(n + t.length)
 	] });
 }
-var y = d.forwardRef(({ options: f, value: y, defaultValue: b = null, onValueChange: x, placeholder: S, emptyText: C = "No options", disabled: w, size: T, state: E, isLoading: D = !1, loadingText: O = "Loading…", renderOption: k, className: A, id: j, ...M }, N) => {
-	let te = d.useId(), P = j || te, F = `${P}-listbox`, I = `${P}-option`, L = y !== void 0, [R, z] = d.useState(b), B = L ? y : R, [V, H] = d.useState(B?.label ?? ""), [U, W] = d.useState(!1), [G, K] = d.useState(-1), q = d.useRef(null), J = d.useRef(null), Y = d.useRef(null), { reducedMotion: X } = l(), { refs: Z, floatingStyles: ne } = a({
-		open: U,
+var v = d.forwardRef(({ options: f, value: v, defaultValue: y = null, onValueChange: b, placeholder: x, emptyText: S = "No options", disabled: C, size: w, state: T, isLoading: E = !1, loadingText: D = "Loading…", renderOption: O, className: k, id: A, ...ne }, j) => {
+	let M = d.useId(), N = A || M, P = `${N}-listbox`, F = `${N}-option`, I = v !== void 0, [L, R] = d.useState(y), z = I ? v : L, [B, V] = d.useState(z?.label ?? ""), [H, U] = d.useState(!1), [W, G] = d.useState(-1), K = d.useRef(null), q = d.useRef(null), J = d.useRef(null), { reducedMotion: Y } = o(), { refs: X, floatingStyles: re } = i({
+		open: H,
 		placement: "bottom-start",
 		whileElementsMounted: e,
 		middleware: [
 			n(4),
 			t(),
-			r(),
-			i({ apply({ availableHeight: e, rects: t, elements: n }) {
+			ee(),
+			r({ apply({ availableHeight: e, rects: t, elements: n }) {
 				Object.assign(n.floating.style, {
 					maxHeight: `${Math.min(e, 240)}px`,
 					width: `${t.reference.width}px`
 				});
 			} })
 		]
-	}), re = d.useCallback((e) => {
-		J.current = e, Z.setReference(e);
-	}, [Z]), ie = d.useCallback((e) => {
-		q.current = e, typeof N == "function" ? N(e) : N && (N.current = e);
-	}, [N]), ae = d.useCallback((e) => {
-		Y.current = e, Z.setFloating(e);
-	}, [Z]);
+	}), ie = d.useCallback((e) => {
+		q.current = e, X.setReference(e);
+	}, [X]), ae = d.useCallback((e) => {
+		K.current = e, typeof j == "function" ? j(e) : j && (j.current = e);
+	}, [j]), oe = d.useCallback((e) => {
+		J.current = e, X.setFloating(e);
+	}, [X]);
 	d.useEffect(() => {
-		H(B?.label ?? "");
-	}, [B]);
-	let Q = d.useMemo(() => V ? f.filter((e) => e.label.toLowerCase().includes(V.toLowerCase())) : f, [f, V]), $ = d.useCallback((e) => {
-		H(e.label), W(!1), K(-1), L || z(e), x?.(e);
-	}, [L, x]), oe = d.useCallback((e) => {
-		if (!w) {
-			if (!U) {
-				(e.key === "ArrowDown" || e.key === "Enter") && W(!0);
+		V(z?.label ?? "");
+	}, [z]);
+	let Z = d.useMemo(() => B ? f.filter((e) => e.label.toLowerCase().includes(B.toLowerCase())) : f, [f, B]), Q = d.useCallback((e) => {
+		V(e.label), U(!1), G(-1), I || R(e), b?.(e);
+	}, [I, b]), $ = d.useCallback((e) => {
+		if (!C) {
+			if (!H) {
+				(e.key === "ArrowDown" || e.key === "Enter") && U(!0);
 				return;
 			}
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), K((e) => Math.min(e + 1, Q.length - 1));
+					e.preventDefault(), G((e) => Math.min(e + 1, Z.length - 1));
 					break;
 				case "ArrowUp":
-					e.preventDefault(), K((e) => Math.max(e - 1, 0));
+					e.preventDefault(), G((e) => Math.max(e - 1, 0));
 					break;
 				case "Home":
-					e.preventDefault(), K(0);
+					e.preventDefault(), G(0);
 					break;
 				case "End":
-					e.preventDefault(), K(Q.length - 1);
+					e.preventDefault(), G(Z.length - 1);
 					break;
 				case "Enter":
-					e.preventDefault(), G >= 0 && Q[G] && $(Q[G]);
+					e.preventDefault(), W >= 0 && Z[W] && Q(Z[W]);
 					break;
 				case "Escape":
-					W(!1), K(-1);
+					U(!1), G(-1);
 					break;
 			}
 		}
 	}, [
-		w,
-		U,
-		Q,
-		G,
-		$
-	]), se = u(), ce = !!(j || se.inputId), le = G >= 0 ? `${I}-${G}` : void 0;
+		C,
+		H,
+		Z,
+		W,
+		Q
+	]), se = l(), ce = !!(A || se.inputId), le = W >= 0 ? `${F}-${W}` : void 0;
 	return /* @__PURE__ */ m("div", {
-		ref: re,
-		className: s("relative", A),
-		...M,
-		children: [/* @__PURE__ */ p(ee, {
-			ref: ie,
+		ref: ie,
+		className: s("relative", k),
+		...ne,
+		children: [/* @__PURE__ */ p(u, {
+			ref: ae,
 			type: "text",
 			role: "combobox",
-			size: T,
-			state: E,
-			id: j,
-			value: V,
-			placeholder: S,
-			disabled: w,
-			"aria-expanded": U,
+			size: w,
+			state: T,
+			id: A,
+			value: B,
+			placeholder: x,
+			disabled: C,
+			"aria-expanded": H,
 			"aria-autocomplete": "list",
-			"aria-controls": U ? F : void 0,
+			"aria-controls": H ? P : void 0,
 			"aria-activedescendant": le,
-			"aria-label": ce ? void 0 : S,
-			endSection: D ? /* @__PURE__ */ p(c, { size: "sm" }) : void 0,
+			"aria-label": ce ? void 0 : x,
+			endSection: E ? /* @__PURE__ */ p(c, { size: "sm" }) : void 0,
 			onChange: (e) => {
-				H(e.target.value), W(!0), K(-1);
+				V(e.target.value), U(!0), G(-1);
 			},
-			onFocus: () => W(!0),
+			onFocus: () => U(!0),
 			onBlur: (e) => {
 				let t = e.relatedTarget;
-				!J.current?.contains(t) && !Y.current?.contains(t) && W(!1);
+				!q.current?.contains(t) && !J.current?.contains(t) && U(!1);
 			},
-			onKeyDown: oe
-		}), typeof document < "u" && h(/* @__PURE__ */ p(g, { children: U && /* @__PURE__ */ p(_.ul, {
-			id: F,
-			ref: ae,
+			onKeyDown: $
+		}), typeof document < "u" && te(/* @__PURE__ */ p(h, { children: H && /* @__PURE__ */ p(g.ul, {
+			id: P,
+			ref: oe,
 			role: "listbox",
-			initial: !X && { opacity: 0 },
+			initial: !Y && { opacity: 0 },
 			animate: { opacity: 1 },
-			exit: X ? { opacity: 1 } : { opacity: 0 },
-			transition: X ? { duration: 0 } : o.fade,
-			style: ne,
+			exit: Y ? { opacity: 1 } : { opacity: 0 },
+			transition: Y ? { duration: 0 } : a.fade,
+			style: re,
 			className: "z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover",
-			children: D ? /* @__PURE__ */ m("li", {
+			children: E ? /* @__PURE__ */ m("li", {
 				className: "flex items-center gap-ds-03 px-ds-04 py-ds-03 text-body-md text-surface-fg-muted",
-				children: [/* @__PURE__ */ p(c, { size: "sm" }), O]
-			}) : Q.length === 0 ? /* @__PURE__ */ p("li", {
+				children: [/* @__PURE__ */ p(c, { size: "sm" }), D]
+			}) : Z.length === 0 ? /* @__PURE__ */ p("li", {
 				className: "px-ds-04 py-ds-03 text-body-md text-surface-fg-muted",
-				children: C
-			}) : Q.map((e, t) => /* @__PURE__ */ p("li", {
-				id: `${I}-${t}`,
+				children: S
+			}) : Z.map((e, t) => /* @__PURE__ */ p("li", {
+				id: `${F}-${t}`,
 				role: "option",
-				"aria-selected": G === t,
+				"aria-selected": W === t,
 				title: e.label,
-				className: s("cursor-pointer truncate px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01", G === t && "bg-accent-3", B?.value === e.value && "font-semibold"),
+				className: s("cursor-pointer truncate px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01", W === t && "bg-accent-4", z?.value === e.value && "font-semibold"),
 				onMouseDown: (e) => e.preventDefault(),
-				onClick: () => $(e),
-				onMouseEnter: () => K(t),
-				children: k ? k(e, V) : /* @__PURE__ */ p(v, {
+				onClick: () => Q(e),
+				onMouseEnter: () => G(t),
+				children: O ? O(e, B) : /* @__PURE__ */ p(_, {
 					label: e.label,
-					query: V
+					query: B
 				})
 			}, e.value))
 		}) }), document.body)]
 	});
 });
-y.displayName = "Autocomplete";
+v.displayName = "Autocomplete";
 //#endregion
-export { y as Autocomplete };
+export { v as Autocomplete };