@timmbr/ui 1.4.2 → 1.6.0

package/dist/components/Rating/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}

package/dist/components/ResponsiveDialog/ResponsiveDialog.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { ResponsiveDialogContentProps, ResponsiveDialogMode, ResponsiveDialogProps, ResponsiveDialogSectionProps, ResponsiveDialogFormProps } from './ResponsiveDialog.types';
+export declare const RESPONSIVE_DIALOG_BREAKPOINT = "(min-width: 640px)";
+/** Whether the surrounding ResponsiveDialog renders as a `dialog` or a bottom `drawer`. */
+export declare const useResponsiveDialogMode: () => ResponsiveDialogMode;
+/**
+ * A centred Dialog on larger screens and a bottom sheet (Drawer) on phones,
+ * with one API. Use it for forms and pickers; keep short confirmations in
+ * AlertDialog. Before hydration it renders as a dialog.
+ */
+export declare function ResponsiveDialog({ breakpoint, children, ...props }: ResponsiveDialogProps): React.JSX.Element;
+export declare namespace ResponsiveDialog {
+    var displayName: string;
+}
+export declare const ResponsiveDialogContent: React.ForwardRefExoticComponent<ResponsiveDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ResponsiveDialogHeader: React.FC<ResponsiveDialogSectionProps>;
+export declare const ResponsiveDialogBody: React.FC<ResponsiveDialogSectionProps>;
+/** Actions; pinned to the bottom of the sheet on phones (above the keyboard and home bar). */
+export declare const ResponsiveDialogFooter: React.FC<ResponsiveDialogSectionProps>;
+export declare const ResponsiveDialogTitle: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const ResponsiveDialogDescription: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * A form that wraps ResponsiveDialogBody + ResponsiveDialogFooter, so the
+ * submit button can live in the (pinned) footer and the fields still scroll.
+ */
+export declare const ResponsiveDialogForm: React.ForwardRefExoticComponent<ResponsiveDialogFormProps & React.RefAttributes<HTMLFormElement>>;
+/** Same Radix close in both modes. */
+export declare const ResponsiveDialogClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ResponsiveDialog.d.ts.map

package/dist/components/ResponsiveDialog/ResponsiveDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveDialog/ResponsiveDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,OAAO,KAAK,EACV,4BAA4B,EAC5B,oBAAoB,EACpB,qBAAqB,EACrB,4BAA4B,EAC5B,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAIlC,eAAO,MAAM,4BAA4B,uBAAuB,CAAC;AAIjE,2FAA2F;AAC3F,eAAO,MAAM,uBAAuB,4BAAsC,CAAC;AAE3E;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,UAAyC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,qBAUxH;yBAVe,gBAAgB;;;AAahC,eAAO,MAAM,uBAAuB,qGAoBnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAC0B,CAAC;AAGrG,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CACwB,CAAC;AAGjG,8FAA8F;AAC9F,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAKvE,CAAC;AAGJ,eAAO,MAAM,qBAAqB,4OAKjC,CAAC;AAGF,eAAO,MAAM,2BAA2B,wPASvC,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,mGAYhC,CAAC;AAGF,sCAAsC;AACtC,eAAO,MAAM,qBAAqB,6HAAc,CAAC"}

