@refine-studio/ui 0.0.0 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Refine Studio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,103 @@
-# @refine-studio/ui
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/banner-dark.png" />
+  <img alt="Refine UI: Where Diamonds craft Diamonds. The design system for everything we build for ourselves." src=".github/assets/banner-light.png" />
+</picture>
 
-Placeholder that reserves the name. The first real version is 0.1.0, published from https://github.com/refine-studio/refine-ui.
+# 💎 Refine UI
+
+Refine UI is the design system the Diamonds use to build internal tools: time trackers, voting bots, dashboards, admin panels, and the experiment you start on a Friday. It takes its look from [refine.studio](https://refine.studio), so every tool we build looks like it came from us.
+
+**📖 Storybook:** [ui.refine.studio](https://ui.refine.studio). Sign in with a GitHub account in the `refine-studio` organisation to open it.
+
+## 🎯 Why it exists
+
+Refine UI is built for us first, so it is free to experiment. It has one brand and its own voice: the refine teal, heavy display type, gradients, glass, soft shadows, the hex field and the diamond mark. You get a solid set of everyday parts, so you can spend your time on the idea and not on another button.
+
+## 📦 What is inside
+
+| Area        | Holds                                                                                            |
+| ----------- | ------------------------------------------------------------------------------------------------ |
+| 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                                |
+
+**Stack:** React 19 · Tailwind CSS 4 · Radix UI · class-variance-authority · lucide-react · Geist Sans and Geist Mono
+
+## 🚀 Install it in another repo
+
+Refine UI is published to the public npm registry as [`@refine-studio/ui`](https://www.npmjs.com/package/@refine-studio/ui). The install needs no token and no `.npmrc`, and the version arrives already built.
+
+### 1. Install the package
+
+```sh
+pnpm add @refine-studio/ui
+```
+
+Your app needs React 19 and Tailwind CSS 4.
+
+### 2. Import the styles
+
+Import the stylesheet after Tailwind in your global stylesheet. It brings the tokens, the Geist fonts and the animations. It also registers the library's components as a Tailwind source, so you need no extra `@source` line.
+
+```css
+@import 'tailwindcss';
+@import '@refine-studio/ui/styles.css';
+```
+
+### 3. Wrap the app and build
+
+`ThemeProvider` sets light or dark mode on `<html>` and remembers the choice.
+
+```tsx
+import { Button, ThemeProvider } from '@refine-studio/ui';
+
+export const App = () => {
+  return (
+    <ThemeProvider mode="system">
+      <Button variant="gem">Ship it</Button>
+    </ThemeProvider>
+  );
+};
+```
+
+### 🔤 Fonts in a build of your own
+
+The stylesheet loads Geist and Geist Mono from `./fonts/`, next to itself. A bundler such as Vite resolves them for you. When your build writes the CSS out by hand, copy one folder next to it:
+
+```sh
+cp -R node_modules/@refine-studio/ui/dist/fonts <your-css-folder>/fonts
+```
+
+The folder holds the `.woff2` files and their licences (SIL Open Font License).
+
+## Theming in one breath
+
+There is one brand: refine.studio's teal, zinc neutrals and the website's radii. Two knobs remain, and you can set each on `<html>` or on any subtree.
+
+| Knob    | Values                                              |
+| ------- | --------------------------------------------------- |
+| Mode    | `.light`, `.dark`, `.on-gem`                        |
+| Density | `data-density="compact \| comfortable \| spacious"` |
+
+`ThemeProvider` and `useTheme` manage the document theme, `ThemeSwitcher` gives people a light/dark/system toggle, and `ThemeScope` re-themes a single subtree.
+
+## Develop
+
+```sh
+pnpm install
+pnpm dev              # Storybook on http://localhost:6006
+pnpm test             # Vitest
+pnpm typecheck && pnpm lint
+pnpm build            # library → dist/
+pnpm build-storybook  # static Storybook → storybook-static/
+```
+
+Every component lives in `src/components/<name>/` next to its stories. The tokens live in `src/styles/refine-ui.css`. When you add a custom utility or token, also register it in `src/lib/cn.ts` so `tailwind-merge` resolves conflicts with it.
+
+## Release
+
+1. Bump `version` in `package.json`.
+2. Tag the commit with `vX.Y.Z` and push the tag.
+
+The `Release` workflow publishes that version to npm with provenance and creates a GitHub release. It publishes through npm's trusted publishing, so no npm token exists anywhere. The tag must match `version`, or the workflow stops. Pushing to `main` redeploys Storybook to [ui.refine.studio](https://ui.refine.studio) through GitHub Pages.

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,15 @@
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+/**
+ * Stacks collapsible sections; `type="single"` keeps one open, `type="multiple"` lets several open.
+ */
+export declare const Accordion: ({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Root>) => import("react").JSX.Element;
+export declare const AccordionItem: ({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Item>) => import("react").JSX.Element;
+/**
+ * Toggles its section and turns the chevron to show the state.
+ */
+export declare const AccordionTrigger: ({ children, className, ...props }: ComponentProps<typeof AccordionPrimitive.Trigger>) => import("react").JSX.Element;
+/**
+ * Reveals its section with a height animation.
+ */
+export declare const AccordionContent: ({ children, className, ...props }: ComponentProps<typeof AccordionPrimitive.Content>) => import("react").JSX.Element;

package/dist/components/accordion/accordion.js

@@ -0,0 +1,58 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { ChevronDown } from "lucide-react";
+import { Accordion } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/accordion/accordion.tsx
+/**
+* Stacks collapsible sections; `type="single"` keeps one open, `type="multiple"` lets several open.
+*/
+var Accordion$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		className: cn("w-full", className),
+		"data-slot": "accordion",
+		...props
+	});
+};
+var AccordionItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		className: cn("border-b last:border-b-0", className),
+		"data-slot": "accordion-item",
+		...props
+	});
+};
+/**
+* Toggles its section and turns the chevron to show the state.
+*/
+var AccordionTrigger = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			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, {
+				"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"
+			})]
+		})
+	});
+};
+/**
+* Reveals its section with a height animation.
+*/
+var AccordionContent = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Accordion.Content, {
+		className: "overflow-hidden text-body-sm text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+		"data-slot": "accordion-content",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pb-4", className),
+			children
+		})
+	});
+};
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+
+//# sourceMappingURL=accordion.js.map

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

