@womp/kookie-ui 0.15.0 → 0.16.0

package/src/components/shell.css

@@ -96,6 +96,9 @@
  * property guaranteed-invalid, so the readers below fall back to the frame.
  */
 .rt-ShellPane {
+  /* A pane nested in a Shell.Scroll measures its own floating rows, not the outer ones. */
+  --rt-pane-inset-start: initial;
+  --rt-pane-inset-end: initial;
   --rt-shell-position: initial;
   --rt-shell-z: initial;
   --rt-shell-row: initial;
@@ -207,6 +210,112 @@
   min-height: 0;
 }
 
+/* ── Floating header and footer ───────────────────────────────────────────── */
+
+/*
+ * A floating row sits over the scroller instead of above or below it, so the list runs the
+ * pane's full height and scrolls behind the row. The row paints nothing, so it catches no
+ * clicks either: each control in it takes the pointer back.
+ */
+.rt-ShellPaneHeader[data-float],
+.rt-ShellPaneFooter[data-float] {
+  position: absolute;
+  inset-inline: 0;
+  z-index: 1;
+  pointer-events: none;
+
+  & > :where(*),
+  & > :where(.rt-Toolbar) > :where(*) {
+    pointer-events: auto;
+  }
+  & > :where(.rt-Toolbar) {
+    pointer-events: none;
+  }
+}
+.rt-ShellPaneHeader[data-float] {
+  top: 0;
+}
+.rt-ShellPaneFooter[data-float] {
+  bottom: 0;
+}
+
+/* The row's containing block is the pane content around it. */
+:where(:has(> .rt-ShellPaneHeader[data-float], > .rt-ShellPaneFooter[data-float])) {
+  position: relative;
+}
+
+/*
+ * How tall the floating row is: one control row plus the row's padding on both sides, worked
+ * out in CSS so the first paint is right. A Toolbar in the row states its own control height.
+ */
+:has(> .rt-ShellPaneHeader[data-float]:where(.rt-r-size-1)) {
+  --rt-pane-row-start: var(--control-height-1);
+  --rt-pane-pad-start: var(--space-2);
+}
+:has(> .rt-ShellPaneHeader[data-float]:where(.rt-r-size-2)) {
+  --rt-pane-row-start: var(--control-height-2);
+  --rt-pane-pad-start: var(--space-3);
+}
+:has(> .rt-ShellPaneHeader[data-float]:where(.rt-r-size-3)) {
+  --rt-pane-row-start: var(--control-height-3);
+  --rt-pane-pad-start: var(--space-3);
+}
+:has(> .rt-ShellPaneFooter[data-float]:where(.rt-r-size-1)) {
+  --rt-pane-row-end: var(--control-height-1);
+  --rt-pane-pad-end: var(--space-2);
+}
+:has(> .rt-ShellPaneFooter[data-float]:where(.rt-r-size-2)) {
+  --rt-pane-row-end: var(--control-height-2);
+  --rt-pane-pad-end: var(--space-3);
+}
+:has(> .rt-ShellPaneFooter[data-float]:where(.rt-r-size-3)) {
+  --rt-pane-row-end: var(--control-height-3);
+  --rt-pane-pad-end: var(--space-3);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-1)) {
+  --rt-pane-row-start: var(--control-height-1);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-2)) {
+  --rt-pane-row-start: var(--control-height-2);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-3)) {
+  --rt-pane-row-start: var(--control-height-3);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-4)) {
+  --rt-pane-row-start: var(--control-height-4);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-1)) {
+  --rt-pane-row-end: var(--control-height-1);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-2)) {
+  --rt-pane-row-end: var(--control-height-2);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-3)) {
+  --rt-pane-row-end: var(--control-height-3);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-4)) {
+  --rt-pane-row-end: var(--control-height-4);
+}
+
+/*
+ * The scroller spends that height three ways: the list starts and ends clear of the rows, the
+ * scrollbar stays between them, and the fade (with `fade`) runs across them.
+ */
+:has(> .rt-ShellPaneHeader[data-float]) > .rt-ShellScroll {
+  --rt-pane-inset-start: calc(var(--rt-pane-row-start) + 2 * var(--rt-pane-pad-start));
+  --scroll-fade-start: var(--rt-pane-inset-start);
+  --scrollarea-scrollbar-vertical-margin-top: calc(var(--space-1) + var(--rt-pane-inset-start));
+}
+:has(> .rt-ShellPaneFooter[data-float]) > .rt-ShellScroll {
+  --rt-pane-inset-end: calc(var(--rt-pane-row-end) + 2 * var(--rt-pane-pad-end));
+  --scroll-fade-end: var(--rt-pane-inset-end);
+  --scrollarea-scrollbar-vertical-margin-bottom: calc(var(--space-1) + var(--rt-pane-inset-end));
+}
+.rt-ShellScroll > .rt-ScrollAreaViewport > * {
+  padding-top: var(--rt-pane-inset-start, 0px);
+  padding-bottom: var(--rt-pane-inset-end, 0px);
+}
+
 /* Closed is closed, in every posture: out of the layout, the tab order and the accessibility tree. */
 .rt-ShellPane[data-state='closed'] {
   display: none;

package/src/components/toolbar.css

@@ -77,6 +77,12 @@
   }
 }
 