package/dist/components/ResponsiveDialog/ResponsiveDialog.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useMediaQuery } from '@timmbr/hooks';
+import { cn } from '@timmbr/utils';
+import { DialogClose, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../Dialog/Dialog.js';
+import { DrawerBody, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } from '../Drawer/Drawer.js';
+
+const DIALOG_SIZE = { sm: "max-w-md", md: "max-w-lg", lg: "max-w-2xl" };
+const RESPONSIVE_DIALOG_BREAKPOINT = "(min-width: 640px)";
+const ModeContext = React.createContext("dialog");
+const useResponsiveDialogMode = () => React.useContext(ModeContext);
+function ResponsiveDialog({ breakpoint = RESPONSIVE_DIALOG_BREAKPOINT, children, ...props }) {
+  const isSmall = useMediaQuery(`not all and ${breakpoint}`);
+  const mode = isSmall ? "drawer" : "dialog";
+  return /* @__PURE__ */ jsx(ModeContext.Provider, { value: mode, children: /* @__PURE__ */ jsx(Dialog, { ...props, children }) });
+}
+ResponsiveDialog.displayName = "ResponsiveDialog";
+const ResponsiveDialogContent = React.forwardRef(
+  ({ className, dialogClassName, drawerClassName, size = "md", ...props }, ref) => {
+    const mode = useResponsiveDialogMode();
+    return mode === "drawer" ? /* @__PURE__ */ jsx(
+      DrawerContent,
+      {
+        ref,
+        side: "bottom",
+        "data-mode": "drawer",
+        className: cn(className, drawerClassName),
+        ...props
+      }
+    ) : /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        ref,
+        "data-mode": "dialog",
+        className: cn(DIALOG_SIZE[size], className, dialogClassName),
+        ...props
+      }
+    );
+  }
+);
+ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
+const ResponsiveDialogHeader = (props) => useResponsiveDialogMode() === "drawer" ? /* @__PURE__ */ jsx(DrawerHeader, { ...props }) : /* @__PURE__ */ jsx(DialogHeader, { ...props });
+ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
+const ResponsiveDialogBody = (props) => useResponsiveDialogMode() === "drawer" ? /* @__PURE__ */ jsx(DrawerBody, { ...props }) : /* @__PURE__ */ jsx(DialogBody, { ...props });
+ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
+const ResponsiveDialogFooter = ({ className, ...props }) => useResponsiveDialogMode() === "drawer" ? /* @__PURE__ */ jsx(DrawerFooter, { className: cn("-mx-6 border-t border-border px-6", className), ...props }) : /* @__PURE__ */ jsx(DialogFooter, { className, ...props });
+ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
+const ResponsiveDialogTitle = React.forwardRef(
+  (props, ref) => useResponsiveDialogMode() === "drawer" ? /* @__PURE__ */ jsx(DrawerTitle, { ref, ...props }) : /* @__PURE__ */ jsx(DialogTitle, { ref, ...props })
+);
+ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
+const ResponsiveDialogDescription = React.forwardRef(
+  (props, ref) => useResponsiveDialogMode() === "drawer" ? /* @__PURE__ */ jsx(DrawerDescription, { ref, ...props }) : /* @__PURE__ */ jsx(DialogDescription, { ref, ...props })
+);
+ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
+const ResponsiveDialogForm = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const mode = useResponsiveDialogMode();
+    return /* @__PURE__ */ jsx(
+      "form",
+      {
+        ref,
+        "data-slot": "responsive-dialog-form",
+        className: cn("flex min-h-0 flex-1 flex-col", mode === "drawer" && "gap-4", className),
+        ...props
+      }
+    );
+  }
+);
+ResponsiveDialogForm.displayName = "ResponsiveDialogForm";
+const ResponsiveDialogClose = DialogClose;
+
+export { RESPONSIVE_DIALOG_BREAKPOINT, ResponsiveDialog, ResponsiveDialogBody, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogForm, ResponsiveDialogHeader, ResponsiveDialogTitle, useResponsiveDialogMode };

package/dist/components/ResponsiveDialog/ResponsiveDialog.types.d.ts

@@ -0,0 +1,27 @@
+import type * as React from 'react';
+import type { DialogProps } from '../Dialog/Dialog.types';
+import type { MotionProp } from '../../types/motion';
+export type ResponsiveDialogMode = 'dialog' | 'drawer';
+export interface ResponsiveDialogProps extends DialogProps {
+    /**
+     * Media query from which the centred dialog is used; below it the content
+     * opens as a bottom sheet. Default `(min-width: 640px)` (Tailwind `sm`).
+     */
+    breakpoint?: string;
+}
+export interface ResponsiveDialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Dialog width on larger screens: sm (28rem), md (32rem, default), lg (42rem). */
+    size?: 'sm' | 'md' | 'lg';
+    /** Extra classes in dialog mode only (e.g. `max-w-2xl`). */
+    dialogClassName?: string;
+    /** Extra classes in bottom-sheet mode only. */
+    drawerClassName?: string;
+    motion?: MotionProp;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onInteractOutside?: (event: Event) => void;
+}
+export type ResponsiveDialogSectionProps = React.HTMLAttributes<HTMLDivElement>;
+export type ResponsiveDialogFormProps = React.FormHTMLAttributes<HTMLFormElement>;
+//# sourceMappingURL=ResponsiveDialog.types.d.ts.map

package/dist/components/ResponsiveDialog/ResponsiveDialog.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveDialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveDialog/ResponsiveDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEvD,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,4BAA6B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxF,mFAAmF;IACnF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,4DAA4D;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhF,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC"}

