@tutti-os/ui-system 0.0.99 → 0.0.101

package/dist/{chunk-XVAQEGXC.js → chunk-5BWNLF4L.js}

@@ -15,7 +15,7 @@ import {
   SuccessFilledIcon,
   WarningFilledIcon,
   WarningLinedIcon
-} from "./chunk-KBF64EIF.js";
+} from "./chunk-AL2NBJNO.js";
 import {
   cn
 } from "./chunk-DGPY4WP3.js";
@@ -275,7 +275,7 @@ function CardFooter({ className, ...props }) {
 
 // src/components/checkbox/checkbox.tsx
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 function Checkbox({
   className,
   ...props
@@ -285,16 +285,19 @@ function Checkbox({
     {
       "data-slot": "checkbox",
       className: cn(
-        "peer inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--transparency-block)] text-[var(--text-inverted)] transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:border-[var(--border-focus)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--border-focus)_30%,transparent)] disabled:cursor-not-allowed disabled:border-[var(--border-1)] disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-inverted)] disabled:opacity-100 data-disabled:border-[var(--border-1)] aria-invalid:border-[var(--state-danger)] aria-invalid:ring-2 aria-invalid:ring-[color-mix(in_srgb,var(--state-danger)_20%,transparent)] data-[state=checked]:border-[var(--text-primary)] data-[state=checked]:bg-[var(--text-primary)] data-[state=unchecked]:hover:border-[color-mix(in_srgb,var(--text-primary)_40%,transparent)] disabled:data-[state=checked]:border-[var(--border-1)] disabled:data-[state=checked]:bg-[var(--text-disabled)] data-disabled:data-[state=checked]:border-[var(--border-1)]",
+        "peer inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--transparency-block)] text-[var(--text-inverted)] transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:border-[var(--border-focus)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--border-focus)_30%,transparent)] disabled:cursor-not-allowed disabled:border-[var(--border-1)] disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-inverted)] disabled:opacity-100 data-disabled:border-[var(--border-1)] aria-invalid:border-[var(--state-danger)] aria-invalid:ring-2 aria-invalid:ring-[color-mix(in_srgb,var(--state-danger)_20%,transparent)] data-[state=checked]:border-[var(--text-primary)] data-[state=checked]:bg-[var(--text-primary)] data-[state=indeterminate]:border-[var(--text-primary)] data-[state=indeterminate]:bg-[var(--text-primary)] data-[state=unchecked]:hover:border-[color-mix(in_srgb,var(--text-primary)_40%,transparent)] disabled:data-[state=checked]:border-[var(--border-1)] disabled:data-[state=checked]:bg-[var(--text-disabled)] disabled:data-[state=indeterminate]:border-[var(--border-1)] disabled:data-[state=indeterminate]:bg-[var(--text-disabled)] data-disabled:data-[state=checked]:border-[var(--border-1)] data-disabled:data-[state=indeterminate]:border-[var(--border-1)]",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsxs(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
-          className: "grid place-content-center text-current transition-none [&>svg]:size-3",
-          children: /* @__PURE__ */ jsx5(CheckIcon, { size: 14 })
+          className: "grid place-content-center text-current transition-none data-[state=checked]:[&>span]:hidden data-[state=indeterminate]:[&>svg]:hidden [&>svg]:size-3",
+          children: [
+            /* @__PURE__ */ jsx5(CheckIcon, { size: 14 }),
+            /* @__PURE__ */ jsx5("span", { className: "h-0.5 w-2.5 rounded-full bg-current" })
+          ]
         }
       )
     }
@@ -304,7 +307,7 @@ function Checkbox({
 // src/components/dialog/dialog.tsx
 import * as React3 from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var dialogCloseDurationMs = 150;
 var DialogMotionContext = React3.createContext({
   open: false
@@ -397,9 +400,9 @@ function DialogContent({
   if (!mounted) {
     return null;
   }
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+  const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx6(DialogOverlay, { className: overlayClassName, forceMount: true }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -413,7 +416,7 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(
+          showCloseButton && /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs2(
             Button,
             {
               variant: "ghost",
@@ -450,7 +453,7 @@ function DialogFooter({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -500,7 +503,7 @@ function DialogDescription({
 }
 
 // src/components/confirmation-dialog/confirmation-dialog.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function confirmToneClassName(tone) {
   if (tone === "destructive") {
     return "shadow-none";
@@ -528,7 +531,7 @@ function ConfirmationDialog({
   title
 }) {
   const isCloseDisabled = disableCloseWhileBusy && confirmBusy;
-  return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(
     DialogContent,
     {
       className: cn(
@@ -549,12 +552,12 @@ function ConfirmationDialog({
         }
       },
       children: [
-        /* @__PURE__ */ jsxs2(DialogHeader, { children: [
+        /* @__PURE__ */ jsxs3(DialogHeader, { children: [
           /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
           description ? /* @__PURE__ */ jsx7(DialogDescription, { children: description }) : null
         ] }),
         children ? /* @__PURE__ */ jsx7("div", { className: "text-[13px] leading-[1.3] text-text-secondary", children }) : null,
-        footer ?? /* @__PURE__ */ jsxs2(DialogFooter, { children: [
+        footer ?? /* @__PURE__ */ jsxs3(DialogFooter, { children: [
           /* @__PURE__ */ jsx7(
             Button,
             {
@@ -687,7 +690,7 @@ function ContextMenuItem({
 // src/components/date-picker/date-picker.tsx
 import * as React5 from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultLabels = {
   placeholder: "Year / Month / Day",
   previousMonth: "Previous month",
@@ -890,7 +893,7 @@ var DatePicker = React5.forwardRef(
       setIsOpen(false);
       triggerRef.current?.focus();
     };
-    return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    return /* @__PURE__ */ jsxs4(Fragment2, { children: [
       /* @__PURE__ */ jsx10(
         "button",
         {
@@ -926,7 +929,7 @@ var DatePicker = React5.forwardRef(
         }
       ),
       isOpen && popoverPosition ? createPortal(
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           "div",
           {
             ref: popoverRef,
@@ -939,9 +942,9 @@ var DatePicker = React5.forwardRef(
               zIndex: "var(--z-popover)"
             },
             children: [
-              /* @__PURE__ */ jsxs3("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
                 /* @__PURE__ */ jsx10("div", { className: "text-[13px] font-semibold text-foreground", children: formatMonthLabel(visibleMonth) }),
-                /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsx10(
                     "button",
                     {
@@ -1006,7 +1009,7 @@ var DatePicker = React5.forwardRef(
                   })
                 }
               ),
-              /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex items-center justify-between gap-2 border-t border-border/70 pt-3", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "mt-3 flex items-center justify-between gap-2 border-t border-border/70 pt-3", children: [
                 /* @__PURE__ */ jsx10(
                   "button",
                   {
@@ -1042,7 +1045,7 @@ DatePicker.displayName = "DatePicker";
 
 // src/components/drawer/drawer.tsx
 import { Drawer as DrawerPrimitive } from "vaul";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function Drawer({
   ...props
 }) {
@@ -1089,9 +1092,9 @@ function DrawerContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(DrawerPortal, { "data-slot": "drawer-portal", container: portalContainer, children: [
+  return /* @__PURE__ */ jsxs5(DrawerPortal, { "data-slot": "drawer-portal", container: portalContainer, children: [
     showOverlay ? /* @__PURE__ */ jsx11(DrawerOverlay, {}) : null,
-    /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsxs5(
       DrawerPrimitive.Content,
       {
         "data-slot": "drawer-content",
@@ -1168,7 +1171,7 @@ function DrawerDescription({
 
 // src/components/dropdown-menu/dropdown-menu.tsx
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
@@ -1263,7 +1266,7 @@ function DropdownMenuCheckboxItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     DropdownMenuPrimitive.CheckboxItem,
     {
       checked,
@@ -1308,7 +1311,7 @@ function DropdownMenuRadioItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     DropdownMenuPrimitive.RadioItem,
     {
       "data-inset": inset,
@@ -1391,7 +1394,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-inset": inset,
@@ -1530,23 +1533,34 @@ function TooltipContent({
 }
 
 // src/components/mention-pill/truncating-pill-label.tsx
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
-function useTextOverflow(watch) {
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+function useTextOverflow(watch, descendantSelector) {
   const ref = React6.useRef(null);
   const [overflowing, setOverflowing] = React6.useState(false);
   React6.useEffect(() => {
     const element = ref.current;
-    if (!element || typeof ResizeObserver === "undefined") {
+    if (!element) {
       return;
     }
+    const overflowCandidates = () => [
+      element,
+      ...descendantSelector ? element.querySelectorAll(descendantSelector) : []
+    ];
     const measure = () => {
-      setOverflowing(element.scrollWidth - element.clientWidth > 1);
+      setOverflowing(
+        overflowCandidates().some(
+          (candidate) => candidate.scrollWidth - candidate.clientWidth > 1
+        )
+      );
     };
     measure();
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
     const observer = new ResizeObserver(measure);
-    observer.observe(element);
+    for (const candidate of overflowCandidates()) observer.observe(candidate);
     return () => observer.disconnect();
-  }, [watch]);
+  }, [descendantSelector, watch]);
   return { ref, overflowing };
 }
 function TruncatingPillLabel({
@@ -1570,7 +1584,7 @@ function TruncatingPillLabel({
   if (!tooltip) {
     return label;
   }
-  const tooltipElement = /* @__PURE__ */ jsxs6(Tooltip, { children: [
+  const tooltipElement = /* @__PURE__ */ jsxs7(Tooltip, { children: [
     /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: label }),
     overflowing ? /* @__PURE__ */ jsx15(TooltipContent, { className: "max-w-[min(420px,calc(100vw-32px))] whitespace-normal text-left [overflow-wrap:anywhere]", children: tooltip }) : null
   ] });
@@ -1578,7 +1592,7 @@ function TruncatingPillLabel({
 }
 
 // src/components/mention-pill/mention-pill.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var mentionPillTokenByKind = {
   app: "var(--rich-text-folder)",
   issue: "var(--rich-text-mention-issue)",
@@ -1614,7 +1628,7 @@ function MentionPill({
   const tooltipText = [label, summary].filter(
     (part) => typeof part === "string" && part.trim() !== ""
   ).join(" ");
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "span",
     {
       className: cn(
@@ -1631,7 +1645,7 @@ function MentionPill({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "span",
           {
             "aria-hidden": removable ? void 0 : true,
@@ -1670,7 +1684,7 @@ function MentionPill({
                   type: "button",
                   ...removeButtonProps,
                   className: cn(
-                    "absolute top-1/2 left-1/2 inline-flex size-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-sm text-[var(--text-secondary)] opacity-0 transition-opacity group-hover:opacity-100 hover:bg-transparency-block hover:text-[var(--text-primary)] focus-visible:opacity-100",
+                    "absolute top-1/2 left-1/2 inline-flex size-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--text-secondary)] opacity-0 transition-opacity group-hover:opacity-100 hover:text-[var(--text-primary)] focus-visible:opacity-100",
                     removeButtonProps?.className
                   ),
                   children: /* @__PURE__ */ jsx16(CloseIcon, { className: "size-3.5" })
@@ -1679,14 +1693,14 @@ function MentionPill({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           TruncatingPillLabel,
           {
             tooltip: tooltipText,
             withTooltipProvider,
             children: [
               /* @__PURE__ */ jsx16("span", { children: label }),
-              summary ? /* @__PURE__ */ jsxs7("span", { className: "text-current", children: [
+              summary ? /* @__PURE__ */ jsxs8("span", { className: "text-current", children: [
                 " ",
                 summary
               ] }) : null
@@ -1826,7 +1840,7 @@ function ResizableHandle({
 
 // src/components/scroll-area/scroll-area.tsx
 import * as React7 from "react";
-import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var MIN_THUMB_SIZE_PX = 24;
 function ScrollArea({
   className,
@@ -1925,7 +1939,7 @@ function CustomScrollArea({
   const contentRef = React7.useRef(null);
   const [active, setActive] = React7.useState(false);
   const alwaysVisible = type === "always" || type === "scroll" || hasAlwaysVisibleScrollbarSelector(className);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     ScrollAreaFrame,
     {
       ...props,
@@ -2388,7 +2402,7 @@ function clamp(value, min, max) {
 
 // src/components/select/select.tsx
 import { Select as SelectPrimitive } from "radix-ui";
-import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
@@ -2419,7 +2433,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -2460,7 +2474,7 @@ function SelectContent({
       position,
       align,
       ...props,
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs10(
         MenuSurface,
         {
           "data-slot": "select-content",
@@ -2589,7 +2603,7 @@ function SelectItem({
   forceSelectedIndicator = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -2684,7 +2698,7 @@ function Separator2({
 }
 
 // src/components/section-tabs/section-tabs.tsx
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 function SectionTabs({
   tabs,
   value,
@@ -2703,7 +2717,7 @@ function SectionTabs({
       role: "tablist",
       children: tabs.map((tab) => {
         const isActive = value === tab.value;
-        return /* @__PURE__ */ jsxs10(
+        return /* @__PURE__ */ jsxs11(
           "button",
           {
             "aria-selected": isActive,
@@ -2934,7 +2948,7 @@ function Textarea({ className, ...props }) {
 import * as React8 from "react";
 import { Toast as ToastPrimitive } from "radix-ui";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
 var toastDefaultDurationMs = 3e3;
 function ToastProvider({
   duration = toastDefaultDurationMs,
@@ -3026,7 +3040,7 @@ function ToastTitle({
 }) {
   const toastVisual = React8.useContext(ToastVisualContext);
   const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     ToastPrimitive.Title,
     {
       "data-slot": "toast-title",
@@ -3104,7 +3118,7 @@ function ToastViewport({
 
 // src/components/underline-tabs/underline-tabs.tsx
 import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState5 } from "react";
-import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
   value,
@@ -3187,7 +3201,7 @@ function UnderlineTabs({
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       "aria-label": ariaLabel,
@@ -3213,7 +3227,7 @@ function UnderlineTabs({
             "data-can-scroll-right": overflow.canScrollRight ? "true" : "false",
             "data-slot": "underline-tabs-viewport",
             "data-testid": viewportTestId,
-            children: /* @__PURE__ */ jsxs12(
+            children: /* @__PURE__ */ jsxs13(
               "div",
               {
                 ref: rowRef,
@@ -3221,7 +3235,7 @@ function UnderlineTabs({
                 children: [
                   tabs.map((tab) => {
                     const isActive = value === tab.value;
-                    return /* @__PURE__ */ jsxs12(
+                    return /* @__PURE__ */ jsxs13(
                       "button",
                       {
                         ref: (element) => {
@@ -3723,4 +3737,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-XVAQEGXC.js.map
+//# sourceMappingURL=chunk-5BWNLF4L.js.map