@spacesync/client 0.1.11 → 0.1.12

package/dist/ui.js

@@ -3,9 +3,9 @@ export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogTitle, ResponsiveDialogTrigger, useResponsiveDialogDrawer } from './chunk-SHMKDGFF.js';
 export { Textarea } from './chunk-VQ63T7CJ.js';
 export { Checkbox, CheckboxField } from './chunk-2IZODKTR.js';
-export { TimeField, addMinutesToHm, formatTimeForDisplay, hmToMinutes, hourlyEndTimes, minutesToHm, parseHm, snapScheduleEndTime, toTimeStr } from './chunk-OV5ODANJ.js';
+export { TimeField, addMinutesToHm, currentTimeHm, formatTimeForDisplay, hmToMinutes, hourlyEndTimes, minutesToHm, parseHm, snapScheduleEndTime, toTimeStr } from './chunk-EQLKSX4E.js';
 export { HoverCard, HoverCardContent, HoverCardTrigger } from './chunk-L65F4EMK.js';
-import { formatDate, toDateStr } from './chunk-PBNBLCC2.js';
+import { formatDate, toDateStr, formatRelativeWhen, relativeWhenTone } from './chunk-ZVWUPYSV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-CXXOKCLJ.js';
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './chunk-CXXOKCLJ.js';
 import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from './chunk-VVXGQKN7.js';
@@ -1537,6 +1537,40 @@ function ReceiptSummaryRow({
     }
   );
 }