@@ -0,0 +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"}

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from 'class-variance-authority';
+import { type ComponentProps, type ReactNode } from 'react';
+export declare const alertVariants: (props?: ({
+    variant?: "gem" | "danger" | "warning" | "neutral" | "info" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface AlertProps extends ComponentProps<'div'>, VariantProps<typeof alertVariants> {
+    action?: ReactNode;
+    dismissible?: boolean;
+    icon?: ReactNode | false;
+    onDismiss?: () => void;
+}
+/**
+ * A callout for status the reader should notice; danger and warning announce themselves as alerts, the rest as status.
+ */
+export declare const Alert: ({ action, children, className, dismissible, icon, onDismiss, variant, ...props }: AlertProps) => import("react").JSX.Element | null;
+/**
+ * The alert's heading line.
+ */
+export declare const AlertTitle: ({ className, ...props }: ComponentProps<"p">) => import("react").JSX.Element;
+/**
+ * The alert's explanatory copy, a step quieter than the title.
+ */
+export declare const AlertDescription: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export {};

package/dist/components/alert/alert.js

@@ -0,0 +1,98 @@
+"use client";
+import { cn } from "../../lib/cn.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";
+// src/components/alert/alert.tsx
+var alertVariants = cva(["relative flex w-full items-start gap-3 rounded-card border p-4 text-body-sm", "[&>svg]:mt-0.5 [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-[1.15em]"], {
+	variants: { variant: {
+		neutral: "border-border bg-muted text-foreground [&>svg]:text-muted-foreground",
+		gem: "border-gem/30 bg-gem-soft text-gem-ink",
+		info: "border-info/25 bg-info-soft text-info-ink",
+		success: "border-success/25 bg-success-soft text-success-ink",
+		warning: "border-warning/35 bg-warning-soft text-warning-ink",
+		danger: "border-danger/25 bg-danger-soft text-danger-ink"
+	} },
+	defaultVariants: { variant: "neutral" }
+});
+var ICON_BY_VARIANT = {
+	danger: CircleAlert,
+	gem: Sparkles,
+	info: Info,
+	neutral: Info,
+	success: CircleCheck,
+	warning: TriangleAlert
+};
+/**
+* A callout for status the reader should notice; danger and warning announce themselves as alerts, the rest as status.
+*/
+var Alert = ({ action, children, className, dismissible = false, icon, onDismiss, variant = "neutral", ...props }) => {
+	const [isDismissed, setIsDismissed] = useState(false);
+	if (isDismissed) return null;
+	const resolvedVariant = variant ?? "neutral";
+	const DefaultIcon = ICON_BY_VARIANT[resolvedVariant];
+	const isUrgent = resolvedVariant === "danger" || resolvedVariant === "warning";
+	/**
+	* Hides the alert and tells the owner.
+	*/
+	const handleDismiss = () => {
+		setIsDismissed(true);
+		onDismiss?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(alertVariants({ variant }), className),
+		"data-slot": "alert",
+		role: isUrgent ? "alert" : "status",
+		...props,
+		children: [
+			icon === void 0 ? /* @__PURE__ */ jsx(DefaultIcon, {
+				"aria-hidden": true,
+				role: "presentation"
+			}) : icon,
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2 self-center",
+				children: action
+			}),
+			dismissible && /* @__PURE__ */ jsxs(Button, {
+				className: "-mt-1 -mr-1 text-current",
+				size: "icon-sm",
+				title: "Dismiss",
+				variant: "ghost",
+				onClick: handleDismiss,
+				children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Dismiss"
+				})]
+			})
+		]
+	});
+};
+/**
+* The alert's heading line.
+*/
+var AlertTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("font-semibold", className),
+		"data-slot": "alert-title",
+		...props
+	});
+};
+/**
+* The alert's explanatory copy, a step quieter than the title.
+*/
+var AlertDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-pretty opacity-85 [&_p]:leading-relaxed", className),
+		"data-slot": "alert-description",
+		...props
+	});
+};
+export { Alert, AlertDescription, AlertTitle, alertVariants };
+
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +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"}

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,36 @@
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+import { Button } from '../button/button';
+/**
+ * Holds the open state of a confirmation that must be answered before the user continues.
+ */
+export declare const AlertDialog: (props: ComponentProps<typeof AlertDialogPrimitive.Root>) => import("react").JSX.Element;
+export declare const AlertDialogTrigger: (props: ComponentProps<typeof AlertDialogPrimitive.Trigger>) => import("react").JSX.Element;
+/**
+ * Portals the confirmation panel above a blurred scrim; it cannot be dismissed by clicking outside.
+ */
+export declare const AlertDialogContent: ({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Content>) => import("react").JSX.Element;
+/**
+ * Lays an optional icon beside the title and description.
+ */
+export declare const AlertDialogHeader: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+interface AlertDialogIconProps extends ComponentProps<'div'> {
+    tone?: 'danger' | 'gem' | 'warning';
+}
+/**
+ * Frames an icon in a tinted tile that spans the title and description rows.
+ */
+export declare const AlertDialogIcon: ({ className, tone, ...props }: AlertDialogIconProps) => import("react").JSX.Element;
+export declare const AlertDialogFooter: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export declare const AlertDialogTitle: ({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Title>) => import("react").JSX.Element;
+export declare const AlertDialogDescription: ({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Description>) => import("react").JSX.Element;
+type AlertDialogButtonProps = ComponentProps<typeof Button>;
+/**
+ * Confirms the action; defaults to the danger button.
+ */
+export declare const AlertDialogAction: ({ variant, ...props }: AlertDialogButtonProps) => import("react").JSX.Element;
+/**
+ * Dismisses the confirmation; receives focus first so a stray Enter never confirms.
+ */
+export declare const AlertDialogCancel: ({ variant, ...props }: AlertDialogButtonProps) => import("react").JSX.Element;
+export {};

package/dist/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,112 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../button/button.js";
+import { DIALOG_OVERLAY_CLASS_NAME } from "../dialog/dialog.js";
+import { AlertDialog } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/alert-dialog/alert-dialog.tsx
+/**
+* Holds the open state of a confirmation that must be answered before the user continues.
+*/
+var AlertDialog$1 = (props) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, {
+		"data-slot": "alert-dialog",
+		...props
+	});
+};
+var AlertDialogTrigger = (props) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+};
+/**
+* Portals the confirmation panel above a blurred scrim; it cannot be dismissed by clicking outside.
+*/
+var AlertDialogContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Overlay, {
+		className: DIALOG_OVERLAY_CLASS_NAME,
+		"data-slot": "alert-dialog-overlay"
+	}), /* @__PURE__ */ jsx(AlertDialog.Content, {
+		className: cn("fixed top-1/2 left-1/2 z-50 flex w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-6 rounded-panel border bg-popover p-6 text-popover-foreground shadow-float outline-none", "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", className),
+		"data-slot": "alert-dialog-content",
+		...props
+	})] });
+};
+/**
+* Lays an optional icon beside the title and description.
+*/
+var AlertDialogHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-1.5 has-data-[slot=alert-dialog-icon]:grid-cols-[auto_1fr] has-data-[slot=alert-dialog-icon]:gap-x-4", className),
+		"data-slot": "alert-dialog-header",
+		...props
+	});
+};
+var ICON_TONE_CLASS_NAME_BY_TONE = {
+	danger: "bg-danger-soft text-danger-ink",
+	gem: "bg-gem-soft text-gem-ink",
+	warning: "bg-warning-soft text-warning-ink"
+};
+/**
+* Frames an icon in a tinted tile that spans the title and description rows.
+*/
+var AlertDialogIcon = ({ className, tone = "danger", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: cn("row-span-2 flex size-10 items-center justify-center rounded-control [&_svg]:size-5", ICON_TONE_CLASS_NAME_BY_TONE[tone], className),
+		"data-slot": "alert-dialog-icon",
+		role: "presentation",
+		...props
+	});
+};
+var AlertDialogFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		"data-slot": "alert-dialog-footer",
+		...props
+	});
+};
+var AlertDialogTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		className: cn("text-headline-sm text-foreground", className),
+		"data-slot": "alert-dialog-title",
+		...props
+	});
+};
+var AlertDialogDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		className: cn("text-body-sm text-muted-foreground", className),
+		"data-slot": "alert-dialog-description",
+		...props
+	});
+};
+/**
+* Confirms the action; defaults to the danger button.
+*/
+var AlertDialogAction = ({ variant = "danger", ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Action, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-slot": "alert-dialog-action",
+			variant,
+			...props
+		})
+	});
+};
+/**
+* Dismisses the confirmation; receives focus first so a stray Enter never confirms.
+*/
+var AlertDialogCancel = ({ variant = "outline", ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Cancel, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-slot": "alert-dialog-cancel",
+			variant,
+			...props
+		})
+	});
+};
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogIcon, AlertDialogTitle, AlertDialogTrigger };
+
+//# sourceMappingURL=alert-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","names":["AlertDialog","AlertDialogPrimitive"],"sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { AlertDialog as AlertDialogPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Button } from '../button/button';\nimport { DIALOG_OVERLAY_CLASS_NAME } from '../dialog/dialog';\n\n/**\n * Holds the open state of a confirmation that must be answered before the user continues.\n */\nexport const AlertDialog = (props: ComponentProps<typeof AlertDialogPrimitive.Root>) => {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n};\n\nexport const AlertDialogTrigger = (props: ComponentProps<typeof AlertDialogPrimitive.Trigger>) => {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n};\n\n/**\n * Portals the confirmation panel above a blurred scrim; it cannot be dismissed by clicking outside.\n */\nexport const AlertDialogContent = ({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Content>) => {\n  return (\n    <AlertDialogPrimitive.Portal>\n      <AlertDialogPrimitive.Overlay className={DIALOG_OVERLAY_CLASS_NAME} data-slot=\"alert-dialog-overlay\" />\n      <AlertDialogPrimitive.Content\n        className={cn(\n          // base\n          'fixed top-1/2 left-1/2 z-50 flex w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-6 rounded-panel border bg-popover p-6 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          className,\n        )}\n        data-slot=\"alert-dialog-content\"\n        {...props}\n      />\n    </AlertDialogPrimitive.Portal>\n  );\n};\n\n/**\n * Lays an optional icon beside the title and description.\n */\nexport const AlertDialogHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'grid gap-1.5 has-data-[slot=alert-dialog-icon]:grid-cols-[auto_1fr] has-data-[slot=alert-dialog-icon]:gap-x-4',\n        className,\n      )}\n      data-slot=\"alert-dialog-header\"\n      {...props}\n    />\n  );\n};\n\ninterface AlertDialogIconProps extends ComponentProps<'div'> {\n  tone?: 'danger' | 'gem' | 'warning';\n}\n\nconst ICON_TONE_CLASS_NAME_BY_TONE = {\n  danger: 'bg-danger-soft text-danger-ink',\n  gem: 'bg-gem-soft text-gem-ink',\n  warning: 'bg-warning-soft text-warning-ink',\n} satisfies Record<NonNullable<AlertDialogIconProps['tone']>, string>;\n\n/**\n * Frames an icon in a tinted tile that spans the title and description rows.\n */\nexport const AlertDialogIcon = ({ className, tone = 'danger', ...props }: AlertDialogIconProps) => {\n  return (\n    <div\n      aria-hidden\n      className={cn(\n        'row-span-2 flex size-10 items-center justify-center rounded-control [&_svg]:size-5',\n        ICON_TONE_CLASS_NAME_BY_TONE[tone],\n        className,\n      )}\n      data-slot=\"alert-dialog-icon\"\n      role=\"presentation\"\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}\n      data-slot=\"alert-dialog-footer\"\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogTitle = ({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Title>) => {\n  return (\n    <AlertDialogPrimitive.Title\n      className={cn('text-headline-sm text-foreground', className)}\n      data-slot=\"alert-dialog-title\"\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogDescription = ({\n  className,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Description>) => {\n  return (\n    <AlertDialogPrimitive.Description\n      className={cn('text-body-sm text-muted-foreground', className)}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n};\n\ntype AlertDialogButtonProps = ComponentProps<typeof Button>;\n\n/**\n * Confirms the action; defaults to the danger button.\n */\nexport const AlertDialogAction = ({ variant = 'danger', ...props }: AlertDialogButtonProps) => {\n  return (\n    <AlertDialogPrimitive.Action asChild>\n      <Button data-slot=\"alert-dialog-action\" variant={variant} {...props} />\n    </AlertDialogPrimitive.Action>\n  );\n};\n\n/**\n * Dismisses the confirmation; receives focus first so a stray Enter never confirms.\n */\nexport const AlertDialogCancel = ({ variant = 'outline', ...props }: AlertDialogButtonProps) => {\n  return (\n    <AlertDialogPrimitive.Cancel asChild>\n      <Button data-slot=\"alert-dialog-cancel\" variant={variant} {...props} />\n    </AlertDialogPrimitive.Cancel>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAaA,iBAAe,UAA4D;CACtF,OAAO,oBAACC,YAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,sBAAsB,UAA+D;CAChG,OAAO,oBAACA,YAAqB,SAAtB;EAA8B,aAAU;EAAuB,GAAI;CAAQ,CAAA;AACpF;;;;AAKA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAiE;CAClH,OACE,qBAACA,YAAqB,QAAtB,EAAA,UAAA,CACE,oBAACA,YAAqB,SAAtB;EAA8B,WAAW;EAA2B,aAAU;CAAwB,CAAA,GACtG,oBAACA,YAAqB,SAAtB;EACE,WAAW,GAET,yMAEA,mNACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA,CAC0B,EAAA,CAAA;AAEjC;;;;AAKA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAmC;CACnF,OACE,oBAAC,OAAD;EACE,WAAW,GACT,iHACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAMA,IAAM,+BAA+B;CACnC,QAAQ;CACR,KAAK;CACL,SAAS;AACX;;;;AAKA,IAAa,mBAAmB,EAAE,WAAW,OAAO,UAAU,GAAG,YAAkC;CACjG,OACE,oBAAC,OAAD;EACE,eAAA;EACA,WAAW,GACT,sFACA,6BAA6B,OAC7B,SACF;EACA,aAAU;EACV,MAAK;EACL,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAmC;CACnF,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,0DAA0D,SAAS;EACjF,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA+D;CAC9G,OACE,oBAACA,YAAqB,OAAtB;EACE,WAAW,GAAG,oCAAoC,SAAS;EAC3D,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,0BAA0B,EACrC,WACA,GAAG,YAC0D;CAC7D,OACE,oBAACA,YAAqB,aAAtB;EACE,WAAW,GAAG,sCAAsC,SAAS;EAC7D,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAOA,IAAa,qBAAqB,EAAE,UAAU,UAAU,GAAG,YAAoC;CAC7F,OACE,oBAACA,YAAqB,QAAtB;EAA6B,SAAA;EAC3B,UAAA,oBAAC,QAAD;GAAQ,aAAU;GAA+B;GAAS,GAAI;EAAQ,CAAA;CAC3C,CAAA;AAEjC;;;;AAKA,IAAa,qBAAqB,EAAE,UAAU,WAAW,GAAG,YAAoC;CAC9F,OACE,oBAACA,YAAqB,QAAtB;EAA6B,SAAA;EAC3B,UAAA,oBAAC,QAAD;GAAQ,aAAU;GAA+B;GAAS,GAAI;EAAQ,CAAA;CAC3C,CAAA;AAEjC"}

