@warmio/ui 1.0.0

package/README.md

@@ -0,0 +1,13 @@
+# `@warmio/ui`
+
+Portable React components shared by Warm products. Install this package with the exact
+`@warmio/design@1.0.0` CSS contract, import `@warmio/design/globals.css` once, and add the package's
+compiled files to Tailwind's source detection:
+
+```css
+@import '@warmio/design/globals.css';
+@source '../node_modules/@warmio/ui/dist';
+```
+
+The initial public surface contains the Warm badge, logo, and complete responsive sidebar family.
+The published artifact is standalone and never imports private `warm-app` workspace packages.

package/dist/badge.js

@@ -0,0 +1,7 @@
+import {
+  Badge
+} from "./chunks/chunk-ICC7GQXS.js";
+import "./chunks/chunk-VIB7OX7D.js";
+export {
+  Badge
+};

package/dist/chunks/chunk-EJ2CNGRW.js

@@ -0,0 +1,803 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/components/sidebar.tsx
+import * as React6 from "react";
+import { cva as cva2 } from "class-variance-authority";
+
+// ../ui/src/hooks/use-mobile.ts
+import * as React from "react";
+var MOBILE_BREAKPOINT = 768;
+function getIsMobileSnapshot() {
+  return window.innerWidth < MOBILE_BREAKPOINT;
+}
+function getServerIsMobileSnapshot() {
+  return false;
+}
+function subscribeToMobileChanges(onStoreChange) {
+  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+  mql.addEventListener("change", onStoreChange);
+  return () => mql.removeEventListener("change", onStoreChange);
+}
+function useIsMobile() {
+  return React.useSyncExternalStore(
+    subscribeToMobileChanges,
+    getIsMobileSnapshot,
+    getServerIsMobileSnapshot
+  );
+}
+
+// ../ui/src/lib/render-slot.tsx
+import * as React2 from "react";
+import { useRender } from "@base-ui/react/use-render";
+function RenderSlot({
+  asChild = false,
+  children,
+  defaultTagName,
+  render,
+  ref,
+  ...props
+}) {
+  const resolvedRender = render ?? (asChild && React2.isValidElement(children) ? children : void 0);
+  return useRender({
+    defaultTagName,
+    render: resolvedRender,
+    ref,
+    props: {
+      ...props,
+      children: resolvedRender ? void 0 : children
+    }
+  });
+}
+
+// ../ui/src/components/button.tsx
+import * as React3 from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+
+// ../ui/src/components/button.variants.ts
+import { cva } from "class-variance-authority";
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-inset aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "border-[color:var(--button-primary-border)] bg-[var(--button-primary-bg)] bg-[image:var(--button-primary-gradient)] text-[color:var(--button-primary-foreground)] shadow-[var(--button-primary-shadow)] hover:bg-[var(--button-primary-hover)] active:bg-[var(--button-primary-active)]",
+        outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "underline-offset-4 decoration-current hover:underline"
+      },
+      size: {
+        default: "h-9 gap-2 rounded-lg px-3 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        md: "h-9 gap-2 rounded-lg px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        lg: "h-11 gap-2 rounded-xl px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        xl: "h-12 gap-2 rounded-xl px-6 text-base has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+        option: "h-auto min-h-16 items-start justify-start gap-2 whitespace-normal rounded-xl px-3 py-3 text-sm",
+        icon: "size-9",
+        "icon-round": "size-9 rounded-full",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10",
+        "icon-xl": "size-11 rounded-lg",
+        "input-icon": "h-full w-10 rounded-l-none"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+// ../ui/src/components/button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  render,
+  children,
+  ...props
+}) {
+  const resolvedRender = render ?? (asChild && React3.isValidElement(children) ? children : void 0);
+  return /* @__PURE__ */ jsx(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props,
+      render: resolvedRender,
+      children: resolvedRender ? void 0 : children
+    }
+  );
+}
+
+// ../ui/src/components/sheet.tsx
+import * as React4 from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { XIcon } from "lucide-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Sheet(props) {
+  return /* @__PURE__ */ jsx2(SheetPrimitive.Root, { ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx2(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    SheetPrimitive.Backdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-[var(--z-overlay-backdrop)] bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  overlayClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx2(SheetOverlay, { className: overlayClassName }),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Popup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-[calc(var(--z-overlay-backdrop)+1)] flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:max-h-[calc(100dvh-var(--safe-area-inset-top)-var(--safe-area-inset-bottom))] data-[side=bottom]:overflow-y-auto data-[side=bottom]:border-t data-[side=bottom]:pb-[var(--safe-area-inset-bottom)] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:pt-[var(--safe-area-inset-top)] data-[side=left]:pb-[var(--safe-area-inset-bottom)] data-[side=left]:pl-[var(--safe-area-inset-left)] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:pt-[var(--safe-area-inset-top)] data-[side=right]:pr-[var(--safe-area-inset-right)] data-[side=right]:pb-[var(--safe-area-inset-bottom)] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:max-h-[calc(100dvh-var(--safe-area-inset-top)-var(--safe-area-inset-bottom))] data-[side=top]:overflow-y-auto data-[side=top]:border-b data-[side=top]:pt-[var(--safe-area-inset-top)] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10 motion-reduce:animate-none motion-reduce:transition-none",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            SheetPrimitive.Close,
+            {
+              "data-slot": "sheet-close",
+              render: /* @__PURE__ */ jsx2(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-[max(1rem,var(--safe-area-inset-top))] right-[max(1rem,var(--safe-area-inset-right))]",
+                  size: "icon-sm"
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx2(XIcon, {}),
+                /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-heading font-bold text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// ../ui/src/components/tooltip.tsx
+import * as React5 from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Tooltip(props) {
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Root, { ...props });
+}
+function TooltipTrigger({ asChild = false, children, render, ...props }) {
+  const resolvedRender = render ?? (asChild && React5.isValidElement(children) ? children : void 0);
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", render: resolvedRender, ...props, children: resolvedRender ? void 0 : children });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  align = "center",
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx3(TooltipPrimitive.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxs2(
+    TooltipPrimitive.Popup,
+    {
+      "data-slot": "tooltip-content",
+      className: cn(
+        "z-[var(--z-popover)] inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-lg bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-[calc(var(--z-popover)+1)] **:data-[slot=kbd]:rounded-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx3(TooltipPrimitive.Arrow, { className: "z-[calc(var(--z-popover)+1)] size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-lg bg-foreground fill-foreground" })
+      ]
+    }
+  ) }) });
+}
+
+// ../ui/src/components/sidebar.tsx
+import { MenuIcon, PanelLeftIcon } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var TABLET_ICON_SIDEBAR_QUERY = "(min-width: 768px) and (max-width: 1279px)";
+var getServerForceIconSidebarSnapshot = () => false;
+var SidebarContext = React6.createContext(null);
+function useSidebar() {
+  const context = React6.use(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+function useForceIconSidebar(forceIconAtTablet) {
+  return React6.useSyncExternalStore(
+    React6.useCallback(
+      (onStoreChange) => {
+        if (!forceIconAtTablet) return () => {
+        };
+        const mql = window.matchMedia(TABLET_ICON_SIDEBAR_QUERY);
+        mql.addEventListener("change", onStoreChange);
+        return () => mql.removeEventListener("change", onStoreChange);
+      },
+      [forceIconAtTablet]
+    ),
+    React6.useCallback(() => {
+      if (!forceIconAtTablet) return false;
+      return window.matchMedia(TABLET_ICON_SIDEBAR_QUERY).matches;
+    }, [forceIconAtTablet]),
+    getServerForceIconSidebarSnapshot
+  );
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  forceIconAtTablet = false,
+  allowUserCollapse = true,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const forceIcon = useForceIconSidebar(forceIconAtTablet);
+  const [openMobile, setOpenMobile] = React6.useState(false);
+  const [_open, _setOpen] = React6.useReducer(
+    (_, nextOpen) => nextOpen,
+    defaultOpen
+  );
+  const open = openProp ?? _open;
+  const setOpen = React6.useCallback(
+    (value) => {
+      if (!allowUserCollapse) {
+        return;
+      }
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [allowUserCollapse, setOpenProp, open]
+  );
+  const toggleSidebar = React6.useCallback(() => {
+    if (!allowUserCollapse) {
+      return;
+    }
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [allowUserCollapse, isMobile, setOpen, setOpenMobile]);
+  const toggleSidebarEvent = React6.useEffectEvent(toggleSidebar);
+  React6.useEffect(() => {
+    if (!allowUserCollapse) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebarEvent();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [allowUserCollapse]);
+  const state = forceIcon && !isMobile ? "collapsed" : open ? "expanded" : "collapsed";
+  const contextValue = React6.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx4(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style,
+      className: cn(
+        "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        "data-slot": "sidebar",
+        className: cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ jsx4(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs3(
+      SheetContent,
+      {
+        dir,
+        "data-sidebar": "sidebar",
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        className: "w-[var(--sidebar-width-mobile)] bg-sidebar p-0 text-sidebar-foreground dark:bg-card [&>button]:hidden",
+        side,
+        children: [
+          /* @__PURE__ */ jsxs3(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx4(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx4(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "group peer hidden text-sidebar-foreground md:block",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
+      children: [
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: cn(
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            "data-side": side,
+            className: cn(
+              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+              // Adjust the padding for floating and inset variants.
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx4(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  render,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    RenderSlot,
+    {
+      defaultTagName: "div",
+      asChild,
+      render,
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "flex h-8 shrink-0 items-center rounded-lg px-2 text-xs font-bold text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: cn("flex w-full min-w-0 flex-col gap-1", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = cva2(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-inset active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-bold data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  render,
+  ...props
+}) {
+  const { isMobile, state } = useSidebar();
+  const button = /* @__PURE__ */ jsx4(
+    RenderSlot,
+    {
+      defaultTagName: "button",
+      asChild,
+      render,
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive ? "" : void 0,
+      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
+    /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx4(
+      TooltipContent,
+      {
+        side: "right",
+        align: "center",
+        hidden: state !== "collapsed" || isMobile,
+        ...tooltip
+      }
+    )
+  ] });
+}
+function SidebarMenuBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
+      className: cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-lg px-1 text-xs font-bold text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// ../ui/src/warmio/sidebar.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function SidebarProvider2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  const presentationClassName = presentation === "mockup" ? "min-h-0 [--sidebar-width:16rem]" : presentation === "preview" ? "min-h-full" : void 0;
+  return /* @__PURE__ */ jsx5(SidebarProvider, { ...props, className: presentationClassName });
+}
+function Sidebar2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    Sidebar,
+    {
+      ...props,
+      className: presentation === "product" ? "border-r border-border" : void 0
+    }
+  );
+}
+function SidebarInset2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(SidebarInset, { ...props, className: presentation === "product" ? "min-w-0" : void 0 });
+}
+function SidebarHeader2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  const className = presentation === "product" ? "h-[var(--header-height)] justify-center border-b border-border p-2" : presentation === "mockup" ? "h-14 justify-center border-b border-border p-2" : void 0;
+  return /* @__PURE__ */ jsx5(SidebarHeader, { ...props, className });
+}
+function SidebarContent2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  const className = presentation === "product" ? "pb-0" : presentation === "mockup" ? "px-1 py-3" : void 0;
+  return /* @__PURE__ */ jsx5(SidebarContent, { ...props, className });
+}
+function SidebarFooter2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    SidebarFooter,
+    {
+      ...props,
+      className: presentation === "product" ? "border-t border-border p-2" : void 0
+    }
+  );
+}
+function SidebarGroup2({
+  className: _className,
+  collapsed = false,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  const className = presentation === "navigation" ? `${collapsed ? "items-center " : ""}px-2 py-1` : presentation === "mockup" ? "py-1" : void 0;
+  return /* @__PURE__ */ jsx5(SidebarGroup, { ...props, className });
+}
+function SidebarGroupContent2({
+  className: _className,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(SidebarGroupContent, { ...props });
+}
+function SidebarGroupLabel2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  const className = presentation === "navigation" ? "px-2 tabular-nums text-xs uppercase tracking-wider text-sidebar-foreground/60" : presentation === "mockup" ? "uppercase tracking-wider" : void 0;
+  return /* @__PURE__ */ jsx5(SidebarGroupLabel, { ...props, className });
+}
+function SidebarMenu2({ className: _className, style: _style, ...props }) {
+  return /* @__PURE__ */ jsx5(SidebarMenu, { ...props });
+}
+function SidebarMenuItem2({
+  className: _className,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(SidebarMenuItem, { ...props });
+}
+function SidebarMenuButton2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  const className = presentation === "account" ? "h-12" : presentation === "disabled" ? "text-muted-foreground/60" : presentation === "previewCollapsed" ? "mx-auto size-8 gap-0 p-2" : void 0;
+  return /* @__PURE__ */ jsx5(SidebarMenuButton, { ...props, className });
+}
+function SidebarMenuBadge2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    SidebarMenuBadge,
+    {
+      ...props,
+      className: presentation === "attention" ? "animate-pulse" : void 0
+    }
+  );
+}
+
+export {
+  useSidebar,
+  SidebarProvider2 as SidebarProvider,
+  Sidebar2 as Sidebar,
+  SidebarInset2 as SidebarInset,
+  SidebarHeader2 as SidebarHeader,
+  SidebarContent2 as SidebarContent,
+  SidebarFooter2 as SidebarFooter,
+  SidebarGroup2 as SidebarGroup,
+  SidebarGroupContent2 as SidebarGroupContent,
+  SidebarGroupLabel2 as SidebarGroupLabel,
+  SidebarMenu2 as SidebarMenu,
+  SidebarMenuItem2 as SidebarMenuItem,
+  SidebarMenuButton2 as SidebarMenuButton,
+  SidebarMenuBadge2 as SidebarMenuBadge
+};

package/dist/chunks/chunk-HMXXCKZG.js

@@ -0,0 +1,91 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/components/logo.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var WarmLogoIcon = ({
+  className = "h-5 w-5",
+  width = 20,
+  height = 16,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width,
+      height,
+      viewBox: "0 0 600 469",
+      className,
+      "aria-label": "Warm logo",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 33.500 40.660 C 20.206 42.744, 0 48.560, -0 50.302 C -0 51.759, 123.955 348.889, 127.738 356.500 C 142.182 385.561, 169.450 410.275, 198.946 421.040 C 218.922 428.330, 243.683 430.825, 264.526 427.648 C 277.151 425.724, 294.628 420.011, 294.194 417.952 C 293.790 416.040, 172.732 124.599, 168.522 115.405 C 161.779 100.679, 149.168 84.171, 135.093 71.646 C 119.358 57.644, 98.880 47.362, 77 42.478 C 69.645 40.836, 40.220 39.606, 33.500 40.660",
+            fill: "var(--logo-primary)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 229.651 41.597 C 217.916 43.718, 202.443 49.144, 202.744 51.035 C 203.418 55.268, 329.689 356.584, 333.687 363.500 C 340.525 375.327, 345.293 381.483, 355.408 391.538 C 374.603 410.619, 398.878 423.014, 425.907 427.533 C 439.649 429.831, 463.594 429.132, 476 426.072 C 489.892 422.645, 497.188 419.815, 496.703 418.043 C 495.416 413.331, 371.058 116.094, 367.406 109 C 349.467 74.149, 313.008 47.875, 273.752 41.509 C 262.281 39.648, 240.195 39.693, 229.651 41.597",
+            fill: "var(--logo-primary)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 463 40.593 C 451.670 42.545, 447.288 43.569, 439 46.203 C 433.775 47.864, 429.338 49.372, 429.140 49.555 C 428.942 49.737, 434.670 64.021, 441.868 81.297 C 455.574 114.190, 462.215 131.660, 468.447 151.208 C 475.360 172.892, 486.124 186.213, 503.834 194.997 C 530.956 208.450, 564.982 201.679, 583.654 179.112 C 604.399 154.041, 605.407 121.944, 586.291 95.155 C 567.827 69.280, 539.107 50.114, 508 42.907 C 500.680 41.212, 494.713 40.644, 482 40.434 C 472.925 40.284, 464.375 40.356, 463 40.593",
+            fill: "var(--logo-accent)"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// ../ui/src/warmio/logo.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var iconSizeClasses = {
+  badge: "size-3",
+  default: "size-7",
+  feature: "size-8",
+  hero: "size-14"
+};
+var toneClasses = {
+  default: "",
+  foreground: "text-foreground",
+  sidebar: "text-sidebar-foreground"
+};
+function WarmLogoIcon2({
+  size = "default",
+  tone = "default",
+  decorative = false
+}) {
+  return /* @__PURE__ */ jsx2(
+    WarmLogoIcon,
+    {
+      className: cn(iconSizeClasses[size], toneClasses[tone]),
+      "aria-hidden": decorative ? true : void 0,
+      "aria-label": decorative ? void 0 : "Warm logo"
+    }
+  );
+}
+var Logo = ({
+  size = "default",
+  tone = "default",
+  showText = true
+}) => {
+  return /* @__PURE__ */ jsxs2("div", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx2(WarmLogoIcon2, { size, tone, decorative: showText }),
+    showText ? /* @__PURE__ */ jsx2("span", { className: "text-sm font-bold tracking-wide text-foreground", children: "Warm" }) : null
+  ] });
+};
+
+export {
+  WarmLogoIcon2 as WarmLogoIcon,
+  Logo
+};

package/dist/chunks/chunk-ICC7GQXS.js

@@ -0,0 +1,74 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/warmio/badge.tsx
+import { jsx } from "react/jsx-runtime";
+var badgeToneClassNameByTone = {
+  default: "border-border bg-muted text-foreground",
+  info: "border-info/20 bg-info/10 text-info",
+  success: "border-success-border bg-success/10 text-success",
+  warning: "border-warning-border bg-warning/10 text-warning",
+  destructive: "border-destructive/20 bg-destructive/10 text-destructive"
+};
+var solidBadgeToneClassNameByTone = {
+  default: "border-foreground bg-foreground text-background",
+  info: "border-info bg-info text-background",
+  success: "border-success bg-success text-background",
+  warning: "border-warning bg-warning text-background",
+  destructive: "border-destructive bg-destructive text-destructive-foreground"
+};
+var badgeSizeClassNameBySize = {
+  sm: "h-5 px-2 py-2 text-xs",
+  default: "h-6 px-2 py-2 text-xs"
+};
+var badgeCircleClassNameBySize = {
+  sm: "size-5 px-0 py-0 text-xs leading-none",
+  default: "size-6 px-0 py-0 text-xs leading-none"
+};
+function Badge({
+  tone,
+  size = "default",
+  shape = "pill",
+  surface = "default",
+  placement = "inline",
+  emphasis = "subtle",
+  width = "auto",
+  truncate = false,
+  numeric = false,
+  children,
+  id,
+  "aria-label": ariaLabel
+}) {
+  const resolvedTone = tone ?? "default";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "badge",
+      "data-tone": resolvedTone,
+      "data-shape": shape,
+      "data-surface": surface,
+      "data-placement": placement,
+      id,
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex w-fit max-w-full items-center justify-center gap-2 overflow-hidden rounded-full border font-bold whitespace-nowrap transition-colors",
+        emphasis === "solid" ? solidBadgeToneClassNameByTone[resolvedTone] : badgeToneClassNameByTone[resolvedTone],
+        badgeSizeClassNameBySize[size],
+        shape === "circle" && badgeCircleClassNameBySize[size],
+        surface === "floating" && "border-background ring-2 ring-background",
+        placement === "top-end" && "pointer-events-none absolute -right-2 -top-2 z-10",
+        width === "metric" && "w-12",
+        width === "compact" && "min-w-6",
+        truncate ? "min-w-0 shrink truncate" : "shrink-0",
+        numeric && "tabular-nums",
+        "[&>svg]:shrink-0 [&>svg:not([class*=size-])]:size-3"
+      ),
+      children: truncate ? /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children }) : children
+    }
+  );
+}
+
+export {
+  Badge
+};

package/dist/chunks/chunk-VIB7OX7D.js

@@ -0,0 +1,10 @@
+// ../ui/src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};

package/dist/index.js

@@ -0,0 +1,43 @@
+import {
+  Badge
+} from "./chunks/chunk-ICC7GQXS.js";
+import {
+  Logo,
+  WarmLogoIcon
+} from "./chunks/chunk-HMXXCKZG.js";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  useSidebar
+} from "./chunks/chunk-EJ2CNGRW.js";
+import "./chunks/chunk-VIB7OX7D.js";
+export {
+  Badge,
+  Logo,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  WarmLogoIcon,
+  useSidebar
+};

package/dist/logo.js

@@ -0,0 +1,9 @@
+import {
+  Logo,
+  WarmLogoIcon
+} from "./chunks/chunk-HMXXCKZG.js";
+import "./chunks/chunk-VIB7OX7D.js";
+export {
+  Logo,
+  WarmLogoIcon
+};

package/dist/sidebar.js

@@ -0,0 +1,33 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  useSidebar
+} from "./chunks/chunk-EJ2CNGRW.js";
+import "./chunks/chunk-VIB7OX7D.js";
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  useSidebar
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@warmio/ui",
+  "version": "1.0.0",
+  "description": "Portable React components for Warm products.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jasonstockman/warm-app.git",
+    "directory": "libraries/public-ui"
+  },
+  "homepage": "https://github.com/jasonstockman/warm-app/tree/master/libraries/public-ui",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "types",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./badge": {
+      "types": "./types/badge.d.ts",
+      "import": "./dist/badge.js",
+      "default": "./dist/badge.js"
+    },
+    "./logo": {
+      "types": "./types/logo.d.ts",
+      "import": "./dist/logo.js",
+      "default": "./dist/logo.js"
+    },
+    "./sidebar": {
+      "types": "./types/sidebar.d.ts",
+      "import": "./dist/sidebar.js",
+      "default": "./dist/sidebar.js"
+    }
+  },
+  "peerDependencies": {
+    "@base-ui/react": ">=1.6.0 <2.0.0",
+    "@warmio/design": "1.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": ">=0.562.0 <2.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "tailwind-merge": ">=3.6.0 <4.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.1"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "pack:check": "node ../../tools/tasks/check-ui-package.mjs",
+    "prepack": "pnpm build"
+  }
+}

