@refine-studio/ui 0.0.0 → 0.2.0

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

@@ -0,0 +1,224 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { RefineIconBarLeft } from "../../icons/refine-icons.js";
+import { useBreakpoint } from "../../lib/use-breakpoint.js";
+import { Dialog, Slot } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useState } from "react";
+// src/components/app-shell/app-shell.tsx
+var AppShellContext = createContext(null);
+/**
+* Returns the shell's sidebar state and whether it shows the phone layout; throws outside an `AppShell`.
+*/
+var useAppShell = () => {
+	const context = use(AppShellContext);
+	if (!context) throw new Error("useAppShell must be used inside an AppShell.");
+	return context;
+};
+/**
+* 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.
+*/
+var AppShell = ({ className, collapsed: controlledCollapsed, defaultCollapsed = false, onCollapsedChange, ...props }) => {
+	const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
+	const [mobileOpen, setMobileOpen] = useState(false);
+	const collapsed = controlledCollapsed ?? uncontrolledCollapsed;
+	const isMobile = !useBreakpoint("md");
+	/**
+	* Updates the collapsed state and reports it to a controlling parent.
+	*/
+	const setCollapsed = (nextCollapsed) => {
+		setUncontrolledCollapsed(nextCollapsed);
+		onCollapsedChange?.(nextCollapsed);
+	};
+	return /* @__PURE__ */ jsx(AppShellContext, {
+		value: {
+			collapsed,
+			isMobile,
+			mobileOpen,
+			setCollapsed,
+			setMobileOpen
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex min-h-dvh bg-canvas text-foreground", className),
+			"data-slot": "app-shell",
+			...props
+		})
+	});
+};
+/**
+* Renders the navigation column: a sticky panel that collapses to an icon rail from `md` up, and an off-canvas drawer below it.
+*/
+var AppShellSidebar = ({ children, className, label = "Navigation", ...props }) => {
+	const { collapsed, mobileOpen, setMobileOpen } = useAppShell();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("aside", {
+		className: cn("group/sidebar sticky top-0 hidden h-dvh w-64 shrink-0 flex-col gap-2 border-r border-border bg-background md:flex", "transition-[width] duration-300 ease-out-expo data-[collapsed=true]:w-16", className),
+		"data-collapsed": collapsed,
+		"data-slot": "app-shell-sidebar",
+		...props,
+		children
+	}), /* @__PURE__ */ jsx(Dialog.Root, {
+		open: mobileOpen,
+		onOpenChange: setMobileOpen,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: cn("fixed inset-0 z-40 bg-scrim backdrop-blur-sm md:hidden", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0") }), /* @__PURE__ */ jsxs(Dialog.Content, {
+			"aria-describedby": void 0,
+			className: cn("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", "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"),
+			"data-collapsed": false,
+			children: [/* @__PURE__ */ jsx(Dialog.Title, {
+				className: "sr-only",
+				children: label
+			}), children]
+		})] })
+	})] });
+};
+/**
+* Holds the brand row at the top of the sidebar; hides everything but the first child when collapsed.
+*/
+var SidebarHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("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", className),
+		"data-slot": "sidebar-header",
+		...props
+	});
+};
+/**
+* Scrolls the sidebar's sections when they outgrow the viewport.
+*/
+var SidebarContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-3 py-3", className),
+		"data-slot": "sidebar-content",
+		...props
+	});
+};
+/**
+* Groups related items under a mono caption, which turns into a hairline when the sidebar is a rail.
+*/
+var SidebarSection = ({ children, className, title, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-0.5", className),
+		"data-slot": "sidebar-section",
+		role: "group",
+		...props,
+		children: [title && /* @__PURE__ */ jsxs("div", {
+			className: "mb-1 flex h-5 items-center px-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "eyebrow truncate text-subtle group-data-[collapsed=true]/sidebar:sr-only",
+				children: title
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "hidden h-px w-full bg-border group-data-[collapsed=true]/sidebar:block",
+				role: "presentation"
+			})]
+		}), children]
+	});
+};
+/**
+* Renders one navigation entry with icon, optional website-style number and badge; pass a router link as the child with `asChild`.
+*/
+var SidebarItem = ({ active = false, asChild = false, badge, children, className, icon, label, number, onClick, ...props }) => {
+	const { collapsed, setMobileOpen } = useAppShell();
+	const Component = asChild ? Slot.Root : "button";
+	const formattedNumber = typeof number === "number" ? number.toString().padStart(2, "0") : number;
+	return /* @__PURE__ */ jsxs(Component, {
+		"aria-current": active ? "page" : void 0,
+		className: cn("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", "[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0", "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0", "transition-colors hover:bg-hover hover:text-foreground", "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", "disabled:pointer-events-none disabled:opacity-45", className),
+		"data-slot": "sidebar-item",
+		title: collapsed ? label : void 0,
+		type: asChild ? void 0 : "button",
+		onClick: (event) => {
+			setMobileOpen(false);
+			onClick?.(event);
+		},
+		...props,
+		children: [
+			asChild && /* @__PURE__ */ jsx(Slot.Slottable, { children }),
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "flex text-subtle group-hover/item:text-foreground group-aria-[current=page]/item:text-gem-ink",
+				children: icon
+			}),
+			formattedNumber !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "font-mono text-caption text-subtle tabular-nums group-data-[collapsed=true]/sidebar:hidden",
+				children: formattedNumber
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate group-data-[collapsed=true]/sidebar:sr-only",
+				children: label
+			}),
+			badge !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: cn("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", "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"),
+				children: /* @__PURE__ */ jsx("span", {
+					className: "group-data-[collapsed=true]/sidebar:sr-only",
+					children: badge
+				})
+			})
+		]
+	});
+};
+/**
+* Pins account and settings controls to the bottom of the sidebar.
+*/
+var SidebarFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mt-auto flex shrink-0 items-center gap-3 border-t border-border p-3 group-data-[collapsed=true]/sidebar:justify-center", className),
+		"data-slot": "sidebar-footer",
+		...props
+	});
+};
+/**
+* Toggles the sidebar: collapses it to a rail from `md` up and opens the drawer below it.
+*/
+var AppShellSidebarTrigger = ({ className, onClick, ...props }) => {
+	const { collapsed, isMobile, mobileOpen, setCollapsed, setMobileOpen } = useAppShell();
+	return /* @__PURE__ */ jsxs("button", {
+		className: cn("inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-muted-foreground transition-colors focus-ring", "hover:bg-hover hover:text-foreground", "active:bg-pressed", className),
+		"data-slot": "app-shell-sidebar-trigger",
+		title: "Toggle sidebar",
+		type: "button",
+		onClick: (event) => {
+			if (isMobile) setMobileOpen(!mobileOpen);
+			else setCollapsed(!collapsed);
+			onClick?.(event);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(RefineIconBarLeft, {
+			"aria-hidden": true,
+			className: "size-4"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle sidebar"
+		})]
+	});
+};
+/**
+* Stacks the header and page content to the right of the sidebar.
+*/
+var AppShellMain = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-w-0 flex-1 flex-col", className),
+		"data-slot": "app-shell-main",
+		...props
+	});
+};
+/**
+* Renders the sticky, frosted top bar of the content column, like the refine.studio header.
+*/
+var AppShellHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("header", {
+		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),
+		"data-slot": "app-shell-header",
+		...props
+	});
+};
+/**
+* Holds the page itself, padded and capped for readable line lengths on very wide screens.
+*/
+var AppShellContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("main", {
+		className: cn("mx-auto flex w-full max-w-7xl flex-1 flex-col gap-8 p-4 md:p-8", className),
+		"data-slot": "app-shell-content",
+		...props
+	});
+};
+export { AppShell, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar, AppShellSidebarTrigger, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, useAppShell };
+
+//# sourceMappingURL=app-shell.js.map

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