+/* Over content, the well is a raised surface of its own, like a raised button beside it. */
+:where(.rt-Toolbar[data-backdrop]) .rt-ToolbarGroup {
+  background-color: var(--color-surface-solid);
+  box-shadow: var(--shadow-2);
+}
+
 /* A button in the group is hosted: the group's height minus the inset on both sides, and a
    concentric corner. Overriding the height variable (not `height`) keeps an icon button square. */
 .rt-ToolbarGroup > :where(.rt-BaseButton) {

package/src/components/toolbar.tsx

@@ -35,6 +35,7 @@ type ToolbarOrientation = NonNullable<GetPropDefTypes<typeof toolbarRootPropDefs
 interface ToolbarContextValue {
   size: ToolbarSize;
   orientation: ToolbarOrientation;
+  backdrop: boolean;
 }
 
 const ToolbarContext = React.createContext<ToolbarContextValue | null>(null);
@@ -59,7 +60,14 @@ type ToolbarOwnProps = GetPropDefTypes<typeof toolbarRootPropDefs>;
 interface ToolbarProps
   extends ComponentPropsWithout<typeof ToolbarPrimitive.Root, RemovedProps | 'orientation'>,
     ToolbarOwnProps,
-    MarginProps {}
+    MarginProps {
+  /**
+   * Gives every control a surface of its own, for a row that content passes behind, such as
+   * `Shell.PaneHeader float`. Buttons rest `raised` instead of `soft`, and a group's well is
+   * solid and raised.
+   */
+  backdrop?: boolean;
+}
 
 /**
  * A row of controls with one keyboard tab stop. The arrow keys move focus between the controls.
@@ -82,19 +90,20 @@ interface ToolbarProps
 const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwardedRef) => {
   const size: ToolbarSize = props.size ?? toolbarRootPropDefs.size.default;
   const orientation: ToolbarOrientation = props.orientation ?? toolbarRootPropDefs.orientation.default;
-  const { className, orientation: _orientation, children, ...rootProps } = extractProps(
+  const { className, orientation: _orientation, backdrop = false, children, ...rootProps } = extractProps(
     props,
     toolbarRootPropDefs,
     marginPropDefs,
   );
 
-  const context = React.useMemo(() => ({ size, orientation }), [size, orientation]);
+  const context = React.useMemo(() => ({ size, orientation, backdrop }), [size, orientation, backdrop]);
 
   return (
     <ToolbarPrimitive.Root
       {...rootProps}
       ref={forwardedRef}
       orientation={orientation}
+      data-backdrop={backdrop || undefined}
       className={classNames('rt-Toolbar', className)}
     >
       <ToolbarContext.Provider value={context}>{children}</ToolbarContext.Provider>
@@ -169,8 +178,8 @@ function isPressed(value: React.AriaAttributes['aria-pressed']) {
  * Set `iconOnly` (with an `aria-label`) for a symbol-only control. Set `aria-pressed` for a
  * control that toggles; a pressed button wears Button's pressed look.
  *
- * It takes the toolbar's `size`, and rests as a gray `soft` button (gray `ghost` inside a
- * `ToolbarGroup`). A stated `size`, `variant` or `color` wins; a stated `variant` without a
+ * It takes the toolbar's `size`, and rests as a gray `soft` button (`raised` in a toolbar with
+ * `backdrop`, gray `ghost` inside a `ToolbarGroup`). A stated `size`, `variant` or `color` wins; a stated `variant` without a
  * `color` takes Button's own default colour. It throws outside a `Toolbar`.
  */
 const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((props, forwardedRef) => {
@@ -185,7 +194,7 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((p
   const shared = {
     size: size ?? toolbar.size,
     // A caller states the look by `variant` or the rank by `emphasis`, never both.
-    ...(emphasis !== undefined ? { emphasis } : { variant: variant ?? (group ? 'ghost' : 'soft') }),
+    ...(emphasis !== undefined ? { emphasis } : { variant: variant ?? (group ? 'ghost' : toolbar.backdrop ? 'raised' : 'soft') }),
     // The gray rest is a pair with the default variant: a caller who states a variant or an
     // emphasis gets Button's own colour for it unless they state a colour too.
     color: color ?? (variant || emphasis ? undefined : 'gray'),

package/src/hooks/use-thumb-sync.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+/**
+ * Keeps a Radix ScrollArea's thumbs on the scroll position on every scroll.
+ *
+ * Radix moves a thumb from a requestAnimationFrame loop it starts on the first scroll event of a
+ * burst. Next's production minifier compiles that self-calling loop away, so in a production
+ * build the thumb moves once, sits while the content scrolls, and jumps when the next burst
+ * starts. This writes the transform Radix would, at most once per frame. Nothing re-renders.
+ *
+ * Pass the hook's setter as a ref on `ScrollArea.Viewport`; the scrollbars are its siblings.
+ */
+export function useThumbSync<T extends HTMLElement>() {
+  const [viewport, setViewport] = React.useState<T | null>(null);
+
+  React.useEffect(() => {
+    const root = viewport?.parentElement;
+    if (!viewport || !root) return;
+    let frame = 0;
+    const write = () => {
+      frame = 0;
+      for (const thumb of root.querySelectorAll<HTMLElement>(':scope > .rt-ScrollAreaScrollbar > .rt-ScrollAreaThumb')) {
+        const scrollbar = thumb.parentElement as HTMLElement;
+        const style = getComputedStyle(scrollbar);
+        if (scrollbar.dataset.orientation === 'horizontal') {
+          const track = scrollbar.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+          const offset = thumbOffset(viewport.scrollLeft, viewport.scrollWidth - viewport.offsetWidth, track - thumb.offsetWidth);
+          thumb.style.transform = `translate3d(${offset}px, 0, 0)`;
+        } else {
+          const track = scrollbar.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+          const offset = thumbOffset(viewport.scrollTop, viewport.scrollHeight - viewport.offsetHeight, track - thumb.offsetHeight);
+          thumb.style.transform = `translate3d(0, ${offset}px, 0)`;
+        }
+      }
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(write);
+    };
+    viewport.addEventListener('scroll', schedule, { passive: true });
+    return () => {
+      if (frame) cancelAnimationFrame(frame);
+      viewport.removeEventListener('scroll', schedule);
+    };
+  }, [viewport]);
+
+  return setViewport;
+}
+
+/** Radix's mapping: scroll position over its range, onto the room the thumb has to travel. */
+function thumbOffset(position: number, range: number, travel: number) {
+  if (range <= 0 || travel <= 0) return 0;
+  // Right-to-left scrolls run from -range to 0; the thumb then travels from -travel to 0.
+  const clamped = Math.min(Math.max(position, -range), range);
+  return (clamped / range) * travel;
+}

package/styles.css

@@ -22091,6 +22091,8 @@
   isolation: isolate;
 }
 .rt-ShellPane {
+  --rt-pane-inset-start: initial;
+  --rt-pane-inset-end: initial;
   --rt-shell-position: initial;
   --rt-shell-z: initial;
   --rt-shell-row: initial;
@@ -22195,6 +22197,90 @@
           flex: 1;
   min-height: 0;
 }
+.rt-ShellPaneHeader[data-float],
+.rt-ShellPaneFooter[data-float] {
+  position: absolute;
+  inset-inline: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+:is(.rt-ShellPaneHeader[data-float],.rt-ShellPaneFooter[data-float]) > :where(*),:is(.rt-ShellPaneHeader[data-float],.rt-ShellPaneFooter[data-float]) > :where(.rt-Toolbar) > :where(*) {
+  pointer-events: auto;
+}
+:is(.rt-ShellPaneHeader[data-float],.rt-ShellPaneFooter[data-float]) > :where(.rt-Toolbar) {
+  pointer-events: none;
+}
+.rt-ShellPaneHeader[data-float] {
+  top: 0;
+}
+.rt-ShellPaneFooter[data-float] {
+  bottom: 0;
+}
+:where(:has(> .rt-ShellPaneHeader[data-float], > .rt-ShellPaneFooter[data-float])) {
+  position: relative;
+}
+:has(> .rt-ShellPaneHeader[data-float]:where(.rt-r-size-1)) {
+  --rt-pane-row-start: var(--control-height-1);
+  --rt-pane-pad-start: var(--space-2);
+}
+:has(> .rt-ShellPaneHeader[data-float]:where(.rt-r-size-2)) {
+  --rt-pane-row-start: var(--control-height-2);
+  --rt-pane-pad-start: var(--space-3);
+}
+:has(> .rt-ShellPaneHeader[data-float]:where(.rt-r-size-3)) {
+  --rt-pane-row-start: var(--control-height-3);
+  --rt-pane-pad-start: var(--space-3);
+}
+:has(> .rt-ShellPaneFooter[data-float]:where(.rt-r-size-1)) {
+  --rt-pane-row-end: var(--control-height-1);
+  --rt-pane-pad-end: var(--space-2);
+}
+:has(> .rt-ShellPaneFooter[data-float]:where(.rt-r-size-2)) {
+  --rt-pane-row-end: var(--control-height-2);
+  --rt-pane-pad-end: var(--space-3);
+}
+:has(> .rt-ShellPaneFooter[data-float]:where(.rt-r-size-3)) {
+  --rt-pane-row-end: var(--control-height-3);
+  --rt-pane-pad-end: var(--space-3);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-1)) {
+  --rt-pane-row-start: var(--control-height-1);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-2)) {
+  --rt-pane-row-start: var(--control-height-2);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-3)) {
+  --rt-pane-row-start: var(--control-height-3);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-4)) {
+  --rt-pane-row-start: var(--control-height-4);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-1)) {
+  --rt-pane-row-end: var(--control-height-1);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-2)) {
+  --rt-pane-row-end: var(--control-height-2);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-3)) {
+  --rt-pane-row-end: var(--control-height-3);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-4)) {
+  --rt-pane-row-end: var(--control-height-4);
+}
+:has(> .rt-ShellPaneHeader[data-float]) > .rt-ShellScroll {
+  --rt-pane-inset-start: calc(var(--rt-pane-row-start) + 2 * var(--rt-pane-pad-start));
+  --scroll-fade-start: var(--rt-pane-inset-start);
+  --scrollarea-scrollbar-vertical-margin-top: calc(var(--space-1) + var(--rt-pane-inset-start));
+}
+:has(> .rt-ShellPaneFooter[data-float]) > .rt-ShellScroll {
+  --rt-pane-inset-end: calc(var(--rt-pane-row-end) + 2 * var(--rt-pane-pad-end));
+  --scroll-fade-end: var(--rt-pane-inset-end);
+  --scrollarea-scrollbar-vertical-margin-bottom: calc(var(--space-1) + var(--rt-pane-inset-end));
+}
+.rt-ShellScroll > .rt-ScrollAreaViewport > * {
+  padding-top: var(--rt-pane-inset-start, 0px);
+  padding-bottom: var(--rt-pane-inset-end, 0px);
+}
 .rt-ShellPane[data-state='closed'] {
   display: none;
 }
@@ -25176,6 +25262,11 @@
   height: auto;
   width: var(--toolbar-control-height);
 }
