cortena-ui 1.3.0 → 1.4.0

package/dist/components/select.js

@@ -0,0 +1,97 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Check, ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/select.tsx
+function Select$1(props) {
+	return /* @__PURE__ */ jsx(Select.Root, { ...props });
+}
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Group, {
+		"data-slot": "select-group",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function SelectValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		"data-slot": "select-value",
+		className: cn("flex-1 truncate text-left data-[placeholder]:text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+function SelectTrigger({ className, size = "md", children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("flex w-fit min-w-40 items-center justify-between gap-2 whitespace-nowrap px-3", size === "sm" ? "h-8 text-[length:var(--ds-text-caption)]" : "h-9 text-[length:var(--ds-text-caption-lg)]", "rounded-[var(--ds-radius-md)] border border-[var(--ds-input)]", "bg-[var(--ds-background)] text-[color:var(--ds-foreground)] shadow-[var(--ds-shadow-sm)]", "transition-[border-color,box-shadow,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "outline-none hover:border-[var(--ds-border-strong)]", "focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[popup-open]:border-[var(--ds-ring)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "data-[invalid]:border-[var(--ds-destructive)] data-[invalid]:ring-[var(--ds-destructive)]/30", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+			"data-slot": "select-icon",
+			className: "flex text-[color:var(--ds-muted-foreground)] transition-transform duration-[var(--ds-duration-fast)] data-[popup-open]:rotate-180",
+			children: /* @__PURE__ */ jsx(ChevronDown, {})
+		})]
+	});
+}
+function SelectContent({ className, children, side = "bottom", align = "start", sideOffset = 4, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, alignItemWithTrigger = false, container, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(Select.Positioner, {
+			"data-slot": "select-positioner",
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			anchor,
+			collisionBoundary,
+			collisionPadding,
+			collisionAvoidance,
+			sticky,
+			positionMethod,
+			alignItemWithTrigger,
+			className: "isolate z-50 outline-none",
+			children: /* @__PURE__ */ jsx(Select.Popup, {
+				"data-slot": "select-content",
+				className: cn("relative max-h-[var(--available-height,none)] min-w-[var(--anchor-width,auto)] overflow-y-auto overflow-x-hidden p-1", "rounded-[var(--ds-radius-md)] border border-[var(--ds-border)]", "bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]", "outline-none", "open:animate-in open:fade-in-0 open:zoom-in-95", "closed:animate-out closed:fade-out-0 closed:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", className),
+				...props,
+				children
+			})
+		})
+	});
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		"data-slot": "select-label",
+		className: cn("px-2 py-1.5 text-[length:var(--ds-text-caption)] font-medium text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		"data-slot": "select-item",
+		className: cn("relative flex w-full cursor-default select-none items-center gap-2 py-1.5 pr-8 pl-2", "rounded-[var(--ds-radius-sm)] text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)] outline-none", "data-[highlighted]:bg-[var(--ds-hover)] data-[highlighted]:text-[color:var(--ds-foreground)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			"data-slot": "select-item-text",
+			className: "flex-1 truncate",
+			children
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			"data-slot": "select-item-indicator",
+			className: "absolute right-2 flex size-4 items-center justify-center text-[color:var(--ds-primary)]",
+			children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
+		})]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		"data-slot": "select-separator",
+		className: cn("-mx-1 my-1 h-px bg-[var(--ds-border)]", className),
+		...props
+	});
+}
+//#endregion
+export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
+
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["Select","SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Select.\n *\n * `SelectContent` composes Base UI's Portal + Positioner + Popup so consumers\n * keep writing `<SelectContent side=\"bottom\" align=\"start\">`; positioning\n * props are forwarded to the Positioner, which is where Base UI reads them.\n *\n * Radix users:\n * - `SelectValue` shows the raw value unless the Root is given `items`\n *   (`{ [value]: label }` or `[{ value, label }]`) or `itemToStringLabel`;\n *   Base UI does not read the label out of an unmounted `SelectItem`.\n * - `onValueChange` receives `(value, eventDetails)`.\n * - `SelectContent` defaults to the dropdown layout; pass\n *   `alignItemWithTrigger` for Base UI's native-like overlay of the selected item.\n *\n * ## Typing the value\n *\n * `null` is the cleared / placeholder state, so `onValueChange` always hands\n * back `Value | null`, never bare `Value`. Name the value type on the element\n * to keep that union at `string | null` instead of letting inference widen it:\n *\n * ```tsx\n * const [status, setStatus] = useState(\"\");\n *\n * <Select<string>\n *   // \"\" is not a value any item carries; `|| null` is the placeholder state,\n *   // which is what makes SelectValue fall back to its `placeholder`.\n *   value={status || null}\n *   onValueChange={(next) => setStatus(next ?? \"\")} // next: string | null\n * >\n * ```\n *\n * Without the explicit `<string>` the type argument is inferred from `value`,\n * so a `string | null` value widens `Value` and the handler's parameter turns\n * into `string | null | null`. Multi-select narrows too:\n * `<Select<string, true> multiple>` hands back `string[]`, never `null`.\n *\n * `SelectProps` is the same props type, for a wrapper that forwards them.\n */\nexport type SelectProps<\n  Value = string,\n  Multiple extends boolean | undefined = false,\n> = SelectPrimitive.Root.Props<Value, Multiple>;\n\nfunction Select<Value, Multiple extends boolean | undefined = false>(\n  props: SelectProps<Value, Multiple>,\n) {\n  return <SelectPrimitive.Root {...props} />;\n}\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\n        \"flex-1 truncate text-left data-[placeholder]:text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface SelectTriggerProps extends SelectPrimitive.Trigger.Props {\n  size?: \"sm\" | \"md\";\n}\n\nfunction SelectTrigger({ className, size = \"md\", children, ...props }: SelectTriggerProps) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit min-w-40 items-center justify-between gap-2 whitespace-nowrap px-3\",\n        size === \"sm\" ? \"h-8 text-[length:var(--ds-text-caption)]\" : \"h-9 text-[length:var(--ds-text-caption-lg)]\",\n        \"rounded-[var(--ds-radius-md)] border border-[var(--ds-input)]\",\n        \"bg-[var(--ds-background)] text-[color:var(--ds-foreground)] shadow-[var(--ds-shadow-sm)]\",\n        \"transition-[border-color,box-shadow,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n        \"outline-none hover:border-[var(--ds-border-strong)]\",\n        \"focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n        \"data-[popup-open]:border-[var(--ds-ring)]\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        \"data-[invalid]:border-[var(--ds-destructive)] data-[invalid]:ring-[var(--ds-destructive)]/30\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        data-slot=\"select-icon\"\n        className=\"flex text-[color:var(--ds-muted-foreground)] transition-transform duration-[var(--ds-duration-fast)] data-[popup-open]:rotate-180\"\n      >\n        <ChevronDown />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\ntype PositionerProps = Pick<\n  SelectPrimitive.Positioner.Props,\n  | \"side\"\n  | \"align\"\n  | \"sideOffset\"\n  | \"alignOffset\"\n  | \"anchor\"\n  | \"collisionBoundary\"\n  | \"collisionPadding\"\n  | \"collisionAvoidance\"\n  | \"sticky\"\n  | \"positionMethod\"\n  | \"alignItemWithTrigger\"\n>;\n\nexport interface SelectContentProps extends SelectPrimitive.Popup.Props, PositionerProps {\n  /** Where to portal the popup; defaults to `<body>`. */\n  container?: SelectPrimitive.Portal.Props[\"container\"];\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset,\n  anchor,\n  collisionBoundary,\n  collisionPadding,\n  collisionAvoidance,\n  sticky,\n  positionMethod,\n  alignItemWithTrigger = false,\n  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\n      <SelectPrimitive.Positioner\n        data-slot=\"select-positioner\"\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        collisionBoundary={collisionBoundary}\n        collisionPadding={collisionPadding}\n        collisionAvoidance={collisionAvoidance}\n        sticky={sticky}\n        positionMethod={positionMethod}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50 outline-none\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"relative max-h-[var(--available-height,none)] min-w-[var(--anchor-width,auto)] overflow-y-auto overflow-x-hidden p-1\",\n            \"rounded-[var(--ds-radius-md)] border border-[var(--ds-border)]\",\n            \"bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]\",\n            \"outline-none\",\n            \"open:animate-in open:fade-in-0 open:zoom-in-95\",\n            \"closed:animate-out closed:fade-out-0 closed:zoom-out-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n            \"duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\n        \"px-2 py-1.5 text-[length:var(--ds-text-caption)] font-medium text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default select-none items-center gap-2 py-1.5 pr-8 pl-2\",\n        \"rounded-[var(--ds-radius-sm)] text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)] outline-none\",\n        \"data-[highlighted]:bg-[var(--ds-hover)] data-[highlighted]:text-[color:var(--ds-foreground)]\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText data-slot=\"select-item-text\" className=\"flex-1 truncate\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-4 items-center justify-center text-[color:var(--ds-primary)]\"\n      >\n        <Check className=\"size-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-[var(--ds-border)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectContent,\n  SelectItem,\n  SelectGroup,\n  SelectLabel,\n  SelectSeparator,\n};\n"],"mappings":";;;;;;;AAkDA,SAASA,SACP,OACA;CACA,OAAO,oBAACC,OAAgB,MAAjB,EAAsB,GAAI,MAAQ,CAAA;AAC3C;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,iBAAiB,SAAS;EACxC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,wFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,cAAc,EAAE,WAAW,OAAO,MAAM,UAAU,GAAG,SAA6B;CACzF,OACE,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,iFACA,SAAS,OAAO,6CAA6C,+CAC7D,iEACA,4FACA,sHACA,uDACA,yGACA,6CACA,kEACA,gGACA,qFACA,SACF;EACA,GAAI;EAjBN,UAAA,CAmBG,UACD,oBAACA,OAAgB,MAAjB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,aAAD,CAAc,CAAA;EACM,CAAA,CACC;;AAE7B;AAsBA,SAAS,cAAc,EACrB,WACA,UACA,OAAO,UACP,QAAQ,SACR,aAAa,GACb,aACA,QACA,mBACA,kBACA,oBACA,QACA,gBACA,uBAAuB,OACvB,WACA,GAAG,SACkB;CACrB,OACE,oBAACA,OAAgB,QAAjB;EAAmC;EACjC,UAAA,oBAACA,OAAgB,YAAjB;GACE,aAAU;GACJ;GACC;GACK;GACC;GACL;GACW;GACD;GACE;GACZ;GACQ;GACM;GACtB,WAAU;GAEV,UAAA,oBAACA,OAAgB,OAAjB;IACE,aAAU;IACV,WAAW,GACT,wHACA,kEACA,iGACA,gBACA,kDACA,2DACA,+JACA,gEACA,SACF;IACA,GAAI;IAEH;GACoB,CAAA;EACG,CAAA;CACN,CAAA;AAE5B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2C;CAC9E,OACE,oBAACA,OAAgB,YAAjB;EACE,aAAU;EACV,WAAW,GACT,wGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,SAAqC;CACjF,OACE,qBAACA,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GACT,uFACA,wHACA,gGACA,kEACA,qFACA,SACF;EACA,GAAI;EAVN,UAAA,CAYE,oBAACA,OAAgB,UAAjB;GAA0B,aAAU;GAAmB,WAAU;GAC9D;EACuB,CAAA,GAC1B,oBAACA,OAAgB,eAAjB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,OAAD,EAAO,WAAU,SAAU,CAAA;EACE,CAAA,CACX;;AAE1B;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA0C;CACjF,OACE,oBAACA,OAAgB,WAAjB;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL"}

