@tutti-os/ui-system 0.0.6 → 0.0.8

package/dist/{chunk-HJ43LQHW.js → chunk-QXXI5OBT.js}

@@ -66,6 +66,7 @@ function Badge({
 }
 
 // src/components/bare-icon-button/bare-icon-button.tsx
+import * as React from "react";
 import { cva as cva2 } from "class-variance-authority";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -83,27 +84,26 @@ var bareIconButtonVariants = cva2(
     }
   }
 );
-function BareIconButton({
-  className,
-  size = "md",
-  asChild = false,
-  type = "button",
-  ...props
-}) {
-  const Comp = asChild ? Slot2.Root : "button";
-  return /* @__PURE__ */ jsx2(
-    Comp,
-    {
-      "data-slot": "bare-icon-button",
-      "data-size": size,
-      type,
-      className: cn(bareIconButtonVariants({ size, className })),
-      ...props
-    }
-  );
-}
+var BareIconButton = React.forwardRef(
+  ({ className, size = "md", asChild = false, type = "button", ...props }, ref) => {
+    const Comp = asChild ? Slot2.Root : "button";
+    return /* @__PURE__ */ jsx2(
+      Comp,
+      {
+        ref,
+        "data-slot": "bare-icon-button",
+        "data-size": size,
+        type,
+        className: cn(bareIconButtonVariants({ size, className })),
+        ...props
+      }
+    );
+  }
+);
+BareIconButton.displayName = "BareIconButton";
 
 // src/components/button/button.tsx