+:where(.rt-Toolbar[data-backdrop]) .rt-ToolbarGroup {
+  background-color: var(--color-surface-solid);
+  -webkit-box-shadow: var(--shadow-2);
+          box-shadow: var(--shadow-2);
+}
 .rt-ToolbarGroup > :where(.rt-BaseButton) {
   --base-button-height: calc(var(--toolbar-control-height) - 2 * var(--toolbar-group-inset));
   border-radius: max(0px, calc(var(--toolbar-radius) - var(--toolbar-group-inset)));

package/dist/esm/chunk-BQE543O5.js

@@ -1,2 +0,0 @@
-import{a as i}from"./chunk-JZD5FHSU.js";import*as e from"react";import n from"classnames";var l=e.createContext(null);function d(){return e.useContext(l)}var u=e.createContext("2");function h({children:t,presentation:r}){let a=e.useContext(u),o=e.useMemo(()=>({size:a,menuVariant:"soft",presentation:r}),[a,r]);return e.createElement(l.Provider,{value:o},t)}function s(){let t=d(),r=t?.size??"2",a=t?.menuVariant??"soft";return["rt-ShellPaneChrome",`rt-r-size-${r}`,`rt-menu-variant-${a}`]}var S=e.forwardRef(({className:t,...r},a)=>{let o=s();return e.createElement("div",{...r,ref:a,className:n("rt-ShellPaneHeader","rt-SidebarHeader","rt-SidebarHeader--container",...o,t)})});S.displayName="Shell.PaneHeader";var m=e.forwardRef(({className:t,...r},a)=>{let o=s();return e.createElement("div",{...r,ref:a,className:n("rt-ShellPaneFooter","rt-SidebarFooter","rt-SidebarFooter--container",...o,t)})});m.displayName="Shell.PaneFooter";var P=e.forwardRef(({className:t,children:r,...a},o)=>{let c=s();return e.createElement(i,{type:"hover",className:"rt-ShellScroll"},e.createElement("div",{...a,ref:o,className:n("rt-BaseMenuContent","rt-SidebarContent",...c,t)},e.createElement("div",{className:"rt-BaseMenuViewport"},r)))});P.displayName="Shell.Scroll";export{l as a,d as b,u as c,h as d,S as e,m as f,P as g};
-//# sourceMappingURL=chunk-BQE543O5.js.map

package/dist/esm/chunk-BQE543O5.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/_internal/pane-chrome.tsx"],
-  "sourcesContent": ["'use client';\n\n/**\n * A pane's own chrome: a header row, a scrolling region and a footer row.\n *\n * Shell.Sidebar and Shell.Panel render these as `Shell.PaneHeader`, `Shell.Scroll` and\n * `Shell.PaneFooter`. The pane renders anything; with these parts it is the presentation, so\n * Sidebar's menu parts work inside it with no `Sidebar.Root`. The index comes from the nearest\n * Shell (`Shell.Root size`), or from a deprecated `Sidebar.Root` that still wraps them.\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { ScrollArea } from '../scroll-area.js';\n\ntype PaneSize = '1' | '2' | '3';\n\ntype SidebarVisualContextValue = {\n  size: PaneSize;\n  menuVariant: 'solid' | 'soft';\n  presentation?: 'thin' | 'expanded';\n  color?: string;\n};\n\n/** Size, menu highlight and presentation for the Sidebar parts. Internal: not exported. */\nconst SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);\n\nfunction useSidebarVisual() {\n  return React.useContext(SidebarVisualContext);\n}\n\n/** The Shell's index. `Shell.Root size` sets it; panes hand it to their chrome. */\nconst ShellSizeContext = React.createContext<PaneSize>('2');\n\n/**\n * Gives a Shell pane's children the Shell's index, so Sidebar parts size themselves. In a Rail\n * the rows are `thin`: icon tiles with a small label, sub-menus as dropdowns.\n */\nfunction PaneChromeScope({ children, presentation }: { children: React.ReactNode; presentation?: 'thin' }) {\n  const size = React.useContext(ShellSizeContext);\n  const value = React.useMemo<SidebarVisualContextValue>(() => ({ size, menuVariant: 'soft', presentation }), [size, presentation]);\n  return <SidebarVisualContext.Provider value={value}>{children}</SidebarVisualContext.Provider>;\n}\n\nfunction useChromeClasses() {\n  const visual = useSidebarVisual();\n  const size = visual?.size ?? '2';\n  const menuVariant = visual?.menuVariant ?? 'soft';\n  return ['rt-ShellPaneChrome', `rt-r-size-${size}`, `rt-menu-variant-${menuVariant}`];\n}\n\ninterface PaneHeaderProps extends React.ComponentPropsWithoutRef<'div'> {}\n\n/** A pane's header row, pinned above its scrolling region. */\nconst PaneHeader = React.forwardRef<HTMLDivElement, PaneHeaderProps>(({ className, ...props }, forwardedRef) => {\n  const chrome = useChromeClasses();\n  return <div {...props} ref={forwardedRef} className={classNames('rt-ShellPaneHeader', 'rt-SidebarHeader', 'rt-SidebarHeader--container', ...chrome, className)} />;\n});\nPaneHeader.displayName = 'Shell.PaneHeader';\n\ninterface PaneFooterProps extends React.ComponentPropsWithoutRef<'div'> {}\n\n/** A pane's footer row, pinned below its scrolling region. */\nconst PaneFooter = React.forwardRef<HTMLDivElement, PaneFooterProps>(({ className, ...props }, forwardedRef) => {\n  const chrome = useChromeClasses();\n  return <div {...props} ref={forwardedRef} className={classNames('rt-ShellPaneFooter', 'rt-SidebarFooter', 'rt-SidebarFooter--container', ...chrome, className)} />;\n});\nPaneFooter.displayName = 'Shell.PaneFooter';\n\ninterface ScrollProps extends React.ComponentPropsWithoutRef<'div'> {}\n\n/**\n * The one region of a pane that scrolls; it takes the room the header and footer leave.\n * It is not a landmark: for navigation, pass `role=\"navigation\"` and an `aria-label`.\n */\nconst Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, children, ...props }, forwardedRef) => {\n  const chrome = useChromeClasses();\n  return (\n    <ScrollArea type=\"hover\" className=\"rt-ShellScroll\">\n      <div {...props} ref={forwardedRef} className={classNames('rt-BaseMenuContent', 'rt-SidebarContent', ...chrome, className)}>\n        <div className=\"rt-BaseMenuViewport\">{children}</div>\n      </div>\n    </ScrollArea>\n  );\n});\nScroll.displayName = 'Shell.Scroll';\n\nexport { SidebarVisualContext, useSidebarVisual, ShellSizeContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll };\nexport type { SidebarVisualContextValue, PaneSize, PaneHeaderProps, PaneFooterProps, ScrollProps };\n"],
-  "mappings": "wCAWA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAcvB,IAAMC,EAA6B,gBAAgD,IAAI,EAEvF,SAASC,GAAmB,CAC1B,OAAa,aAAWD,CAAoB,CAC9C,CAGA,IAAME,EAAyB,gBAAwB,GAAG,EAM1D,SAASC,EAAgB,CAAE,SAAAC,EAAU,aAAAC,CAAa,EAAyD,CACzG,IAAMC,EAAa,aAAWJ,CAAgB,EACxCK,EAAc,UAAmC,KAAO,CAAE,KAAAD,EAAM,YAAa,OAAQ,aAAAD,CAAa,GAAI,CAACC,EAAMD,CAAY,CAAC,EAChI,OAAO,gBAACL,EAAqB,SAArB,CAA8B,MAAOO,GAAQH,CAAS,CAChE,CAEA,SAASI,GAAmB,CAC1B,IAAMC,EAASR,EAAiB,EAC1BK,EAAOG,GAAQ,MAAQ,IACvBC,EAAcD,GAAQ,aAAe,OAC3C,MAAO,CAAC,qBAAsB,aAAaH,CAAI,GAAI,mBAAmBI,CAAW,EAAE,CACrF,CAKA,IAAMC,EAAmB,aAA4C,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAiB,CAC9G,IAAMC,EAASP,EAAiB,EAChC,OAAO,gBAAC,OAAK,GAAGK,EAAO,IAAKC,EAAc,UAAWE,EAAW,qBAAsB,mBAAoB,8BAA+B,GAAGD,EAAQH,CAAS,EAAG,CAClK,CAAC,EACDD,EAAW,YAAc,mBAKzB,IAAMM,EAAmB,aAA4C,CAAC,CAAE,UAAAL,EAAW,GAAGC,CAAM,EAAGC,IAAiB,CAC9G,IAAMC,EAASP,EAAiB,EAChC,OAAO,gBAAC,OAAK,GAAGK,EAAO,IAAKC,EAAc,UAAWE,EAAW,qBAAsB,mBAAoB,8BAA+B,GAAGD,EAAQH,CAAS,EAAG,CAClK,CAAC,EACDK,EAAW,YAAc,mBAQzB,IAAMC,EAAe,aAAwC,CAAC,CAAE,UAAAN,EAAW,SAAAR,EAAU,GAAGS,CAAM,EAAGC,IAAiB,CAChH,IAAMC,EAASP,EAAiB,EAChC,OACE,gBAACW,EAAA,CAAW,KAAK,QAAQ,UAAU,kBACjC,gBAAC,OAAK,GAAGN,EAAO,IAAKC,EAAc,UAAWE,EAAW,qBAAsB,oBAAqB,GAAGD,EAAQH,CAAS,GACtH,gBAAC,OAAI,UAAU,uBAAuBR,CAAS,CACjD,CACF,CAEJ,CAAC,EACDc,EAAO,YAAc",
-  "names": ["React", "classNames", "SidebarVisualContext", "useSidebarVisual", "ShellSizeContext", "PaneChromeScope", "children", "presentation", "size", "value", "useChromeClasses", "visual", "menuVariant", "PaneHeader", "className", "props", "forwardedRef", "chrome", "classNames", "PaneFooter", "Scroll", "ScrollArea"]
-}