package/dist/components/separator.d.ts

@@ -0,0 +1,19 @@
+"use client";
+import * as React from "react";
+import { Separator } from "@base-ui/react/separator";
+//#region src/components/separator.d.ts
+export interface SeparatorProps extends React.ComponentProps<typeof Separator> {
+  /**
+   * Purely visual: renders with `role="none"` so screen readers skip it.
+   * Defaults to true, matching the Radix component this replaces.
+   */
+  decorative?: boolean;
+}
+/**
+ * Separator — a one-pixel rule on the border token. Base UI supplies the
+ * `role="separator"` and `aria-orientation` semantics when not decorative.
+ */
+declare function Separator$1({ className, orientation, decorative, ...props }: SeparatorProps): React.JSX.Element;
+//#endregion
+export { Separator$1 as Separator };
+//# sourceMappingURL=separator.d.ts.map

package/dist/components/separator.js

@@ -0,0 +1,23 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+//#region src/components/separator.tsx
+/**
+* Separator — a one-pixel rule on the border token. Base UI supplies the
+* `role="separator"` and `aria-orientation` semantics when not decorative.
+*/
+function Separator$1({ className, orientation = "horizontal", decorative = true, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "separator",
+		orientation,
+		...decorative ? { role: "none" } : {},
+		className: cn("shrink-0 bg-[var(--ds-border)]", orientation === "horizontal" ? "h-px w-full" : "h-full min-h-4 w-px self-stretch", className),
+		...props
+	});
+}
+//#endregion
+export { Separator$1 as Separator };
+
+//# sourceMappingURL=separator.js.map