package/types/badge.d.ts

@@ -0,0 +1,21 @@
+import type { AriaAttributes, ReactNode } from 'react';
+
+export type FeedbackTone = 'default' | 'info' | 'success' | 'warning' | 'destructive';
+export type FeedbackSize = 'sm' | 'default';
+
+export type BadgeProps = {
+  tone?: FeedbackTone;
+  size?: FeedbackSize;
+  shape?: 'pill' | 'circle';
+  surface?: 'default' | 'floating';
+  placement?: 'inline' | 'top-end';
+  emphasis?: 'subtle' | 'solid';
+  width?: 'auto' | 'metric' | 'compact';
+  truncate?: boolean;
+  children?: ReactNode;
+  numeric?: boolean;
+  id?: string;
+  'aria-label'?: AriaAttributes['aria-label'];
+};
+
+export declare function Badge(props: BadgeProps): ReactNode;

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './badge.js';
+export * from './logo.js';
+export * from './sidebar.js';

package/types/logo.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export type WarmLogoSize = 'badge' | 'default' | 'feature' | 'hero';
+export type WarmLogoTone = 'default' | 'foreground' | 'sidebar';
+
+type StrictLogoProps = {
+  className?: never;
+  style?: never;
+  textClass?: never;
+};
+
+export type WarmLogoIconProps = StrictLogoProps & {
+  size?: WarmLogoSize;
+  tone?: WarmLogoTone;
+  decorative?: boolean;
+};
+
+export type LogoProps = StrictLogoProps & {
+  size?: WarmLogoSize;
+  tone?: WarmLogoTone;
+  showText?: boolean;
+};
+
+export declare function WarmLogoIcon(props: WarmLogoIconProps): ReactNode;
+export declare function Logo(props: LogoProps): ReactNode;

