@refine-studio/ui 0.1.0 → 0.3.0

package/README.md

@@ -20,9 +20,9 @@ Refine UI is built for us first, so it is free to experiment. It has one brand a
 | Foundations | Principles, logo, colour, type, shape and spacing, elevation, motion, light and dark mode, icons |
 | Components  | About 45 building blocks: buttons, forms, dialogs, menus, tables, tabs, toasts and more          |
 | Widgets     | Composed pieces such as App Shell, Command Menu and Page Header, plus full example screens       |
-| Icons       | All of lucide, plus 463 extra icons drawn at lucide's line weight                                |
+| Icons       | The 467 Refine icons, drawn in the shared refine-icons package                                   |
 
-**Stack:** React 19 · Tailwind CSS 4 · Radix UI · class-variance-authority · lucide-react · Geist Sans and Geist Mono
+**Stack:** React 19 · Tailwind CSS 4 · Radix UI · class-variance-authority · @refine-studio/refine-icons · Geist Sans and Geist Mono
 
 ## 🚀 Install it in another repo
 

package/dist/components/accordion/accordion.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../../lib/cn.js";
-import { ChevronDown } from "lucide-react";
+import { RefineIconChevronDown } from "../../icons/refine-icons.js";
 import { Accordion } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/accordion/accordion.tsx