package/dist/components/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":["Separator","BaseSeparator"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["\"use client\";\n\nimport { Separator as BaseSeparator } from \"@base-ui/react/separator\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface SeparatorProps extends React.ComponentProps<typeof BaseSeparator> {\n  /**\n   * Purely visual: renders with `role=\"none\"` so screen readers skip it.\n   * Defaults to true, matching the Radix component this replaces.\n   */\n  decorative?: boolean;\n}\n\n/**\n * Separator — a one-pixel rule on the border token. Base UI supplies the\n * `role=\"separator\"` and `aria-orientation` semantics when not decorative.\n */\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: SeparatorProps) {\n  return (\n    <BaseSeparator\n      data-slot=\"separator\"\n      orientation={orientation}\n      // An explicit undefined would still override Base UI's own role.\n      {...(decorative ? { role: \"none\" } : {})}\n      className={cn(\n        \"shrink-0 bg-[var(--ds-border)]\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full min-h-4 w-px self-stretch\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n"],"mappings":";;;;;;;;;;AAkBA,SAASA,YAAU,EACjB,WACA,cAAc,cACd,aAAa,MACb,GAAG,SACc;CACjB,OACE,oBAACC,WAAD;EACE,aAAU;EACG;EAEb,GAAK,aAAa,EAAE,MAAM,OAAO,IAAI,CAAC;EACtC,WAAW,GACT,kCACA,gBAAgB,eAAe,gBAAgB,oCAC/C,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/sheet.d.ts

