@northslopetech/altitude-ui 3.1.0 → 3.2.0

package/dist/index.js

@@ -255,6 +255,7 @@ __export(index_exports, {
   SidebarMenuButton: () => SidebarMenuButton,
   SidebarMenuItem: () => SidebarMenuItem,
   SidebarProvider: () => SidebarProvider,
+  SidebarSeparator: () => SidebarSeparator,
   Slider: () => Slider,
   StarIcon: () => StarIcon,
   StatementIcon: () => StatementIcon,
@@ -329,8 +330,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/ui/alert.tsx
-var React = __toESM(require("react"));
-var import_class_variance_authority2 = require("class-variance-authority");
+var React2 = __toESM(require("react"));
+var import_class_variance_authority3 = require("class-variance-authority");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -400,124 +401,6 @@ function cn(...inputs) {
   return twMerge((0, import_clsx.clsx)(inputs));
 }
 
-// src/components/ui/alert.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var alertVariants = (0, import_class_variance_authority2.cva)(
-  "relative flex flex-wrap w-full items-center data-[multiline]:items-start gap-4 rounded-md border px-4 py-3 [&>[data-slot=alert-body]>svg]:size-4 [&>[data-slot=alert-body]>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "surface-default border-default [&>[data-slot=alert-body]>svg]:text-default",
-        info: "surface-info border-info [&>[data-slot=alert-body]>svg]:text-info",
-        success: "surface-success border-success [&>[data-slot=alert-body]>svg]:text-success",
-        warning: "surface-warning border-warning [&>[data-slot=alert-body]>svg]:text-warning",
-        error: "surface-error border-error [&>[data-slot=alert-body]>svg]:text-error"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Alert({ className, variant, ref, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ref,
-      "data-slot": "alert",
-      role: variant === "warning" || variant === "error" ? "alert" : "status",
-      className: cn(alertVariants({ variant }), className),
-      ...props
-    }
-  );
-}
-function AlertBody({ className, ref, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ref,
-      "data-slot": "alert-body",
-      className: cn(
-        "grid flex-1 min-w-0 grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 items-start [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertTitle({ className, ref, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "p",
-    {
-      ref,
-      "data-slot": "alert-title",
-      className: cn(
-        "col-start-2 row-start-1 type-body-sm-medium text-default",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertDescription({
-  className,
-  ref: externalRef,
-  ...props
-}) {
-  const localRef = React.useRef(null);
-  React.useLayoutEffect(() => {
-    const el = localRef.current;
-    if (!el) return;
-    const alert = el.closest("[data-slot=alert]");
-    if (!alert) return;
-    const update = () => {
-      const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
-      alert.toggleAttribute(
-        "data-multiline",
-        el.clientHeight > lineHeight * 1.5
-      );
-    };
-    update();
-    const resizeObserver = new ResizeObserver(update);
-    resizeObserver.observe(el);
-    return () => {
-      resizeObserver.disconnect();
-      alert.removeAttribute("data-multiline");
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "p",
-    {
-      ref: (node) => {
-        localRef.current = node;
-        if (typeof externalRef === "function") externalRef(node);
-        else if (externalRef)
-          externalRef.current = node;
-      },
-      "data-slot": "alert-description",
-      className: cn(
-        "col-start-2 type-body-sm-regular text-secondary",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertActions({ className, ref, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ref,
-      "data-slot": "alert-actions",
-      className: cn("shrink-0 flex items-center gap-2", className),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/accordion.tsx
-var import_accordion = require("@base-ui/react/accordion");
-
 // src/components/ui/icons.tsx
 var import_Lock = require("@phosphor-icons/react/Lock");
 var import_Check = require("@phosphor-icons/react/Check");
@@ -578,7 +461,7 @@ var import_SquaresFour = require("@phosphor-icons/react/SquaresFour");
 var import_MagnifyingGlassPlus = require("@phosphor-icons/react/MagnifyingGlassPlus");
 var import_MagnifyingGlassMinus = require("@phosphor-icons/react/MagnifyingGlassMinus");
 var import_SidebarSimple = require("@phosphor-icons/react/SidebarSimple");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 function createIcon(PhosphorIcon) {
   function Wrapped({
     className,
@@ -587,7 +470,7 @@ function createIcon(PhosphorIcon) {
     ref,
     ...props
   }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       PhosphorIcon,
       {
         ref,
@@ -661,81 +544,12 @@ var PanelIcon = createIcon(import_SidebarSimple.SidebarSimpleIcon);
 var ZoomInIcon = createIcon(import_MagnifyingGlassPlus.MagnifyingGlassPlusIcon);
 var ZoomOutIcon = createIcon(import_MagnifyingGlassMinus.MagnifyingGlassMinusIcon);
 
-// src/components/ui/accordion.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Accordion({ className, ref, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_accordion.Accordion.Root,
-    {
-      ref,
-      "data-slot": "accordion",
-      className: cn("flex w-full flex-col", className),
-      ...props
-    }
-  );
-}
-function AccordionItem({ className, ref, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_accordion.Accordion.Item,
-    {
-      ref,
-      "data-slot": "accordion-item",
-      className: cn("border-b border-muted", className),
-      ...props
-    }
-  );
-}
-function AccordionTrigger({
-  className,
-  children,
-  ref,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_accordion.Accordion.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_accordion.Accordion.Trigger,
-    {
-      ref,
-      "data-slot": "accordion-trigger",
-      className: cn(
-        "group/accordion-trigger flex flex-1 items-center justify-between py-4 type-body-sm-medium text-default outline-none focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-focus-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CaretDownIcon, { className: "shrink-0 text-secondary group-data-[panel-open]/accordion-trigger:hidden" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CaretUpIcon, { className: "hidden shrink-0 text-secondary group-data-[panel-open]/accordion-trigger:block" })
-      ]
-    }
-  ) });
-}
-function AccordionContent({
-  className,
-  children,
-  ref,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_accordion.Accordion.Panel,
-    {
-      ref,
-      "data-slot": "accordion-content",
-      className: cn(
-        "h-(--accordion-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pb-4 type-body-sm-regular text-default", children })
-    }
-  );
-}
-
 // src/components/ui/button.tsx
-var React2 = __toESM(require("react"));
+var React = __toESM(require("react"));
 var import_button = require("@base-ui/react/button");
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var buttonVariants = (0, import_class_variance_authority3.cva)(
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority2.cva)(
   [
     // Base layout
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
@@ -781,7 +595,7 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
         ],
         "destructive-subtle": [
           // Base
-          "interactive-default text-error shadow-xs",
+          "interactive-destructive-subtle interactive-destructive-subtle-fg shadow-xs",
           "border border-default",
           // Hover & active
           "hover:interactive-hover",
@@ -845,7 +659,7 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
     }
   }
 );
-var hasTextChildren = (children) => React2.Children.toArray(children).some(
+var hasTextChildren = (children) => React.Children.toArray(children).some(
   (child) => typeof child === "string" && child.trim().length > 0
 );
 function Button({
@@ -859,7 +673,7 @@ function Button({
 }) {
   const isIconOnly = !hasTextChildren(children);
   const iconOnlyClasses = isIconOnly ? "aspect-square px-0 py-0" : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_button.Button,
     {
       "data-slot": "button",
@@ -876,6 +690,206 @@ function Button({
   );
 }
 
+// src/components/ui/alert.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var alertVariants = (0, import_class_variance_authority3.cva)(
+  "relative flex flex-wrap w-full items-center data-[multiline]:items-start gap-4 rounded-md px-4 py-3 [&>[data-slot=alert-body]>svg]:size-4 [&>[data-slot=alert-body]>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "surface-secondary [&>[data-slot=alert-body]>svg]:text-default",
+        info: "surface-info border-info [&>[data-slot=alert-body]>svg]:text-info",
+        success: "surface-success border-success [&>[data-slot=alert-body]>svg]:text-success",
+        warning: "surface-warning border-warning [&>[data-slot=alert-body]>svg]:text-warning",
+        error: "surface-error border-error [&>[data-slot=alert-body]>svg]:text-error"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({ className, variant, onDismiss, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref,
+      "data-slot": "alert",
+      role: variant === "warning" || variant === "error" ? "alert" : "status",
+      className: cn(alertVariants({ variant }), className),
+      ...props,
+      children: [
+        props.children,
+        onDismiss && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "mini",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            className: "shrink-0 self-start",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}
+function AlertBody({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-body",
+      className: cn(
+        "grid flex-1 min-w-0 grid-cols-1 gap-y-0.5 items-start [&:has(>svg)]:grid-cols-[auto_1fr] [&:has(>svg)]:gap-x-3 [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "p",
+    {
+      ref,
+      "data-slot": "alert-title",
+      className: cn(
+        "row-start-1 type-body-sm-medium text-default [div:has(>svg)>&]:col-start-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDescription({
+  className,
+  ref: externalRef,
+  ...props
+}) {
+  const localRef = React2.useRef(null);
+  React2.useLayoutEffect(() => {
+    const el = localRef.current;
+    if (!el) return;
+    const alert = el.closest("[data-slot=alert]");
+    if (!alert) return;
+    const update = () => {
+      const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
+      alert.toggleAttribute(
+        "data-multiline",
+        el.clientHeight > lineHeight * 1.5
+      );
+    };
+    update();
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(el);
+    return () => {
+      resizeObserver.disconnect();
+      alert.removeAttribute("data-multiline");
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "p",
+    {
+      ref: (node) => {
+        localRef.current = node;
+        if (typeof externalRef === "function") externalRef(node);
+        else if (externalRef)
+          externalRef.current = node;
+      },
+      "data-slot": "alert-description",
+      className: cn(
+        "type-body-sm-regular text-secondary [div:has(>svg)>&]:col-start-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertActions({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-actions",
+      className: cn("shrink-0 flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/accordion.tsx
+var import_accordion = require("@base-ui/react/accordion");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Accordion({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_accordion.Accordion.Root,
+    {
+      ref,
+      "data-slot": "accordion",
+      className: cn("flex w-full flex-col", className),
+      ...props
+    }
+  );
+}
+function AccordionItem({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_accordion.Accordion.Item,
+    {
+      ref,
+      "data-slot": "accordion-item",
+      className: cn("border-b border-muted", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_accordion.Accordion.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_accordion.Accordion.Trigger,
+    {
+      ref,
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "group/accordion-trigger flex flex-1 items-center justify-between py-4 type-body-sm-medium text-default outline-none focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-focus-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CaretDownIcon, { className: "shrink-0 text-secondary group-data-[panel-open]/accordion-trigger:hidden" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CaretUpIcon, { className: "hidden shrink-0 text-secondary group-data-[panel-open]/accordion-trigger:block" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_accordion.Accordion.Panel,
+    {
+      ref,
+      "data-slot": "accordion-content",
+      className: cn(
+        "h-(--accordion-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pb-4 type-body-sm-regular text-default", children })
+    }
+  );
+}
+
 // src/components/ui/button-group.tsx
 var React3 = __toESM(require("react"));
 var import_merge_props = require("@base-ui/react/merge-props");
@@ -2712,14 +2726,13 @@ var TYPE_ICON_COLOR = {
   warning: "text-warning"
 };
 var TYPE_SURFACE = {
-  default: "surface-default border-default",
-  success: "surface-success border-success",
-  error: "surface-error border-error",
-  info: "surface-info border-info",
-  warning: "surface-warning border-warning"
+  default: "surface-default border border-default",
+  success: "surface-success",
+  error: "surface-error",
+  info: "surface-info",
+  warning: "surface-warning"
 };
 var VIEWPORT_POSITION = {
-  "top-left": "top-4 left-4 sm:top-8 sm:left-8",
   "top-center": "top-4 left-1/2 -translate-x-1/2 sm:top-8",
   "top-right": "top-4 right-4 sm:top-8 sm:right-8",
   "bottom-left": "bottom-4 left-4 sm:bottom-8 sm:left-8",
@@ -2751,7 +2764,7 @@ function ToastList({ side }) {
           side === "top" ? "top-0 origin-top" : "bottom-0 origin-bottom",
           // Surface — variant-tinted to match the Alert component (default = neutral)
           TYPE_SURFACE[type],
-          "rounded-lg border bg-clip-padding shadow-lg select-none",
+          "rounded-lg bg-clip-padding shadow-lg select-none",
           // Collapsed transform: peek + shrink each toast behind the front one
           "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--y-dir)*((var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))))_scale(var(--scale))]",
           // Expanded (hover/focus) transform: fan out by real heights + gap
@@ -2776,7 +2789,8 @@ function ToastList({ side }) {
           {
             "data-slot": "toast-content",
             className: cn(
-              "flex h-full items-start gap-3 p-4 overflow-hidden",
+              "flex h-full gap-3 px-4 py-3 overflow-hidden",
+              item.description ? "items-start" : "items-center",
               "transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)]",
               "data-behind:opacity-0 data-expanded:opacity-100"
             ),
@@ -2792,10 +2806,10 @@ function ToastList({ side }) {
                   import_toast.Toast.Title,
                   {
                     "data-slot": "toast-title",
-                    className: "type-body-sm-medium text-default"
+                    className: item.description ? "type-body-sm-medium text-default" : "type-label-sm-medium text-default"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                item.description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   import_toast.Toast.Description,
                   {
                     "data-slot": "toast-description",
@@ -2807,12 +2821,8 @@ function ToastList({ side }) {
                 import_toast.Toast.Action,
                 {
                   "data-slot": "toast-action",
-                  className: cn(
-                    "shrink-0 rounded-md border border-default px-2.5 py-1",
-                    "type-label-xs-medium text-default surface-default",
-                    "transition-colors hover:surface-secondary",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-default"
-                  )
+                  render: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "default", size: "mini" }),
+                  ...item.actionProps
                 }
               ) : null,
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -2855,7 +2865,7 @@ function Toaster({
         {
           "data-slot": "toaster",
           className: cn(
-            "fixed z-50 mx-auto flex w-[calc(100vw-2rem)] sm:w-[22.5rem]",
+            "fixed z-50 mx-auto flex w-[calc(100vw-2rem)] sm:w-[400px]",
             VIEWPORT_POSITION[position],
             className
           ),
@@ -3112,7 +3122,7 @@ function Sidebar({
           "div",
           {
             className: cn(
-              "fixed inset-y-0 z-10 h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear flex left-0",
+              "fixed inset-y-0 z-10 h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear flex left-0 border-r border-[var(--color-sidebar-border)]",
               "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -3267,6 +3277,24 @@ function SidebarMenuButton({
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipContent, { side: "right", align: "center", ...tooltipProps })
   ] }) });
 }
+function SidebarSeparator({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "div",
+    {
+      ref,
+      "data-sidebar": "separator",
+      className: cn(
+        "border-t border-[var(--color-sidebar-border)] w-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/components/ui/calendar.tsx
 var React9 = __toESM(require("react"));
@@ -4577,13 +4605,13 @@ var tagVariants = (0, import_class_variance_authority18.cva)(
   {
     variants: {
       color: {
-        violet: "bg-violet-100 text-violet-800",
-        cyan: "bg-cyan-100 text-cyan-900",
-        indigo: "bg-indigo-100 text-indigo-800",
-        orange: "bg-orange-100 text-orange-900",
-        pink: "bg-pink-100 text-pink-900",
-        verdant: "bg-verdant-100 text-verdant-800",
-        stone: "bg-stone-200 text-stone-800"
+        violet: "bg-violet-200 text-black",
+        cyan: "bg-cyan-200 text-black",
+        indigo: "bg-indigo-100 text-black",
+        orange: "bg-orange-200 text-black",
+        pink: "bg-pink-200 text-black",
+        verdant: "bg-verdant-200 text-black",
+        stone: "bg-stone-200 text-black"
       }
     },
     defaultVariants: {
@@ -6593,6 +6621,7 @@ function DataTableViewOptions({
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
+  SidebarSeparator,
   Slider,
   StarIcon,
   StatementIcon,