package/types/sidebar.d.ts

@@ -0,0 +1,93 @@
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+
+type WithoutChrome<T> = Omit<T, 'className' | 'style'> & {
+  className?: never;
+  style?: never;
+};
+
+export type SidebarProviderProps = WithoutChrome<ComponentProps<'div'>> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  forceIconAtTablet?: boolean;
+  allowUserCollapse?: boolean;
+  presentation?: 'mockup' | 'preview';
+};
+
+export type SidebarProps = WithoutChrome<ComponentProps<'div'>> & {
+  side?: 'left' | 'right';
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+  presentation?: 'product';
+};
+
+export type SidebarInsetProps = WithoutChrome<ComponentProps<'main'>> & {
+  presentation?: 'product';
+};
+
+export type SidebarHeaderProps = WithoutChrome<ComponentProps<'div'>> & {
+  presentation?: 'mockup' | 'product';
+};
+
+export type SidebarContentProps = WithoutChrome<ComponentProps<'div'>> & {
+  presentation?: 'mockup' | 'product';
+};
+
+export type SidebarFooterProps = WithoutChrome<ComponentProps<'div'>> & {
+  presentation?: 'product';
+};
+
+export type SidebarGroupProps = WithoutChrome<ComponentProps<'div'>> & {
+  collapsed?: boolean;
+  presentation?: 'mockup' | 'navigation';
+};
+
+export type SidebarGroupContentProps = WithoutChrome<ComponentProps<'div'>>;
+
+export type SidebarGroupLabelProps = WithoutChrome<ComponentProps<'div'>> & {
+  asChild?: boolean;
+  render?: ReactElement;
+  presentation?: 'mockup' | 'navigation';
+};
+
+export type SidebarMenuProps = WithoutChrome<ComponentProps<'ul'>>;
+export type SidebarMenuItemProps = WithoutChrome<ComponentProps<'li'>>;
+
+export type SidebarMenuButtonProps = WithoutChrome<ComponentProps<'button'>> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | ReactNode;
+  render?: ReactElement;
+  variant?: 'default' | 'outline' | null;
+  size?: 'default' | 'sm' | 'lg' | null;
+  presentation?: 'account' | 'disabled' | 'previewCollapsed';
+};
+
+export type SidebarMenuBadgeProps = WithoutChrome<ComponentProps<'div'>> & {
+  presentation?: 'attention';
+};
+
+export type SidebarContextValue = {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean | ((open: boolean) => boolean)) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean | ((open: boolean) => boolean)) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+export declare function SidebarProvider(props: SidebarProviderProps): ReactNode;
+export declare function Sidebar(props: SidebarProps): ReactNode;
+export declare function SidebarInset(props: SidebarInsetProps): ReactNode;
+export declare function SidebarHeader(props: SidebarHeaderProps): ReactNode;
+export declare function SidebarContent(props: SidebarContentProps): ReactNode;
+export declare function SidebarFooter(props: SidebarFooterProps): ReactNode;
+export declare function SidebarGroup(props: SidebarGroupProps): ReactNode;
+export declare function SidebarGroupContent(props: SidebarGroupContentProps): ReactNode;
+export declare function SidebarGroupLabel(props: SidebarGroupLabelProps): ReactNode;
+export declare function SidebarMenu(props: SidebarMenuProps): ReactNode;
+export declare function SidebarMenuItem(props: SidebarMenuItemProps): ReactNode;
+export declare function SidebarMenuButton(props: SidebarMenuButtonProps): ReactNode;
+export declare function SidebarMenuBadge(props: SidebarMenuBadgeProps): ReactNode;
+export declare function useSidebar(): SidebarContextValue;