package/dist/components/app-shell/app-shell.d.ts

@@ -0,0 +1,77 @@
+import { type ComponentProps, type ReactNode } from 'react';
+interface AppShellContextValue {
+    collapsed: boolean;
+    /** Whether the shell shows its phone layout: the sidebar as a drawer, below `md`. `true` on the server. */
+    isMobile: boolean;
+    mobileOpen: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    setMobileOpen: (mobileOpen: boolean) => void;
+}
+/**
+ * Returns the shell's sidebar state and whether it shows the phone layout; throws outside an `AppShell`.
+ */
+export declare const useAppShell: () => AppShellContextValue;
+interface AppShellProps extends ComponentProps<'div'> {
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+/**
+ * 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.
+ */
+export declare const AppShell: ({ className, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, ...props }: AppShellProps) => import("react").JSX.Element;
+interface AppShellSidebarProps extends ComponentProps<'aside'> {
+    label?: string;
+}
+/**
+ * Renders the navigation column: a sticky panel that collapses to an icon rail from `md` up, and an off-canvas drawer below it.
+ */
+export declare const AppShellSidebar: ({ children, className, label, ...props }: AppShellSidebarProps) => import("react").JSX.Element;
+/**
+ * Holds the brand row at the top of the sidebar; hides everything but the first child when collapsed.
+ */
+export declare const SidebarHeader: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * Scrolls the sidebar's sections when they outgrow the viewport.
+ */
+export declare const SidebarContent: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+interface SidebarSectionProps extends Omit<ComponentProps<'div'>, 'title'> {
+    title?: ReactNode;
+}
+/**
+ * Groups related items under a mono caption, which turns into a hairline when the sidebar is a rail.
+ */
+export declare const SidebarSection: ({ children, className, title, ...props }: SidebarSectionProps) => import("react").JSX.Element;
+interface SidebarItemProps extends ComponentProps<'button'> {
+    active?: boolean;
+    asChild?: boolean;
+    badge?: ReactNode;
+    icon?: ReactNode;
+    label: string;
+    number?: number | string;
+}
+/**
+ * Renders one navigation entry with icon, optional website-style number and badge; pass a router link as the child with `asChild`.
+ */
+export declare const SidebarItem: ({ active, asChild, badge, children, className, icon, label, number, onClick, ...props }: SidebarItemProps) => import("react").JSX.Element;
+/**
+ * Pins account and settings controls to the bottom of the sidebar.
+ */
+export declare const SidebarFooter: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * Toggles the sidebar: collapses it to a rail from `md` up and opens the drawer below it.
+ */
+export declare const AppShellSidebarTrigger: ({ className, onClick, ...props }: ComponentProps<"button">) => import("react").JSX.Element;
+/**
+ * Stacks the header and page content to the right of the sidebar.
+ */
+export declare const AppShellMain: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * Renders the sticky, frosted top bar of the content column, like the refine.studio header.
+ */
+export declare const AppShellHeader: ({ className, ...props }: ComponentProps<"header">) => import("react").JSX.Element;
+/**
+ * Holds the page itself, padded and capped for readable line lengths on very wide screens.
+ */
+export declare const AppShellContent: ({ className, ...props }: ComponentProps<"main">) => import("react").JSX.Element;
+export {};