package/dist/components/ResponsiveDialog/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ResponsiveDialog';
+export * from './ResponsiveDialog.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ResponsiveDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveDialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}

package/dist/components/SectionNav/SectionNav.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { SectionNavProps } from './SectionNav.types';
+/** Exact match, or nested under the item (`/orders/1` → `/orders`). */
+export declare function isSectionNavItemActive(href: string, activeHref?: string): boolean;
+/**
+ * In-page section navigation (account, settings, help centre…): a vertical
+ * list on desktop and a horizontally scrolling row on small screens.
+ * Unlike `SideBarNavigation` it's not an app shell: no branding, collapse or
+ * full-height frame.
+ */
+export declare const SectionNav: React.ForwardRefExoticComponent<SectionNavProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=SectionNav.d.ts.map

package/dist/components/SectionNav/SectionNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNav.d.ts","sourceRoot":"","sources":["../../../src/components/SectionNav/SectionNav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAuB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAU/E,uEAAuE;AACvE,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAKjF;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,qFAgEtB,CAAC"}

package/dist/components/SectionNav/SectionNav.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { sectionNavItemVariants, sectionNavListVariants, sectionNavFooterVariants } from './SectionNav.styles.js';
+
+const DefaultLink = ({ href, className, children, ...rest }) => /* @__PURE__ */ jsx("a", { href, className, ...rest, children });
+const trimSlash = (path) => path.length > 1 ? path.replace(/\/+$/, "") : path;
+function isSectionNavItemActive(href, activeHref) {
+  if (!activeHref) return false;
+  const item = trimSlash(href);
+  const current = trimSlash(activeHref.split(/[?#]/)[0] ?? "");
+  return current === item || current.startsWith(`${item}/`);
+}
+const SectionNav = React.forwardRef(
+  ({
+    items,
+    activeHref,
+    linkComponent: Link = DefaultLink,
+    footer,
+    mobileLayout = "scroll",
+    className,
+    "aria-label": ariaLabel = "Section navigation",
+    ...props
+  }, ref) => {
+    const activeId = React.useMemo(() => {
+      const matches = items.filter((item) => isSectionNavItemActive(item.href, activeHref));
+      return matches.sort((a, b) => b.href.length - a.href.length)[0]?.id;
+    }, [items, activeHref]);
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        "data-slot": "section-nav",
+        className: cn(
+          "flex gap-2 lg:flex-col lg:items-stretch lg:gap-0",
+          mobileLayout === "wrap" ? "flex-col items-stretch" : "items-center",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("ul", { className: cn(sectionNavListVariants({ mobileLayout }), "min-w-0 flex-1"), role: "list", children: items.map((item) => {
+            const active = item.id === activeId;
+            return /* @__PURE__ */ jsx("li", { className: "shrink-0", children: /* @__PURE__ */ jsxs(
+              Link,
+              {
+                href: item.href,
+                "aria-current": active ? "page" : void 0,
+                className: sectionNavItemVariants({ active }),
+                children: [
+                  item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: item.icon }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+                  item.badge !== void 0 && item.badge !== null && /* @__PURE__ */ jsx("span", { className: "text-caption-lg text-muted-foreground", children: item.badge })
+                ]
+              }
+            ) }, item.id);
+          }) }),
+          footer && /* @__PURE__ */ jsx("div", { className: sectionNavFooterVariants(), "data-slot": "section-nav-footer", children: footer })
+        ]
+      }
+    );
+  }
+);
+SectionNav.displayName = "SectionNav";
+
+export { SectionNav, isSectionNavItemActive };