@@ -31,7 +31,7 @@ var AccordionTrigger = ({ children, className, ...props }) => {
 			className: cn("group/accordion flex flex-1 items-center justify-between gap-4 rounded-control py-4 text-left text-body font-medium transition-colors focus-ring", "hover:text-gem-ink", "disabled:pointer-events-none disabled:opacity-45", className),
 			"data-slot": "accordion-trigger",
 			...props,
-			children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+			children: [children, /* @__PURE__ */ jsx(RefineIconChevronDown, {
 				"aria-hidden": true,
 				className: "size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out-expo group-data-[state=open]/accordion:rotate-180",
 				role: "presentation"

package/dist/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["Accordion","AccordionPrimitive"],"sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { Accordion as AccordionPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\n/**\n * Stacks collapsible sections; `type=\"single\"` keeps one open, `type=\"multiple\"` lets several open.\n */\nexport const Accordion = ({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Root>) => {\n  return <AccordionPrimitive.Root className={cn('w-full', className)} data-slot=\"accordion\" {...props} />;\n};\n\nexport const AccordionItem = ({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Item>) => {\n  return (\n    <AccordionPrimitive.Item\n      className={cn('border-b last:border-b-0', className)}\n      data-slot=\"accordion-item\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Toggles its section and turns the chevron to show the state.\n */\nexport const AccordionTrigger = ({ children, className, ...props }: ComponentProps<typeof AccordionPrimitive.Trigger>) => {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        className={cn(\n          // base\n          'group/accordion flex flex-1 items-center justify-between gap-4 rounded-control py-4 text-left text-body font-medium transition-colors focus-ring',\n          // hover\n          'hover:text-gem-ink',\n          // disabled\n          'disabled:pointer-events-none disabled:opacity-45',\n          className,\n        )}\n        data-slot=\"accordion-trigger\"\n        {...props}\n      >\n        {children}\n        <ChevronDown\n          aria-hidden\n          className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out-expo group-data-[state=open]/accordion:rotate-180\"\n          role=\"presentation\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n};\n\n/**\n * Reveals its section with a height animation.\n */\nexport const AccordionContent = ({ children, className, ...props }: ComponentProps<typeof AccordionPrimitive.Content>) => {\n  return (\n    <AccordionPrimitive.Content\n      className=\"overflow-hidden text-body-sm text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      data-slot=\"accordion-content\"\n      {...props}\n    >\n      <div className={cn('pb-4', className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,IAAaA,eAAa,EAAE,WAAW,GAAG,YAA4D;CACpG,OAAO,oBAACC,UAAmB,MAApB;EAAyB,WAAW,GAAG,UAAU,SAAS;EAAG,aAAU;EAAY,GAAI;CAAQ,CAAA;AACxG;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAA4D;CACxG,OACE,oBAACA,UAAmB,MAApB;EACE,WAAW,GAAG,4BAA4B,SAAS;EACnD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,oBAAoB,EAAE,UAAU,WAAW,GAAG,YAA+D;CACxH,OACE,oBAACA,UAAmB,QAApB;EAA2B,WAAU;EACnC,UAAA,qBAACA,UAAmB,SAApB;GACE,WAAW,GAET,oJAEA,sBAEA,oDACA,SACF;GACA,aAAU;GACV,GAAI;GAXN,UAAA,CAaG,UACD,oBAAC,aAAD;IACE,eAAA;IACA,WAAU;IACV,MAAK;GACN,CAAA,CACyB;;CACH,CAAA;AAE/B;;;;AAKA,IAAa,oBAAoB,EAAE,UAAU,WAAW,GAAG,YAA+D;CACxH,OACE,oBAACA,UAAmB,SAApB;EACE,WAAU;EACV,aAAU;EACV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,QAAQ,SAAS;GAAI;EAAc,CAAA;CAC5B,CAAA;AAEhC"}
+{"version":3,"file":"accordion.js","names":["Accordion","AccordionPrimitive"],"sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Accordion as AccordionPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { RefineIconChevronDown } from '../../icons/refine-icons';\n\n/**\n * Stacks collapsible sections; `type=\"single\"` keeps one open, `type=\"multiple\"` lets several open.\n */\nexport const Accordion = ({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Root>) => {\n  return <AccordionPrimitive.Root className={cn('w-full', className)} data-slot=\"accordion\" {...props} />;\n};\n\nexport const AccordionItem = ({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Item>) => {\n  return (\n    <AccordionPrimitive.Item\n      className={cn('border-b last:border-b-0', className)}\n      data-slot=\"accordion-item\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Toggles its section and turns the chevron to show the state.\n */\nexport const AccordionTrigger = ({ children, className, ...props }: ComponentProps<typeof AccordionPrimitive.Trigger>) => {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        className={cn(\n          // base\n          'group/accordion flex flex-1 items-center justify-between gap-4 rounded-control py-4 text-left text-body font-medium transition-colors focus-ring',\n          // hover\n          'hover:text-gem-ink',\n          // disabled\n          'disabled:pointer-events-none disabled:opacity-45',\n          className,\n        )}\n        data-slot=\"accordion-trigger\"\n        {...props}\n      >\n        {children}\n        <RefineIconChevronDown\n          aria-hidden\n          className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out-expo group-data-[state=open]/accordion:rotate-180\"\n          role=\"presentation\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n};\n\n/**\n * Reveals its section with a height animation.\n */\nexport const AccordionContent = ({ children, className, ...props }: ComponentProps<typeof AccordionPrimitive.Content>) => {\n  return (\n    <AccordionPrimitive.Content\n      className=\"overflow-hidden text-body-sm text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      data-slot=\"accordion-content\"\n      {...props}\n    >\n      <div className={cn('pb-4', className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,IAAaA,eAAa,EAAE,WAAW,GAAG,YAA4D;CACpG,OAAO,oBAACC,UAAmB,MAApB;EAAyB,WAAW,GAAG,UAAU,SAAS;EAAG,aAAU;EAAY,GAAI;CAAQ,CAAA;AACxG;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAA4D;CACxG,OACE,oBAACA,UAAmB,MAApB;EACE,WAAW,GAAG,4BAA4B,SAAS;EACnD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,oBAAoB,EAAE,UAAU,WAAW,GAAG,YAA+D;CACxH,OACE,oBAACA,UAAmB,QAApB;EAA2B,WAAU;EACnC,UAAA,qBAACA,UAAmB,SAApB;GACE,WAAW,GAET,oJAEA,sBAEA,oDACA,SACF;GACA,aAAU;GACV,GAAI;GAXN,UAAA,CAaG,UACD,oBAAC,uBAAD;IACE,eAAA;IACA,WAAU;IACV,MAAK;GACN,CAAA,CACyB;;CACH,CAAA;AAE/B;;;;AAKA,IAAa,oBAAoB,EAAE,UAAU,WAAW,GAAG,YAA+D;CACxH,OACE,oBAACA,UAAmB,SAApB;EACE,WAAU;EACV,aAAU;EACV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,QAAQ,SAAS;GAAI;EAAc,CAAA;CAC5B,CAAA;AAEhC"}

package/dist/components/alert/alert.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/cn.js";
+import { RefineIconCircleCheck, RefineIconCircleWarning, RefineIconCloseMD, RefineIconInfo, RefineIconSparkles, RefineIconTriangleWarning } from "../../icons/refine-icons.js";
 import { Button } from "../button/button.js";
-import { CircleAlert, CircleCheck, Info, Sparkles, TriangleAlert, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { useState } from "react";
@@ -18,12 +18,12 @@ var alertVariants = cva(["relative flex w-full items-start gap-3 rounded-card bo
 	defaultVariants: { variant: "neutral" }
 });
 var ICON_BY_VARIANT = {
-	danger: CircleAlert,
-	gem: Sparkles,
-	info: Info,
-	neutral: Info,
-	success: CircleCheck,
-	warning: TriangleAlert
+	danger: RefineIconCircleWarning,
+	gem: RefineIconSparkles,
+	info: RefineIconInfo,
+	neutral: RefineIconInfo,
+	success: RefineIconCircleCheck,
+	warning: RefineIconTriangleWarning
 };
 /**
 * A callout for status the reader should notice; danger and warning announce themselves as alerts, the rest as status.
@@ -65,7 +65,7 @@ var Alert = ({ action, children, className, dismissible = false, icon, onDismiss
 				title: "Dismiss",
 				variant: "ghost",
 				onClick: handleDismiss,
-				children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
+				children: [/* @__PURE__ */ jsx(RefineIconCloseMD, {}), /* @__PURE__ */ jsx("span", {
 					className: "sr-only",
 					children: "Dismiss"
 				})]

package/dist/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CircleAlert, CircleCheck, Info, Sparkles, TriangleAlert, X } from 'lucide-react';\nimport { type ComponentProps, type ReactNode, useState } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Button } from '../button/button';\n\nexport const alertVariants = cva(\n  [\n    // base\n    'relative flex w-full items-start gap-3 rounded-card border p-4 text-body-sm',\n    \"[&>svg]:mt-0.5 [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-[1.15em]\",\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: 'border-border bg-muted text-foreground [&>svg]:text-muted-foreground',\n        gem: 'border-gem/30 bg-gem-soft text-gem-ink',\n        info: 'border-info/25 bg-info-soft text-info-ink',\n        success: 'border-success/25 bg-success-soft text-success-ink',\n        warning: 'border-warning/35 bg-warning-soft text-warning-ink',\n        danger: 'border-danger/25 bg-danger-soft text-danger-ink',\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n    },\n  },\n);\n\ntype AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;\n\nconst ICON_BY_VARIANT = {\n  danger: CircleAlert,\n  gem: Sparkles,\n  info: Info,\n  neutral: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n} satisfies Record<AlertVariant, typeof Info>;\n\ninterface AlertProps extends ComponentProps<'div'>, VariantProps<typeof alertVariants> {\n  action?: ReactNode;\n  dismissible?: boolean;\n  icon?: ReactNode | false;\n  onDismiss?: () => void;\n}\n\n/**\n * A callout for status the reader should notice; danger and warning announce themselves as alerts, the rest as status.\n */\nexport const Alert = ({\n  action,\n  children,\n  className,\n  dismissible = false,\n  icon,\n  onDismiss,\n  variant = 'neutral',\n  ...props\n}: AlertProps) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  if (isDismissed) return null;\n\n  const resolvedVariant = variant ?? 'neutral';\n  const DefaultIcon = ICON_BY_VARIANT[resolvedVariant];\n  const isUrgent = resolvedVariant === 'danger' || resolvedVariant === 'warning';\n\n  /**\n   * Hides the alert and tells the owner.\n   */\n  const handleDismiss = () => {\n    setIsDismissed(true);\n    onDismiss?.();\n  };\n\n  return (\n    <div\n      className={cn(alertVariants({ variant }), className)}\n      data-slot=\"alert\"\n      role={isUrgent ? 'alert' : 'status'}\n      {...props}\n    >\n      {icon === undefined ? <DefaultIcon aria-hidden role=\"presentation\" /> : icon}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">{children}</div>\n      {action && <div className=\"flex shrink-0 items-center gap-2 self-center\">{action}</div>}\n      {dismissible && (\n        <Button\n          className=\"-mt-1 -mr-1 text-current\"\n          size=\"icon-sm\"\n          title=\"Dismiss\"\n          variant=\"ghost\"\n          onClick={handleDismiss}\n        >\n          <X />\n          <span className=\"sr-only\">Dismiss</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n\n/**\n * The alert's heading line.\n */\nexport const AlertTitle = ({ className, ...props }: ComponentProps<'p'>) => {\n  return <p className={cn('font-semibold', className)} data-slot=\"alert-title\" {...props} />;\n};\n\n/**\n * The alert's explanatory copy, a step quieter than the title.\n */\nexport const AlertDescription = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div className={cn('text-pretty opacity-85 [&_p]:leading-relaxed', className)} data-slot=\"alert-description\" {...props} />\n  );\n};\n"],"mappings":";;;;;;;;AASA,IAAa,gBAAgB,IAC3B,CAEE,+EACA,6EACF,GACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,KAAK;EACL,MAAM;EACN,SAAS;EACT,SAAS;EACT,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAIA,IAAM,kBAAkB;CACtB,QAAQ;CACR,KAAK;CACL,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;AACX;;;;AAYA,IAAa,SAAS,EACpB,QACA,UACA,WACA,cAAc,OACd,MACA,WACA,UAAU,WACV,GAAG,YACa;CAChB,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,IAAI,aAAa,OAAO;CAExB,MAAM,kBAAkB,WAAW;CACnC,MAAM,cAAc,gBAAgB;CACpC,MAAM,WAAW,oBAAoB,YAAY,oBAAoB;;;;CAKrE,MAAM,sBAAsB;EAC1B,eAAe,IAAI;EACnB,YAAY;CACd;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,aAAU;EACV,MAAM,WAAW,UAAU;EAC3B,GAAI;EAJN,UAAA;GAMG,SAAS,KAAA,IAAY,oBAAC,aAAD;IAAa,eAAA;IAAY,MAAK;GAAgB,CAAA,IAAI;GACxE,oBAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA;GAClE,UAAU,oBAAC,OAAD;IAAK,WAAU;IAAgD,UAAA;GAAY,CAAA;GACrF,eACC,qBAAC,QAAD;IACE,WAAU;IACV,MAAK;IACL,OAAM;IACN,SAAQ;IACR,SAAS;IALX,UAAA,CAOE,oBAAC,GAAD,CAAI,CAAA,GACJ,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAa,CAAA,CACjC;;EAEP;;AAET;;;;AAKA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAiC;CAC1E,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,iBAAiB,SAAS;EAAG,aAAU;EAAc,GAAI;CAAQ,CAAA;AAC3F;;;;AAKA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAmC;CAClF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,gDAAgD,SAAS;EAAG,aAAU;EAAoB,GAAI;CAAQ,CAAA;AAE7H"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, type ReactNode, useState } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Button } from '../button/button';\nimport {\n  RefineIconCircleCheck,\n  RefineIconCircleWarning,\n  RefineIconCloseMD,\n  RefineIconInfo,\n  RefineIconSparkles,\n  RefineIconTriangleWarning,\n} from '../../icons/refine-icons';\n\nexport const alertVariants = cva(\n  [\n    // base\n    'relative flex w-full items-start gap-3 rounded-card border p-4 text-body-sm',\n    \"[&>svg]:mt-0.5 [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-[1.15em]\",\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: 'border-border bg-muted text-foreground [&>svg]:text-muted-foreground',\n        gem: 'border-gem/30 bg-gem-soft text-gem-ink',\n        info: 'border-info/25 bg-info-soft text-info-ink',\n        success: 'border-success/25 bg-success-soft text-success-ink',\n        warning: 'border-warning/35 bg-warning-soft text-warning-ink',\n        danger: 'border-danger/25 bg-danger-soft text-danger-ink',\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n    },\n  },\n);\n\ntype AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;\n\nconst ICON_BY_VARIANT = {\n  danger: RefineIconCircleWarning,\n  gem: RefineIconSparkles,\n  info: RefineIconInfo,\n  neutral: RefineIconInfo,\n  success: RefineIconCircleCheck,\n  warning: RefineIconTriangleWarning,\n} satisfies Record<AlertVariant, typeof RefineIconInfo>;\n\ninterface AlertProps extends ComponentProps<'div'>, VariantProps<typeof alertVariants> {\n  action?: ReactNode;\n  dismissible?: boolean;\n  icon?: ReactNode | false;\n  onDismiss?: () => void;\n}\n\n/**\n * A callout for status the reader should notice; danger and warning announce themselves as alerts, the rest as status.\n */\nexport const Alert = ({\n  action,\n  children,\n  className,\n  dismissible = false,\n  icon,\n  onDismiss,\n  variant = 'neutral',\n  ...props\n}: AlertProps) => {\n  const [isDismissed, setIsDismissed] = useState(false);\n  if (isDismissed) return null;\n\n  const resolvedVariant = variant ?? 'neutral';\n  const DefaultIcon = ICON_BY_VARIANT[resolvedVariant];\n  const isUrgent = resolvedVariant === 'danger' || resolvedVariant === 'warning';\n\n  /**\n   * Hides the alert and tells the owner.\n   */\n  const handleDismiss = () => {\n    setIsDismissed(true);\n    onDismiss?.();\n  };\n\n  return (\n    <div\n      className={cn(alertVariants({ variant }), className)}\n      data-slot=\"alert\"\n      role={isUrgent ? 'alert' : 'status'}\n      {...props}\n    >\n      {icon === undefined ? <DefaultIcon aria-hidden role=\"presentation\" /> : icon}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">{children}</div>\n      {action && <div className=\"flex shrink-0 items-center gap-2 self-center\">{action}</div>}\n      {dismissible && (\n        <Button\n          className=\"-mt-1 -mr-1 text-current\"\n          size=\"icon-sm\"\n          title=\"Dismiss\"\n          variant=\"ghost\"\n          onClick={handleDismiss}\n        >\n          <RefineIconCloseMD />\n          <span className=\"sr-only\">Dismiss</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n\n/**\n * The alert's heading line.\n */\nexport const AlertTitle = ({ className, ...props }: ComponentProps<'p'>) => {\n  return <p className={cn('font-semibold', className)} data-slot=\"alert-title\" {...props} />;\n};\n\n/**\n * The alert's explanatory copy, a step quieter than the title.\n */\nexport const AlertDescription = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div className={cn('text-pretty opacity-85 [&_p]:leading-relaxed', className)} data-slot=\"alert-description\" {...props} />\n  );\n};\n"],"mappings":";;;;;;;;AAgBA,IAAa,gBAAgB,IAC3B,CAEE,+EACA,6EACF,GACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,KAAK;EACL,MAAM;EACN,SAAS;EACT,SAAS;EACT,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAIA,IAAM,kBAAkB;CACtB,QAAQ;CACR,KAAK;CACL,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;AACX;;;;AAYA,IAAa,SAAS,EACpB,QACA,UACA,WACA,cAAc,OACd,MACA,WACA,UAAU,WACV,GAAG,YACa;CAChB,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,IAAI,aAAa,OAAO;CAExB,MAAM,kBAAkB,WAAW;CACnC,MAAM,cAAc,gBAAgB;CACpC,MAAM,WAAW,oBAAoB,YAAY,oBAAoB;;;;CAKrE,MAAM,sBAAsB;EAC1B,eAAe,IAAI;EACnB,YAAY;CACd;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,aAAU;EACV,MAAM,WAAW,UAAU;EAC3B,GAAI;EAJN,UAAA;GAMG,SAAS,KAAA,IAAY,oBAAC,aAAD;IAAa,eAAA;IAAY,MAAK;GAAgB,CAAA,IAAI;GACxE,oBAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA;GAClE,UAAU,oBAAC,OAAD;IAAK,WAAU;IAAgD,UAAA;GAAY,CAAA;GACrF,eACC,qBAAC,QAAD;IACE,WAAU;IACV,MAAK;IACL,OAAM;IACN,SAAQ;IACR,SAAS;IALX,UAAA,CAOE,oBAAC,mBAAD,CAAoB,CAAA,GACpB,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAa,CAAA,CACjC;;EAEP;;AAET;;;;AAKA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAiC;CAC1E,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,iBAAiB,SAAS;EAAG,aAAU;EAAc,GAAI;CAAQ,CAAA;AAC3F;;;;AAKA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAmC;CAClF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,gDAAgD,SAAS;EAAG,aAAU;EAAoB,GAAI;CAAQ,CAAA;AAE7H"}

package/dist/components/app-shell/app-shell.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/cn.js";
+import { RefineIconBarLeft } from "../../icons/refine-icons.js";
 import { useBreakpoint } from "../../lib/use-breakpoint.js";
-import { PanelLeft } from "lucide-react";
 import { Dialog, Slot } from "radix-ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useState } from "react";
@@ -180,7 +180,7 @@ var AppShellSidebarTrigger = ({ className, onClick, ...props }) => {
 			onClick?.(event);
 		},
 		...props,
-		children: [/* @__PURE__ */ jsx(PanelLeft, {
+		children: [/* @__PURE__ */ jsx(RefineIconBarLeft, {
 			"aria-hidden": true,
 			className: "size-4"
 		}), /* @__PURE__ */ jsx("span", {

package/dist/components/app-shell/app-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.js","names":["_Fragment","DialogPrimitive"],"sources":["../../../src/components/app-shell/app-shell.tsx"],"sourcesContent":["'use client';\n\nimport { PanelLeft } from 'lucide-react';\nimport { Dialog as DialogPrimitive, Slot } from 'radix-ui';\nimport { type ComponentProps, createContext, type ReactNode, use, useState } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useBreakpoint } from '../../lib/use-breakpoint';\n\ninterface AppShellContextValue {\n  collapsed: boolean;\n  /** Whether the shell shows its phone layout: the sidebar as a drawer, below `md`. `true` on the server. */\n  isMobile: boolean;\n  mobileOpen: boolean;\n  setCollapsed: (collapsed: boolean) => void;\n  setMobileOpen: (mobileOpen: boolean) => void;\n}\n\nconst AppShellContext = createContext<AppShellContextValue | null>(null);\n\n/**\n * Returns the shell's sidebar state and whether it shows the phone layout; throws outside an `AppShell`.\n */\nexport const useAppShell = () => {\n  const context = use(AppShellContext);\n  if (!context) throw new Error('useAppShell must be used inside an AppShell.');\n\n  return context;\n};\n\ninterface AppShellProps extends ComponentProps<'div'> {\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n}\n\n/**\n * Lays out an internal tool as sidebar plus content, and owns whether the sidebar is collapsed to a rail or open as a mobile drawer.\n */\nexport const AppShell = ({\n  className,\n  collapsed: controlledCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  ...props\n}: AppShellProps) => {\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const collapsed = controlledCollapsed ?? uncontrolledCollapsed;\n  const isMobile = !useBreakpoint('md');\n\n  /**\n   * Updates the collapsed state and reports it to a controlling parent.\n   */\n  const setCollapsed = (nextCollapsed: boolean) => {\n    setUncontrolledCollapsed(nextCollapsed);\n    onCollapsedChange?.(nextCollapsed);\n  };\n\n  return (\n    <AppShellContext value={{ collapsed, isMobile, mobileOpen, setCollapsed, setMobileOpen }}>\n      <div className={cn('flex min-h-dvh bg-canvas text-foreground', className)} data-slot=\"app-shell\" {...props} />\n    </AppShellContext>\n  );\n};\n\ninterface AppShellSidebarProps extends ComponentProps<'aside'> {\n  label?: string;\n}\n\n/**\n * Renders the navigation column: a sticky panel that collapses to an icon rail from `md` up, and an off-canvas drawer below it.\n */\nexport const AppShellSidebar = ({ children, className, label = 'Navigation', ...props }: AppShellSidebarProps) => {\n  const { collapsed, mobileOpen, setMobileOpen } = useAppShell();\n\n  return (\n    <>\n      <aside\n        className={cn(\n          // base\n          'group/sidebar sticky top-0 hidden h-dvh w-64 shrink-0 flex-col gap-2 border-r border-border bg-background md:flex',\n          // animation\n          'transition-[width] duration-300 ease-out-expo data-[collapsed=true]:w-16',\n          className,\n        )}\n        data-collapsed={collapsed}\n        data-slot=\"app-shell-sidebar\"\n        {...props}\n      >\n        {children}\n      </aside>\n      <DialogPrimitive.Root open={mobileOpen} onOpenChange={setMobileOpen}>\n        <DialogPrimitive.Portal>\n          <DialogPrimitive.Overlay\n            className={cn(\n              // base\n              'fixed inset-0 z-40 bg-scrim backdrop-blur-sm md:hidden',\n              // animation\n              'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',\n            )}\n          />\n          <DialogPrimitive.Content\n            aria-describedby={undefined}\n            className={cn(\n              // base\n              'group/sidebar fixed inset-y-0 left-0 z-50 flex w-72 flex-col gap-2 border-r border-border bg-background shadow-float md:hidden',\n              // animation\n              'duration-300 data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:animate-in data-[state=open]:slide-in-from-left',\n            )}\n            data-collapsed={false}\n          >\n            <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n            {children}\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Portal>\n      </DialogPrimitive.Root>\n    </>\n  );\n};\n\n/**\n * Holds the brand row at the top of the sidebar; hides everything but the first child when collapsed.\n */\nexport const SidebarHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex h-14 shrink-0 items-center gap-2 border-b border-border px-4 group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0',\n        className,\n      )}\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Scrolls the sidebar's sections when they outgrow the viewport.\n */\nexport const SidebarContent = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-3 py-3', className)}\n      data-slot=\"sidebar-content\"\n      {...props}\n    />\n  );\n};\n\ninterface SidebarSectionProps extends Omit<ComponentProps<'div'>, 'title'> {\n  title?: ReactNode;\n}\n\n/**\n * Groups related items under a mono caption, which turns into a hairline when the sidebar is a rail.\n */\nexport const SidebarSection = ({ children, className, title, ...props }: SidebarSectionProps) => {\n  return (\n    <div className={cn('flex flex-col gap-0.5', className)} data-slot=\"sidebar-section\" role=\"group\" {...props}>\n      {title && (\n        <div className=\"mb-1 flex h-5 items-center px-2\">\n          <span className=\"eyebrow truncate text-subtle group-data-[collapsed=true]/sidebar:sr-only\">{title}</span>\n          <span\n            aria-hidden\n            className=\"hidden h-px w-full bg-border group-data-[collapsed=true]/sidebar:block\"\n            role=\"presentation\"\n          />\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\ninterface SidebarItemProps extends ComponentProps<'button'> {\n  active?: boolean;\n  asChild?: boolean;\n  badge?: ReactNode;\n  icon?: ReactNode;\n  label: string;\n  number?: number | string;\n}\n\n/**\n * Renders one navigation entry with icon, optional website-style number and badge; pass a router link as the child with `asChild`.\n */\nexport const SidebarItem = ({\n  active = false,\n  asChild = false,\n  badge,\n  children,\n  className,\n  icon,\n  label,\n  number,\n  onClick,\n  ...props\n}: SidebarItemProps) => {\n  const { collapsed, setMobileOpen } = useAppShell();\n  const Component = asChild ? Slot.Root : 'button';\n  const formattedNumber = typeof number === 'number' ? number.toString().padStart(2, '0') : number;\n\n  return (\n    <Component\n      aria-current={active ? 'page' : undefined}\n      className={cn(\n        // base\n        'group/item relative flex h-control-md w-full items-center gap-3 rounded-control px-2.5 text-left text-body-sm text-muted-foreground outline-none select-none focus-ring',\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\",\n        'group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0',\n        // hover\n        'transition-colors hover:bg-hover hover:text-foreground',\n        // active\n        'active:bg-pressed aria-[current=page]:bg-card aria-[current=page]:font-medium aria-[current=page]:text-foreground aria-[current=page]:shadow-soft aria-[current=page]:ring-1 aria-[current=page]:ring-border',\n        // disabled\n        'disabled:pointer-events-none disabled:opacity-45',\n        className,\n      )}\n      data-slot=\"sidebar-item\"\n      title={collapsed ? label : undefined}\n      type={asChild ? undefined : 'button'}\n      onClick={(event) => {\n        setMobileOpen(false);\n        onClick?.(event);\n      }}\n      {...props}\n    >\n      {asChild && <Slot.Slottable>{children}</Slot.Slottable>}\n      {icon && <span className=\"flex text-subtle group-hover/item:text-foreground group-aria-[current=page]/item:text-gem-ink\">{icon}</span>}\n      {formattedNumber !== undefined && (\n        <span className=\"font-mono text-caption text-subtle tabular-nums group-data-[collapsed=true]/sidebar:hidden\">\n          {formattedNumber}\n        </span>\n      )}\n      <span className=\"flex-1 truncate group-data-[collapsed=true]/sidebar:sr-only\">{label}</span>\n      {badge !== undefined && (\n        <span\n          className={cn(\n            'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-gem-soft px-1.5 font-mono text-caption text-gem-ink tabular-nums',\n            'group-data-[collapsed=true]/sidebar:absolute group-data-[collapsed=true]/sidebar:top-1 group-data-[collapsed=true]/sidebar:right-1 group-data-[collapsed=true]/sidebar:size-2 group-data-[collapsed=true]/sidebar:min-w-0 group-data-[collapsed=true]/sidebar:bg-gem group-data-[collapsed=true]/sidebar:p-0',\n          )}\n        >\n          <span className=\"group-data-[collapsed=true]/sidebar:sr-only\">{badge}</span>\n        </span>\n      )}\n    </Component>\n  );\n};\n\n/**\n * Pins account and settings controls to the bottom of the sidebar.\n */\nexport const SidebarFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'mt-auto flex shrink-0 items-center gap-3 border-t border-border p-3 group-data-[collapsed=true]/sidebar:justify-center',\n        className,\n      )}\n      data-slot=\"sidebar-footer\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Toggles the sidebar: collapses it to a rail from `md` up and opens the drawer below it.\n */\nexport const AppShellSidebarTrigger = ({ className, onClick, ...props }: ComponentProps<'button'>) => {\n  const { collapsed, isMobile, mobileOpen, setCollapsed, setMobileOpen } = useAppShell();\n\n  return (\n    <button\n      className={cn(\n        // base\n        'inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-muted-foreground transition-colors focus-ring',\n        // hover\n        'hover:bg-hover hover:text-foreground',\n        // active\n        'active:bg-pressed',\n        className,\n      )}\n      data-slot=\"app-shell-sidebar-trigger\"\n      title=\"Toggle sidebar\"\n      type=\"button\"\n      onClick={(event) => {\n        if (isMobile) setMobileOpen(!mobileOpen);\n        else setCollapsed(!collapsed);\n        onClick?.(event);\n      }}\n      {...props}\n    >\n      <PanelLeft aria-hidden className=\"size-4\" />\n      <span className=\"sr-only\">Toggle sidebar</span>\n    </button>\n  );\n};\n\n/**\n * Stacks the header and page content to the right of the sidebar.\n */\nexport const AppShellMain = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('flex min-w-0 flex-1 flex-col', className)} data-slot=\"app-shell-main\" {...props} />;\n};\n\n/**\n * Renders the sticky, frosted top bar of the content column, like the refine.studio header.\n */\nexport const AppShellHeader = ({ className, ...props }: ComponentProps<'header'>) => {\n  return (\n    <header\n      className={cn('sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border px-4 glass md:px-6', className)}\n      data-slot=\"app-shell-header\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Holds the page itself, padded and capped for readable line lengths on very wide screens.\n */\nexport const AppShellContent = ({ className, ...props }: ComponentProps<'main'>) => {\n  return (\n    <main\n      className={cn('mx-auto flex w-full max-w-7xl flex-1 flex-col gap-8 p-4 md:p-8', className)}\n      data-slot=\"app-shell-content\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAkBA,IAAM,kBAAkB,cAA2C,IAAI;;;;AAKvE,IAAa,oBAAoB;CAC/B,MAAM,UAAU,IAAI,eAAe;CACnC,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,8CAA8C;CAE5E,OAAO;AACT;;;;AAWA,IAAa,YAAY,EACvB,WACA,WAAW,qBACX,mBAAmB,OACnB,mBACA,GAAG,YACgB;CACnB,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,gBAAgB;CACnF,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,YAAY,uBAAuB;CACzC,MAAM,WAAW,CAAC,cAAc,IAAI;;;;CAKpC,MAAM,gBAAgB,kBAA2B;EAC/C,yBAAyB,aAAa;EACtC,oBAAoB,aAAa;CACnC;CAEA,OACE,oBAAC,iBAAD;EAAiB,OAAO;GAAE;GAAW;GAAU;GAAY;GAAc;EAAc;EACrF,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,4CAA4C,SAAS;GAAG,aAAU;GAAY,GAAI;EAAQ,CAAA;CAC9F,CAAA;AAErB;;;;AASA,IAAa,mBAAmB,EAAE,UAAU,WAAW,QAAQ,cAAc,GAAG,YAAkC;CAChH,MAAM,EAAE,WAAW,YAAY,kBAAkB,YAAY;CAE7D,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EACE,WAAW,GAET,qHAEA,4EACA,SACF;EACA,kBAAgB;EAChB,aAAU;EACV,GAAI;EAEH;CACI,CAAA,GACP,oBAACC,OAAgB,MAAjB;EAAsB,MAAM;EAAY,cAAc;EACpD,UAAA,qBAACA,OAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,OAAgB,SAAjB,EACE,WAAW,GAET,0DAEA,yHACF,EACD,CAAA,GACD,qBAACA,OAAgB,SAAjB;GACE,oBAAkB,KAAA;GAClB,WAAW,GAET,kIAEA,sJACF;GACA,kBAAgB;GARlB,UAAA,CAUE,oBAACA,OAAgB,OAAjB;IAAuB,WAAU;IAAW,UAAA;GAA6B,CAAA,GACxE,QACsB;EACH,CAAA,CAAA,EAAA,CAAA;CACJ,CAAA,CACtB,EAAA,CAAA;AAEN;;;;AAKA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAmC;CAC/E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,iKACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAmC;CAChF,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,gEAAgE,SAAS;EACvF,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AASA,IAAa,kBAAkB,EAAE,UAAU,WAAW,OAAO,GAAG,YAAiC;CAC/F,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,SAAS;EAAG,aAAU;EAAkB,MAAK;EAAQ,GAAI;EAArG,UAAA,CACG,SACC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IAA4E,UAAA;GAAY,CAAA,GACxG,oBAAC,QAAD;IACE,eAAA;IACA,WAAU;IACV,MAAK;GACN,CAAA,CACE;EAEN,CAAA,GAAA,QACE;;AAET;;;;AAcA,IAAa,eAAe,EAC1B,SAAS,OACT,UAAU,OACV,OACA,UACA,WACA,MACA,OACA,QACA,SACA,GAAG,YACmB;CACtB,MAAM,EAAE,WAAW,kBAAkB,YAAY;CACjD,MAAM,YAAY,UAAU,KAAK,OAAO;CACxC,MAAM,kBAAkB,OAAO,WAAW,WAAW,OAAO,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,IAAI;CAE1F,OACE,qBAAC,WAAD;EACE,gBAAc,SAAS,SAAS,KAAA;EAChC,WAAW,GAET,2KACA,yDACA,+FAEA,0DAEA,gNAEA,oDACA,SACF;EACA,aAAU;EACV,OAAO,YAAY,QAAQ,KAAA;EAC3B,MAAM,UAAU,KAAA,IAAY;EAC5B,UAAU,UAAU;GAClB,cAAc,KAAK;GACnB,UAAU,KAAK;EACjB;EACA,GAAI;EAtBN,UAAA;GAwBG,WAAW,oBAAC,KAAK,WAAN,EAAiB,SAAyB,CAAA;GACrD,QAAQ,oBAAC,QAAD;IAAM,WAAU;IAAiG,UAAA;GAAW,CAAA;GACpI,oBAAoB,KAAA,KACnB,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA;GAER,oBAAC,QAAD;IAAM,WAAU;IAA+D,UAAA;GAAY,CAAA;GAC1F,UAAU,KAAA,KACT,oBAAC,QAAD;IACE,WAAW,GACT,wIACA,8SACF;IAEA,UAAA,oBAAC,QAAD;KAAM,WAAU;KAA+C,UAAA;IAAY,CAAA;GACvE,CAAA;EAEC;;AAEf;;;;AAKA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAmC;CAC/E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,0HACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,0BAA0B,EAAE,WAAW,SAAS,GAAG,YAAsC;CACpG,MAAM,EAAE,WAAW,UAAU,YAAY,cAAc,kBAAkB,YAAY;CAErF,OACE,qBAAC,UAAD;EACE,WAAW,GAET,uIAEA,wCAEA,qBACA,SACF;EACA,aAAU;EACV,OAAM;EACN,MAAK;EACL,UAAU,UAAU;GAClB,IAAI,UAAU,cAAc,CAAC,UAAU;QAClC,aAAa,CAAC,SAAS;GAC5B,UAAU,KAAK;EACjB;EACA,GAAI;EAlBN,UAAA,CAoBE,oBAAC,WAAD;GAAW,eAAA;GAAY,WAAU;EAAU,CAAA,GAC3C,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAoB,CAAA,CACxC;;AAEZ;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAmC;CAC9E,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,gCAAgC,SAAS;EAAG,aAAU;EAAiB,GAAI;CAAQ,CAAA;AAC/G;;;;AAKA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAsC;CACnF,OACE,oBAAC,UAAD;EACE,WAAW,GAAG,qGAAqG,SAAS;EAC5H,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAoC;CAClF,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,kEAAkE,SAAS;EACzF,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"app-shell.js","names":["_Fragment","DialogPrimitive"],"sources":["../../../src/components/app-shell/app-shell.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog as DialogPrimitive, Slot } from 'radix-ui';\nimport { type ComponentProps, createContext, type ReactNode, use, useState } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useBreakpoint } from '../../lib/use-breakpoint';\nimport { RefineIconBarLeft } from '../../icons/refine-icons';\n\ninterface AppShellContextValue {\n  collapsed: boolean;\n  /** Whether the shell shows its phone layout: the sidebar as a drawer, below `md`. `true` on the server. */\n  isMobile: boolean;\n  mobileOpen: boolean;\n  setCollapsed: (collapsed: boolean) => void;\n  setMobileOpen: (mobileOpen: boolean) => void;\n}\n\nconst AppShellContext = createContext<AppShellContextValue | null>(null);\n\n/**\n * Returns the shell's sidebar state and whether it shows the phone layout; throws outside an `AppShell`.\n */\nexport const useAppShell = () => {\n  const context = use(AppShellContext);\n  if (!context) throw new Error('useAppShell must be used inside an AppShell.');\n\n  return context;\n};\n\ninterface AppShellProps extends ComponentProps<'div'> {\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n}\n\n/**\n * Lays out an internal tool as sidebar plus content, and owns whether the sidebar is collapsed to a rail or open as a mobile drawer.\n */\nexport const AppShell = ({\n  className,\n  collapsed: controlledCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  ...props\n}: AppShellProps) => {\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const collapsed = controlledCollapsed ?? uncontrolledCollapsed;\n  const isMobile = !useBreakpoint('md');\n\n  /**\n   * Updates the collapsed state and reports it to a controlling parent.\n   */\n  const setCollapsed = (nextCollapsed: boolean) => {\n    setUncontrolledCollapsed(nextCollapsed);\n    onCollapsedChange?.(nextCollapsed);\n  };\n\n  return (\n    <AppShellContext value={{ collapsed, isMobile, mobileOpen, setCollapsed, setMobileOpen }}>\n      <div className={cn('flex min-h-dvh bg-canvas text-foreground', className)} data-slot=\"app-shell\" {...props} />\n    </AppShellContext>\n  );\n};\n\ninterface AppShellSidebarProps extends ComponentProps<'aside'> {\n  label?: string;\n}\n\n/**\n * Renders the navigation column: a sticky panel that collapses to an icon rail from `md` up, and an off-canvas drawer below it.\n */\nexport const AppShellSidebar = ({ children, className, label = 'Navigation', ...props }: AppShellSidebarProps) => {\n  const { collapsed, mobileOpen, setMobileOpen } = useAppShell();\n\n  return (\n    <>\n      <aside\n        className={cn(\n          // base\n          'group/sidebar sticky top-0 hidden h-dvh w-64 shrink-0 flex-col gap-2 border-r border-border bg-background md:flex',\n          // animation\n          'transition-[width] duration-300 ease-out-expo data-[collapsed=true]:w-16',\n          className,\n        )}\n        data-collapsed={collapsed}\n        data-slot=\"app-shell-sidebar\"\n        {...props}\n      >\n        {children}\n      </aside>\n      <DialogPrimitive.Root open={mobileOpen} onOpenChange={setMobileOpen}>\n        <DialogPrimitive.Portal>\n          <DialogPrimitive.Overlay\n            className={cn(\n              // base\n              'fixed inset-0 z-40 bg-scrim backdrop-blur-sm md:hidden',\n              // animation\n              'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',\n            )}\n          />\n          <DialogPrimitive.Content\n            aria-describedby={undefined}\n            className={cn(\n              // base\n              'group/sidebar fixed inset-y-0 left-0 z-50 flex w-72 flex-col gap-2 border-r border-border bg-background shadow-float md:hidden',\n              // animation\n              'duration-300 data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:animate-in data-[state=open]:slide-in-from-left',\n            )}\n            data-collapsed={false}\n          >\n            <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n            {children}\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Portal>\n      </DialogPrimitive.Root>\n    </>\n  );\n};\n\n/**\n * Holds the brand row at the top of the sidebar; hides everything but the first child when collapsed.\n */\nexport const SidebarHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex h-14 shrink-0 items-center gap-2 border-b border-border px-4 group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0',\n        className,\n      )}\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Scrolls the sidebar's sections when they outgrow the viewport.\n */\nexport const SidebarContent = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-3 py-3', className)}\n      data-slot=\"sidebar-content\"\n      {...props}\n    />\n  );\n};\n\ninterface SidebarSectionProps extends Omit<ComponentProps<'div'>, 'title'> {\n  title?: ReactNode;\n}\n\n/**\n * Groups related items under a mono caption, which turns into a hairline when the sidebar is a rail.\n */\nexport const SidebarSection = ({ children, className, title, ...props }: SidebarSectionProps) => {\n  return (\n    <div className={cn('flex flex-col gap-0.5', className)} data-slot=\"sidebar-section\" role=\"group\" {...props}>\n      {title && (\n        <div className=\"mb-1 flex h-5 items-center px-2\">\n          <span className=\"eyebrow truncate text-subtle group-data-[collapsed=true]/sidebar:sr-only\">{title}</span>\n          <span\n            aria-hidden\n            className=\"hidden h-px w-full bg-border group-data-[collapsed=true]/sidebar:block\"\n            role=\"presentation\"\n          />\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\ninterface SidebarItemProps extends ComponentProps<'button'> {\n  active?: boolean;\n  asChild?: boolean;\n  badge?: ReactNode;\n  icon?: ReactNode;\n  label: string;\n  number?: number | string;\n}\n\n/**\n * Renders one navigation entry with icon, optional website-style number and badge; pass a router link as the child with `asChild`.\n */\nexport const SidebarItem = ({\n  active = false,\n  asChild = false,\n  badge,\n  children,\n  className,\n  icon,\n  label,\n  number,\n  onClick,\n  ...props\n}: SidebarItemProps) => {\n  const { collapsed, setMobileOpen } = useAppShell();\n  const Component = asChild ? Slot.Root : 'button';\n  const formattedNumber = typeof number === 'number' ? number.toString().padStart(2, '0') : number;\n\n  return (\n    <Component\n      aria-current={active ? 'page' : undefined}\n      className={cn(\n        // base\n        'group/item relative flex h-control-md w-full items-center gap-3 rounded-control px-2.5 text-left text-body-sm text-muted-foreground outline-none select-none focus-ring',\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\",\n        'group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0',\n        // hover\n        'transition-colors hover:bg-hover hover:text-foreground',\n        // active\n        'active:bg-pressed aria-[current=page]:bg-card aria-[current=page]:font-medium aria-[current=page]:text-foreground aria-[current=page]:shadow-soft aria-[current=page]:ring-1 aria-[current=page]:ring-border',\n        // disabled\n        'disabled:pointer-events-none disabled:opacity-45',\n        className,\n      )}\n      data-slot=\"sidebar-item\"\n      title={collapsed ? label : undefined}\n      type={asChild ? undefined : 'button'}\n      onClick={(event) => {\n        setMobileOpen(false);\n        onClick?.(event);\n      }}\n      {...props}\n    >\n      {asChild && <Slot.Slottable>{children}</Slot.Slottable>}\n      {icon && <span className=\"flex text-subtle group-hover/item:text-foreground group-aria-[current=page]/item:text-gem-ink\">{icon}</span>}\n      {formattedNumber !== undefined && (\n        <span className=\"font-mono text-caption text-subtle tabular-nums group-data-[collapsed=true]/sidebar:hidden\">\n          {formattedNumber}\n        </span>\n      )}\n      <span className=\"flex-1 truncate group-data-[collapsed=true]/sidebar:sr-only\">{label}</span>\n      {badge !== undefined && (\n        <span\n          className={cn(\n            'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-gem-soft px-1.5 font-mono text-caption text-gem-ink tabular-nums',\n            'group-data-[collapsed=true]/sidebar:absolute group-data-[collapsed=true]/sidebar:top-1 group-data-[collapsed=true]/sidebar:right-1 group-data-[collapsed=true]/sidebar:size-2 group-data-[collapsed=true]/sidebar:min-w-0 group-data-[collapsed=true]/sidebar:bg-gem group-data-[collapsed=true]/sidebar:p-0',\n          )}\n        >\n          <span className=\"group-data-[collapsed=true]/sidebar:sr-only\">{badge}</span>\n        </span>\n      )}\n    </Component>\n  );\n};\n\n/**\n * Pins account and settings controls to the bottom of the sidebar.\n */\nexport const SidebarFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'mt-auto flex shrink-0 items-center gap-3 border-t border-border p-3 group-data-[collapsed=true]/sidebar:justify-center',\n        className,\n      )}\n      data-slot=\"sidebar-footer\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Toggles the sidebar: collapses it to a rail from `md` up and opens the drawer below it.\n */\nexport const AppShellSidebarTrigger = ({ className, onClick, ...props }: ComponentProps<'button'>) => {\n  const { collapsed, isMobile, mobileOpen, setCollapsed, setMobileOpen } = useAppShell();\n\n  return (\n    <button\n      className={cn(\n        // base\n        'inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-muted-foreground transition-colors focus-ring',\n        // hover\n        'hover:bg-hover hover:text-foreground',\n        // active\n        'active:bg-pressed',\n        className,\n      )}\n      data-slot=\"app-shell-sidebar-trigger\"\n      title=\"Toggle sidebar\"\n      type=\"button\"\n      onClick={(event) => {\n        if (isMobile) setMobileOpen(!mobileOpen);\n        else setCollapsed(!collapsed);\n        onClick?.(event);\n      }}\n      {...props}\n    >\n      <RefineIconBarLeft aria-hidden className=\"size-4\" />\n      <span className=\"sr-only\">Toggle sidebar</span>\n    </button>\n  );\n};\n\n/**\n * Stacks the header and page content to the right of the sidebar.\n */\nexport const AppShellMain = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('flex min-w-0 flex-1 flex-col', className)} data-slot=\"app-shell-main\" {...props} />;\n};\n\n/**\n * Renders the sticky, frosted top bar of the content column, like the refine.studio header.\n */\nexport const AppShellHeader = ({ className, ...props }: ComponentProps<'header'>) => {\n  return (\n    <header\n      className={cn('sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border px-4 glass md:px-6', className)}\n      data-slot=\"app-shell-header\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Holds the page itself, padded and capped for readable line lengths on very wide screens.\n */\nexport const AppShellContent = ({ className, ...props }: ComponentProps<'main'>) => {\n  return (\n    <main\n      className={cn('mx-auto flex w-full max-w-7xl flex-1 flex-col gap-8 p-4 md:p-8', className)}\n      data-slot=\"app-shell-content\"\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,5 +1,5 @@
 import { cn } from "../../lib/cn.js";
-import { ChevronRight, Ellipsis } from "lucide-react";
+import { RefineIconChevronRight, RefineIconMoreHorizontal } from "../../icons/refine-icons.js";
 import { Slot } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/breadcrumb/breadcrumb.tsx
@@ -56,7 +56,7 @@ var BreadcrumbSeparator = ({ children, className, ...props }) => {
 		"data-slot": "breadcrumb-separator",
 		role: "presentation",
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+		children: children ?? /* @__PURE__ */ jsx(RefineIconChevronRight, {})
 	});
 };
 /**
@@ -67,7 +67,7 @@ var BreadcrumbEllipsis = ({ className, ...props }) => {
 		className: cn("flex size-5 items-center justify-center", className),
 		"data-slot": "breadcrumb-ellipsis",
 		...props,
-		children: [/* @__PURE__ */ jsx(Ellipsis, {
+		children: [/* @__PURE__ */ jsx(RefineIconMoreHorizontal, {
 			"aria-hidden": true,
 			className: "size-4",
 			role: "presentation"

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRight, Ellipsis } from 'lucide-react';\nimport { Slot } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\n/**\n * Marks up the trail as a navigation landmark.\n */\nexport const Breadcrumb = ({ ...props }: ComponentProps<'nav'>) => {\n  return <nav aria-label=\"Breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n};\n\nexport const BreadcrumbList = ({ className, ...props }: ComponentProps<'ol'>) => {\n  return (\n    <ol\n      className={cn('flex flex-wrap items-center gap-1.5 text-body-sm break-words text-muted-foreground', className)}\n      data-slot=\"breadcrumb-list\"\n      {...props}\n    />\n  );\n};\n\nexport const BreadcrumbItem = ({ className, ...props }: ComponentProps<'li'>) => {\n  return <li className={cn('inline-flex items-center gap-1.5', className)} data-slot=\"breadcrumb-item\" {...props} />;\n};\n\ninterface BreadcrumbLinkProps extends ComponentProps<'a'> {\n  asChild?: boolean;\n}\n\n/**\n * Links to an ancestor page; pass `asChild` to render your router's link.\n */\nexport const BreadcrumbLink = ({ asChild = false, className, ...props }: BreadcrumbLinkProps) => {\n  const Component = asChild ? Slot.Root : 'a';\n\n  return (\n    <Component\n      className={cn('rounded-sm transition-colors hover:text-foreground focus-ring', className)}\n      data-slot=\"breadcrumb-link\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Names the current page and marks it as such for assistive technology.\n */\nexport const BreadcrumbPage = ({ className, ...props }: ComponentProps<'span'>) => {\n  return (\n    <span\n      aria-current=\"page\"\n      className={cn('font-medium text-foreground', className)}\n      data-slot=\"breadcrumb-page\"\n      {...props}\n    />\n  );\n};\n\nexport const BreadcrumbSeparator = ({ children, className, ...props }: ComponentProps<'li'>) => {\n  return (\n    <li\n      aria-hidden\n      className={cn('text-subtle [&>svg]:size-3.5', className)}\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  );\n};\n\n/**\n * Stands in for collapsed middle crumbs.\n */\nexport const BreadcrumbEllipsis = ({ className, ...props }: ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('flex size-5 items-center justify-center', className)}\n      data-slot=\"breadcrumb-ellipsis\"\n      {...props}\n    >\n      <Ellipsis aria-hidden className=\"size-4\" role=\"presentation\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AASA,IAAa,cAAc,EAAE,GAAG,YAAmC;CACjE,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAkC;CAC/E,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,sFAAsF,SAAS;EAC7G,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAkC;CAC/E,OAAO,oBAAC,MAAD;EAAI,WAAW,GAAG,oCAAoC,SAAS;EAAG,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACnH;;;;AASA,IAAa,kBAAkB,EAAE,UAAU,OAAO,WAAW,GAAG,YAAiC;CAC/F,MAAM,YAAY,UAAU,KAAK,OAAO;CAExC,OACE,oBAAC,WAAD;EACE,WAAW,GAAG,iEAAiE,SAAS;EACxF,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAoC;CACjF,OACE,oBAAC,QAAD;EACE,gBAAa;EACb,WAAW,GAAG,+BAA+B,SAAS;EACtD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,uBAAuB,EAAE,UAAU,WAAW,GAAG,YAAkC;CAC9F,OACE,oBAAC,MAAD;EACE,eAAA;EACA,WAAW,GAAG,gCAAgC,SAAS;EACvD,aAAU;EACV,MAAK;EACL,GAAI;EAEH,UAAA,YAAY,oBAAC,cAAD,CAAe,CAAA;CAC1B,CAAA;AAER;;;;AAKA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAoC;CACrF,OACE,qBAAC,QAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,aAAU;EACV,GAAI;EAHN,UAAA,CAKE,oBAAC,UAAD;GAAU,eAAA;GAAY,WAAU;GAAS,MAAK;EAAgB,CAAA,GAC9D,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAgB,CAAA,CACtC;;AAEV"}
+{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { Slot } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { RefineIconChevronRight, RefineIconMoreHorizontal } from '../../icons/refine-icons';\n\n/**\n * Marks up the trail as a navigation landmark.\n */\nexport const Breadcrumb = ({ ...props }: ComponentProps<'nav'>) => {\n  return <nav aria-label=\"Breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n};\n\nexport const BreadcrumbList = ({ className, ...props }: ComponentProps<'ol'>) => {\n  return (\n    <ol\n      className={cn('flex flex-wrap items-center gap-1.5 text-body-sm break-words text-muted-foreground', className)}\n      data-slot=\"breadcrumb-list\"\n      {...props}\n    />\n  );\n};\n\nexport const BreadcrumbItem = ({ className, ...props }: ComponentProps<'li'>) => {\n  return <li className={cn('inline-flex items-center gap-1.5', className)} data-slot=\"breadcrumb-item\" {...props} />;\n};\n\ninterface BreadcrumbLinkProps extends ComponentProps<'a'> {\n  asChild?: boolean;\n}\n\n/**\n * Links to an ancestor page; pass `asChild` to render your router's link.\n */\nexport const BreadcrumbLink = ({ asChild = false, className, ...props }: BreadcrumbLinkProps) => {\n  const Component = asChild ? Slot.Root : 'a';\n\n  return (\n    <Component\n      className={cn('rounded-sm transition-colors hover:text-foreground focus-ring', className)}\n      data-slot=\"breadcrumb-link\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Names the current page and marks it as such for assistive technology.\n */\nexport const BreadcrumbPage = ({ className, ...props }: ComponentProps<'span'>) => {\n  return (\n    <span\n      aria-current=\"page\"\n      className={cn('font-medium text-foreground', className)}\n      data-slot=\"breadcrumb-page\"\n      {...props}\n    />\n  );\n};\n\nexport const BreadcrumbSeparator = ({ children, className, ...props }: ComponentProps<'li'>) => {\n  return (\n    <li\n      aria-hidden\n      className={cn('text-subtle [&>svg]:size-3.5', className)}\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      {...props}\n    >\n      {children ?? <RefineIconChevronRight />}\n    </li>\n  );\n};\n\n/**\n * Stands in for collapsed middle crumbs.\n */\nexport const BreadcrumbEllipsis = ({ className, ...props }: ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('flex size-5 items-center justify-center', className)}\n      data-slot=\"breadcrumb-ellipsis\"\n      {...props}\n    >\n      <RefineIconMoreHorizontal aria-hidden className=\"size-4\" role=\"presentation\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AASA,IAAa,cAAc,EAAE,GAAG,YAAmC;CACjE,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAkC;CAC/E,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,sFAAsF,SAAS;EAC7G,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAkC;CAC/E,OAAO,oBAAC,MAAD;EAAI,WAAW,GAAG,oCAAoC,SAAS;EAAG,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACnH;;;;AASA,IAAa,kBAAkB,EAAE,UAAU,OAAO,WAAW,GAAG,YAAiC;CAC/F,MAAM,YAAY,UAAU,KAAK,OAAO;CAExC,OACE,oBAAC,WAAD;EACE,WAAW,GAAG,iEAAiE,SAAS;EACxF,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAoC;CACjF,OACE,oBAAC,QAAD;EACE,gBAAa;EACb,WAAW,GAAG,+BAA+B,SAAS;EACtD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,uBAAuB,EAAE,UAAU,WAAW,GAAG,YAAkC;CAC9F,OACE,oBAAC,MAAD;EACE,eAAA;EACA,WAAW,GAAG,gCAAgC,SAAS;EACvD,aAAU;EACV,MAAK;EACL,GAAI;EAEH,UAAA,YAAY,oBAAC,wBAAD,CAAyB,CAAA;CACpC,CAAA;AAER;;;;AAKA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAoC;CACrF,OACE,qBAAC,QAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,aAAU;EACV,GAAI;EAHN,UAAA,CAKE,oBAAC,0BAAD;GAA0B,eAAA;GAAY,WAAU;GAAS,MAAK;EAAgB,CAAA,GAC9E,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAgB,CAAA,CACtC;;AAEV"}

package/dist/components/checkbox/checkbox.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/cn.js";
+import { RefineIconCheck, RefineIconRemoveMinus } from "../../icons/refine-icons.js";
 import { useFieldControl } from "../field/field.js";
-import { Check, Minus } from "lucide-react";
 import { Checkbox } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/checkbox/checkbox.tsx
@@ -16,10 +16,10 @@ var Checkbox$1 = ({ className, ...props }) => {
 		...controlProps,
 		children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
 			className: "group/indicator flex items-center justify-center animate-in zoom-in-50 duration-150",
-			children: [/* @__PURE__ */ jsx(Check, {
+			children: [/* @__PURE__ */ jsx(RefineIconCheck, {
 				className: "size-3.5 group-data-[state=indeterminate]/indicator:hidden",
 				strokeWidth: 3
-			}), /* @__PURE__ */ jsx(Minus, {
+			}), /* @__PURE__ */ jsx(RefineIconRemoveMinus, {
 				className: "hidden size-3.5 group-data-[state=indeterminate]/indicator:block",
 				strokeWidth: 3
 			})]

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["Checkbox","CheckboxPrimitive"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Minus } from 'lucide-react';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useFieldControl } from '../field/field';\n\n/**\n * Renders a checkbox with checked, unchecked and indeterminate (`checked=\"indeterminate\"`) states.\n */\nexport const Checkbox = ({ className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>) => {\n  const controlProps = useFieldControl(props);\n\n  return (\n    <CheckboxPrimitive.Root\n      className={cn(\n        // base\n        'peer inline-flex size-4.5 shrink-0 items-center justify-center rounded-inner border border-input bg-background text-primary-foreground',\n        'transition-[background-color,border-color] duration-150 ease-out-expo',\n        'focus-ring',\n        // hover\n        'hover:border-foreground/40',\n        // checked\n        'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',\n        // invalid\n        'aria-invalid:border-danger',\n        // active\n        'active:scale-90',\n        // disabled\n        'disabled:cursor-not-allowed disabled:opacity-45',\n        className,\n      )}\n      data-slot=\"checkbox\"\n      {...controlProps}\n    >\n      <CheckboxPrimitive.Indicator className=\"group/indicator flex items-center justify-center animate-in zoom-in-50 duration-150\">\n        <Check className=\"size-3.5 group-data-[state=indeterminate]/indicator:hidden\" strokeWidth={3} />\n        <Minus className=\"hidden size-3.5 group-data-[state=indeterminate]/indicator:block\" strokeWidth={3} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAaA,cAAY,EAAE,WAAW,GAAG,YAA2D;CAClG,MAAM,eAAe,gBAAgB,KAAK;CAE1C,OACE,oBAACC,SAAkB,MAAnB;EACE,WAAW,GAET,0IACA,yEACA,cAEA,8BAEA,uJAEA,8BAEA,mBAEA,mDACA,SACF;EACA,aAAU;EACV,GAAI;EAEJ,UAAA,qBAACA,SAAkB,WAAnB;GAA6B,WAAU;GAAvC,UAAA,CACE,oBAAC,OAAD;IAAO,WAAU;IAA6D,aAAa;GAAI,CAAA,GAC/F,oBAAC,OAAD;IAAO,WAAU;IAAmE,aAAa;GAAI,CAAA,CAC1E;;CACP,CAAA;AAE5B"}
+{"version":3,"file":"checkbox.js","names":["Checkbox","CheckboxPrimitive"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useFieldControl } from '../field/field';\nimport { RefineIconCheck, RefineIconRemoveMinus } from '../../icons/refine-icons';\n\n/**\n * Renders a checkbox with checked, unchecked and indeterminate (`checked=\"indeterminate\"`) states.\n */\nexport const Checkbox = ({ className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>) => {\n  const controlProps = useFieldControl(props);\n\n  return (\n    <CheckboxPrimitive.Root\n      className={cn(\n        // base\n        'peer inline-flex size-4.5 shrink-0 items-center justify-center rounded-inner border border-input bg-background text-primary-foreground',\n        'transition-[background-color,border-color] duration-150 ease-out-expo',\n        'focus-ring',\n        // hover\n        'hover:border-foreground/40',\n        // checked\n        'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',\n        // invalid\n        'aria-invalid:border-danger',\n        // active\n        'active:scale-90',\n        // disabled\n        'disabled:cursor-not-allowed disabled:opacity-45',\n        className,\n      )}\n      data-slot=\"checkbox\"\n      {...controlProps}\n    >\n      <CheckboxPrimitive.Indicator className=\"group/indicator flex items-center justify-center animate-in zoom-in-50 duration-150\">\n        <RefineIconCheck className=\"size-3.5 group-data-[state=indeterminate]/indicator:hidden\" strokeWidth={3} />\n        <RefineIconRemoveMinus\n          className=\"hidden size-3.5 group-data-[state=indeterminate]/indicator:block\"\n          strokeWidth={3}\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAaA,cAAY,EAAE,WAAW,GAAG,YAA2D;CAClG,MAAM,eAAe,gBAAgB,KAAK;CAE1C,OACE,oBAACC,SAAkB,MAAnB;EACE,WAAW,GAET,0IACA,yEACA,cAEA,8BAEA,uJAEA,8BAEA,mBAEA,mDACA,SACF;EACA,aAAU;EACV,GAAI;EAEJ,UAAA,qBAACA,SAAkB,WAAnB;GAA6B,WAAU;GAAvC,UAAA,CACE,oBAAC,iBAAD;IAAiB,WAAU;IAA6D,aAAa;GAAI,CAAA,GACzG,oBAAC,uBAAD;IACE,WAAU;IACV,aAAa;GACd,CAAA,CAC0B;;CACP,CAAA;AAE5B"}

package/dist/components/code/code.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/cn.js";
+import { RefineIconCheck, RefineIconCopy } from "../../icons/refine-icons.js";
 import { Button } from "../button/button.js";
-import { Check, Copy } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 // src/components/code/code.tsx
@@ -50,7 +50,7 @@ var CodeBlock = ({ className, code, copyable = true, title, ...props }) => {
 				title: copyLabel,
 				variant: "outline",
 				onClick: handleCopy,
-				children: [isCopied ? /* @__PURE__ */ jsx(Check, { className: "text-success-ink" }) : /* @__PURE__ */ jsx(Copy, {}), /* @__PURE__ */ jsx("span", {
+				children: [isCopied ? /* @__PURE__ */ jsx(RefineIconCheck, { className: "text-success-ink" }) : /* @__PURE__ */ jsx(RefineIconCopy, {}), /* @__PURE__ */ jsx("span", {
 					className: "sr-only",
 					children: copyLabel
 				})]

package/dist/components/code/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","names":[],"sources":["../../../src/components/code/code.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Copy } from 'lucide-react';\nimport { type ComponentProps, useState } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Button } from '../button/button';\n\n/**\n * Inline code in Geist Mono on a muted chip.\n */\nexport const Code = ({ className, ...props }: ComponentProps<'code'>) => {\n  return (\n    <code\n      className={cn(\n        'rounded-sm border bg-muted px-1.5 py-0.5 font-mono text-[0.875em] text-foreground wrap-anywhere',\n        className,\n      )}\n      data-slot=\"code\"\n      {...props}\n    />\n  );\n};\n\ninterface CodeBlockProps extends Omit<ComponentProps<'figure'>, 'children'> {\n  code: string;\n  copyable?: boolean;\n  title?: string;\n}\n\n/**\n * A pre-formatted snippet with an optional filename bar and a copy-to-clipboard button.\n */\nexport const CodeBlock = ({ className, code, copyable = true, title, ...props }: CodeBlockProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  /**\n   * Copies the snippet and flips the button to a check mark for two seconds.\n   */\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(code);\n    setIsCopied(true);\n    window.setTimeout(() => {\n      setIsCopied(false);\n    }, 2000);\n  };\n\n  const copyLabel = isCopied ? 'Copied' : 'Copy code';\n\n  return (\n    <figure\n      className={cn('group/code relative overflow-hidden rounded-card border bg-muted/60', className)}\n      data-slot=\"code-block\"\n      {...props}\n    >\n      {title && (\n        <figcaption className=\"flex h-control-sm items-center border-b px-4 font-mono text-caption text-muted-foreground\">\n          {title}\n        </figcaption>\n      )}\n      <pre className=\"overflow-x-auto p-4 font-mono text-body-sm leading-relaxed\">\n        <code>{code}</code>\n      </pre>\n      {copyable && (\n        <Button\n          className=\"absolute right-2 bottom-2 opacity-0 group-hover/code:opacity-100 focus-visible:opacity-100\"\n          size=\"icon-sm\"\n          title={copyLabel}\n          variant=\"outline\"\n          onClick={handleCopy}\n        >\n          {isCopied ? <Check className=\"text-success-ink\" /> : <Copy />}\n          <span className=\"sr-only\">{copyLabel}</span>\n        </Button>\n      )}\n    </figure>\n  );\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAa,QAAQ,EAAE,WAAW,GAAG,YAAoC;CACvE,OACE,oBAAC,QAAD;EACE,WAAW,GACT,mGACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAWA,IAAa,aAAa,EAAE,WAAW,MAAM,WAAW,MAAM,OAAO,GAAG,YAA4B;CAClG,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;;;;CAK9C,MAAM,aAAa,YAAY;EAC7B,MAAM,UAAU,UAAU,UAAU,IAAI;EACxC,YAAY,IAAI;EAChB,OAAO,iBAAiB;GACtB,YAAY,KAAK;EACnB,GAAG,GAAI;CACT;CAEA,MAAM,YAAY,WAAW,WAAW;CAExC,OACE,qBAAC,UAAD;EACE,WAAW,GAAG,uEAAuE,SAAS;EAC9F,aAAU;EACV,GAAI;EAHN,UAAA;GAKG,SACC,oBAAC,cAAD;IAAY,WAAU;IACnB,UAAA;GACS,CAAA;GAEd,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GACf,CAAA;GACJ,YACC,qBAAC,QAAD;IACE,WAAU;IACV,MAAK;IACL,OAAO;IACP,SAAQ;IACR,SAAS;IALX,UAAA,CAOG,WAAW,oBAAC,OAAD,EAAO,WAAU,mBAAoB,CAAA,IAAI,oBAAC,MAAD,CAAO,CAAA,GAC5D,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA;IAAgB,CAAA,CACrC;;EAEJ;;AAEZ"}
+{"version":3,"file":"code.js","names":[],"sources":["../../../src/components/code/code.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, useState } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Button } from '../button/button';\nimport { RefineIconCheck, RefineIconCopy } from '../../icons/refine-icons';\n\n/**\n * Inline code in Geist Mono on a muted chip.\n */\nexport const Code = ({ className, ...props }: ComponentProps<'code'>) => {\n  return (\n    <code\n      className={cn(\n        'rounded-sm border bg-muted px-1.5 py-0.5 font-mono text-[0.875em] text-foreground wrap-anywhere',\n        className,\n      )}\n      data-slot=\"code\"\n      {...props}\n    />\n  );\n};\n\ninterface CodeBlockProps extends Omit<ComponentProps<'figure'>, 'children'> {\n  code: string;\n  copyable?: boolean;\n  title?: string;\n}\n\n/**\n * A pre-formatted snippet with an optional filename bar and a copy-to-clipboard button.\n */\nexport const CodeBlock = ({ className, code, copyable = true, title, ...props }: CodeBlockProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  /**\n   * Copies the snippet and flips the button to a check mark for two seconds.\n   */\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(code);\n    setIsCopied(true);\n    window.setTimeout(() => {\n      setIsCopied(false);\n    }, 2000);\n  };\n\n  const copyLabel = isCopied ? 'Copied' : 'Copy code';\n\n  return (\n    <figure\n      className={cn('group/code relative overflow-hidden rounded-card border bg-muted/60', className)}\n      data-slot=\"code-block\"\n      {...props}\n    >\n      {title && (\n        <figcaption className=\"flex h-control-sm items-center border-b px-4 font-mono text-caption text-muted-foreground\">\n          {title}\n        </figcaption>\n      )}\n      <pre className=\"overflow-x-auto p-4 font-mono text-body-sm leading-relaxed\">\n        <code>{code}</code>\n      </pre>\n      {copyable && (\n        <Button\n          className=\"absolute right-2 bottom-2 opacity-0 group-hover/code:opacity-100 focus-visible:opacity-100\"\n          size=\"icon-sm\"\n          title={copyLabel}\n          variant=\"outline\"\n          onClick={handleCopy}\n        >\n          {isCopied ? <RefineIconCheck className=\"text-success-ink\" /> : <RefineIconCopy />}\n          <span className=\"sr-only\">{copyLabel}</span>\n        </Button>\n      )}\n    </figure>\n  );\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAa,QAAQ,EAAE,WAAW,GAAG,YAAoC;CACvE,OACE,oBAAC,QAAD;EACE,WAAW,GACT,mGACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAWA,IAAa,aAAa,EAAE,WAAW,MAAM,WAAW,MAAM,OAAO,GAAG,YAA4B;CAClG,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;;;;CAK9C,MAAM,aAAa,YAAY;EAC7B,MAAM,UAAU,UAAU,UAAU,IAAI;EACxC,YAAY,IAAI;EAChB,OAAO,iBAAiB;GACtB,YAAY,KAAK;EACnB,GAAG,GAAI;CACT;CAEA,MAAM,YAAY,WAAW,WAAW;CAExC,OACE,qBAAC,UAAD;EACE,WAAW,GAAG,uEAAuE,SAAS;EAC9F,aAAU;EACV,GAAI;EAHN,UAAA;GAKG,SACC,oBAAC,cAAD;IAAY,WAAU;IACnB,UAAA;GACS,CAAA;GAEd,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GACf,CAAA;GACJ,YACC,qBAAC,QAAD;IACE,WAAU;IACV,MAAK;IACL,OAAO;IACP,SAAQ;IACR,SAAS;IALX,UAAA,CAOG,WAAW,oBAAC,iBAAD,EAAiB,WAAU,mBAAoB,CAAA,IAAI,oBAAC,gBAAD,CAAiB,CAAA,GAChF,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA;IAAgB,CAAA,CACrC;;EAEJ;;AAEZ"}

package/dist/components/collapsible/collapsible.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../../lib/cn.js";
-import { ChevronDown } from "lucide-react";
+import { RefineIconChevronDown } from "../../icons/refine-icons.js";
 import { Collapsible } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/collapsible/collapsible.tsx
@@ -29,7 +29,7 @@ var CollapsibleTrigger = ({ asChild = false, children, className, ...props }) =>
 		className: cn("group/collapsible flex w-full items-center justify-between gap-4 rounded-control py-4 text-left text-body font-medium transition-colors focus-ring", "hover:text-gem-ink", "disabled:pointer-events-none disabled:opacity-45", className),
 		"data-slot": "collapsible-trigger",
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+		children: [children, /* @__PURE__ */ jsx(RefineIconChevronDown, {
 			"aria-hidden": true,
 			className: "size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out-expo group-data-[state=open]/collapsible:rotate-180",
 			role: "presentation"

package/dist/components/collapsible/collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","names":["Collapsible","CollapsiblePrimitive"],"sources":["../../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { Collapsible as CollapsiblePrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\n/**\n * Holds one fold-out section: a trigger that opens and shuts the content under it.\n */\nexport const Collapsible = ({ className, ...props }: ComponentProps<typeof CollapsiblePrimitive.Root>) => {\n  return <CollapsiblePrimitive.Root className={cn('w-full', className)} data-slot=\"collapsible\" {...props} />;\n};\n\n/**\n * Toggles its section and turns the chevron to show the state. With `asChild` it renders the child alone, with no chevron and no styles.\n */\nexport const CollapsibleTrigger = ({\n  asChild = false,\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Trigger>) => {\n  if (asChild) {\n    return (\n      <CollapsiblePrimitive.Trigger asChild className={className} data-slot=\"collapsible-trigger\" {...props}>\n        {children}\n      </CollapsiblePrimitive.Trigger>\n    );\n  }\n\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cn(\n        // base\n        'group/collapsible flex w-full items-center justify-between gap-4 rounded-control py-4 text-left text-body font-medium transition-colors focus-ring',\n        // hover\n        'hover:text-gem-ink',\n        // disabled\n        'disabled:pointer-events-none disabled:opacity-45',\n        className,\n      )}\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronDown\n        aria-hidden\n        className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out-expo group-data-[state=open]/collapsible:rotate-180\"\n        role=\"presentation\"\n      />\n    </CollapsiblePrimitive.Trigger>\n  );\n};\n\n/**\n * Reveals its section with a height animation.\n */\nexport const CollapsibleContent = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Content>) => {\n  return (\n    <CollapsiblePrimitive.Content\n      className=\"overflow-hidden text-body-sm text-muted-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\"\n      data-slot=\"collapsible-content\"\n      {...props}\n    >\n      <div className={cn('pb-4', className)}>{children}</div>\n    </CollapsiblePrimitive.Content>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,IAAaA,iBAAe,EAAE,WAAW,GAAG,YAA8D;CACxG,OAAO,oBAACC,YAAqB,MAAtB;EAA2B,WAAW,GAAG,UAAU,SAAS;EAAG,aAAU;EAAc,GAAI;CAAQ,CAAA;AAC5G;;;;AAKA,IAAa,sBAAsB,EACjC,UAAU,OACV,UACA,WACA,GAAG,YACsD;CACzD,IAAI,SACF,OACE,oBAACA,YAAqB,SAAtB;EAA8B,SAAA;EAAmB;EAAW,aAAU;EAAsB,GAAI;EAC7F;CAC2B,CAAA;CAIlC,OACE,qBAACA,YAAqB,SAAtB;EACE,WAAW,GAET,sJAEA,sBAEA,oDACA,SACF;EACA,aAAU;EACV,GAAI;EAXN,UAAA,CAaG,UACD,oBAAC,aAAD;GACE,eAAA;GACA,WAAU;GACV,MAAK;EACN,CAAA,CAC2B;;AAElC;;;;AAKA,IAAa,sBAAsB,EACjC,UACA,WACA,GAAG,YACsD;CACzD,OACE,oBAACA,YAAqB,SAAtB;EACE,WAAU;EACV,aAAU;EACV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,QAAQ,SAAS;GAAI;EAAc,CAAA;CAC1B,CAAA;AAElC"}
+{"version":3,"file":"collapsible.js","names":["Collapsible","CollapsiblePrimitive"],"sources":["../../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible as CollapsiblePrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { RefineIconChevronDown } from '../../icons/refine-icons';\n\n/**\n * Holds one fold-out section: a trigger that opens and shuts the content under it.\n */\nexport const Collapsible = ({ className, ...props }: ComponentProps<typeof CollapsiblePrimitive.Root>) => {\n  return <CollapsiblePrimitive.Root className={cn('w-full', className)} data-slot=\"collapsible\" {...props} />;\n};\n\n/**\n * Toggles its section and turns the chevron to show the state. With `asChild` it renders the child alone, with no chevron and no styles.\n */\nexport const CollapsibleTrigger = ({\n  asChild = false,\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Trigger>) => {\n  if (asChild) {\n    return (\n      <CollapsiblePrimitive.Trigger asChild className={className} data-slot=\"collapsible-trigger\" {...props}>\n        {children}\n      </CollapsiblePrimitive.Trigger>\n    );\n  }\n\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cn(\n        // base\n        'group/collapsible flex w-full items-center justify-between gap-4 rounded-control py-4 text-left text-body font-medium transition-colors focus-ring',\n        // hover\n        'hover:text-gem-ink',\n        // disabled\n        'disabled:pointer-events-none disabled:opacity-45',\n        className,\n      )}\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    >\n      {children}\n      <RefineIconChevronDown\n        aria-hidden\n        className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out-expo group-data-[state=open]/collapsible:rotate-180\"\n        role=\"presentation\"\n      />\n    </CollapsiblePrimitive.Trigger>\n  );\n};\n\n/**\n * Reveals its section with a height animation.\n */\nexport const CollapsibleContent = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Content>) => {\n  return (\n    <CollapsiblePrimitive.Content\n      className=\"overflow-hidden text-body-sm text-muted-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\"\n      data-slot=\"collapsible-content\"\n      {...props}\n    >\n      <div className={cn('pb-4', className)}>{children}</div>\n    </CollapsiblePrimitive.Content>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,IAAaA,iBAAe,EAAE,WAAW,GAAG,YAA8D;CACxG,OAAO,oBAACC,YAAqB,MAAtB;EAA2B,WAAW,GAAG,UAAU,SAAS;EAAG,aAAU;EAAc,GAAI;CAAQ,CAAA;AAC5G;;;;AAKA,IAAa,sBAAsB,EACjC,UAAU,OACV,UACA,WACA,GAAG,YACsD;CACzD,IAAI,SACF,OACE,oBAACA,YAAqB,SAAtB;EAA8B,SAAA;EAAmB;EAAW,aAAU;EAAsB,GAAI;EAC7F;CAC2B,CAAA;CAIlC,OACE,qBAACA,YAAqB,SAAtB;EACE,WAAW,GAET,sJAEA,sBAEA,oDACA,SACF;EACA,aAAU;EACV,GAAI;EAXN,UAAA,CAaG,UACD,oBAAC,uBAAD;GACE,eAAA;GACA,WAAU;GACV,MAAK;EACN,CAAA,CAC2B;;AAElC;;;;AAKA,IAAa,sBAAsB,EACjC,UACA,WACA,GAAG,YACsD;CACzD,OACE,oBAACA,YAAqB,SAAtB;EACE,WAAU;EACV,aAAU;EACV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,QAAQ,SAAS;GAAI;EAAc,CAAA;CAC1B,CAAA;AAElC"}

package/dist/components/command-menu/command-menu.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/cn.js";
+import { RefineIconSearchMagnifyingGlass } from "../../icons/refine-icons.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../dialog/dialog.js";
-import { Search } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Command } from "cmdk";
 // src/components/command-menu/command-menu.tsx
@@ -49,7 +49,7 @@ var CommandInput = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-3 border-b px-4",
 		"data-slot": "command-input-wrapper",
-		children: [/* @__PURE__ */ jsx(Search, {
+		children: [/* @__PURE__ */ jsx(RefineIconSearchMagnifyingGlass, {
 			"aria-hidden": true,
 			className: "size-4 shrink-0 text-muted-foreground",
 			role: "presentation"

package/dist/components/command-menu/command-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-menu.js","names":["Command","CommandPrimitive"],"sources":["../../../src/components/command-menu/command-menu.tsx"],"sourcesContent":["'use client';\n\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '../dialog/dialog';\n\n/**\n * Filters and navigates a list of commands with the keyboard; use it inline or inside `CommandMenu`.\n */\nexport const Command = ({ className, ...props }: ComponentProps<typeof CommandPrimitive>) => {\n  return (\n    <CommandPrimitive\n      className={cn('flex size-full flex-col overflow-hidden bg-popover text-popover-foreground', className)}\n      data-slot=\"command\"\n      {...props}\n    />\n  );\n};\n\ninterface CommandMenuProps extends ComponentProps<typeof Dialog> {\n  description?: string;\n  title?: string;\n}\n\n/**\n * Wraps a `Command` palette in a dialog, the ⌘K pattern; the title and description are announced but not shown.\n */\nexport const CommandMenu = ({\n  children,\n  description = 'Search for a command to run.',\n  title = 'Command palette',\n  ...props\n}: CommandMenuProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"top-[20dvh] translate-y-0 p-0\" showClose={false} size=\"lg\">\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command className=\"max-h-[min(32rem,70dvh)]\">{children}</Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\n/**\n * Renders the search field with a leading magnifier.\n */\nexport const CommandInput = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>) => {\n  return (\n    <div className=\"flex items-center gap-3 border-b px-4\" data-slot=\"command-input-wrapper\">\n      <Search aria-hidden className=\"size-4 shrink-0 text-muted-foreground\" role=\"presentation\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'flex h-control-xl w-full bg-transparent text-body outline-none placeholder:text-subtle disabled:cursor-not-allowed disabled:opacity-45',\n          className,\n        )}\n        data-slot=\"command-input\"\n        {...props}\n      />\n    </div>\n  );\n};\n\nexport const CommandList = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>) => {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-96 scroll-py-2 overflow-x-hidden overflow-y-auto p-2', className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Shows when nothing matches the query.\n */\nexport const CommandEmpty = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>) => {\n  return (\n    <CommandPrimitive.Empty\n      className={cn('py-10 text-center text-body-sm text-muted-foreground', className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n};\n\nexport const CommandGroup = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>) => {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-subtle',\n        className,\n      )}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n};\n\nexport const CommandSeparator = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>) => {\n  return (\n    <CommandPrimitive.Separator\n      className={cn('-mx-2 my-1 h-px bg-border', className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Runs a command; the highlighted item takes a gem tint.\n */\nexport const CommandItem = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>) => {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        // base\n        'relative flex cursor-default items-center gap-3 rounded-control px-2.5 py-2 text-body-sm outline-none select-none',\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        // hover\n        'data-[selected=true]:bg-gem-soft data-[selected=true]:text-foreground data-[selected=true]:[&_svg:not([class*=\"text-\"])]:text-gem-ink',\n        // disabled\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45',\n        className,\n      )}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Right-aligns a keyboard shortcut hint inside an item.\n */\nexport const CommandShortcut = ({ className, ...props }: ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('ml-auto font-mono text-caption tracking-wide text-subtle', className)}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAaA,aAAW,EAAE,WAAW,GAAG,YAAqD;CAC3F,OACE,oBAACC,SAAD;EACE,WAAW,GAAG,8EAA8E,SAAS;EACrG,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAUA,IAAa,eAAe,EAC1B,UACA,cAAc,gCACd,QAAQ,mBACR,GAAG,YACmB;CACtB,OACE,oBAAC,QAAD;EAAQ,GAAI;EACV,UAAA,qBAAC,eAAD;GAAe,WAAU;GAAgC,WAAW;GAAO,MAAK;GAAhF,UAAA;IACE,oBAAC,aAAD;KAAa,WAAU;KAAW,UAAA;IAAmB,CAAA;IACrD,oBAAC,mBAAD;KAAmB,WAAU;KAAW,UAAA;IAA+B,CAAA;IACvE,oBAACD,WAAD;KAAS,WAAU;KAA4B;IAAkB,CAAA;GACpD;;CACT,CAAA;AAEZ;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA2D;CACtG,OACE,qBAAC,OAAD;EAAK,WAAU;EAAwC,aAAU;EAAjE,UAAA,CACE,oBAAC,QAAD;GAAQ,eAAA;GAAY,WAAU;GAAwC,MAAK;EAAgB,CAAA,GAC3F,oBAACC,QAAiB,OAAlB;GACE,WAAW,GACT,0IACA,SACF;GACA,aAAU;GACV,GAAI;EACL,CAAA,CACE;;AAET;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,QAAiB,MAAlB;EACE,WAAW,GAAG,8DAA8D,SAAS;EACrF,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA2D;CACtG,OACE,oBAACA,QAAiB,OAAlB;EACE,WAAW,GAAG,wDAAwD,SAAS;EAC/E,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA2D;CACtG,OACE,oBAACA,QAAiB,OAAlB;EACE,WAAW,GACT,0MACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA+D;CAC9G,OACE,oBAACA,QAAiB,WAAlB;EACE,WAAW,GAAG,6BAA6B,SAAS;EACpD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,QAAiB,MAAlB;EACE,WAAW,GAET,qHACA,yIAEA,2IAEA,4EACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAoC;CAClF,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,4DAA4D,SAAS;EACnF,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"command-menu.js","names":["Command","CommandPrimitive"],"sources":["../../../src/components/command-menu/command-menu.tsx"],"sourcesContent":["'use client';\n\nimport { Command as CommandPrimitive } from 'cmdk';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '../dialog/dialog';\nimport { RefineIconSearchMagnifyingGlass } from '../../icons/refine-icons';\n\n/**\n * Filters and navigates a list of commands with the keyboard; use it inline or inside `CommandMenu`.\n */\nexport const Command = ({ className, ...props }: ComponentProps<typeof CommandPrimitive>) => {\n  return (\n    <CommandPrimitive\n      className={cn('flex size-full flex-col overflow-hidden bg-popover text-popover-foreground', className)}\n      data-slot=\"command\"\n      {...props}\n    />\n  );\n};\n\ninterface CommandMenuProps extends ComponentProps<typeof Dialog> {\n  description?: string;\n  title?: string;\n}\n\n/**\n * Wraps a `Command` palette in a dialog, the ⌘K pattern; the title and description are announced but not shown.\n */\nexport const CommandMenu = ({\n  children,\n  description = 'Search for a command to run.',\n  title = 'Command palette',\n  ...props\n}: CommandMenuProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"top-[20dvh] translate-y-0 p-0\" showClose={false} size=\"lg\">\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command className=\"max-h-[min(32rem,70dvh)]\">{children}</Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\n/**\n * Renders the search field with a leading magnifier.\n */\nexport const CommandInput = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>) => {\n  return (\n    <div className=\"flex items-center gap-3 border-b px-4\" data-slot=\"command-input-wrapper\">\n      <RefineIconSearchMagnifyingGlass\n        aria-hidden\n        className=\"size-4 shrink-0 text-muted-foreground\"\n        role=\"presentation\"\n      />\n      <CommandPrimitive.Input\n        className={cn(\n          'flex h-control-xl w-full bg-transparent text-body outline-none placeholder:text-subtle disabled:cursor-not-allowed disabled:opacity-45',\n          className,\n        )}\n        data-slot=\"command-input\"\n        {...props}\n      />\n    </div>\n  );\n};\n\nexport const CommandList = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>) => {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-96 scroll-py-2 overflow-x-hidden overflow-y-auto p-2', className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Shows when nothing matches the query.\n */\nexport const CommandEmpty = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>) => {\n  return (\n    <CommandPrimitive.Empty\n      className={cn('py-10 text-center text-body-sm text-muted-foreground', className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n};\n\nexport const CommandGroup = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>) => {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-subtle',\n        className,\n      )}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n};\n\nexport const CommandSeparator = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>) => {\n  return (\n    <CommandPrimitive.Separator\n      className={cn('-mx-2 my-1 h-px bg-border', className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Runs a command; the highlighted item takes a gem tint.\n */\nexport const CommandItem = ({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>) => {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        // base\n        'relative flex cursor-default items-center gap-3 rounded-control px-2.5 py-2 text-body-sm outline-none select-none',\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        // hover\n        'data-[selected=true]:bg-gem-soft data-[selected=true]:text-foreground data-[selected=true]:[&_svg:not([class*=\"text-\"])]:text-gem-ink',\n        // disabled\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45',\n        className,\n      )}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Right-aligns a keyboard shortcut hint inside an item.\n */\nexport const CommandShortcut = ({ className, ...props }: ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('ml-auto font-mono text-caption tracking-wide text-subtle', className)}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAaA,aAAW,EAAE,WAAW,GAAG,YAAqD;CAC3F,OACE,oBAACC,SAAD;EACE,WAAW,GAAG,8EAA8E,SAAS;EACrG,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAUA,IAAa,eAAe,EAC1B,UACA,cAAc,gCACd,QAAQ,mBACR,GAAG,YACmB;CACtB,OACE,oBAAC,QAAD;EAAQ,GAAI;EACV,UAAA,qBAAC,eAAD;GAAe,WAAU;GAAgC,WAAW;GAAO,MAAK;GAAhF,UAAA;IACE,oBAAC,aAAD;KAAa,WAAU;KAAW,UAAA;IAAmB,CAAA;IACrD,oBAAC,mBAAD;KAAmB,WAAU;KAAW,UAAA;IAA+B,CAAA;IACvE,oBAACD,WAAD;KAAS,WAAU;KAA4B;IAAkB,CAAA;GACpD;;CACT,CAAA;AAEZ;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA2D;CACtG,OACE,qBAAC,OAAD;EAAK,WAAU;EAAwC,aAAU;EAAjE,UAAA,CACE,oBAAC,iCAAD;GACE,eAAA;GACA,WAAU;GACV,MAAK;EACN,CAAA,GACD,oBAACC,QAAiB,OAAlB;GACE,WAAW,GACT,0IACA,SACF;GACA,aAAU;GACV,GAAI;EACL,CAAA,CACE;;AAET;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,QAAiB,MAAlB;EACE,WAAW,GAAG,8DAA8D,SAAS;EACrF,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA2D;CACtG,OACE,oBAACA,QAAiB,OAAlB;EACE,WAAW,GAAG,wDAAwD,SAAS;EAC/E,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA2D;CACtG,OACE,oBAACA,QAAiB,OAAlB;EACE,WAAW,GACT,0MACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA+D;CAC9G,OACE,oBAACA,QAAiB,WAAlB;EACE,WAAW,GAAG,6BAA6B,SAAS;EACpD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,QAAiB,MAAlB;EACE,WAAW,GAET,qHACA,yIAEA,2IAEA,4EACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAoC;CAClF,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,4DAA4D,SAAS;EACnF,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}

package/dist/components/context-menu/context-menu.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/cn.js";
+import { RefineIconCheck, RefineIconChevronRight, RefineIconCircleFilled } from "../../icons/refine-icons.js";
 import { MENU_CONTENT_CLASS_NAME, MENU_INDICATOR_CLASS_NAME, MENU_INDICATOR_ITEM_CLASS_NAME, MENU_LABEL_CLASS_NAME, MENU_SEPARATOR_CLASS_NAME, MENU_SHORTCUT_CLASS_NAME, menuItemVariants } from "../dropdown-menu/menu-styles.js";
-import { Check, ChevronRight, Circle } from "lucide-react";
 import { ContextMenu } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/context-menu/context-menu.tsx
@@ -71,7 +71,7 @@ var ContextMenuCheckboxItem = ({ children, className, ...props }) => {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: MENU_INDICATOR_CLASS_NAME,
-			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4 text-gem-ink" }) })
+			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(RefineIconCheck, { className: "size-4 text-gem-ink" }) })
 		}), children]
 	});
 };
@@ -85,7 +85,7 @@ var ContextMenuRadioItem = ({ children, className, ...props }) => {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: MENU_INDICATOR_CLASS_NAME,
-			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "size-2 fill-current text-gem-ink" }) })
+			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(RefineIconCircleFilled, { className: "size-2 text-gem-ink" }) })
 		}), children]
 	});
 };
@@ -121,7 +121,7 @@ var ContextMenuSubTrigger = ({ children, className, inset, ...props }) => {
 		className: cn(menuItemVariants({ inset }), className),
 		"data-slot": "context-menu-sub-trigger",
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })]
+		children: [children, /* @__PURE__ */ jsx(RefineIconChevronRight, { className: "ml-auto size-4" })]
 	});
 };
 var ContextMenuSubContent = ({ className, ...props }) => {

package/dist/components/context-menu/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":["ContextMenu","ContextMenuPrimitive"],"sources":["../../../src/components/context-menu/context-menu.tsx"],"sourcesContent":["'use client';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { Check, ChevronRight, Circle } from 'lucide-react';\nimport { ContextMenu as ContextMenuPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport {\n  MENU_CONTENT_CLASS_NAME,\n  MENU_INDICATOR_CLASS_NAME,\n  MENU_INDICATOR_ITEM_CLASS_NAME,\n  MENU_LABEL_CLASS_NAME,\n  MENU_SEPARATOR_CLASS_NAME,\n  MENU_SHORTCUT_CLASS_NAME,\n  menuItemVariants,\n} from '../dropdown-menu/menu-styles';\n\n/**\n * Holds the open state of a menu of actions opened by right-clicking or long-pressing its trigger area.\n */\nexport const ContextMenu = (props: ComponentProps<typeof ContextMenuPrimitive.Root>) => {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n};\n\nexport const ContextMenuTrigger = (props: ComponentProps<typeof ContextMenuPrimitive.Trigger>) => {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n};\n\nexport const ContextMenuGroup = (props: ComponentProps<typeof ContextMenuPrimitive.Group>) => {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n};\n\nexport const ContextMenuRadioGroup = (props: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) => {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n};\n\nexport const ContextMenuSub = (props: ComponentProps<typeof ContextMenuPrimitive.Sub>) => {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n};\n\n/**\n * Portals the menu panel at the pointer.\n */\nexport const ContextMenuContent = ({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.Content>) => {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        className={cn(MENU_CONTENT_CLASS_NAME, 'origin-(--radix-context-menu-content-transform-origin)', className)}\n        data-slot=\"context-menu-content\"\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n};\n\ntype ContextMenuItemProps = ComponentProps<typeof ContextMenuPrimitive.Item> & VariantProps<typeof menuItemVariants>;\n\n/**\n * Runs an action; the `danger` variant marks destructive ones.\n */\nexport const ContextMenuItem = ({ className, inset, variant, ...props }: ContextMenuItemProps) => {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(menuItemVariants({ inset, variant }), className)}\n      data-slot=\"context-menu-item\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Toggles a setting and shows a check while it is on.\n */\nexport const ContextMenuCheckboxItem = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) => {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      className={cn(MENU_INDICATOR_ITEM_CLASS_NAME, className)}\n      data-slot=\"context-menu-checkbox-item\"\n      {...props}\n    >\n      <span className={MENU_INDICATOR_CLASS_NAME}>\n        <ContextMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-gem-ink\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n};\n\n/**\n * Picks one option of its radio group and marks it with a dot.\n */\nexport const ContextMenuRadioItem = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) => {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      className={cn(MENU_INDICATOR_ITEM_CLASS_NAME, className)}\n      data-slot=\"context-menu-radio-item\"\n      {...props}\n    >\n      <span className={MENU_INDICATOR_CLASS_NAME}>\n        <ContextMenuPrimitive.ItemIndicator>\n          <Circle className=\"size-2 fill-current text-gem-ink\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n};\n\nexport const ContextMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn(MENU_LABEL_CLASS_NAME, { 'pl-8': inset }, className)}\n      data-slot=\"context-menu-label\"\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuSeparator = ({\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.Separator>) => {\n  return (\n    <ContextMenuPrimitive.Separator\n      className={cn(MENU_SEPARATOR_CLASS_NAME, className)}\n      data-slot=\"context-menu-separator\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Right-aligns a keyboard shortcut hint inside an item.\n */\nexport const ContextMenuShortcut = ({ className, ...props }: ComponentProps<'span'>) => {\n  return <span className={cn(MENU_SHORTCUT_CLASS_NAME, className)} data-slot=\"context-menu-shortcut\" {...props} />;\n};\n\n/**\n * Opens a nested menu and points at it with a chevron.\n */\nexport const ContextMenuSubTrigger = ({\n  children,\n  className,\n  inset,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      className={cn(menuItemVariants({ inset }), className)}\n      data-slot=\"context-menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n};\n\nexport const ContextMenuSubContent = ({\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.SubContent>) => {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.SubContent\n        className={cn(MENU_CONTENT_CLASS_NAME, 'origin-(--radix-context-menu-content-transform-origin)', className)}\n        data-slot=\"context-menu-sub-content\"\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"context-menu.js","names":["ContextMenu","ContextMenuPrimitive"],"sources":["../../../src/components/context-menu/context-menu.tsx"],"sourcesContent":["'use client';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { ContextMenu as ContextMenuPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport {\n  MENU_CONTENT_CLASS_NAME,\n  MENU_INDICATOR_CLASS_NAME,\n  MENU_INDICATOR_ITEM_CLASS_NAME,\n  MENU_LABEL_CLASS_NAME,\n  MENU_SEPARATOR_CLASS_NAME,\n  MENU_SHORTCUT_CLASS_NAME,\n  menuItemVariants,\n} from '../dropdown-menu/menu-styles';\nimport { RefineIconCheck, RefineIconChevronRight, RefineIconCircleFilled } from '../../icons/refine-icons';\n\n/**\n * Holds the open state of a menu of actions opened by right-clicking or long-pressing its trigger area.\n */\nexport const ContextMenu = (props: ComponentProps<typeof ContextMenuPrimitive.Root>) => {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n};\n\nexport const ContextMenuTrigger = (props: ComponentProps<typeof ContextMenuPrimitive.Trigger>) => {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n};\n\nexport const ContextMenuGroup = (props: ComponentProps<typeof ContextMenuPrimitive.Group>) => {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n};\n\nexport const ContextMenuRadioGroup = (props: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) => {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n};\n\nexport const ContextMenuSub = (props: ComponentProps<typeof ContextMenuPrimitive.Sub>) => {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n};\n\n/**\n * Portals the menu panel at the pointer.\n */\nexport const ContextMenuContent = ({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.Content>) => {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        className={cn(MENU_CONTENT_CLASS_NAME, 'origin-(--radix-context-menu-content-transform-origin)', className)}\n        data-slot=\"context-menu-content\"\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n};\n\ntype ContextMenuItemProps = ComponentProps<typeof ContextMenuPrimitive.Item> & VariantProps<typeof menuItemVariants>;\n\n/**\n * Runs an action; the `danger` variant marks destructive ones.\n */\nexport const ContextMenuItem = ({ className, inset, variant, ...props }: ContextMenuItemProps) => {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(menuItemVariants({ inset, variant }), className)}\n      data-slot=\"context-menu-item\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Toggles a setting and shows a check while it is on.\n */\nexport const ContextMenuCheckboxItem = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) => {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      className={cn(MENU_INDICATOR_ITEM_CLASS_NAME, className)}\n      data-slot=\"context-menu-checkbox-item\"\n      {...props}\n    >\n      <span className={MENU_INDICATOR_CLASS_NAME}>\n        <ContextMenuPrimitive.ItemIndicator>\n          <RefineIconCheck className=\"size-4 text-gem-ink\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n};\n\n/**\n * Picks one option of its radio group and marks it with a dot.\n */\nexport const ContextMenuRadioItem = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) => {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      className={cn(MENU_INDICATOR_ITEM_CLASS_NAME, className)}\n      data-slot=\"context-menu-radio-item\"\n      {...props}\n    >\n      <span className={MENU_INDICATOR_CLASS_NAME}>\n        <ContextMenuPrimitive.ItemIndicator>\n          <RefineIconCircleFilled className=\"size-2 text-gem-ink\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n};\n\nexport const ContextMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn(MENU_LABEL_CLASS_NAME, { 'pl-8': inset }, className)}\n      data-slot=\"context-menu-label\"\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuSeparator = ({\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.Separator>) => {\n  return (\n    <ContextMenuPrimitive.Separator\n      className={cn(MENU_SEPARATOR_CLASS_NAME, className)}\n      data-slot=\"context-menu-separator\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Right-aligns a keyboard shortcut hint inside an item.\n */\nexport const ContextMenuShortcut = ({ className, ...props }: ComponentProps<'span'>) => {\n  return <span className={cn(MENU_SHORTCUT_CLASS_NAME, className)} data-slot=\"context-menu-shortcut\" {...props} />;\n};\n\n/**\n * Opens a nested menu and points at it with a chevron.\n */\nexport const ContextMenuSubTrigger = ({\n  children,\n  className,\n  inset,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      className={cn(menuItemVariants({ inset }), className)}\n      data-slot=\"context-menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <RefineIconChevronRight className=\"ml-auto size-4\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n};\n\nexport const ContextMenuSubContent = ({\n  className,\n  ...props\n}: ComponentProps<typeof ContextMenuPrimitive.SubContent>) => {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.SubContent\n        className={cn(MENU_CONTENT_CLASS_NAME, 'origin-(--radix-context-menu-content-transform-origin)', className)}\n        data-slot=\"context-menu-sub-content\"\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n};\n"],"mappings":"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"}

package/dist/components/dialog/dialog.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../../lib/cn.js";
-import { X } from "lucide-react";
+import { RefineIconCloseMD } from "../../icons/refine-icons.js";
 import { Dialog } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
@@ -62,7 +62,7 @@ var DialogContent = ({ children, className, showClose = true, size, ...props })
 		children: [children, showClose && /* @__PURE__ */ jsxs(Dialog.Close, {
 			className: DIALOG_CLOSE_CLASS_NAME,
 			title: "Close",
-			children: [/* @__PURE__ */ jsx(X, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			children: [/* @__PURE__ */ jsx(RefineIconCloseMD, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
 				children: "Close"
 			})]

package/dist/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\nexport const DIALOG_OVERLAY_CLASS_NAME = cn(\n  // base\n  'fixed inset-0 z-50 bg-scrim backdrop-blur-sm',\n  // animation\n  'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',\n);\n\nexport const DIALOG_CLOSE_CLASS_NAME = cn(\n  // base\n  'absolute top-4 right-4 inline-flex size-control-sm items-center justify-center rounded-control text-muted-foreground transition-colors focus-ring',\n  // hover\n  'hover:bg-hover hover:text-foreground',\n  // active\n  'active:bg-pressed',\n  // disabled\n  'disabled:pointer-events-none disabled:opacity-45',\n);\n\nconst dialogContentVariants = cva(\n  [\n    // base\n    'fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden',\n    'rounded-panel border bg-popover text-popover-foreground shadow-float outline-none',\n    // animation\n    'duration-200 ease-out-expo 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  ],\n  {\n    variants: {\n      size: {\n        sm: 'max-w-sm',\n        md: 'max-w-lg',\n        lg: 'max-w-2xl',\n        xl: 'max-w-4xl',\n        full: 'h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\n/**\n * Holds the open state of a modal dialog.\n */\nexport const Dialog = (props: ComponentProps<typeof DialogPrimitive.Root>) => {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n};\n\n/**\n * Opens the dialog; pass `asChild` to turn any button into the trigger.\n */\nexport const DialogTrigger = (props: ComponentProps<typeof DialogPrimitive.Trigger>) => {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n};\n\n/**\n * Closes the dialog; pass `asChild` to turn any button into the close action.\n */\nexport const DialogClose = (props: ComponentProps<typeof DialogPrimitive.Close>) => {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n};\n\ninterface DialogContentProps\n  extends ComponentProps<typeof DialogPrimitive.Content>,\n    VariantProps<typeof dialogContentVariants> {\n  showClose?: boolean;\n}\n\n/**\n * Portals the dialog panel above a blurred scrim, with an optional corner close button.\n */\nexport const DialogContent = ({ children, className, showClose = true, size, ...props }: DialogContentProps) => {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay className={DIALOG_OVERLAY_CLASS_NAME} data-slot=\"dialog-overlay\" />\n      <DialogPrimitive.Content\n        className={cn(dialogContentVariants({ size }), className)}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n        {showClose && (\n          <DialogPrimitive.Close className={DIALOG_CLOSE_CLASS_NAME} title=\"Close\">\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n};\n\n/**\n * Stacks the title and description at the top of the panel.\n */\nexport const DialogHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('flex flex-col gap-1.5 px-6 pt-6 pr-14', className)} data-slot=\"dialog-header\" {...props} />;\n};\n\n/**\n * Scrolls the dialog's main content when it outgrows the viewport.\n */\nexport const DialogBody = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4 text-body-sm text-muted-foreground', className)}\n      data-slot=\"dialog-body\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Right-aligns the dialog's actions, stacking them on narrow screens.\n */\nexport const DialogFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col-reverse gap-2 border-t bg-muted/50 px-6 py-4 sm:flex-row sm:justify-end',\n        className,\n      )}\n      data-slot=\"dialog-footer\"\n      {...props}\n    />\n  );\n};\n\nexport const DialogTitle = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => {\n  return (\n    <DialogPrimitive.Title\n      className={cn('text-headline-sm text-foreground', className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n};\n\nexport const DialogDescription = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => {\n  return (\n    <DialogPrimitive.Description\n      className={cn('text-body-sm text-muted-foreground', className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAa,4BAA4B,GAEvC,gDAEA,yHACF;AAEA,IAAa,0BAA0B,GAErC,qJAEA,wCAEA,qBAEA,kDACF;AAEA,IAAM,wBAAwB,IAC5B;CAEE;CACA;CAEA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,MAAM;CACR,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;;;;AAKA,IAAaA,YAAU,UAAuD;CAC5E,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;;;;AAKA,IAAa,iBAAiB,UAA0D;CACtF,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;;;AAKA,IAAa,eAAe,UAAwD;CAClF,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;;;AAWA,IAAa,iBAAiB,EAAE,UAAU,WAAW,YAAY,MAAM,MAAM,GAAG,YAAgC;CAC9G,OACE,qBAACA,OAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,OAAgB,SAAjB;EAAyB,WAAW;EAA2B,aAAU;CAAkB,CAAA,GAC3F,qBAACA,OAAgB,SAAjB;EACE,WAAW,GAAG,sBAAsB,EAAE,KAAK,CAAC,GAAG,SAAS;EACxD,aAAU;EACV,GAAI;EAHN,UAAA,CAKG,UACA,aACC,qBAACA,OAAgB,OAAjB;GAAuB,WAAW;GAAyB,OAAM;GAAjE,UAAA,CACE,oBAAC,GAAD,EAAG,WAAU,SAAU,CAAA,GACvB,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CAChB;EAEF,CAAA,CAAA;CACH,CAAA,CAAA,EAAA,CAAA;AAE5B;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAmC;CAC9E,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,yCAAyC,SAAS;EAAG,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvH;;;;AAKA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAmC;CAC5E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,+EAA+E,SAAS;EACtG,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAmC;CAC9E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,yFACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,OAAgB,OAAjB;EACE,WAAW,GAAG,oCAAoC,SAAS;EAC3D,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAgE;CAChH,OACE,oBAACA,OAAgB,aAAjB;EACE,WAAW,GAAG,sCAAsC,SAAS;EAC7D,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { RefineIconCloseMD } from '../../icons/refine-icons';\n\nexport const DIALOG_OVERLAY_CLASS_NAME = cn(\n  // base\n  'fixed inset-0 z-50 bg-scrim backdrop-blur-sm',\n  // animation\n  'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',\n);\n\nexport const DIALOG_CLOSE_CLASS_NAME = cn(\n  // base\n  'absolute top-4 right-4 inline-flex size-control-sm items-center justify-center rounded-control text-muted-foreground transition-colors focus-ring',\n  // hover\n  'hover:bg-hover hover:text-foreground',\n  // active\n  'active:bg-pressed',\n  // disabled\n  'disabled:pointer-events-none disabled:opacity-45',\n);\n\nconst dialogContentVariants = cva(\n  [\n    // base\n    'fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden',\n    'rounded-panel border bg-popover text-popover-foreground shadow-float outline-none',\n    // animation\n    'duration-200 ease-out-expo 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  ],\n  {\n    variants: {\n      size: {\n        sm: 'max-w-sm',\n        md: 'max-w-lg',\n        lg: 'max-w-2xl',\n        xl: 'max-w-4xl',\n        full: 'h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\n/**\n * Holds the open state of a modal dialog.\n */\nexport const Dialog = (props: ComponentProps<typeof DialogPrimitive.Root>) => {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n};\n\n/**\n * Opens the dialog; pass `asChild` to turn any button into the trigger.\n */\nexport const DialogTrigger = (props: ComponentProps<typeof DialogPrimitive.Trigger>) => {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n};\n\n/**\n * Closes the dialog; pass `asChild` to turn any button into the close action.\n */\nexport const DialogClose = (props: ComponentProps<typeof DialogPrimitive.Close>) => {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n};\n\ninterface DialogContentProps\n  extends ComponentProps<typeof DialogPrimitive.Content>,\n    VariantProps<typeof dialogContentVariants> {\n  showClose?: boolean;\n}\n\n/**\n * Portals the dialog panel above a blurred scrim, with an optional corner close button.\n */\nexport const DialogContent = ({ children, className, showClose = true, size, ...props }: DialogContentProps) => {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay className={DIALOG_OVERLAY_CLASS_NAME} data-slot=\"dialog-overlay\" />\n      <DialogPrimitive.Content\n        className={cn(dialogContentVariants({ size }), className)}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n        {showClose && (\n          <DialogPrimitive.Close className={DIALOG_CLOSE_CLASS_NAME} title=\"Close\">\n            <RefineIconCloseMD className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n};\n\n/**\n * Stacks the title and description at the top of the panel.\n */\nexport const DialogHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('flex flex-col gap-1.5 px-6 pt-6 pr-14', className)} data-slot=\"dialog-header\" {...props} />;\n};\n\n/**\n * Scrolls the dialog's main content when it outgrows the viewport.\n */\nexport const DialogBody = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4 text-body-sm text-muted-foreground', className)}\n      data-slot=\"dialog-body\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Right-aligns the dialog's actions, stacking them on narrow screens.\n */\nexport const DialogFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col-reverse gap-2 border-t bg-muted/50 px-6 py-4 sm:flex-row sm:justify-end',\n        className,\n      )}\n      data-slot=\"dialog-footer\"\n      {...props}\n    />\n  );\n};\n\nexport const DialogTitle = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => {\n  return (\n    <DialogPrimitive.Title\n      className={cn('text-headline-sm text-foreground', className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n};\n\nexport const DialogDescription = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => {\n  return (\n    <DialogPrimitive.Description\n      className={cn('text-body-sm text-muted-foreground', className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAa,4BAA4B,GAEvC,gDAEA,yHACF;AAEA,IAAa,0BAA0B,GAErC,qJAEA,wCAEA,qBAEA,kDACF;AAEA,IAAM,wBAAwB,IAC5B;CAEE;CACA;CAEA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,MAAM;CACR,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;;;;AAKA,IAAaA,YAAU,UAAuD;CAC5E,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;;;;AAKA,IAAa,iBAAiB,UAA0D;CACtF,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;;;AAKA,IAAa,eAAe,UAAwD;CAClF,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;;;AAWA,IAAa,iBAAiB,EAAE,UAAU,WAAW,YAAY,MAAM,MAAM,GAAG,YAAgC;CAC9G,OACE,qBAACA,OAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,OAAgB,SAAjB;EAAyB,WAAW;EAA2B,aAAU;CAAkB,CAAA,GAC3F,qBAACA,OAAgB,SAAjB;EACE,WAAW,GAAG,sBAAsB,EAAE,KAAK,CAAC,GAAG,SAAS;EACxD,aAAU;EACV,GAAI;EAHN,UAAA,CAKG,UACA,aACC,qBAACA,OAAgB,OAAjB;GAAuB,WAAW;GAAyB,OAAM;GAAjE,UAAA,CACE,oBAAC,mBAAD,EAAmB,WAAU,SAAU,CAAA,GACvC,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CAChB;EAEF,CAAA,CAAA;CACH,CAAA,CAAA,EAAA,CAAA;AAE5B;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAmC;CAC9E,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,yCAAyC,SAAS;EAAG,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvH;;;;AAKA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAmC;CAC5E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,+EAA+E,SAAS;EACtG,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAmC;CAC9E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,yFACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,OAAgB,OAAjB;EACE,WAAW,GAAG,oCAAoC,SAAS;EAC3D,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAgE;CAChH,OACE,oBAACA,OAAgB,aAAjB;EACE,WAAW,GAAG,sCAAsC,SAAS;EAC7D,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}