@proteos/ui 0.56.0 → 0.57.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { cn, Button, Skeleton } from './chunk-IKAX76MB.js';
-export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-IKAX76MB.js';
+import { cn, Button, Skeleton } from './chunk-NSE4VW3Z.js';
+export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-NSE4VW3Z.js';
 import { icons, Contact, Paperclip, BookText, Banknote, UsersRound, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, Shapes, Search, Phone, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, Pipette, Pencil, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, ChevronRight as ChevronRight$1, CircleCheck, CircleAlert, Info } from 'lucide-react';
 import { tv } from 'tailwind-variants';
 import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Label, Input as Input$1, ListBox, ListBoxItem, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Button as Button$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, SelectValue, ModalOverlay, Modal as Modal$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, UNSTABLE_Toast, UNSTABLE_ToastContent, Calendar as Calendar$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DatePickerStateContext } from 'react-aria-components';
@@ -35,8 +35,8 @@ function PopoverContent({
       className: (renderProps) => cn(
         "rounded-md border border-rule bg-surface",
         "shadow-[var(--shadow-float)]",
-        "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-        "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1",
+        "entering:animate-enter-slide-down",
+        "exiting:animate-exit-slide-up",
         panelClassName,
         typeof className === "function" ? className(renderProps) : className
       ),
@@ -403,7 +403,7 @@ function AttributeTypeIcon({
 var avatarStyles = tv({
   base: [
     "inline-grid place-items-center shrink-0 select-none overflow-hidden",
-    "rounded-full border",
+    "border",
     "font-mono font-medium tracking-[-0.005em]"
   ],
   variants: {
@@ -415,17 +415,22 @@ var avatarStyles = tv({
     },
     tone: {
       paper: "bg-surface-3 text-ink border-rule",
-      indigo: "bg-accent text-[#f0efe8] border-transparent",
-      moss: "bg-[#5b7052] text-[#f0efe8] border-transparent",
-      terra: "bg-[#8a5a3f] text-[#f0efe8] border-transparent",
-      slate: "bg-ink text-surface border-transparent"
+      indigo: "bg-tile-indigo text-tile-fg border-transparent",
+      moss: "bg-tile-moss text-tile-fg border-transparent",
+      terra: "bg-tile-terra text-tile-fg border-transparent",
+      slate: "bg-tile-slate text-tile-fg border-transparent"
+    },
+    shape: {
+      circle: "rounded-full",
+      square: "rounded-md"
     }
   },
-  defaultVariants: { size: "md", tone: "paper" }
+  defaultVariants: { size: "md", tone: "paper", shape: "circle" }
 });
 function Avatar({
   size,
   tone,
+  shape,
   initials,
   src,
   alt = "",
@@ -435,7 +440,7 @@ function Avatar({
 }) {
   const [failedSrc, setFailedSrc] = useState(null);
   const showsImage = Boolean(src) && failedSrc !== src;
-  return /* @__PURE__ */ jsx("span", { ...props, className: cn(avatarStyles({ size, tone }), className), children: showsImage ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("span", { ...props, className: cn(avatarStyles({ size, tone, shape }), className), children: showsImage ? /* @__PURE__ */ jsx(
     "img",
     {
       src: src ?? void 0,
@@ -702,8 +707,8 @@ function IconPicker({
         className: cn(
           "w-[316px] rounded-md border border-rule bg-surface p-2",
           "shadow-[var(--shadow-raised)]",
-          "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-          "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1"
+          "entering:animate-enter-slide-down",
+          "exiting:animate-exit-slide-up"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 pb-2", children: [
@@ -953,8 +958,8 @@ function Tooltip({ className, offset = 6, ...props }) {
         "rounded-md border border-rule bg-surface shadow-[var(--shadow-raised)]",
         "px-2.5 py-1.5",
         "font-mono text-[11.5px] text-ink-2",
-        "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1 entering:duration-150",
-        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
+        "entering:animate-enter-slide-down",
+        "exiting:animate-exit-fade",
         typeof className === "function" ? className(renderProps) : className
       )
     }
@@ -1310,8 +1315,8 @@ function BadgeMultiSelect({
           // (defaultOpen) — no browser outline around the whole panel.
           "outline-none rounded-md border border-rule bg-surface p-1",
           "shadow-[var(--shadow-raised)]",
-          "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-          "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1"
+          "entering:animate-enter-slide-down",
+          "exiting:animate-exit-slide-up"
         ),
         children: /* @__PURE__ */ jsx("div", { ref: popoverRef, children: /* @__PURE__ */ jsx(
           ListBox,
@@ -1857,8 +1862,8 @@ function Combobox({
               "min-w-[var(--trigger-width)]",
               "rounded-md border border-rule bg-surface p-1",
               "shadow-[var(--shadow-raised)]",
-              "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-              "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1"
+              "entering:animate-enter-slide-down",
+              "exiting:animate-exit-slide-up"
             ),
             children: /* @__PURE__ */ jsx(
               ListBox,
@@ -2350,8 +2355,8 @@ function Select({
               "z-[1300]",
               "rounded-md border border-rule bg-surface p-1",
               "shadow-[var(--shadow-raised)]",
-              "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-              "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1",
+              "entering:animate-enter-slide-down",
+              "exiting:animate-exit-slide-up",
               popoverClassName
             ),
             children: [
@@ -2519,7 +2524,9 @@ function ModalContent({
   children,
   className,
   modalClassName,
+  dialogClassName,
   isDismissable = true,
+  "aria-label": ariaLabel,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
@@ -2531,8 +2538,8 @@ function ModalContent({
         "fixed inset-0 z-50 flex items-center justify-center p-4",
         // Warm ink scrim — stays in the Proteos palette (no pure black).
         "bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]",
-        "entering:animate-in entering:fade-in-0 entering:duration-150",
-        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
+        "entering:animate-enter-fade",
+        "exiting:animate-exit-fade",
         typeof className === "function" ? className(renderProps) : className
       ),
       children: /* @__PURE__ */ jsx(
@@ -2546,11 +2553,18 @@ function ModalContent({
             "flex flex-col max-h-[calc(100dvh-2rem)]",
             "bg-surface border border-rule rounded-lg",
             "shadow-[var(--shadow-float)]",
-            "entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150",
-            "exiting:animate-out exiting:zoom-out-95 exiting:duration-100",
+            "entering:animate-enter-zoom",
+            "exiting:animate-exit-zoom",
             modalClassName
           ),
-          children: /* @__PURE__ */ jsx(Dialog, { className: "outline-none flex flex-col min-h-0 overflow-hidden", children })
+          children: /* @__PURE__ */ jsx(
+            Dialog,
+            {
+              className: cn("outline-none flex flex-col min-h-0 overflow-hidden", dialogClassName),
+              ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+              children
+            }
+          )
         }
       )
     }
@@ -2821,8 +2835,8 @@ function CurrencyInput({
                 className: cn(
                   "min-w-[9rem] rounded-md border border-rule bg-surface p-1",
                   "shadow-[var(--shadow-raised)]",
-                  "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-                  "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1"
+                  "entering:animate-enter-slide-down",
+                  "exiting:animate-exit-slide-up"
                 ),
                 children: /* @__PURE__ */ jsx(ListBox, { className: "max-h-72 overflow-auto outline-none", children: currencyOptions.map((option) => /* @__PURE__ */ jsxs(
                   ListBoxItem,
@@ -4061,7 +4075,7 @@ function CalendarSurface() {
             "data-[outside-month]:text-ink-4",
             "data-[hovered]:bg-surface-2 data-[hovered]:text-ink",
             "data-[focus-visible]:shadow-[var(--shadow-focus)]",
-            "data-[selected]:bg-accent data-[selected]:text-[#f0efe8]",
+            "data-[selected]:bg-accent data-[selected]:text-tile-fg",
             "data-[selected]:data-[hovered]:bg-accent-2",
             "data-[disabled]:opacity-30 data-[disabled]:cursor-not-allowed",
             "data-[unavailable]:line-through data-[unavailable]:text-ink-4"
@@ -4122,7 +4136,7 @@ function DatePicker({
                         "data-[placeholder]:text-ink-4",
                         "data-[type=literal]:text-ink-4",
                         // segment focus treatment: indigo fill, paper text
-                        "data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]",
+                        "data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]",
                         "data-[disabled]:cursor-not-allowed"
                       )
                     }
@@ -4161,8 +4175,8 @@ function DatePicker({
               "w-[var(--trigger-width)] min-w-[18rem] max-w-[500px]",
               "rounded-md border border-rule bg-surface p-4",
               "shadow-[var(--shadow-raised)]",
-              "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-              "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1"
+              "entering:animate-enter-slide-down",
+              "exiting:animate-exit-slide-up"
             ),
             children: /* @__PURE__ */ jsx(Dialog, { className: "outline-none", children: /* @__PURE__ */ jsx(CalendarSurface, {}) })
           }
@@ -4176,7 +4190,7 @@ var segmentStyles = cn(
   "data-[placeholder]:text-ink-4",
   "data-[type=literal]:text-ink-4",
   // segment focus treatment: indigo fill, paper text
-  "data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]",
+  "data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]",
   "data-[disabled]:cursor-not-allowed"
 );
 function PopoverTimeField({
@@ -4303,8 +4317,8 @@ function DateTimePicker({
               "w-[var(--trigger-width)] min-w-[18rem] max-w-[500px]",
               "rounded-md border border-rule bg-surface p-4",
               "shadow-[var(--shadow-raised)]",
-              "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-              "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1"
+              "entering:animate-enter-slide-down",
+              "exiting:animate-exit-slide-up"
             ),
             children: /* @__PURE__ */ jsxs(Dialog, { className: "outline-none", children: [
               /* @__PURE__ */ jsx(CalendarSurface, {}),
@@ -4538,8 +4552,8 @@ function MultiSelect({
           // (defaultOpen) — no browser outline around the whole panel.
           "outline-none rounded-md border border-rule bg-surface p-1",
           "shadow-[var(--shadow-raised)]",
-          "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-          "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1"
+          "entering:animate-enter-slide-down",
+          "exiting:animate-exit-slide-up"
         ),
         children: [
           isSearchable ? /* @__PURE__ */ jsx("div", { className: "border-b border-rule-2 px-1 pb-1 mb-1", children: /* @__PURE__ */ jsx(
@@ -5576,8 +5590,8 @@ var imageLightboxStyles = tv({
     "fixed inset-0 z-50 flex items-center justify-center p-4",
     // Deeper scrim than Modal's 40% — the image needs the page fully dimmed.
     "bg-[color-mix(in_oklab,var(--color-ink)_72%,transparent)]",
-    "entering:animate-in entering:fade-in-0 entering:duration-150",
-    "exiting:animate-out exiting:fade-out-0 exiting:duration-100"
+    "entering:animate-enter-fade",
+    "exiting:animate-exit-fade"
   ]
 });
 function ImageLightbox({ isOpen, onOpenChange, src, name, onDownload }) {
@@ -5662,7 +5676,7 @@ function VideoView({ name, src }) {
     /* @__PURE__ */ jsx("video", { controls: true, src, "aria-label": name, className: "h-full w-full object-contain" })
   );
 }
-var PdfView = lazy(() => import('./pdf-view-MH75RVQP.js'));
+var PdfView = lazy(() => import('./pdf-view-RQ2OZYHJ.js'));
 var fileViewerStyles = tv({
   base: [
     "relative flex w-full flex-col overflow-hidden",
@@ -5809,8 +5823,8 @@ function MenuPopover({ className, offset = 4, placement = "bottom start", ...pro
       className: (renderProps) => cn(
         "min-w-[200px] p-1 bg-surface border border-rule rounded-md",
         "shadow-[var(--shadow-float)] outline-none z-[1200]",
-        "entering:animate-in entering:fade-in-0 entering:zoom-in-95",
-        "exiting:animate-out exiting:fade-out-0 exiting:zoom-out-95",
+        "entering:animate-enter-zoom",
+        "exiting:animate-exit-zoom",
         typeof className === "function" ? className(renderProps) : className
       )
     }
@@ -6458,46 +6472,54 @@ var segmentedControlStyles = tv({
     // stretching parent (e.g. a `flex flex-col` card body, whose default
     // align-items:stretch would otherwise pull it to full width). Consumers
     // can still opt into full width by passing `w-full` via className.
-    group: "inline-flex w-fit rounded-sm border border-rule-strong bg-surface p-0.5 gap-0.5",
+    group: "inline-flex w-fit gap-px p-0.5 rounded-chip bg-surface-2 border border-rule",
     segment: [
-      "inline-flex items-center justify-center cursor-pointer",
-      "font-mono tracking-[0.04em] rounded-[3px] outline-none select-none",
-      "transition-[background-color,color] duration-150",
-      "data-[hovered]:text-ink",
-      "data-[selected]:bg-ink data-[selected]:text-surface",
+      "inline-flex items-center justify-center gap-1 cursor-pointer select-none",
+      "font-sans font-medium tracking-[-0.005em] rounded-sm outline-none text-ink-3",
+      "transition-[background-color,color,box-shadow] duration-150",
+      // Unselected: hover/press tint into the track colour. `selected` is
+      // declared after `hovered` in styles.css, so the pill wins over these.
+      "hovered:text-ink hovered:bg-[color-mix(in_oklab,var(--color-ink)_6%,var(--color-surface-2))]",
+      "pressed:bg-[color-mix(in_oklab,var(--color-ink)_10%,var(--color-surface-2))]",
+      // Selected: lifted white pill, static.
+      "selected:bg-surface selected:text-ink selected:shadow-[var(--shadow-rest)]",
       "data-[focus-visible]:shadow-[var(--shadow-focus)]",
+      "selected:data-[focus-visible]:shadow-[var(--shadow-focus),var(--shadow-rest)]",
       "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed"
     ]
   },
   variants: {
     size: {
-      sm: { segment: "px-2 py-0.5 text-[10.5px] tracking-[0.08em]" },
-      md: { segment: "px-2.5 py-1 text-[12px]" }
+      sm: { segment: "px-2 py-0.5 text-[11.5px] min-h-[22px]" },
+      md: { segment: "px-2.5 py-1 text-[12.5px] min-h-[26px]" }
     },
-    tone: {
-      // Default: ink fill on selected.
-      default: { segment: "text-ink-3" }
+    // Dense flow-wrapping register (designer inspector): the group becomes a
+    // wrapping flex row and every segment grows to share the line.
+    wrap: {
+      true: { group: "flex flex-wrap w-auto", segment: "flex-1 min-w-7 px-1.5" },
+      false: {}
     }
   },
-  defaultVariants: { size: "sm", tone: "default" }
+  defaultVariants: { size: "sm", wrap: false }
 });
 function SegmentedControl({
   options,
   value,
   onChange,
   size,
+  wrap = false,
   autoFocus = false,
   className,
   orientation = "horizontal",
   ...props
 }) {
-  const styles4 = segmentedControlStyles({ size });
+  const styles4 = segmentedControlStyles({ size, wrap });
   return /* @__PURE__ */ jsx(
     RadioGroup$1,
     {
       ...props,
       orientation,
-      value: String(value),
+      value: value === null ? null : String(value),
       onChange: (next) => onChange(next),
       className: cn(styles4.group(), className),
       children: options.map((option) => /* @__PURE__ */ jsx(
@@ -6505,6 +6527,7 @@ function SegmentedControl({
         {
           value: String(option.id),
           ...option.isDisabled ? { isDisabled: true } : {},
+          ...option["aria-label"] !== void 0 ? { "aria-label": option["aria-label"] } : {},
           ...autoFocus && option.id === value ? { autoFocus: true } : {},
           className: styles4.segment(),
           children: option.label
@@ -7269,8 +7292,8 @@ function NestedGroup({
                 {
                   "aria-label": "Group joiner",
                   options: [
-                    { id: "and", label: "AND" },
-                    { id: "or", label: "OR" }
+                    { id: "and", label: "and" },
+                    { id: "or", label: "or" }
                   ],
                   value: group.logicalOperator,
                   onChange: (next) => onChange({ ...group, logicalOperator: next })
@@ -7506,8 +7529,8 @@ function RecordFilterBuilderPanel({
             {
               "aria-label": "Joiner",
               options: [
-                { id: "and", label: "AND" },
-                { id: "or", label: "OR" }
+                { id: "and", label: "and" },
+                { id: "or", label: "or" }
               ],
               value: filter.logicalOperator,
               onChange: setJoiner2
@@ -7612,17 +7635,12 @@ function RecordFilterBuilderPanel({
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
                 onSaveView ? /* @__PURE__ */ jsxs(
-                  "button",
+                  Button,
                   {
-                    type: "button",
-                    onClick: onSaveView,
-                    disabled: totalChildren === 0,
-                    className: cn(
-                      "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-sm",
-                      "font-sans text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink",
-                      "disabled:opacity-40 disabled:pointer-events-none",
-                      "outline-none cursor-pointer"
-                    ),
+                    variant: "ghost",
+                    size: "sm",
+                    onPress: onSaveView,
+                    isDisabled: totalChildren === 0,
                     children: [
                       /* @__PURE__ */ jsxs(
                         "svg",
@@ -7645,19 +7663,7 @@ function RecordFilterBuilderPanel({
                     ]
                   }
                 ) : null,
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: onClose,
-                    className: cn(
-                      "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-sm",
-                      "bg-ink text-surface font-mono text-[12px]",
-                      "hover:bg-accent-ink outline-none cursor-pointer"
-                    ),
-                    children: "Done"
-                  }
-                )
+                /* @__PURE__ */ jsx(Button, { variant: "cta", size: "sm", onPress: onClose, children: "Done" })
               ] })
             ]
           }
@@ -8164,19 +8170,7 @@ function ChipMiniEditor({
             onChange: onChangeValue
           }
         ) }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "submit",
-            className: cn(
-              "shrink-0 inline-flex items-center px-2.5 py-1.5 rounded-md",
-              "bg-ink text-surface font-mono text-[12px]",
-              "hover:bg-accent-ink cursor-pointer outline-none",
-              "focus-visible:shadow-[var(--shadow-focus)]"
-            ),
-            children: "Save"
-          }
-        )
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "cta", size: "sm", className: "shrink-0", children: "Save" })
       ]
     }
   );
@@ -8467,7 +8461,7 @@ function TimeField({
                   "data-[placeholder]:text-ink-4",
                   "data-[type=literal]:text-ink-4",
                   // segment focus treatment: indigo fill, paper text
-                  "data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]",
+                  "data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]",
                   "data-[disabled]:cursor-not-allowed"
                 )
               }
@@ -8490,8 +8484,8 @@ var toastStyles = tv({
       "rounded-lg border border-rule bg-surface shadow-float",
       "px-3.5 py-3 outline-none",
       "focus-visible:shadow-focus",
-      "entering:animate-in entering:fade-in-0 entering:slide-in-from-bottom-2 entering:duration-200",
-      "exiting:animate-out exiting:fade-out-0 exiting:duration-150"
+      "entering:animate-enter-slide-up",
+      "exiting:animate-exit-fade"
     ],
     icon: "size-4 shrink-0 mt-0.5",
     title: "font-sans text-[13px] font-medium leading-[1.4] text-ink",