package/dist/esm/chunk-C7JXVNMI.js

@@ -1,2 +0,0 @@
-import{a as m,b as T,c as N}from"./chunk-UPCRXJB2.js";import{b as h,c as I}from"./chunk-IX5HIHVI.js";import{b as v,c as y}from"./chunk-PRRJ4WRE.js";import{a as d}from"./chunk-UBSLEGQZ.js";import{a as g}from"./chunk-GSTOGDAJ.js";import{a as M}from"./chunk-OS3FCYZY.js";var W={};M(W,{Content:()=>w,Group:()=>G,Item:()=>E,Label:()=>L,Root:()=>x,Separator:()=>D,Trigger:()=>b});import*as e from"react";import c from"classnames";import{Select as a,ScrollArea as S}from"radix-ui";var u=e.createContext({}),x=r=>{let{children:o,size:t=m.size.default,...l}=r;return e.createElement(a.Root,{...l},e.createElement(u.Provider,{value:e.useMemo(()=>({size:t}),[t])},o))};x.displayName="Select.Root";var b=e.forwardRef((r,o)=>{let t=e.useContext(u),{children:l,className:i,color:n,radius:P,placeholder:f,error:p,loading:s,disabled:R,readOnly:C,material:V,...z}=d({size:t?.size,...r},{size:m.size},T,g),A=e.useMemo(()=>({"aria-invalid":p||void 0,"aria-busy":s||void 0,"aria-disabled":R||void 0,"aria-readonly":C||void 0}),[p,s,R,C]);return e.createElement(a.Trigger,{asChild:!0},e.createElement("button",{"data-accent-color":n,"data-radius":P,"data-material":V,"data-error":p,"data-loading":s,...z,...A,ref:o,className:c("rt-reset","rt-SelectTrigger",i)},e.createElement("span",{className:"rt-SelectTriggerInner"},e.createElement(a.Value,{placeholder:f},l)),e.createElement(a.Icon,{asChild:!0},s?e.createElement("div",{className:"rt-SelectIcon rt-SelectLoadingIcon","aria-hidden":"true"},e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},e.createElement("circle",{cx:"8",cy:"8",r:"7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeDasharray:"32",strokeDashoffset:"32",className:"rt-SelectLoadingIconCircle"}))):e.createElement(I,{className:"rt-SelectIcon"}))))});b.displayName="Select.Trigger";var w=e.forwardRef((r,o)=>{let t=e.useContext(u),{className:l,children:i,color:n,container:P,...f}=d({size:t?.size,...r},{size:m.size},N),p=v(),s=n||p.accentColor;return e.createElement(a.Portal,{container:P},e.createElement(y,{asChild:!0},e.createElement(a.Content,{"data-accent-color":s,sideOffset:4,...f,asChild:!1,ref:o,className:c("rt-PopperContent","rt-BaseMenuContent","rt-variant-soft","rt-SelectContent",l)},e.createElement(S.Root,{type:"auto",className:"rt-ScrollAreaRoot"},e.createElement(a.Viewport,{asChild:!0,className:c("rt-BaseMenuViewport","rt-SelectViewport")},e.createElement(S.Viewport,{className:"rt-ScrollAreaViewport",style:{overflowY:void 0}},i)),e.createElement(S.Scrollbar,{className:"rt-ScrollAreaScrollbar rt-r-size-1",orientation:"vertical"},e.createElement(S.Thumb,{className:"rt-ScrollAreaThumb"}))))))});w.displayName="Select.Content";var E=e.forwardRef((r,o)=>{let{className:t,children:l,...i}=r,n=typeof l!="string";return e.createElement(a.Item,{...i,asChild:!1,ref:o,className:c("rt-reset","rt-BaseMenuItem","rt-SelectItem",{"rt-SelectItemRich":n},t)},e.createElement(a.ItemIndicator,{className:"rt-SelectItemIndicator"},e.createElement(h,{className:"rt-SelectItemIndicatorIcon"})),e.createElement(a.ItemText,null,l))});E.displayName="Select.Item";var G=e.forwardRef(({className:r,...o},t)=>e.createElement(a.Group,{...o,asChild:!1,ref:t,className:c("rt-SelectGroup",r)}));G.displayName="Select.Group";var L=e.forwardRef(({className:r,...o},t)=>e.createElement(a.Label,{...o,asChild:!1,ref:t,className:c("rt-BaseMenuLabel","rt-SelectLabel",r)}));L.displayName="Select.Label";var D=e.forwardRef(({className:r,...o},t)=>e.createElement(a.Separator,{...o,asChild:!1,ref:t,className:c("rt-BaseMenuSeparator","rt-SelectSeparator",r)}));D.displayName="Select.Separator";export{x as a,b,w as c,E as d,G as e,L as f,D as g,W as h};
-//# sourceMappingURL=chunk-C7JXVNMI.js.map

package/dist/esm/chunk-C7JXVNMI.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/select.tsx"],
-  "sourcesContent": ["'use client';\n\nimport { warnDeprecated } from '../helpers/warn-deprecated.js';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'radix-ui';\n\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { ChevronDownIcon, ThickCheckIcon } from './icons.js';\nimport {\n  selectRootPropDefs,\n  selectTriggerPropDefs,\n  selectContentPropDefs,\n} from './select.props.js';\nimport { useThemeContext, Theme } from './theme.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\ntype SelectRootOwnProps = GetPropDefTypes<typeof selectRootPropDefs>;\n\ntype SelectContextValue = SelectRootOwnProps;\nconst SelectContext = React.createContext<SelectContextValue>({});\n\ninterface SelectRootProps extends SelectPrimitive.SelectProps, SelectContextValue {}\nconst SelectRoot: React.FC<SelectRootProps> = (props) => {\n  const { children, size = selectRootPropDefs.size.default, ...rootProps } = props;\n  return (\n    <SelectPrimitive.Root {...rootProps}>\n      <SelectContext.Provider value={React.useMemo(() => ({ size }), [size])}>\n        {children}\n      </SelectContext.Provider>\n    </SelectPrimitive.Root>\n  );\n};\nSelectRoot.displayName = 'Select.Root';\n\ntype SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;\ntype SelectTriggerOwnProps = GetPropDefTypes<typeof selectTriggerPropDefs>;\ninterface SelectTriggerProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Trigger, RemovedProps>,\n    MarginProps,\n    SelectTriggerOwnProps {}\nconst SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(\n  (props, forwardedRef) => {\n    const context = React.useContext(SelectContext);\n    const {\n      children,\n      className,\n      color,\n      radius,\n      placeholder,\n      error,\n      loading,\n      disabled,\n      readOnly,\n      material,\n      ...triggerProps\n    } = extractProps(\n      // Pass size value from the context to generate styles\n      { size: context?.size, ...props },\n      // Pass size prop def to allow it to be extracted\n      { size: selectRootPropDefs.size },\n      selectTriggerPropDefs,\n      marginPropDefs,\n    );\n\n\n    const ariaProps = React.useMemo(\n      () => ({\n        'aria-invalid': error || undefined,\n        'aria-busy': loading || undefined,\n        'aria-disabled': disabled || undefined,\n        'aria-readonly': readOnly || undefined,\n      }),\n      [error, loading, disabled, readOnly],\n    );\n\n    return (\n      <SelectPrimitive.Trigger asChild>\n        <button\n          data-accent-color={color}\n          data-radius={radius}\n          data-material={material}\n          data-error={error}\n          data-loading={loading}\n          {...triggerProps}\n          {...ariaProps}\n          ref={forwardedRef}\n          className={classNames('rt-reset', 'rt-SelectTrigger', className)}\n        >\n          <span className=\"rt-SelectTriggerInner\">\n            <SelectPrimitive.Value placeholder={placeholder}>{children}</SelectPrimitive.Value>\n          </span>\n          <SelectPrimitive.Icon asChild>\n            {loading ? (\n              <div className=\"rt-SelectIcon rt-SelectLoadingIcon\" aria-hidden=\"true\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                  <circle\n                    cx=\"8\"\n                    cy=\"8\"\n                    r=\"7\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeDasharray=\"32\"\n                    strokeDashoffset=\"32\"\n                    className=\"rt-SelectLoadingIconCircle\"\n                  />\n                </svg>\n              </div>\n            ) : (\n              <ChevronDownIcon className=\"rt-SelectIcon\" />\n            )}\n          </SelectPrimitive.Icon>\n        </button>\n      </SelectPrimitive.Trigger>\n    );\n  },\n);\nSelectTrigger.displayName = 'Select.Trigger';\n\ntype SelectContentElement = React.ElementRef<typeof SelectPrimitive.Content>;\ntype SelectContentOwnProps = GetPropDefTypes<typeof selectContentPropDefs>;\ninterface SelectContentProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Content, RemovedProps>,\n    SelectContentOwnProps {\n  container?: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Portal>['container'];\n}\nconst SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(\n  (props, forwardedRef) => {\n    const context = React.useContext(SelectContext);\n    const { className, children, color, container, ...contentProps } = extractProps(\n      // Pass size value from the context to generate styles\n      { size: context?.size, ...props },\n      // Pass size prop def to allow it to be extracted\n      { size: selectRootPropDefs.size },\n      selectContentPropDefs,\n    );\n    const themeContext = useThemeContext();\n    const resolvedColor = color || themeContext.accentColor;\n    return (\n      <SelectPrimitive.Portal container={container}>\n        <Theme asChild>\n          <SelectPrimitive.Content\n            data-accent-color={resolvedColor}\n            sideOffset={4}\n            {...contentProps}\n            asChild={false}\n            ref={forwardedRef}\n            className={classNames(\n              'rt-PopperContent',\n              'rt-BaseMenuContent',\n          'rt-variant-soft',\n              'rt-SelectContent',\n              className,\n            )}\n          >\n            <ScrollAreaPrimitive.Root type=\"auto\" className=\"rt-ScrollAreaRoot\">\n              <SelectPrimitive.Viewport\n                asChild\n                className={classNames('rt-BaseMenuViewport', 'rt-SelectViewport')}\n              >\n                <ScrollAreaPrimitive.Viewport\n                  className=\"rt-ScrollAreaViewport\"\n                  style={{ overflowY: undefined }}\n                >\n                  {children}\n                </ScrollAreaPrimitive.Viewport>\n              </SelectPrimitive.Viewport>\n              <ScrollAreaPrimitive.Scrollbar\n                className=\"rt-ScrollAreaScrollbar rt-r-size-1\"\n                orientation=\"vertical\"\n              >\n                <ScrollAreaPrimitive.Thumb className=\"rt-ScrollAreaThumb\" />\n              </ScrollAreaPrimitive.Scrollbar>\n            </ScrollAreaPrimitive.Root>\n          </SelectPrimitive.Content>\n        </Theme>\n      </SelectPrimitive.Portal>\n    );\n  },\n);\nSelectContent.displayName = 'Select.Content';\n\ntype SelectItemElement = React.ElementRef<typeof SelectPrimitive.Item>;\ninterface SelectItemProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Item, RemovedProps> {}\nconst SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>((props, forwardedRef) => {\n  const { className, children, ...itemProps } = props;\n\n  // Detect if this is rich content (not just a string)\n  const isRichContent = typeof children !== 'string';\n\n  return (\n    <SelectPrimitive.Item\n      {...itemProps}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames(\n        'rt-reset',\n        'rt-BaseMenuItem',\n        'rt-SelectItem',\n        { 'rt-SelectItemRich': isRichContent },\n        className,\n      )}\n    >\n      <SelectPrimitive.ItemIndicator className=\"rt-SelectItemIndicator\">\n        <ThickCheckIcon className=\"rt-SelectItemIndicatorIcon\" />\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n});\nSelectItem.displayName = 'Select.Item';\n\ntype SelectGroupElement = React.ElementRef<typeof SelectPrimitive.Group>;\ninterface SelectGroupProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Group, RemovedProps> {}\nconst SelectGroup = React.forwardRef<SelectGroupElement, SelectGroupProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <SelectPrimitive.Group\n      {...props}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('rt-SelectGroup', className)}\n    />\n  ),\n);\nSelectGroup.displayName = 'Select.Group';\n\ntype SelectLabelElement = React.ElementRef<typeof SelectPrimitive.Label>;\ninterface SelectLabelProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Label, RemovedProps> {}\nconst SelectLabel = React.forwardRef<SelectLabelElement, SelectLabelProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <SelectPrimitive.Label\n      {...props}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('rt-BaseMenuLabel', 'rt-SelectLabel', className)}\n    />\n  ),\n);\nSelectLabel.displayName = 'Select.Label';\n\ntype SelectSeparatorElement = React.ElementRef<typeof SelectPrimitive.Separator>;\ninterface SelectSeparatorProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Separator, RemovedProps> {}\nconst SelectSeparator = React.forwardRef<SelectSeparatorElement, SelectSeparatorProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <SelectPrimitive.Separator\n      {...props}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('rt-BaseMenuSeparator', 'rt-SelectSeparator', className)}\n    />\n  ),\n);\nSelectSeparator.displayName = 'Select.Separator';\n\nexport {\n  SelectRoot as Root,\n  SelectTrigger as Trigger,\n  SelectContent as Content,\n  SelectItem as Item,\n  SelectGroup as Group,\n  SelectLabel as Label,\n  SelectSeparator as Separator,\n};\n\nexport type {\n  SelectRootProps as RootProps,\n  SelectTriggerProps as TriggerProps,\n  SelectContentProps as ContentProps,\n  SelectItemProps as ItemProps,\n  SelectGroupProps as GroupProps,\n  SelectLabelProps as LabelProps,\n  SelectSeparatorProps as SeparatorProps,\n};\n"],
-  "mappings": "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",
-  "names": ["select_exports", "__export", "SelectContent", "SelectGroup", "SelectItem", "SelectLabel", "SelectRoot", "SelectSeparator", "SelectTrigger", "React", "classNames", "SelectPrimitive", "ScrollAreaPrimitive", "SelectContext", "SelectRoot", "props", "children", "size", "selectRootPropDefs", "rootProps", "SelectPrimitive", "SelectTrigger", "forwardedRef", "context", "className", "color", "radius", "placeholder", "error", "loading", "disabled", "readOnly", "material", "triggerProps", "extractProps", "selectTriggerPropDefs", "marginPropDefs", "ariaProps", "classNames", "ChevronDownIcon", "SelectContent", "container", "contentProps", "selectContentPropDefs", "themeContext", "useThemeContext", "resolvedColor", "Theme", "ScrollAreaPrimitive", "SelectItem", "itemProps", "isRichContent", "ThickCheckIcon", "SelectGroup", "SelectLabel", "SelectSeparator"]
-}

package/dist/esm/chunk-JZD5FHSU.js

@@ -1,2 +0,0 @@
-import{a as S}from"./chunk-AO32NT75.js";import{a as d}from"./chunk-5GXFBLBJ.js";import{a as e}from"./chunk-XPRPYCII.js";import{a as f}from"./chunk-5BWLY27A.js";import{a as u}from"./chunk-PS6NEG5A.js";import{a as n}from"./chunk-E23RKOQJ.js";import{b as t}from"./chunk-PBFSBHBS.js";import*as r from"react";import a from"classnames";import{ScrollArea as o}from"radix-ui";import{useComposedRefs as E}from"radix-ui/internal";var T=r.forwardRef((P,A)=>{let{rest:v,...y}=d(P),[R,g]=S(y),{asChild:s,children:N,className:b,style:h,type:i,scrollHideDelay:w=i!=="scroll"?0:void 0,dir:M,size:p=e.size.default,radius:m=e.radius.default,scrollbars:l=e.scrollbars.default,fade:c=e.fade.default,...C}=v,z=f(c),V=E(A,z);return r.createElement(o.Root,{type:i,scrollHideDelay:w,className:a("rt-ScrollAreaRoot",R,b),"data-fade":c?"":void 0,style:n(g,h),asChild:s},u({asChild:s,children:N},D=>r.createElement(r.Fragment,null,r.createElement(o.Viewport,{...C,ref:V,className:"rt-ScrollAreaViewport"},D),r.createElement("div",{className:"rt-ScrollAreaViewportFocusRing"}),l!=="vertical"?r.createElement(o.Scrollbar,{"data-radius":m,orientation:"horizontal",className:a("rt-ScrollAreaScrollbar",t({className:"rt-r-size",value:p,propValues:e.size.values}))},r.createElement(o.Thumb,{className:"rt-ScrollAreaThumb"})):null,l!=="horizontal"?r.createElement(o.Scrollbar,{"data-radius":m,orientation:"vertical",className:a("rt-ScrollAreaScrollbar",t({className:"rt-r-size",value:p,propValues:e.size.values}))},r.createElement(o.Thumb,{className:"rt-ScrollAreaThumb"})):null,l==="both"?r.createElement(o.Corner,{className:"rt-ScrollAreaCorner"}):null)))});T.displayName="ScrollArea";export{T as a};
-//# sourceMappingURL=chunk-JZD5FHSU.js.map

package/dist/esm/chunk-JZD5FHSU.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/scroll-area.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';\nimport { useComposedRefs } from 'radix-ui/internal';\n\nimport { scrollAreaPropDefs } from './scroll-area.props.js';\nimport { useScrollEdges } from '../hooks/use-scroll-edges.js';\nimport { extractMarginProps } from '../helpers/extract-margin-props.js';\nimport { getMarginStyles } from '../helpers/get-margin-styles.js';\nimport { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';\nimport { getSubtree } from '../helpers/get-subtree.js';\nimport { mergeStyles } from '../helpers/merge-styles.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Viewport>;\ntype ScrollAreaOwnProps = GetPropDefTypes<typeof scrollAreaPropDefs>;\ninterface ScrollAreaProps\n  extends ComponentPropsWithout<typeof ScrollAreaPrimitive.Root, RemovedProps>,\n    ComponentPropsWithout<typeof ScrollAreaPrimitive.Viewport, RemovedProps | 'dir'>,\n    MarginProps,\n    ScrollAreaOwnProps {}\nconst ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props, forwardedRef) => {\n  const { rest: marginRest, ...marginProps } = extractMarginProps(props);\n  const [marginClassNames, marginCustomProperties] = getMarginStyles(marginProps);\n\n  const {\n    asChild,\n    children,\n    className,\n    style,\n    type,\n    scrollHideDelay = type !== 'scroll' ? 0 : undefined,\n    dir,\n    size = scrollAreaPropDefs.size.default,\n    radius = scrollAreaPropDefs.radius.default,\n    scrollbars = scrollAreaPropDefs.scrollbars.default,\n    fade = scrollAreaPropDefs.fade.default,\n    ...viewportProps\n  } = marginRest;\n  const setEdgesElement = useScrollEdges<HTMLDivElement>(fade);\n  const viewportRef = useComposedRefs(forwardedRef, setEdgesElement);\n\n  return (\n    <ScrollAreaPrimitive.Root\n      type={type}\n      scrollHideDelay={scrollHideDelay}\n      className={classNames('rt-ScrollAreaRoot', marginClassNames, className)}\n      data-fade={fade ? '' : undefined}\n      style={mergeStyles(marginCustomProperties, style)}\n      asChild={asChild}\n    >\n      {getSubtree({ asChild, children }, (children) => (\n        <>\n          <ScrollAreaPrimitive.Viewport\n            {...viewportProps}\n            ref={viewportRef}\n            className=\"rt-ScrollAreaViewport\"\n          >\n            {children}\n          </ScrollAreaPrimitive.Viewport>\n\n          <div className=\"rt-ScrollAreaViewportFocusRing\" />\n\n          {scrollbars !== 'vertical' ? (\n            <ScrollAreaPrimitive.Scrollbar\n              data-radius={radius}\n              orientation=\"horizontal\"\n              className={classNames(\n                'rt-ScrollAreaScrollbar',\n                getResponsiveClassNames({\n                  className: 'rt-r-size',\n                  value: size,\n                  propValues: scrollAreaPropDefs.size.values,\n                }),\n              )}\n            >\n              <ScrollAreaPrimitive.Thumb className=\"rt-ScrollAreaThumb\" />\n            </ScrollAreaPrimitive.Scrollbar>\n          ) : null}\n\n          {scrollbars !== 'horizontal' ? (\n            <ScrollAreaPrimitive.Scrollbar\n              data-radius={radius}\n              orientation=\"vertical\"\n              className={classNames(\n                'rt-ScrollAreaScrollbar',\n                getResponsiveClassNames({\n                  className: 'rt-r-size',\n                  value: size,\n                  propValues: scrollAreaPropDefs.size.values,\n                }),\n              )}\n            >\n              <ScrollAreaPrimitive.Thumb className=\"rt-ScrollAreaThumb\" />\n            </ScrollAreaPrimitive.Scrollbar>\n          ) : null}\n\n          {scrollbars === 'both' ? (\n            <ScrollAreaPrimitive.Corner className=\"rt-ScrollAreaCorner\" />\n          ) : null}\n        </>\n      ))}\n    </ScrollAreaPrimitive.Root>\n  );\n});\nScrollArea.displayName = 'ScrollArea';\n\nexport { ScrollArea };\nexport type { ScrollAreaProps };\n"],
-  "mappings": "wRAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,cAAcC,MAA2B,WAClD,OAAS,mBAAAC,MAAuB,oBAqBhC,IAAMC,EAAmB,aAA+C,CAACC,EAAOC,IAAiB,CAC/F,GAAM,CAAE,KAAMC,EAAY,GAAGC,CAAY,EAAIC,EAAmBJ,CAAK,EAC/D,CAACK,EAAkBC,CAAsB,EAAIC,EAAgBJ,CAAW,EAExE,CACJ,QAAAK,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,gBAAAC,EAAkBD,IAAS,SAAW,EAAI,OAC1C,IAAAE,EACA,KAAAC,EAAOC,EAAmB,KAAK,QAC/B,OAAAC,EAASD,EAAmB,OAAO,QACnC,WAAAE,EAAaF,EAAmB,WAAW,QAC3C,KAAAG,EAAOH,EAAmB,KAAK,QAC/B,GAAGI,CACL,EAAIlB,EACEmB,EAAkBC,EAA+BH,CAAI,EACrDI,EAAcC,EAAgBvB,EAAcoB,CAAe,EAEjE,OACE,gBAACI,EAAoB,KAApB,CACC,KAAMb,EACN,gBAAiBC,EACjB,UAAWa,EAAW,oBAAqBrB,EAAkBK,CAAS,EACtE,YAAWS,EAAO,GAAK,OACvB,MAAOQ,EAAYrB,EAAwBK,CAAK,EAChD,QAASH,GAERoB,EAAW,CAAE,QAAApB,EAAS,SAAAC,CAAS,EAAIA,GAClC,gCACE,gBAACgB,EAAoB,SAApB,CACE,GAAGL,EACJ,IAAKG,EACL,UAAU,yBAETd,CACH,EAEA,gBAAC,OAAI,UAAU,iCAAiC,EAE/CS,IAAe,WACd,gBAACO,EAAoB,UAApB,CACC,cAAaR,EACb,YAAY,aACZ,UAAWS,EACT,yBACAG,EAAwB,CACtB,UAAW,YACX,MAAOd,EACP,WAAYC,EAAmB,KAAK,MACtC,CAAC,CACH,GAEA,gBAACS,EAAoB,MAApB,CAA0B,UAAU,qBAAqB,CAC5D,EACE,KAEHP,IAAe,aACd,gBAACO,EAAoB,UAApB,CACC,cAAaR,EACb,YAAY,WACZ,UAAWS,EACT,yBACAG,EAAwB,CACtB,UAAW,YACX,MAAOd,EACP,WAAYC,EAAmB,KAAK,MACtC,CAAC,CACH,GAEA,gBAACS,EAAoB,MAApB,CAA0B,UAAU,qBAAqB,CAC5D,EACE,KAEHP,IAAe,OACd,gBAACO,EAAoB,OAApB,CAA2B,UAAU,sBAAsB,EAC1D,IACN,CACD,CACH,CAEJ,CAAC,EACD1B,EAAW,YAAc",
-  "names": ["React", "classNames", "ScrollAreaPrimitive", "useComposedRefs", "ScrollArea", "props", "forwardedRef", "marginRest", "marginProps", "extractMarginProps", "marginClassNames", "marginCustomProperties", "getMarginStyles", "asChild", "children", "className", "style", "type", "scrollHideDelay", "dir", "size", "scrollAreaPropDefs", "radius", "scrollbars", "fade", "viewportProps", "setEdgesElement", "useScrollEdges", "viewportRef", "useComposedRefs", "ScrollAreaPrimitive", "classNames", "mergeStyles", "getSubtree", "getResponsiveClassNames"]
-}

package/dist/esm/chunk-VASXAV62.js

@@ -1,2 +0,0 @@
-import{a as p}from"./chunk-ZUOK3KFY.js";import{a as x}from"./chunk-MQT3YJKY.js";import{a as B}from"./chunk-Y4IB7KDZ.js";import{a as y}from"./chunk-O6K6RZXY.js";import{a as d}from"./chunk-UBSLEGQZ.js";import{a as R}from"./chunk-GSTOGDAJ.js";import*as o from"react";import T from"classnames";import{Toolbar as P}from"radix-ui";var v=o.createContext(null),S=o.createContext(null);function u(t){let r=o.useContext(v);if(!r)throw new Error(`${t} must be rendered inside a Toolbar.`);return r}var m=o.forwardRef((t,r)=>{let e=t.size??p.size.default,a=t.orientation??p.orientation.default,{className:s,orientation:n,children:i,...l}=d(t,p,R),b=o.useMemo(()=>({size:e,orientation:a}),[e,a]);return o.createElement(P.Root,{...l,ref:r,orientation:a,className:T("rt-Toolbar",s)},o.createElement(v.Provider,{value:b},i))});m.displayName="Toolbar";var C=o.forwardRef(({className:t,disabled:r=!1,children:e,...a},s)=>{let{orientation:n}=u("ToolbarGroup"),i=o.useMemo(()=>({disabled:r}),[r]);return o.createElement("div",{role:"group","data-orientation":n,"data-disabled":r||void 0,...a,ref:s,className:T("rt-ToolbarGroup",t)},o.createElement(S.Provider,{value:i},e))});C.displayName="Toolbar.Group";function D(t){return t===!0||t==="true"}var G=o.forwardRef((t,r)=>{let e=u("ToolbarButton"),a=o.useContext(S),{iconOnly:s,size:n,variant:i,emphasis:l,color:b,disabled:h,...c}=t,z=D(t["aria-pressed"]),O="data-state"in t||t["aria-pressed"]===void 0?{}:{"data-state":z?"on":"off"},f={size:n??e.size,...l!==void 0?{emphasis:l}:{variant:i??(a?"ghost":"soft")},color:b??(i||l?void 0:"gray"),...O};return o.createElement(P.Button,{asChild:!0,ref:r,disabled:h||a?.disabled||void 0},s?o.createElement(x,{...c,...f}):o.createElement(B,{...c,...f}))});G.displayName="Toolbar.Button";var N=o.forwardRef(({className:t,...r},e)=>(u("ToolbarSeparator"),o.createElement(P.Separator,{...r,ref:e,className:T("rt-ToolbarSeparator",t)})));N.displayName="Toolbar.Separator";var w={1:"2",2:"3",3:"4",4:"5"},g=o.forwardRef(({className:t,children:r,style:e,id:a},s)=>{let{size:n}=u("ToolbarTitle");return r==null||r===!1?null:o.createElement(y,{ref:s,as:"span",size:w[n],weight:"medium",truncate:!0,id:a,style:e,className:T("rt-ToolbarTitle",t)},r)});g.displayName="Toolbar.Title";var V=Object.assign(m,{Root:m,Group:C,Button:G,Separator:N,Title:g});export{m as a,C as b,G as c,N as d,g as e,V as f};
-//# sourceMappingURL=chunk-VASXAV62.js.map

package/dist/esm/chunk-VASXAV62.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/toolbar.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Toolbar as ToolbarPrimitive } from 'radix-ui';\n\nimport { toolbarRootPropDefs } from './toolbar.props.js';\nimport { Button } from './button.js';\nimport { IconButton } from './icon-button.js';\nimport { Text } from './text.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { ButtonProps } from './button.js';\nimport type { TextProps } from './text.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { ButtonRankProps } from './button.js';\n\n/*\n * Toolbar takes Kookie UI v2's contract (v2: components/toolbar), built on Radix instead of\n * Base UI. A toolbar is a row of controls with ONE tab stop: `role=\"toolbar\"`, and the arrow\n * keys move focus between its controls. That keyboard is the reason it is a component.\n *\n * Its `size` reaches every control inside it that does not state its own. The row itself paints\n * nothing; a `ToolbarGroup` draws a quiet well around controls that belong together, and a\n * `ToolbarSeparator` draws a gray hairline between clusters. Use a `Flex` to cluster controls\n * without a well: the row spaces the clusters with `space-between`.\n */\n\ntype ToolbarSize = NonNullable<GetPropDefTypes<typeof toolbarRootPropDefs>['size']>;\ntype ToolbarOrientation = NonNullable<GetPropDefTypes<typeof toolbarRootPropDefs>['orientation']>;\n\ninterface ToolbarContextValue {\n  size: ToolbarSize;\n  orientation: ToolbarOrientation;\n}\n\nconst ToolbarContext = React.createContext<ToolbarContextValue | null>(null);\n\n/** Set by a `ToolbarGroup`: its children rest quiet, and `disabled` turns them all off. */\nconst ToolbarGroupContext = React.createContext<{ disabled: boolean } | null>(null);\n\nfunction useToolbarContext(consumer: string): ToolbarContextValue {\n  const context = React.useContext(ToolbarContext);\n  if (!context) {\n    throw new Error(`${consumer} must be rendered inside a Toolbar.`);\n  }\n  return context;\n}\n\n// ============================================================================\n// Toolbar (root)\n// ============================================================================\n\ntype ToolbarOwnProps = GetPropDefTypes<typeof toolbarRootPropDefs>;\n\ninterface ToolbarProps\n  extends ComponentPropsWithout<typeof ToolbarPrimitive.Root, RemovedProps | 'orientation'>,\n    ToolbarOwnProps,\n    MarginProps {}\n\n/**\n * A row of controls with one keyboard tab stop. The arrow keys move focus between the controls.\n *\n * Give it an `aria-label` (or `aria-labelledby`) that says what the controls act on.\n *\n * @example\n * ```tsx\n * <Toolbar aria-label=\"Formatting\">\n *   <ToolbarGroup>\n *     <ToolbarButton iconOnly aria-label=\"Bold\" aria-pressed={bold} onClick={toggleBold}>\n *       <HugeiconsIcon icon={TextBoldIcon} strokeWidth={1.75} />\n *     </ToolbarButton>\n *   </ToolbarGroup>\n *   <ToolbarSeparator />\n *   <ToolbarButton>Share</ToolbarButton>\n * </Toolbar>\n * ```\n */\nconst ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwardedRef) => {\n  const size: ToolbarSize = props.size ?? toolbarRootPropDefs.size.default;\n  const orientation: ToolbarOrientation = props.orientation ?? toolbarRootPropDefs.orientation.default;\n  const { className, orientation: _orientation, children, ...rootProps } = extractProps(\n    props,\n    toolbarRootPropDefs,\n    marginPropDefs,\n  );\n\n  const context = React.useMemo(() => ({ size, orientation }), [size, orientation]);\n\n  return (\n    <ToolbarPrimitive.Root\n      {...rootProps}\n      ref={forwardedRef}\n      orientation={orientation}\n      className={classNames('rt-Toolbar', className)}\n    >\n      <ToolbarContext.Provider value={context}>{children}</ToolbarContext.Provider>\n    </ToolbarPrimitive.Root>\n  );\n});\nToolbarRoot.displayName = 'Toolbar';\n\n// ============================================================================\n// ToolbarGroup\n// ============================================================================\n\ninterface ToolbarGroupProps extends ComponentPropsWithout<'div', RemovedProps> {\n  /** Turns every control in the group off at once. */\n  disabled?: boolean;\n}\n\n/**\n * Controls that belong together, drawn as one quiet well that stands level with a button\n * beside it. Buttons inside it rest as `ghost` unless they state a `variant`.\n * To cluster controls without a well, use a `Flex`.\n */\nconst ToolbarGroup = React.forwardRef<HTMLDivElement, ToolbarGroupProps>(\n  ({ className, disabled = false, children, ...props }, forwardedRef) => {\n    const { orientation } = useToolbarContext('ToolbarGroup');\n    const group = React.useMemo(() => ({ disabled }), [disabled]);\n    return (\n      <div\n        role=\"group\"\n        data-orientation={orientation}\n        data-disabled={disabled || undefined}\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-ToolbarGroup', className)}\n      >\n        <ToolbarGroupContext.Provider value={group}>{children}</ToolbarGroupContext.Provider>\n      </div>\n    );\n  },\n);\nToolbarGroup.displayName = 'Toolbar.Group';\n\n// ============================================================================\n// ToolbarButton\n// ============================================================================\n\ntype ToolbarButtonBaseProps = Omit<ButtonProps, 'as' | 'asChild' | 'variant' | 'emphasis'>;\n\n/** A labelled button: takes every `Button` prop. */\ntype ToolbarTextButtonProps = ToolbarButtonBaseProps &\n  ButtonRankProps & {\n  iconOnly?: false;\n};\n\n/** An icon-only button: renders an `IconButton`, and the type requires an `aria-label`. */\ntype ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'fullWidth'> &\n  ButtonRankProps & {\n  iconOnly: true;\n  /** The control's accessible name. An icon has no words of its own, so this is required. */\n  'aria-label': string;\n};\n\ntype ToolbarButtonProps = ToolbarTextButtonProps | ToolbarIconButtonProps;\n\nfunction isPressed(value: React.AriaAttributes['aria-pressed']) {\n  return value === true || value === 'true';\n}\n\n/**\n * A `Button` that joins the toolbar's keyboard navigation, so a row of them is one tab stop.\n *\n * Set `iconOnly` (with an `aria-label`) for a symbol-only control. Set `aria-pressed` for a\n * control that toggles; a pressed button wears Button's pressed look.\n *\n * It takes the toolbar's `size`, and rests as a gray `soft` button (gray `ghost` inside a\n * `ToolbarGroup`). A stated `size`, `variant` or `color` wins; a stated `variant` without a\n * `color` takes Button's own default colour. It throws outside a `Toolbar`.\n */\nconst ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((props, forwardedRef) => {\n  const toolbar = useToolbarContext('ToolbarButton');\n  const group = React.useContext(ToolbarGroupContext);\n  const { iconOnly, size, variant, emphasis, color, disabled, ...rest } = props;\n\n  const pressed = isPressed(props['aria-pressed']);\n  const stateProps =\n    'data-state' in props || props['aria-pressed'] === undefined ? {} : { 'data-state': pressed ? 'on' : 'off' };\n\n  const shared = {\n    size: size ?? toolbar.size,\n    // A caller states the look by `variant` or the rank by `emphasis`, never both.\n    ...(emphasis !== undefined ? { emphasis } : { variant: variant ?? (group ? 'ghost' : 'soft') }),\n    // The gray rest is a pair with the default variant: a caller who states a variant or an\n    // emphasis gets Button's own colour for it unless they state a colour too.\n    color: color ?? (variant || emphasis ? undefined : 'gray'),\n    ...stateProps,\n  } as const;\n\n  return (\n    <ToolbarPrimitive.Button asChild ref={forwardedRef} disabled={disabled || group?.disabled || undefined}>\n      {iconOnly ? (\n        <IconButton {...(rest as Omit<ToolbarIconButtonProps, 'iconOnly' | 'variant' | 'emphasis'>)} {...shared} />\n      ) : (\n        <Button {...(rest as Omit<ToolbarTextButtonProps, 'iconOnly' | 'variant' | 'emphasis'>)} {...shared} />\n      )}\n    </ToolbarPrimitive.Button>\n  );\n});\nToolbarButton.displayName = 'Toolbar.Button';\n\n// ============================================================================\n// ToolbarSeparator\n// ============================================================================\n\ntype ToolbarSeparatorProps = ComponentPropsWithout<typeof ToolbarPrimitive.Separator, RemovedProps | 'orientation'>;\n\n/**\n * A gray hairline between two clusters, announced as a separator. Its direction is always\n * opposite to the toolbar's.\n */\nconst ToolbarSeparator = React.forwardRef<HTMLDivElement, ToolbarSeparatorProps>(\n  ({ className, ...props }, forwardedRef) => {\n    useToolbarContext('ToolbarSeparator');\n    return (\n      <ToolbarPrimitive.Separator\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-ToolbarSeparator', className)}\n      />\n    );\n  },\n);\nToolbarSeparator.displayName = 'Toolbar.Separator';\n\n// ============================================================================\n// ToolbarTitle\n// ============================================================================\n\n/** The title's text step: one step above the label of a button at the same size. */\nconst TITLE_SIZE = { '1': '2', '2': '3', '3': '4', '4': '5' } as const satisfies Record<ToolbarSize, TextProps['size']>;\n\ninterface ToolbarTitleProps {\n  /** The title text. With none, the title renders nothing. */\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  /** The id of the title, so that the toolbar's `aria-labelledby` can point at it. */\n  id?: string;\n}\n\n/**\n * What the row is about, at its leading edge. One line: it truncates rather than wrapping.\n * Its text step follows the toolbar's `size`, and it takes more air from the controls beside it\n * than they take from each other.\n */\nconst ToolbarTitle = React.forwardRef<HTMLSpanElement, ToolbarTitleProps>(\n  ({ className, children, style, id }, forwardedRef) => {\n    const { size } = useToolbarContext('ToolbarTitle');\n    if (children === undefined || children === null || children === false) return null;\n    return (\n      <Text\n        ref={forwardedRef}\n        as=\"span\"\n        size={TITLE_SIZE[size]}\n        weight=\"medium\"\n        truncate\n        id={id}\n        style={style}\n        className={classNames('rt-ToolbarTitle', className)}\n      >\n        {children}\n      </Text>\n    );\n  },\n);\nToolbarTitle.displayName = 'Toolbar.Title';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst Toolbar = Object.assign(ToolbarRoot, {\n  Root: ToolbarRoot,\n  Group: ToolbarGroup,\n  Button: ToolbarButton,\n  Separator: ToolbarSeparator,\n  Title: ToolbarTitle,\n});\n\nexport {\n  Toolbar,\n  ToolbarGroup,\n  ToolbarButton,\n  ToolbarSeparator,\n  ToolbarTitle,\n  ToolbarRoot as Root,\n  ToolbarGroup as Group,\n  ToolbarButton as Button,\n  ToolbarSeparator as Separator,\n  ToolbarTitle as Title,\n};\nexport type {\n  ToolbarProps,\n  ToolbarGroupProps,\n  ToolbarButtonProps,\n  ToolbarSeparatorProps,\n  ToolbarTitleProps,\n  ToolbarProps as RootProps,\n  ToolbarGroupProps as GroupProps,\n  ToolbarButtonProps as ButtonProps,\n  ToolbarSeparatorProps as SeparatorProps,\n  ToolbarTitleProps as TitleProps,\n};\n"],
-  "mappings": "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",
-  "names": ["React", "classNames", "ToolbarPrimitive", "ToolbarContext", "ToolbarGroupContext", "useToolbarContext", "consumer", "context", "ToolbarRoot", "props", "forwardedRef", "size", "toolbarRootPropDefs", "orientation", "className", "_orientation", "children", "rootProps", "extractProps", "marginPropDefs", "ToolbarPrimitive", "classNames", "ToolbarGroup", "disabled", "group", "isPressed", "value", "ToolbarButton", "toolbar", "iconOnly", "variant", "emphasis", "color", "rest", "pressed", "stateProps", "shared", "IconButton", "Button", "ToolbarSeparator", "TITLE_SIZE", "ToolbarTitle", "style", "id", "Text", "Toolbar"]
-}