@@ -0,0 +1 @@
+{"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/avatar/avatar.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+import { type ComponentProps } from 'react';
+export declare const avatarVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    shape?: "round" | "square" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const STATUS_CLASS_BY_STATUS: {
+    away: string;
+    busy: string;
+    offline: string;
+    online: string;
+};
+interface AvatarProps extends Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'>, VariantProps<typeof avatarVariants> {
+    alt?: string;
+    fallback: string;
+    src?: string;
+    status?: keyof typeof STATUS_CLASS_BY_STATUS;
+}
+/**
+ * Shows a person's picture, falling back to their initials while it loads or when it fails, with an optional presence dot.
+ */
+export declare const Avatar: ({ alt, className, fallback, shape, size, src, status, ...props }: AvatarProps) => import("react").JSX.Element;
+interface AvatarGroupProps extends ComponentProps<'div'> {
+    max?: number;
+    size?: VariantProps<typeof avatarVariants>['size'];
+}
+/**
+ * Stacks avatars with an overlap and collapses everything past `max` into a "+n" counter.
+ */
+export declare const AvatarGroup: ({ children, className, max, size, ...props }: AvatarGroupProps) => import("react").JSX.Element;
+export {};

package/dist/components/avatar/avatar.js

@@ -0,0 +1,83 @@
+import { cn } from "../../lib/cn.js";
+import { Avatar } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Children } from "react";
+// src/components/avatar/avatar.tsx
+var avatarVariants = cva(["relative inline-flex shrink-0 items-center justify-center bg-muted font-semibold text-muted-foreground select-none"], {
+	variants: {
+		size: {
+			xs: "size-6 text-caption",
+			sm: "size-8 text-caption",
+			md: "size-10 text-body-sm",
+			lg: "size-12 text-body",
+			xl: "size-16 text-headline-sm"
+		},
+		shape: {
+			round: "rounded-full",
+			square: "rounded-control"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		shape: "round"
+	}
+});
+var STATUS_CLASS_BY_STATUS = {
+	away: "bg-warning",
+	busy: "bg-danger",
+	offline: "bg-subtle",
+	online: "bg-success"
+};
+/**
+* Shows a person's picture, falling back to their initials while it loads or when it fails, with an optional presence dot.
+*/
+var Avatar$1 = ({ alt, className, fallback, shape, size, src, status, ...props }) => {
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		className: cn(avatarVariants({
+			shape,
+			size
+		}), className),
+		"data-slot": "avatar",
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "absolute inset-0 overflow-hidden rounded-[inherit]",
+			children: [src && /* @__PURE__ */ jsx(Avatar.Image, {
+				alt: alt ?? fallback,
+				className: "size-full object-cover",
+				src
+			}), /* @__PURE__ */ jsx(Avatar.Fallback, {
+				className: "flex size-full items-center justify-center",
+				delayMs: src ? 400 : 0,
+				children: fallback
+			})]
+		}), status && /* @__PURE__ */ jsx("span", {
+			className: cn("absolute right-0 bottom-0 size-[28%] min-h-2 min-w-2 rounded-full ring-2 ring-background", STATUS_CLASS_BY_STATUS[status]),
+			title: status,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: status
+			})
+		})]
+	});
+};
+/**
+* Stacks avatars with an overlap and collapses everything past `max` into a "+n" counter.
+*/
+var AvatarGroup = ({ children, className, max = 4, size, ...props }) => {
+	const avatars = Children.toArray(children);
+	const hiddenCount = avatars.length - max;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center -space-x-2 *:ring-2 *:ring-background", className),
+		"data-slot": "avatar-group",
+		...props,
+		children: [avatars.slice(0, max), hiddenCount > 0 && /* @__PURE__ */ jsxs("span", {
+			className: cn(avatarVariants({ size }), "bg-secondary text-secondary-foreground"),
+			title: `${hiddenCount} more`,
+			children: ["+", hiddenCount]
+		})]
+	});
+};
+export { Avatar$1 as Avatar, AvatarGroup, avatarVariants };
+
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":["Avatar","AvatarPrimitive"],"sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Avatar as AvatarPrimitive } from 'radix-ui';\nimport { Children, type ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\nexport const avatarVariants = cva(\n  [\n    // base\n    'relative inline-flex shrink-0 items-center justify-center bg-muted font-semibold text-muted-foreground select-none',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'size-6 text-caption',\n        sm: 'size-8 text-caption',\n        md: 'size-10 text-body-sm',\n        lg: 'size-12 text-body',\n        xl: 'size-16 text-headline-sm',\n      },\n      shape: {\n        round: 'rounded-full',\n        square: 'rounded-control',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      shape: 'round',\n    },\n  },\n);\n\nconst STATUS_CLASS_BY_STATUS = {\n  away: 'bg-warning',\n  busy: 'bg-danger',\n  offline: 'bg-subtle',\n  online: 'bg-success',\n} satisfies Record<string, string>;\n\ninterface AvatarProps\n  extends Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'>, VariantProps<typeof avatarVariants> {\n  alt?: string;\n  fallback: string;\n  src?: string;\n  status?: keyof typeof STATUS_CLASS_BY_STATUS;\n}\n\n/**\n * Shows a person's picture, falling back to their initials while it loads or when it fails, with an optional presence dot.\n */\nexport const Avatar = ({ alt, className, fallback, shape, size, src, status, ...props }: AvatarProps) => {\n  return (\n    <AvatarPrimitive.Root className={cn(avatarVariants({ shape, size }), className)} data-slot=\"avatar\" {...props}>\n      <span className=\"absolute inset-0 overflow-hidden rounded-[inherit]\">\n        {src && <AvatarPrimitive.Image alt={alt ?? fallback} className=\"size-full object-cover\" src={src} />}\n        <AvatarPrimitive.Fallback className=\"flex size-full items-center justify-center\" delayMs={src ? 400 : 0}>\n          {fallback}\n        </AvatarPrimitive.Fallback>\n      </span>\n      {status && (\n        <span\n          className={cn(\n            'absolute right-0 bottom-0 size-[28%] min-h-2 min-w-2 rounded-full ring-2 ring-background',\n            STATUS_CLASS_BY_STATUS[status],\n          )}\n          title={status}\n        >\n          <span className=\"sr-only\">{status}</span>\n        </span>\n      )}\n    </AvatarPrimitive.Root>\n  );\n};\n\ninterface AvatarGroupProps extends ComponentProps<'div'> {\n  max?: number;\n  size?: VariantProps<typeof avatarVariants>['size'];\n}\n\n/**\n * Stacks avatars with an overlap and collapses everything past `max` into a \"+n\" counter.\n */\nexport const AvatarGroup = ({ children, className, max = 4, size, ...props }: AvatarGroupProps) => {\n  const avatars = Children.toArray(children);\n  const hiddenCount = avatars.length - max;\n\n  return (\n    <div\n      className={cn('flex items-center -space-x-2 *:ring-2 *:ring-background', className)}\n      data-slot=\"avatar-group\"\n      {...props}\n    >\n      {avatars.slice(0, max)}\n      {hiddenCount > 0 && (\n        <span className={cn(avatarVariants({ size }), 'bg-secondary text-secondary-foreground')} title={`${hiddenCount} more`}>\n          +{hiddenCount}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,iBAAiB,IAC5B,CAEE,oHACF,GACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,OAAO;GACP,QAAQ;EACV;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;AAEA,IAAM,yBAAyB;CAC7B,MAAM;CACN,MAAM;CACN,SAAS;CACT,QAAQ;AACV;;;;AAaA,IAAaA,YAAU,EAAE,KAAK,WAAW,UAAU,OAAO,MAAM,KAAK,QAAQ,GAAG,YAAyB;CACvG,OACE,qBAACC,OAAgB,MAAjB;EAAsB,WAAW,GAAG,eAAe;GAAE;GAAO;EAAK,CAAC,GAAG,SAAS;EAAG,aAAU;EAAS,GAAI;EAAxG,UAAA,CACE,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACG,OAAO,oBAACA,OAAgB,OAAjB;IAAuB,KAAK,OAAO;IAAU,WAAU;IAA8B;GAAM,CAAA,GACnG,oBAACA,OAAgB,UAAjB;IAA0B,WAAU;IAA6C,SAAS,MAAM,MAAM;IACnG,UAAA;GACuB,CAAA,CACtB;EACL,CAAA,GAAA,UACC,oBAAC,QAAD;GACE,WAAW,GACT,4FACA,uBAAuB,OACzB;GACA,OAAO;GAEP,UAAA,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAa,CAAA;EACpC,CAAA,CAEY;;AAE1B;;;;AAUA,IAAa,eAAe,EAAE,UAAU,WAAW,MAAM,GAAG,MAAM,GAAG,YAA8B;CACjG,MAAM,UAAU,SAAS,QAAQ,QAAQ;CACzC,MAAM,cAAc,QAAQ,SAAS;CAErC,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,2DAA2D,SAAS;EAClF,aAAU;EACV,GAAI;EAHN,UAAA,CAKG,QAAQ,MAAM,GAAG,GAAG,GACpB,cAAc,KACb,qBAAC,QAAD;GAAM,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,wCAAwC;GAAG,OAAO,GAAG,YAAY;GAA/G,UAAA,CAAuH,KACnH,WACE;EAEL,CAAA,CAAA;;AAET"}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,15 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+export declare const badgeVariants: (props?: ({
+    variant?: "gem" | "outline" | "danger" | "warning" | "neutral" | "info" | "success" | "orange" | "violet" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface BadgeProps extends ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
+    asChild?: boolean;
+    dot?: boolean;
+}
+/**
+ * Labels a status or category as a pill; `dot` prefixes it with a small marker in the current text colour.
+ */
+export declare const Badge: ({ asChild, children, className, dot, size, variant, ...props }: BadgeProps) => import("react").JSX.Element;
+export {};

package/dist/components/badge/badge.js

@@ -0,0 +1,50 @@
+import { cn } from "../../lib/cn.js";
+import { Slot } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/badge/badge.tsx
+var badgeVariants = cva(["inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border font-medium whitespace-nowrap", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.1em]"], {
+	variants: {
+		variant: {
+			neutral: "border-transparent bg-secondary text-secondary-foreground",
+			gem: "border-transparent bg-gem-soft text-gem-ink",
+			outline: "border-border bg-background text-foreground",
+			success: "border-transparent bg-success-soft text-success-ink",
+			warning: "border-transparent bg-warning-soft text-warning-ink",
+			orange: "border-transparent bg-orange-soft text-orange-ink",
+			danger: "border-transparent bg-danger-soft text-danger-ink",
+			info: "border-transparent bg-info-soft text-info-ink",
+			violet: "border-transparent bg-violet-soft text-violet-ink"
+		},
+		size: {
+			sm: "h-5 px-2 text-caption",
+			md: "h-6 px-2.5 text-body-sm"
+		}
+	},
+	defaultVariants: {
+		variant: "neutral",
+		size: "md"
+	}
+});
+/**
+* Labels a status or category as a pill; `dot` prefixes it with a small marker in the current text colour.
+*/
+var Badge = ({ asChild = false, children, className, dot = false, size, variant, ...props }) => {
+	const Component = asChild ? Slot.Root : "span";
+	return /* @__PURE__ */ jsxs(Component, {
+		className: cn(badgeVariants({
+			size,
+			variant
+		}), className),
+		"data-slot": "badge",
+		...props,
+		children: [dot && !asChild && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "size-1.5 rounded-full bg-current",
+			role: "presentation"
+		}), children]
+	});
+};
+export { Badge, badgeVariants };
+
+//# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\nexport const badgeVariants = cva(\n  [\n    // base\n    'inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border font-medium whitespace-nowrap',\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.1em]\",\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: 'border-transparent bg-secondary text-secondary-foreground',\n        gem: 'border-transparent bg-gem-soft text-gem-ink',\n        outline: 'border-border bg-background text-foreground',\n        success: 'border-transparent bg-success-soft text-success-ink',\n        warning: 'border-transparent bg-warning-soft text-warning-ink',\n        orange: 'border-transparent bg-orange-soft text-orange-ink',\n        danger: 'border-transparent bg-danger-soft text-danger-ink',\n        info: 'border-transparent bg-info-soft text-info-ink',\n        violet: 'border-transparent bg-violet-soft text-violet-ink',\n      },\n      size: {\n        sm: 'h-5 px-2 text-caption',\n        md: 'h-6 px-2.5 text-body-sm',\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'md',\n    },\n  },\n);\n\ninterface BadgeProps extends ComponentProps<'span'>, VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n  dot?: boolean;\n}\n\n/**\n * Labels a status or category as a pill; `dot` prefixes it with a small marker in the current text colour.\n */\nexport const Badge = ({ asChild = false, children, className, dot = false, size, variant, ...props }: BadgeProps) => {\n  const Component = asChild ? Slot.Root : 'span';\n\n  return (\n    <Component className={cn(badgeVariants({ size, variant }), className)} data-slot=\"badge\" {...props}>\n      {dot && !asChild && <span aria-hidden className=\"size-1.5 rounded-full bg-current\" role=\"presentation\" />}\n      {children}\n    </Component>\n  );\n};\n"],"mappings":";;;;;AAMA,IAAa,gBAAgB,IAC3B,CAEE,qGACA,yFACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,KAAK;GACL,SAAS;GACT,SAAS;GACT,SAAS;GACT,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,QAAQ;EACV;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;AAUA,IAAa,SAAS,EAAE,UAAU,OAAO,UAAU,WAAW,MAAM,OAAO,MAAM,SAAS,GAAG,YAAwB;CACnH,MAAM,YAAY,UAAU,KAAK,OAAO;CAExC,OACE,qBAAC,WAAD;EAAW,WAAW,GAAG,cAAc;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAAG,aAAU;EAAQ,GAAI;EAA7F,UAAA,CACG,OAAO,CAAC,WAAW,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAU;GAAmC,MAAK;EAAgB,CAAA,GACvG,QACQ;;AAEf"}

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'react';
+/**
+ * Marks up the trail as a navigation landmark.
+ */
+export declare const Breadcrumb: ({ ...props }: ComponentProps<"nav">) => import("react").JSX.Element;
+export declare const BreadcrumbList: ({ className, ...props }: ComponentProps<"ol">) => import("react").JSX.Element;
+export declare const BreadcrumbItem: ({ className, ...props }: ComponentProps<"li">) => import("react").JSX.Element;
+interface BreadcrumbLinkProps extends ComponentProps<'a'> {
+    asChild?: boolean;
+}
+/**
+ * Links to an ancestor page; pass `asChild` to render your router's link.
+ */
+export declare const BreadcrumbLink: ({ asChild, className, ...props }: BreadcrumbLinkProps) => import("react").JSX.Element;
+/**
+ * Names the current page and marks it as such for assistive technology.
+ */
+export declare const BreadcrumbPage: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
+export declare const BreadcrumbSeparator: ({ children, className, ...props }: ComponentProps<"li">) => import("react").JSX.Element;
+/**
+ * Stands in for collapsed middle crumbs.
+ */
+export declare const BreadcrumbEllipsis: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
+export {};

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,82 @@
+import { cn } from "../../lib/cn.js";
+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
+/**
+* Marks up the trail as a navigation landmark.
+*/
+var Breadcrumb = ({ ...props }) => {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Breadcrumb",
+		"data-slot": "breadcrumb",
+		...props
+	});
+};
+var BreadcrumbList = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("ol", {
+		className: cn("flex flex-wrap items-center gap-1.5 text-body-sm break-words text-muted-foreground", className),
+		"data-slot": "breadcrumb-list",
+		...props
+	});
+};
+var BreadcrumbItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("li", {
+		className: cn("inline-flex items-center gap-1.5", className),
+		"data-slot": "breadcrumb-item",
+		...props
+	});
+};
+/**
+* Links to an ancestor page; pass `asChild` to render your router's link.
+*/
+var BreadcrumbLink = ({ asChild = false, className, ...props }) => {
+	const Component = asChild ? Slot.Root : "a";
+	return /* @__PURE__ */ jsx(Component, {
+		className: cn("rounded-sm transition-colors hover:text-foreground focus-ring", className),
+		"data-slot": "breadcrumb-link",
+		...props
+	});
+};
+/**
+* Names the current page and marks it as such for assistive technology.
+*/
+var BreadcrumbPage = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-current": "page",
+		className: cn("font-medium text-foreground", className),
+		"data-slot": "breadcrumb-page",
+		...props
+	});
+};
+var BreadcrumbSeparator = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx("li", {
+		"aria-hidden": true,
+		className: cn("text-subtle [&>svg]:size-3.5", className),
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(RefineIconChevronRight, {})
+	});
+};
+/**
+* Stands in for collapsed middle crumbs.
+*/
+var BreadcrumbEllipsis = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("flex size-5 items-center justify-center", className),
+		"data-slot": "breadcrumb-ellipsis",
+		...props,
+		children: [/* @__PURE__ */ jsx(RefineIconMoreHorizontal, {
+			"aria-hidden": true,
+			className: "size-4",
+			role: "presentation"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+};
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"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/button/button.d.ts

@@ -0,0 +1,15 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "gem" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    loading?: boolean;
+}
+/**
+ * Renders an action; while `loading` it keeps its width, swaps its content for a spinner and refuses clicks.
+ */
+export declare const Button: ({ asChild, children, className, disabled, loading, size, type, variant, ...props }: ButtonProps) => import("react").JSX.Element;
+export {};