+import * as React2 from "react";
 import { cva as cva3 } from "class-variance-authority";
 import { Slot as Slot3 } from "radix-ui";
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -145,25 +145,29 @@ var buttonVariants = cva3(
     ]
   }
 );
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot3.Root : "button";
-  return /* @__PURE__ */ jsx3(
-    Comp,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
+var Button = React2.forwardRef(
+  ({
+    className,
+    variant = "default",
+    size = "default",
+    asChild = false,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot3.Root : "button";
+    return /* @__PURE__ */ jsx3(
+      Comp,
+      {
+        ref,
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
+        className: cn(buttonVariants({ variant, size, className })),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 
 // src/components/card/card.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -290,11 +294,11 @@ function Checkbox({
 }
 
 // src/components/dialog/dialog.tsx
-import * as React from "react";
+import * as React3 from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
 var dialogCloseDurationMs = 150;
-var DialogMotionContext = React.createContext({
+var DialogMotionContext = React3.createContext({
   open: false
 });
 function Dialog({
@@ -303,11 +307,11 @@ function Dialog({
   open,
   ...props
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+  const [uncontrolledOpen, setUncontrolledOpen] = React3.useState(
     defaultOpen ?? false
   );
   const currentOpen = open ?? uncontrolledOpen;
-  const handleOpenChange = React.useCallback(
+  const handleOpenChange = React3.useCallback(
     (nextOpen) => {
       if (open === void 0) {
         setUncontrolledOpen(nextOpen);
@@ -368,9 +372,9 @@ function DialogContent({
   style,
   ...props
 }) {
-  const { open } = React.useContext(DialogMotionContext);
-  const [mounted, setMounted] = React.useState(open);
-  React.useEffect(() => {
+  const { open } = React3.useContext(DialogMotionContext);
+  const [mounted, setMounted] = React3.useState(open);
+  React3.useEffect(() => {
     if (open) {
       setMounted(true);
       return void 0;
@@ -578,7 +582,7 @@ function ConfirmationDialog({
 }
 
 // src/components/date-picker/date-picker.tsx
-import * as React2 from "react";
+import * as React4 from "react";
 import { createPortal } from "react-dom";
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultLabels = {
@@ -668,7 +672,7 @@ function subscribeScrollableAncestors(trigger, onScrollLike) {
   }
   return () => cleanups.forEach((dispose) => dispose());
 }
-var DatePicker = React2.forwardRef(
+var DatePicker = React4.forwardRef(
   ({
     className,
     value,
@@ -685,20 +689,20 @@ var DatePicker = React2.forwardRef(
       ...labels,
       weekdayLabels: labels?.weekdayLabels ?? defaultLabels.weekdayLabels
     };
-    const triggerRef = React2.useRef(null);
-    const popoverRef = React2.useRef(null);
-    const selectedDate = React2.useMemo(() => parseDateValue(value), [value]);
-    const [isOpen, setIsOpen] = React2.useState(false);
-    const [visibleMonth, setVisibleMonth] = React2.useState(
+    const triggerRef = React4.useRef(null);
+    const popoverRef = React4.useRef(null);
+    const selectedDate = React4.useMemo(() => parseDateValue(value), [value]);
+    const [isOpen, setIsOpen] = React4.useState(false);
+    const [visibleMonth, setVisibleMonth] = React4.useState(
       () => selectedDate ?? /* @__PURE__ */ new Date()
     );
-    const [popoverPosition, setPopoverPosition] = React2.useState(null);
-    React2.useEffect(() => {
+    const [popoverPosition, setPopoverPosition] = React4.useState(null);
+    React4.useEffect(() => {
       if (selectedDate) {
         setVisibleMonth(selectedDate);
       }
     }, [selectedDate]);
-    const openPopover = React2.useCallback(() => {
+    const openPopover = React4.useCallback(() => {
       const trigger = triggerRef.current;
       if (!trigger) {
         return;
@@ -708,7 +712,7 @@ var DatePicker = React2.forwardRef(
       );
       setIsOpen(true);
     }, []);
-    React2.useLayoutEffect(() => {
+    React4.useLayoutEffect(() => {
       if (!isOpen) {
         return;
       }
@@ -725,7 +729,7 @@ var DatePicker = React2.forwardRef(
       const rafId = window.requestAnimationFrame(sync);
       return () => window.cancelAnimationFrame(rafId);
     }, [isOpen]);
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       if (!isOpen) {
         return void 0;
       }
@@ -772,8 +776,8 @@ var DatePicker = React2.forwardRef(
         unsubAncestors();
       };
     }, [isOpen]);
-    const today = React2.useMemo(() => /* @__PURE__ */ new Date(), []);
-    const monthGrid = React2.useMemo(
+    const today = React4.useMemo(() => /* @__PURE__ */ new Date(), []);
+    const monthGrid = React4.useMemo(
       () => buildMonthGrid(visibleMonth),
       [visibleMonth]
     );
@@ -1063,14 +1067,14 @@ function DrawerDescription({
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 
 // src/components/menu-surface/menu-surface.tsx
-import * as React3 from "react";
+import * as React5 from "react";
 import { Slot as Slot4 } from "radix-ui";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var menuSurfaceClassName = "t-dropdown flex flex-col gap-0.5 rounded-[8px] border border-[var(--border-1)] bg-[var(--background-fronted)] p-1 text-[13px] text-[var(--text-primary)] shadow-panel outline-none";
 var menuItemClassName = "relative flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1 text-[13px] text-[var(--text-primary)] outline-hidden transition-colors duration-200 select-none hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] focus:bg-[var(--transparency-hover)] focus:text-[var(--text-primary)] data-[highlighted]:bg-[var(--transparency-hover)] data-[highlighted]:text-[var(--text-primary)] data-disabled:pointer-events-none data-disabled:text-[var(--text-disabled)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2";
 var menuItemWithIndicatorClassName = `${menuItemClassName} pr-8`;
 var menuItemIndicatorClassName = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-[var(--tutti-purple)]";
-var MenuSurface = React3.forwardRef(
+var MenuSurface = React5.forwardRef(
   ({
     asChild = false,
     className,
@@ -1602,7 +1606,7 @@ function ResizableHandle({
 }
 
 // src/components/scroll-area/scroll-area.tsx
-import * as React4 from "react";
+import * as React6 from "react";
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var MIN_THUMB_SIZE_PX = 24;
 function ScrollArea({
@@ -1698,9 +1702,9 @@ function CustomScrollArea({
   viewportTestId,
   ...props
 }) {
-  const localViewportRef = React4.useRef(null);
-  const contentRef = React4.useRef(null);
-  const [active, setActive] = React4.useState(false);
+  const localViewportRef = React6.useRef(null);
+  const contentRef = React6.useRef(null);
+  const [active, setActive] = React6.useState(false);
   const alwaysVisible = type === "always" || type === "scroll" || hasAlwaysVisibleScrollbarSelector(className);
   return /* @__PURE__ */ jsxs7(
     ScrollAreaFrame,
@@ -1791,7 +1795,7 @@ function ScrollAreaFrame({
               "data-slot": "scroll-area-content",
               style: {
                 minWidth: "100%",
-                display: "table",
+                display: "block",
                 ...viewportContentStyle
               },
               children
@@ -1808,15 +1812,15 @@ function ScrollAreaScrollbar({
   orientation,
   viewportRef
 }) {
-  const trackRef = React4.useRef(null);
-  const thumbRef = React4.useRef(null);
-  const dragStateRef = React4.useRef(null);
-  const frameRef = React4.useRef(null);
-  const scrollableRef = React4.useRef(false);
-  const [dragging, setDragging] = React4.useState(false);
-  const [scrollable, setScrollable] = React4.useState(false);
-  const [trackActive, setTrackActive] = React4.useState(false);
-  const syncScrollbarState = React4.useCallback(() => {
+  const trackRef = React6.useRef(null);
+  const thumbRef = React6.useRef(null);
+  const dragStateRef = React6.useRef(null);
+  const frameRef = React6.useRef(null);
+  const scrollableRef = React6.useRef(false);
+  const [dragging, setDragging] = React6.useState(false);
+  const [scrollable, setScrollable] = React6.useState(false);
+  const [trackActive, setTrackActive] = React6.useState(false);
+  const syncScrollbarState = React6.useCallback(() => {
     const viewport = viewportRef.current;
     const track = trackRef.current;
     const thumb = thumbRef.current;
@@ -1855,7 +1859,7 @@ function ScrollAreaScrollbar({
     }
     updateScrollable(true, scrollableRef, setScrollable);
   }, [orientation, viewportRef]);
-  const scheduleSync = React4.useCallback(() => {
+  const scheduleSync = React6.useCallback(() => {
     if (frameRef.current !== null) {
       return;
     }
@@ -1864,7 +1868,7 @@ function ScrollAreaScrollbar({
       syncScrollbarState();
     });
   }, [syncScrollbarState]);
-  const scrollViewportToThumbOffset = React4.useCallback(
+  const scrollViewportToThumbOffset = React6.useCallback(
     (thumbOffset) => {
       const viewport = viewportRef.current;
       const track = trackRef.current;
@@ -1891,7 +1895,7 @@ function ScrollAreaScrollbar({
     },
     [orientation, syncScrollbarState, viewportRef]
   );
-  const handleTrackPointerDown = React4.useCallback(
+  const handleTrackPointerDown = React6.useCallback(
     (event) => {
       if (event.button !== 0 || !scrollableRef.current) {
         return;
@@ -1911,7 +1915,7 @@ function ScrollAreaScrollbar({
     },
     [orientation, scrollViewportToThumbOffset]
   );
-  const handleThumbPointerDown = React4.useCallback(
+  const handleThumbPointerDown = React6.useCallback(
     (event) => {
       if (event.button !== 0 || !scrollableRef.current) {
         return;
@@ -1943,7 +1947,7 @@ function ScrollAreaScrollbar({
     },
     [orientation, viewportRef]
   );
-  React4.useEffect(() => {
+  React6.useEffect(() => {
     if (!dragging) {
       return;
     }
@@ -1974,7 +1978,7 @@ function ScrollAreaScrollbar({
       window.removeEventListener("pointerup", handlePointerUp);
     };
   }, [dragging, orientation, syncScrollbarState, viewportRef]);
-  React4.useEffect(() => {
+  React6.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       updateScrollable(false, scrollableRef, setScrollable);
@@ -1996,7 +2000,7 @@ function ScrollAreaScrollbar({
       resizeObserver?.disconnect();
     };
   }, [contentRef, scheduleSync, syncScrollbarState, viewportRef]);
-  React4.useEffect(() => {
+  React6.useEffect(() => {
     scheduleSync();
   });
   return /* @__PURE__ */ jsx16(
@@ -2696,7 +2700,7 @@ function Textarea({ className, ...props }) {
 }
 
 // src/components/toast/toast.tsx
-import * as React5 from "react";
+import * as React7 from "react";
 import { Toast as ToastPrimitive } from "radix-ui";
 import { cva as cva5 } from "class-variance-authority";
 import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -2707,7 +2711,7 @@ function ToastProvider({
 }) {
   return /* @__PURE__ */ jsx26(ToastPrimitive.Provider, { duration, ...props });
 }
-var ToastVisualContext = React5.createContext(null);
+var ToastVisualContext = React7.createContext(null);
 var toastStatusIconByVariant = {
   destructive: FailedFilledIcon,
   success: SuccessFilledIcon
@@ -2731,7 +2735,7 @@ function formatToastText(children) {
   if (typeof children === "string") {
     return stripToastTrailingSentencePunctuation(children);
   }
-  const flatChildren = React5.Children.toArray(children);
+  const flatChildren = React7.Children.toArray(children);
   if (flatChildren.length === 1 && typeof flatChildren[0] === "string") {
     return stripToastTrailingSentencePunctuation(flatChildren[0]);
   }
@@ -2789,7 +2793,7 @@ function ToastTitle({
   children,
   ...props
 }) {
-  const toastVisual = React5.useContext(ToastVisualContext);
+  const toastVisual = React7.useContext(ToastVisualContext);
   const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
   return /* @__PURE__ */ jsxs10(
     ToastPrimitive.Title,
@@ -3121,7 +3125,7 @@ function UnderlineTabs({
 }
 
 // src/components/viewport-menu-surface/viewport-menu-surface.tsx
-import * as React6 from "react";
+import * as React8 from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var VIEWPORT_MENU_PADDING = 12;
@@ -3235,7 +3239,7 @@ function assignRef(ref, value) {
 function callHandler(handler, event) {
   handler?.(event);
 }
-var ViewportMenuSurface = React6.forwardRef(function ViewportMenuSurface2({
+var ViewportMenuSurface = React8.forwardRef(function ViewportMenuSurface2({
   open,
   placement,
   children,
@@ -3251,16 +3255,16 @@ var ViewportMenuSurface = React6.forwardRef(function ViewportMenuSurface2({
   className,
   ...rest
 }, forwardedRef) {
-  const surfaceRef = React6.useRef(null);
-  const [measuredSize, setMeasuredSize] = React6.useState(null);
-  const setRefs2 = React6.useCallback(
+  const surfaceRef = React8.useRef(null);
+  const [measuredSize, setMeasuredSize] = React8.useState(null);
+  const setRefs2 = React8.useCallback(
     (node) => {
       surfaceRef.current = node;
       assignRef(forwardedRef, node);
     },
     [forwardedRef]
   );
-  React6.useLayoutEffect(() => {
+  React8.useLayoutEffect(() => {
     if (!open) {
       setMeasuredSize(null);
       return;
@@ -3284,7 +3288,7 @@ var ViewportMenuSurface = React6.forwardRef(function ViewportMenuSurface2({
     observer.observe(element);
     return () => observer.disconnect();
   }, [open, placement]);
-  React6.useEffect(() => {
+  React8.useEffect(() => {
     if (!open) {
       return;
     }
@@ -3341,7 +3345,7 @@ var ViewportMenuSurface = React6.forwardRef(function ViewportMenuSurface2({
     onDismiss,
     open
   ]);
-  const resolvedPlacement = React6.useMemo(() => {
+  const resolvedPlacement = React8.useMemo(() => {
     if (placement.type === "absolute") {
       const boundary2 = resolveMenuBoundaryFromPoint({
         x: placement.left,
@@ -3528,4 +3532,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-HJ43LQHW.js.map
+//# sourceMappingURL=chunk-QXXI5OBT.js.map