@@ -0,0 +1,35 @@
+"use client";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/sheet.d.ts
+export interface SheetProps extends Dialog.Root.Props {
+  /**
+   * `true` (default) traps focus, locks page scroll and draws a backdrop.
+   * `false` draws no backdrop and traps nothing, for a panel read alongside
+   * the app. `"trap-focus"` keeps focus in but leaves the page scrollable.
+   */
+  modal?: boolean | "trap-focus";
+}
+declare function Sheet({ modal, ...props }: SheetProps): React.JSX.Element;
+declare function SheetTrigger(props: Dialog.Trigger.Props): React.JSX.Element;
+declare function SheetClose(props: Dialog.Close.Props): React.JSX.Element;
+declare function SheetPortal(props: Dialog.Portal.Props): React.JSX.Element;
+declare function SheetOverlay({ className, ...props }: Dialog.Backdrop.Props): React.JSX.Element;
+declare const sheetVariants: (props?: ({
+  side?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SheetContentProps extends Dialog.Popup.Props, VariantProps<typeof sheetVariants> {
+  /** Keep the sheet mounted in the DOM while hidden. */
+  keepMounted?: boolean;
+  /** Where to portal the sheet; defaults to `<body>`. */
+  container?: Dialog.Portal.Props["container"];
+}
+declare function SheetContent({ side, className, children, keepMounted, container, ...props }: SheetContentProps): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: Dialog.Title.Props): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: Dialog.Description.Props): React.JSX.Element;
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetVariants };
+//# sourceMappingURL=sheet.d.ts.map