+var TONE_CLASS = {
+  muted: "text-muted-foreground",
+  current: "text-foreground",
+  danger: "text-red-600 dark:text-red-400",
+  warning: "text-amber-700 dark:text-amber-400",
+  success: "text-green-700 dark:text-green-400"
+};
+function RelativeWhen({
+  value,
+  kind,
+  now,
+  empty = "\u2014",
+  className
+}) {
+  const result = value ? formatRelativeWhen(value, now) : null;
+  if (!result) {
+    return /* @__PURE__ */ jsx("span", { className: cn("text-xs text-muted-foreground", className), children: empty });
+  }
+  const tone = relativeWhenTone(kind, result.diffDays);
+  return /* @__PURE__ */ jsxs("span", { className: cn("flex flex-col gap-0.5 whitespace-nowrap", className), children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-xs",
+          TONE_CLASS[tone],
+          result.isCurrent ? "font-bold" : "font-medium"
+        ),
+        children: result.label
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: result.absolute })
+  ] });
+}
 var ResponsiveAlertCtx = React7.createContext({
   drawer: false,
   requestClose: () => {
@@ -1954,12 +1988,16 @@ function TableCaption({ className, ...props }) {
     }
   );
 }
+function sameRect(a, b) {
+  return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height && a.radius === b.radius && a.visible === b.visible;
+}
 function useSegmentedPillPosition(containerRef) {
   const [rect, setRect] = React7.useState({
     left: 0,
     top: 0,
     width: 0,
     height: 0,
+    radius: "",
     visible: false
   });
   const measure = React7.useCallback(() => {
@@ -1969,16 +2007,18 @@ function useSegmentedPillPosition(containerRef) {
       ':scope > [data-state="active"], :scope > [role="tab"][aria-selected="true"]'
     );
     if (!active) {
-      setRect((s) => ({ ...s, visible: false }));
+      setRect((s) => s.visible ? { ...s, visible: false } : s);
       return;
     }
-    setRect({
+    const next = {
       left: active.offsetLeft,
       top: active.offsetTop,
       width: active.offsetWidth,
       height: active.offsetHeight,
+      radius: window.getComputedStyle(active).borderRadius,
       visible: true
-    });
+    };
+    setRect((s) => sameRect(s, next) ? s : next);
   }, [containerRef]);
   React7.useLayoutEffect(() => {
     measure();
@@ -2011,17 +2051,18 @@ function useSegmentedPillPosition(containerRef) {
   return rect;
 }
 function SegmentedSlidingPill({ containerRef }) {
-  const { left, top, width, height, visible } = useSegmentedPillPosition(containerRef);
+  const { left, top, width, height, radius, visible } = useSegmentedPillPosition(containerRef);
   return /* @__PURE__ */ jsx(
     "div",
     {
       "aria-hidden": true,
-      className: "pointer-events-none absolute z-0 rounded-md bg-card shadow-sm ring-1 ring-black/[0.06] transition-[left,top,width,height,opacity] duration-200 ease-out motion-reduce:transition-none",
+      className: "pointer-events-none absolute z-0 bg-card shadow-[0_1px_2px_0_rgb(16_24_40/0.06),0_1px_3px_0_rgb(16_24_40/0.06)] transition-[left,top,width,height,opacity] duration-200 ease-out motion-reduce:transition-none",
       style: {
         left,
         top,
         width,
         height,
+        borderRadius: radius || void 0,
         opacity: visible ? 1 : 0
       }
     }
@@ -2032,7 +2073,8 @@ var tabsListVariants = cva("inline-flex items-center justify-center", {
   variants: {
     variant: {
       default: "bg-muted text-muted-foreground h-9 w-fit rounded-xl p-[3px] [flex-flow:row] [flex-wrap:nowrap] gap-0",
-      segmented: "h-auto w-full min-w-0 max-w-full rounded-lg bg-muted p-1 text-muted-foreground ring-1 ring-inset ring-gray-200/80 sm:w-auto",
+      // rounded-xl track + p-1 keeps the inner corners concentric with rounded-lg triggers.
+      segmented: "h-auto w-full min-w-0 max-w-full rounded-xl bg-muted p-1 text-muted-foreground ring-1 ring-inset ring-border sm:w-auto",
       secondary: "h-auto w-fit [flex-wrap:wrap] gap-1.5 bg-transparent p-0 text-slate-500"
     }
   },
@@ -2047,16 +2089,18 @@ var tabsTriggerVariants = cva(
           "data-[state=active]:bg-card focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring",
           "dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30",
           "text-foreground dark:text-muted-foreground",
-          "inline-flex h-[calc(100%-1px)] min-h-0 flex-1 min-w-0 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm",
+          "inline-flex h-[calc(100%-1px)] min-h-0 flex-1 min-w-0 items-center justify-center gap-1.5 rounded-lg border border-transparent px-2 py-1 text-sm",
           "focus-visible:ring-[3px] focus-visible:outline-1",
           "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
         ],
+        // The sliding pill is the only active surface here, so triggers stay
+        // transparent and only shift text colour.
         segmented: [
-          "relative z-[1] inline-flex shrink-0 min-h-0 items-center justify-center gap-1.5 rounded-md border border-transparent bg-transparent px-4 py-2 text-xs sm:text-sm",
-          "text-muted-foreground hover:bg-accent hover:text-foreground",
-          "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
-          "data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:hover:bg-card",
-          "aria-selected:bg-card aria-selected:text-foreground aria-selected:hover:bg-card"
+          "relative z-[1] inline-flex shrink-0 min-h-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-transparent px-4 py-2 text-xs sm:text-sm",
+          "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
+          "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500/70",
+          "data-[state=active]:text-foreground data-[state=active]:hover:bg-transparent",
+          "aria-selected:text-foreground aria-selected:hover:bg-transparent"
         ],
         secondary: [
           "inline-flex shrink-0 min-h-0 items-center justify-center rounded-md border border-transparent px-3 py-1.5 text-xs",
@@ -2430,6 +2474,6 @@ function ToggleGroupItem({
   );
 }
 
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, ContentFade, DashFade, DateField, FeedSkeleton, FieldLabel, FilterPopover, IconInput, InputGroup, InputGroupInput, NumberInput, PasswordInput, PhoneInput, Progress, ReceiptCard, ReceiptSummaryRow, ResponsiveAlertDialog, ResponsiveAlertDialogAction, ResponsiveAlertDialogCancel, ResponsiveAlertDialogContent, ResponsiveAlertDialogDescription, AlertDialogFooter as ResponsiveAlertDialogFooter, AlertDialogHeader as ResponsiveAlertDialogHeader, ResponsiveAlertDialogTitle, ScrollArea, ScrollBar, SegmentedTabList, SegmentedTabTrigger, SelectableCard, SelectableListRow, ShellTopBarViewToggle, ShellTopBarViewToggleItem, Slider, SmoothSize, Switch, TabCountBadge, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Toaster, Toggle, ToggleGroup, ToggleGroupItem, badgeVariants, fieldLabelClass, tabsListVariants, tabsTriggerVariants, textVariants, toggleVariants };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, ContentFade, DashFade, DateField, FeedSkeleton, FieldLabel, FilterPopover, IconInput, InputGroup, InputGroupInput, NumberInput, PasswordInput, PhoneInput, Progress, ReceiptCard, ReceiptSummaryRow, RelativeWhen, ResponsiveAlertDialog, ResponsiveAlertDialogAction, ResponsiveAlertDialogCancel, ResponsiveAlertDialogContent, ResponsiveAlertDialogDescription, AlertDialogFooter as ResponsiveAlertDialogFooter, AlertDialogHeader as ResponsiveAlertDialogHeader, ResponsiveAlertDialogTitle, ScrollArea, ScrollBar, SegmentedTabList, SegmentedTabTrigger, SelectableCard, SelectableListRow, ShellTopBarViewToggle, ShellTopBarViewToggleItem, Slider, SmoothSize, Switch, TabCountBadge, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Toaster, Toggle, ToggleGroup, ToggleGroupItem, badgeVariants, fieldLabelClass, tabsListVariants, tabsTriggerVariants, textVariants, toggleVariants };
 //# sourceMappingURL=ui.js.map
 //# sourceMappingURL=ui.js.map