package/dist/components/SectionNav/SectionNav.styles.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+/** Desktop (lg): a vertical list. Small screens: a scrolling row or wrapped lines. */
+export declare const sectionNavListVariants: (props?: ({
+    mobileLayout?: "scroll" | "wrap" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sectionNavItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sectionNavFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type SectionNavItemVariants = VariantProps<typeof sectionNavItemVariants>;
+//# sourceMappingURL=SectionNav.styles.d.ts.map

package/dist/components/SectionNav/SectionNav.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNav.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SectionNav/SectionNav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,sFAAsF;AACtF,eAAO,MAAM,sBAAsB;;8EAQjC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;8EAWlC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/components/SectionNav/SectionNav.styles.js

@@ -0,0 +1,28 @@
+import { cva } from 'class-variance-authority';
+
+const sectionNavListVariants = cva("flex gap-1 lg:flex-col lg:flex-nowrap lg:overflow-visible", {
+  variants: {
+    mobileLayout: {
+      scroll: "overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      wrap: "flex-wrap"
+    }
+  },
+  defaultVariants: { mobileLayout: "scroll" }
+});
+const sectionNavItemVariants = cva(
+  "flex items-center gap-3 whitespace-nowrap rounded-md px-3 py-2 lg:py-2.5 font-sans text-body-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  {
+    variants: {
+      active: {
+        true: "bg-primary-50 text-primary-700 dark:bg-primary-900 dark:text-primary-100",
+        false: "text-grey-700 hover:bg-grey-100 hover:text-foreground dark:text-grey-300 dark:hover:bg-grey-800"
+      }
+    },
+    defaultVariants: { active: false }
+  }
+);
+const sectionNavFooterVariants = cva(
+  "flex shrink-0 items-center lg:mt-2 lg:border-t lg:border-border lg:pt-2"
+);
+
+export { sectionNavFooterVariants, sectionNavItemVariants, sectionNavListVariants };

package/dist/components/SectionNav/SectionNav.types.d.ts

@@ -0,0 +1,37 @@
+import type * as React from 'react';
+export interface SectionNavItem {
+    id: string;
+    label: React.ReactNode;
+    href: string;
+    /** Leading icon (decorative; hidden from screen readers). */
+    icon?: React.ReactNode;
+    /** Trailing count or tag, e.g. a number of items. */
+    badge?: React.ReactNode;
+}
+export interface SectionNavLinkProps {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    'aria-current'?: 'page';
+}
+export interface SectionNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    items: SectionNavItem[];
+    /**
+     * Current path. An item is active when it equals its `href` or is nested
+     * under it (`/account/orders/123` activates `/account/orders`).
+     */
+    activeHref?: string;
+    /** Link to render items with (e.g. `next/link`). Defaults to `<a>`. */
+    linkComponent?: React.ComponentType<SectionNavLinkProps>;
+    /**
+     * Small screens: `scroll` keeps one horizontally scrolling row (good for many
+     * short items); `wrap` wraps the items onto several lines so every one stays
+     * visible (good for a handful of longer labels).
+     */
+    mobileLayout?: 'scroll' | 'wrap';
+    /** Extra content after the items, e.g. a "Log out" button. */
+    footer?: React.ReactNode;
+    /** Accessible name of the navigation landmark. */
+    'aria-label'?: string;
+}
+//# sourceMappingURL=SectionNav.types.d.ts.map

package/dist/components/SectionNav/SectionNav.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNav.types.d.ts","sourceRoot":"","sources":["../../../src/components/SectionNav/SectionNav.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qDAAqD;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC1F,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACzD;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACjC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/components/SectionNav/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SectionNav';
+export * from './SectionNav.types';
+export * from './SectionNav.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SectionNav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SectionNav/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}

package/dist/components/Select/Select.js

@@ -38,7 +38,7 @@ const Select = React.forwardRef(
         className: cn("flex flex-col gap-1.5 w-full font-sans", containerClassName),
         style,
         children: [
-          label && /* @__PURE__ */ jsx("label", { className: "text-xs font-semibold text-foreground tracking-wide select-none", children: label }),
+          label && /* @__PURE__ */ jsx("label", { className: "text-body-3 font-semibold text-foreground tracking-wide select-none", children: label }),
           /* @__PURE__ */ jsxs(
             SelectPrimitive.Root,
             {
@@ -101,7 +101,7 @@ const Select = React.forwardRef(
             "p",
             {
               className: cn(
-                "text-xs mt-1 flex items-center gap-1.5",
+                "text-body-3 mt-1 flex items-center gap-1.5",
                 isError ? "text-destructive font-medium" : "text-muted"
               ),
               children: [

package/dist/components/Select/Select.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const selectTriggerVariants: (props?: ({
     variant?: "filled" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
     isError?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const selectContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/Select/Select.styles.js

@@ -5,14 +5,14 @@ const selectTriggerVariants = cva(
   {
     variants: {
       variant: {
-        outline: "border-grey-300 dark:border-grey-700 bg-white dark:bg-grey-900 focus:border-primary focus:ring-primary/20",
-        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus:bg-white dark:focus:bg-grey-900 focus:border-primary focus:ring-primary/20"
+        outline: "border-grey-300 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 focus:border-primary focus:ring-primary/20",
+        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus:bg-grey-50 dark:focus:bg-grey-900 focus:border-primary focus:ring-primary/20"
       },
       size: {
-        sm: "h-9 px-3 text-xs",
-        default: "h-11 px-3.5 text-sm",
-        md: "h-11 px-3.5 text-sm",
-        lg: "h-[52px] px-4 text-base"
+        sm: "h-9 px-3 text-body-3",
+        default: "h-11 px-3.5 text-body-2",
+        md: "h-11 px-3.5 text-body-2",
+        lg: "h-[52px] px-4 text-body-1"
       },
       isError: {
         true: "border-destructive focus:border-destructive focus:ring-destructive/20 text-destructive",
@@ -27,10 +27,10 @@ const selectTriggerVariants = cva(
   }
 );
 const selectContentVariants = cva(
-  "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-grey-200 dark:border-grey-700 bg-white dark:bg-grey-900 text-foreground shadow-md transition-all font-sans p-1"
+  "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 text-foreground shadow-md transition-all font-sans p-1"
 );
 const selectItemVariants = cva(
-  "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:bg-grey-100 dark:focus:bg-grey-800 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+  "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-8 pr-2 text-body-2 outline-none transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:bg-grey-100 dark:focus:bg-grey-800 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
 );
 
 export { selectContentVariants, selectItemVariants, selectTriggerVariants };

package/dist/components/SideBarNavigation/SideBarNavigation.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const sidebarContainerVariants = cva(
-  "relative flex flex-col h-screen max-h-screen bg-white border-r border-grey-200 select-none",
+  "relative flex flex-col h-screen max-h-screen bg-grey-50 border-r border-grey-200 select-none",
   {
     variants: {
       collapsed: {
@@ -25,14 +25,14 @@ const sidebarContainerVariants = cva(
   }
 );
 const sidebarToggleVariants = cva(
-  "absolute -right-3.5 top-6 z-30 flex size-7 items-center justify-center rounded-full bg-white border border-grey-200 text-grey-600 shadow-xs hover:bg-grey-50 hover:text-grey-900 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer transition-all duration-150"
+  "absolute -right-3.5 top-6 z-30 flex size-7 items-center justify-center rounded-full bg-grey-50 border border-grey-200 text-grey-600 shadow-xs hover:bg-grey-50 hover:text-grey-900 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer transition-all duration-150"
 );
 const navItemVariants = cva(
-  "group relative flex items-center gap-3 rounded-lg text-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer select-none",
+  "group relative flex items-center gap-3 rounded-lg text-body-2 transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer select-none",
   {
     variants: {
       active: {
-        true: "bg-primary text-white shadow-xs font-medium",
+        true: "bg-primary text-grey-50 shadow-xs font-medium",
         false: "text-grey-700 hover:bg-grey-100 hover:text-grey-900"
       },
       collapsed: {
@@ -47,17 +47,17 @@ const navItemVariants = cva(
   }
 );
 const navBadgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full text-xs font-semibold shrink-0 transition-colors",
+  "inline-flex items-center justify-center rounded-full text-body-3 font-semibold shrink-0 transition-colors",
   {
     variants: {
       variant: {
-        destructive: "bg-red-500 text-white px-2 py-0.5",
+        destructive: "bg-destructive text-grey-50 px-2 py-0.5",
         primary: "bg-primary-100 text-primary-800 px-2 py-0.5",
         secondary: "bg-grey-100 text-grey-700 px-2 py-0.5",
         outline: "border border-grey-200 text-grey-700 px-1.5 py-0.5"
       },
       collapsed: {
-        true: "absolute -top-1 -right-1 size-4 p-0 text-[10px] leading-none",
+        true: "absolute -top-1 -right-1 size-4 p-0 text-caption leading-none",
         false: "ml-auto"
       }
     },
@@ -68,7 +68,7 @@ const navBadgeVariants = cva(
   }
 );
 const subItemVariants = cva(
-  "flex items-center gap-2.5 w-full rounded-md px-3 py-2 text-xs transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
+  "flex items-center gap-2.5 w-full rounded-md px-3 py-2 text-body-3 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
   {
     variants: {
       active: {

package/dist/components/SideBarNavigation/subcomponents/SidebarBranding.js

@@ -14,7 +14,7 @@ const SidebarBranding = ({
     "div",
     {
       "data-testid": "sidebar-logo-placeholder",
-      className: "size-8 rounded-lg border border-grey-300 bg-grey-100 flex items-center justify-center shrink-0 text-grey-400 text-xs font-semibold",
+      className: "size-8 rounded-lg border border-grey-300 bg-grey-100 flex items-center justify-center shrink-0 text-grey-400 text-body-3 font-semibold",
       children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Logo" })
     }
   );
@@ -37,8 +37,8 @@ const SidebarBranding = ({
             variants: shouldAnimate ? sidebarContentFadeVariants : void 0,
             className: "flex flex-col min-w-0 overflow-hidden whitespace-nowrap",
             children: [
-              /* @__PURE__ */ jsx("span", { className: "font-sans font-bold text-base text-grey-900 truncate tracking-tight", children: branding?.title || "Timmbr Console" }),
-              branding?.subtitle && /* @__PURE__ */ jsx("span", { className: "font-sans text-xs text-grey-500 truncate", children: branding.subtitle })
+              /* @__PURE__ */ jsx("span", { className: "font-bold text-body-1 text-grey-900 truncate tracking-tight", children: branding?.title || "Timmbr Console" }),
+              branding?.subtitle && /* @__PURE__ */ jsx("span", { className: "text-body-3 text-grey-500 truncate", children: branding.subtitle })
             ]
           },
           "sidebar-branding-text"

package/dist/components/SideBarNavigation/subcomponents/SidebarFooter.js

@@ -15,7 +15,7 @@ const SidebarFooter = ({
     {
       "data-testid": "sidebar-footer",
       className: cn(
-        "mt-auto border-t border-grey-100 bg-white shrink-0 overflow-hidden",
+        "mt-auto border-t border-grey-100 bg-grey-50 shrink-0 overflow-hidden",
         collapsed ? "p-2 flex flex-col items-center gap-1" : "p-3",
         className
       ),

package/dist/components/SideBarNavigation/subcomponents/SidebarPopoverMenu.js

@@ -69,18 +69,18 @@ const SidebarPopoverMenu = ({
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
             className: cn(
-              "z-50 min-w-48 rounded-lg bg-white p-2 text-grey-900 shadow-md border border-grey-200 outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+              "z-50 min-w-48 rounded-lg bg-grey-50 p-2 text-grey-900 shadow-md border border-grey-200 outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
               !shouldAnimate && "animate-none transition-none"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 border-b border-grey-100 mb-1 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("span", { className: "font-semibold text-xs text-grey-900 tracking-tight", children: item.label }),
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-body-3 text-grey-900 tracking-tight", children: item.label }),
                 item.badge !== void 0 && /* @__PURE__ */ jsx(
                   "span",
                   {
                     className: cn(
-                      "inline-flex items-center justify-center rounded-full px-1.5 py-0.2 text-[10px] font-semibold",
-                      item.badgeVariant === "destructive" ? "bg-red-500 text-white" : "bg-grey-100 text-grey-800"
+                      "inline-flex items-center justify-center rounded-full px-1.5 py-0.2 text-caption font-semibold",
+                      item.badgeVariant === "destructive" ? "bg-destructive text-grey-50" : "bg-grey-100 text-grey-800"
                     ),
                     children: item.badge
                   }

package/dist/components/SideBarNavigation/subcomponents/SidebarProfile.js

@@ -15,7 +15,7 @@ const SidebarProfile = ({
   const { shouldAnimate } = useSidebarContext();
   if (!profile) return null;
   const fallbackInitials = profile.fallback || profile.name.split(" ").map((part) => part[0]).join("").slice(0, 2).toUpperCase();
-  const avatarElement = profile.avatar ? /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full overflow-hidden shrink-0 flex items-center justify-center", children: profile.avatar }) : /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full bg-grey-200 border border-grey-300 flex items-center justify-center shrink-0 font-medium text-xs text-grey-700", children: fallbackInitials });
+  const avatarElement = profile.avatar ? /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full overflow-hidden shrink-0 flex items-center justify-center", children: profile.avatar }) : /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full bg-grey-200 border border-grey-300 flex items-center justify-center shrink-0 font-medium text-body-3 text-grey-700", children: fallbackInitials });
   const hasItems = Boolean(profile.items && profile.items.length > 0);
   const menuContent = hasItems && /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.Content,
@@ -24,13 +24,13 @@ const SidebarProfile = ({
       align: collapsed ? "end" : "center",
       sideOffset: collapsed ? 12 : 8,
       className: cn(
-        "z-50 min-w-56 rounded-lg bg-white p-1.5 text-grey-900 shadow-md border border-grey-200 outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "z-50 min-w-56 rounded-lg bg-grey-50 p-1.5 text-grey-900 shadow-md border border-grey-200 outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         !shouldAnimate && "animate-none transition-none"
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "px-2.5 py-2 border-b border-grey-100 mb-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "font-semibold text-xs text-grey-900 truncate", children: profile.name }),
-          profile.email && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-grey-500 truncate mt-0.5", children: profile.email })
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-body-3 text-grey-900 truncate", children: profile.name }),
+          profile.email && /* @__PURE__ */ jsx("p", { className: "text-caption-lg text-grey-500 truncate mt-0.5", children: profile.email })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: profile.items?.map((item) => {
           const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -38,8 +38,8 @@ const SidebarProfile = ({
             /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
           ] });
           const itemClass = cn(
-            "flex items-center gap-2.5 w-full rounded-md px-2.5 py-1.5 text-xs transition-colors duration-150 select-none cursor-pointer outline-none focus-visible:bg-grey-100",
-            item.destructive ? "text-red-600 hover:bg-red-50 hover:text-red-700" : "text-grey-700 hover:bg-grey-100 hover:text-grey-900",
+            "flex items-center gap-2.5 w-full rounded-md px-2.5 py-1.5 text-body-3 transition-colors duration-150 select-none cursor-pointer outline-none focus-visible:bg-grey-100",
+            item.destructive ? "text-destructive hover:bg-destructive/10 hover:text-destructive/80" : "text-grey-700 hover:bg-grey-100 hover:text-grey-900",
             item.disabled && "opacity-50 pointer-events-none"
           );
           if (item.href) {
@@ -98,8 +98,8 @@ const SidebarProfile = ({
             className: "flex items-center min-w-0 flex-1 overflow-hidden",
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1 overflow-hidden", children: [
-                /* @__PURE__ */ jsx("span", { className: "font-semibold text-xs text-grey-900 truncate", children: profile.name }),
-                profile.email && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-grey-500 truncate block", children: profile.email })
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-body-3 text-grey-900 truncate", children: profile.name }),
+                profile.email && /* @__PURE__ */ jsx("span", { className: "text-caption-lg text-grey-500 truncate block", children: profile.email })
               ] }),
               hasItems && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 text-grey-400 shrink-0 ml-auto" })
             ]
@@ -109,7 +109,7 @@ const SidebarProfile = ({
       ]
     }
   );
-  return /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-grey-200 bg-white shrink-0 overflow-hidden", children: hasItems ? /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-grey-200 bg-grey-50 shrink-0 overflow-hidden", children: hasItems ? /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
     /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { asChild: true, children: expandedTrigger }),
     menuContent
   ] }) : expandedTrigger });

package/dist/components/SideBarNavigation/subcomponents/SidebarSubItem.js

@@ -17,8 +17,8 @@ const SidebarSubItem = ({
       "span",
       {
         className: cn(
-          "ml-auto inline-flex items-center justify-center rounded-full px-1.5 py-0.2 text-[10px] font-semibold",
-          item.badgeVariant === "destructive" ? "bg-red-500 text-white" : "bg-grey-200 text-grey-800"
+          "ml-auto inline-flex items-center justify-center rounded-full px-1.5 py-0.2 text-caption font-semibold",
+          item.badgeVariant === "destructive" ? "bg-destructive text-grey-50" : "bg-grey-200 text-grey-800"
         ),
         children: item.badge
       }

package/dist/components/Skeleton/Skeleton.styles.js

@@ -12,7 +12,7 @@ const skeletonVariants = cva(
       },
       animation: {
         pulse: "animate-pulse",
-        wave: "relative overflow-hidden before:absolute before:inset-0 before:content-[''] before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-white/60 dark:before:via-white/15 before:to-transparent",
+        wave: "relative overflow-hidden before:absolute before:inset-0 before:content-[''] before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-grey-50/60 dark:before:via-grey-50/15 before:to-transparent",
         none: ""
       }
     },

package/dist/components/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,OAAO,sFAmCnB,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,OAAO,sFAqCnB,CAAC"}