package/dist/components/sheet.js

@@ -0,0 +1,131 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/sheet.tsx
+/**
+* Sheet: a Dialog whose Popup is anchored to one edge of the viewport.
+*
+* Same Base UI parts as Dialog (Root, Trigger, Portal, Backdrop, Popup, Title,
+* Description, Close); only the Popup's placement differs, chosen by `side`.
+* `SheetContent` composes Portal + Backdrop + Popup so consumers keep writing
+* `<SheetContent side="right">…</SheetContent>`.
+*
+* ## Non-modal side panels
+*
+* `modal={false}` is the help-panel / inspector case: a sheet read *alongside*
+* the app rather than instead of it. No backdrop is rendered, focus is not
+* trapped, page scroll is not locked, and the rest of the page stays clickable,
+* so a user can keep working with the panel open. `modal="trap-focus"` is the
+* middle setting Base UI offers: focus stays inside, the page still scrolls.
+*
+* ```tsx
+* <Sheet modal={false} open={helpOpen} onOpenChange={setHelpOpen}>
+*   <SheetContent side="right" disablePointerDismissal>…</SheetContent>
+* </Sheet>
+* ```
+*
+* A non-modal sheet closes when focus or a press leaves it; pass
+* `disablePointerDismissal` (a Base UI Root prop, forwarded) to keep it open
+* until the user closes it. `modal` is on the Root because that is where Base
+* UI reads it; `SheetContent` picks the backdrop up from there through context.
+*/
+const SheetModalContext = /* @__PURE__ */ React.createContext(true);
+function Sheet({ modal = true, ...props }) {
+	return /* @__PURE__ */ jsx(SheetModalContext.Provider, {
+		value: modal,
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			modal,
+			...props
+		})
+	});
+}
+function SheetTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+}
+function SheetClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+}
+function SheetPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "sheet-portal",
+		...props
+	});
+}
+function SheetOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "sheet-overlay",
+		className: cn("fixed inset-0 z-50", "bg-[color-mix(in_oklab,var(--ds-ink-950)_70%,transparent)]", "open:animate-in open:fade-in-0 closed:animate-out closed:fade-out-0", "duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]", className),
+		...props
+	});
+}
+const sheetVariants = /* @__PURE__ */ cva([
+	"fixed z-50 flex flex-col gap-4 p-6 outline-none",
+	"bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]",
+	"open:animate-in closed:animate-out",
+	"open:duration-[var(--ds-duration-slow)] closed:duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]"
+], {
+	variants: { side: {
+		top: "inset-x-0 top-0 border-b border-[var(--ds-border)] open:slide-in-from-top closed:slide-out-to-top",
+		bottom: "inset-x-0 bottom-0 border-t border-[var(--ds-border)] open:slide-in-from-bottom closed:slide-out-to-bottom",
+		left: "inset-y-0 left-0 h-full w-3/4 border-r border-[var(--ds-border)] open:slide-in-from-left closed:slide-out-to-left sm:max-w-sm",
+		right: "inset-y-0 right-0 h-full w-3/4 border-l border-[var(--ds-border)] open:slide-in-from-right closed:slide-out-to-right sm:max-w-sm"
+	} },
+	defaultVariants: { side: "right" }
+});
+function SheetContent({ side = "right", className, children, keepMounted, container, ...props }) {
+	const modal = React.useContext(SheetModalContext);
+	return /* @__PURE__ */ jsxs(SheetPortal, {
+		keepMounted,
+		container,
+		children: [modal === false ? null : /* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(Dialog.Popup, {
+			"data-slot": "sheet-content",
+			"data-side": side,
+			"data-modal": modal === false ? void 0 : modal === true ? "" : modal,
+			className: cn(sheetVariants({ side }), className),
+			...props,
+			children
+		})]
+	});
+}
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "sheet-title",
+		className: cn("text-[length:var(--ds-text-body-md)] font-semibold text-[color:var(--ds-foreground)]", className),
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "sheet-description",
+		className: cn("text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetVariants };
+
+//# sourceMappingURL=sheet.js.map

package/dist/components/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Sheet: a Dialog whose Popup is anchored to one edge of the viewport.\n *\n * Same Base UI parts as Dialog (Root, Trigger, Portal, Backdrop, Popup, Title,\n * Description, Close); only the Popup's placement differs, chosen by `side`.\n * `SheetContent` composes Portal + Backdrop + Popup so consumers keep writing\n * `<SheetContent side=\"right\">…</SheetContent>`.\n *\n * ## Non-modal side panels\n *\n * `modal={false}` is the help-panel / inspector case: a sheet read *alongside*\n * the app rather than instead of it. No backdrop is rendered, focus is not\n * trapped, page scroll is not locked, and the rest of the page stays clickable,\n * so a user can keep working with the panel open. `modal=\"trap-focus\"` is the\n * middle setting Base UI offers: focus stays inside, the page still scrolls.\n *\n * ```tsx\n * <Sheet modal={false} open={helpOpen} onOpenChange={setHelpOpen}>\n *   <SheetContent side=\"right\" disablePointerDismissal>…</SheetContent>\n * </Sheet>\n * ```\n *\n * A non-modal sheet closes when focus or a press leaves it; pass\n * `disablePointerDismissal` (a Base UI Root prop, forwarded) to keep it open\n * until the user closes it. `modal` is on the Root because that is where Base\n * UI reads it; `SheetContent` picks the backdrop up from there through context.\n */\nconst SheetModalContext = /* @__PURE__ */ React.createContext<boolean | \"trap-focus\">(true);\n\nexport interface SheetProps extends SheetPrimitive.Root.Props {\n  /**\n   * `true` (default) traps focus, locks page scroll and draws a backdrop.\n   * `false` draws no backdrop and traps nothing, for a panel read alongside\n   * the app. `\"trap-focus\"` keeps focus in but leaves the page scrollable.\n   */\n  modal?: boolean | \"trap-focus\";\n}\n\nfunction Sheet({ modal = true, ...props }: SheetProps) {\n  return (\n    <SheetModalContext.Provider value={modal}>\n      <SheetPrimitive.Root modal={modal} {...props} />\n    </SheetModalContext.Provider>\n  );\n}\n\nfunction SheetTrigger(props: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose(props: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetPortal(props: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50\",\n        \"bg-[color-mix(in_oklab,var(--ds-ink-950)_70%,transparent)]\",\n        \"open:animate-in open:fade-in-0 closed:animate-out closed:fade-out-0\",\n        \"duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst sheetVariants = /* @__PURE__ */ cva(\n  [\n    \"fixed z-50 flex flex-col gap-4 p-6 outline-none\",\n    \"bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]\",\n    \"open:animate-in closed:animate-out\",\n    \"open:duration-[var(--ds-duration-slow)] closed:duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]\",\n  ],\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b border-[var(--ds-border)] open:slide-in-from-top closed:slide-out-to-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t border-[var(--ds-border)] open:slide-in-from-bottom closed:slide-out-to-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r border-[var(--ds-border)] open:slide-in-from-left closed:slide-out-to-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l border-[var(--ds-border)] open:slide-in-from-right closed:slide-out-to-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  },\n);\n\nexport interface SheetContentProps\n  extends SheetPrimitive.Popup.Props, VariantProps<typeof sheetVariants> {\n  /** Keep the sheet mounted in the DOM while hidden. */\n  keepMounted?: boolean;\n  /** Where to portal the sheet; defaults to `<body>`. */\n  container?: SheetPrimitive.Portal.Props[\"container\"];\n}\n\nfunction SheetContent({\n  side = \"right\",\n  className,\n  children,\n  keepMounted,\n  container,\n  ...props\n}: SheetContentProps) {\n  const modal = React.useContext(SheetModalContext);\n  return (\n    <SheetPortal keepMounted={keepMounted} container={container}>\n      {modal === false ? null : <SheetOverlay />}\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        data-modal={modal === false ? undefined : modal === true ? \"\" : modal}\n        className={cn(sheetVariants({ side }), className)}\n        {...props}\n      >\n        {children}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\n        \"text-[length:var(--ds-text-body-md)] font-semibold text-[color:var(--ds-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\n        \"text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n  sheetVariants,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAM,oBAAoC,sBAAM,cAAsC,IAAI;AAW1F,SAAS,MAAM,EAAE,QAAQ,MAAM,GAAG,SAAqB;CACrD,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EACjC,UAAA,oBAACA,OAAe,MAAhB;GAA4B;GAAO,GAAI;EAAQ,CAAA;CACrB,CAAA;AAEhC;AAEA,SAAS,aAAa,OAAqC;CACzD,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,WAAW,OAAmC;CACrD,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,SAAS,YAAY,OAAoC;CACvD,OAAO,oBAACA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAwC;CAC5E,OACE,oBAACA,OAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,sBACA,8DACA,uEACA,gEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAgC,oBACpC;CACE;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,KAAK;EACL,QACE;EACF,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF;AAUA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,UACA,aACA,WACA,GAAG,SACiB;CACpB,MAAM,QAAQ,MAAM,WAAW,iBAAiB;CAChD,OACE,qBAAC,aAAD;EAA0B;EAAwB;EAAlD,UAAA,CACG,UAAU,QAAQ,OAAO,oBAAC,cAAD,CAAe,CAAA,GACzC,oBAACA,OAAe,OAAhB;GACE,aAAU;GACV,aAAW;GACX,cAAY,UAAU,QAAQ,KAAA,IAAY,UAAU,OAAO,KAAK;GAChE,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;GAChD,GAAI;GAEH;EACmB,CAAA,CACX;;AAEjB;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAqC;CACvE,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GACT,wFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAA2C;CACnF,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GACT,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/skeleton.d.ts

@@ -0,0 +1,12 @@
+"use client";
+import * as React from "react";
+//#region src/components/skeleton.d.ts
+/**
+ * Skeleton — a pulsing placeholder block. Sized by the consumer (`h-4 w-40`);
+ * the fill is the border token, which reads on the canvas, a card and a
+ * popover in both themes.
+ */
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+//#endregion
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton.js

@@ -0,0 +1,22 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton.tsx
+/**
+* Skeleton — a pulsing placeholder block. Sized by the consumer (`h-4 w-40`);
+* the fill is the border token, which reads on the canvas, a card and a
+* popover in both themes.
+*/
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		"aria-hidden": true,
+		className: cn("animate-pulse rounded-[var(--ds-radius-sm)] bg-[var(--ds-border)]", className),
+		...props
+	});
+}
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Skeleton — a pulsing placeholder block. Sized by the consumer (`h-4 w-40`);\n * the fill is the border token, which reads on the canvas, a card and a\n * popover in both themes.\n */\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      aria-hidden\n      className={cn(\"animate-pulse rounded-[var(--ds-radius-sm)] bg-[var(--ds-border)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Skeleton };\n"],"mappings":";;;;;;;;;;AAUA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAsC;CACtE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAA;EACA,WAAW,GAAG,qEAAqE,SAAS;EAC5F,GAAI;CACL,CAAA;AAEL"}

package/dist/components/sortable-list.d.ts

@@ -0,0 +1,67 @@
+"use client";
+import * as React from "react";
+import { DraggableAttributes, UniqueIdentifier } from "@dnd-kit/core";
+import { arrayMove } from "@dnd-kit/sortable";
+//#region src/components/sortable-list.d.ts
+/** Spread onto the element that should start a drag. */
+export interface SortableHandleProps extends Partial<DraggableAttributes> {
+  ref: (element: HTMLElement | null) => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+  onPointerDown?: React.PointerEventHandler<HTMLElement>;
+  onMouseDown?: React.MouseEventHandler<HTMLElement>;
+  onTouchStart?: React.TouchEventHandler<HTMLElement>;
+}
+export interface SortableRenderState {
+  /** Attributes, listeners and ref for a custom drag handle. */
+  handleProps: SortableHandleProps;
+  /** True for the item being dragged (and for the overlay copy). */
+  isDragging: boolean;
+}
+/** What moved where, passed to `onReorder` alongside the reordered array. */
+export interface SortableReorderDetails {
+  /** Index the item came from, in the array as it was passed in. */
+  from: number;
+  /** Index it landed on. */
+  to: number;
+  /** Id of the item that moved (`getId` of the dragged item). */
+  activeId: UniqueIdentifier;
+  /** Id of the item it was dropped onto. */
+  overId: UniqueIdentifier;
+}
+export interface SortableListProps<T> extends Omit<React.ComponentProps<"ul">, "children"> {
+  items: readonly T[];
+  /** Stable id per item; must be unique within the list. */
+  getId: (item: T) => UniqueIdentifier;
+  /**
+   * Called with the reordered array after a successful drop, and with the move
+   * itself — `{ from, to, activeId, overId }` — for a server that persists a
+   * position rather than the whole list.
+   */
+  onReorder: (next: T[], details: SortableReorderDetails) => void;
+  renderItem: (item: T, state: SortableRenderState) => React.ReactNode;
+  /** Layout axis; also selects the sorting strategy. */
+  orientation?: "vertical" | "horizontal";
+  /** Only a `<SortableHandle>` (or an element given `handleProps`) starts a drag. */
+  handle?: boolean;
+  /**
+   * Let a finger scroll the page over the rows. Defaults to `handle`: `true`
+   * in handle mode, `false` in whole-row mode, which is what each already did.
+   * `true` on a whole-row list drops `touch-none` and uses a TouchSensor with
+   * delay activation, so a swipe scrolls and a held press drags.
+   */
+  touchScroll?: boolean;
+  /** Disables every sensor and hides the handles. */
+  disabled?: boolean;
+  /** Class name for each item wrapper. */
+  itemClassName?: string;
+}
+/**
+ * A grip button that starts the drag for its row. Reads the row's activator
+ * props from context, so it needs no wiring beyond being rendered inside
+ * `renderItem`. Hidden (kept in layout) when the list is disabled.
+ */
+declare function SortableHandle({ className, children, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function SortableList<T>({ items, getId, onReorder, renderItem, orientation, handle, disabled, touchScroll, itemClassName: itemClass, className, ...props }: SortableListProps<T>): React.JSX.Element;
+//#endregion
+export { SortableHandle, SortableList, arrayMove };
+//# sourceMappingURL=sortable-list.d.ts.map