@sixthshift/design-system 0.1.0 → 0.3.0

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,52 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type ModalProps = Pick<HTMLAttributes<HTMLDivElement>, "className" | "style" | "aria-label" | "aria-labelledby" | "aria-describedby"> & {
+    /**
+     * Called when the modal's open state should change. Today Modal is mount-driven
+     * (parent conditionally renders), so this fires only with `false` on dismissal.
+     * The signature matches Popover/Tooltip/HoverCard/Tabs for API consistency and
+     * leaves room to evolve Modal into a state-driven primitive later.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** Modal size */
+    size?: "sm" | "md" | "lg" | "full";
+    /** Children - use Modal.Header, Modal.Body, Modal.Footer */
+    children: ReactNode;
+    /**
+     * When true (default), clicking outside closes the modal.
+     * When false, the modal can only be closed programmatically.
+     * Note: Escape key is handled by OverlayContext for proper stack ordering.
+     */
+    dismissable?: boolean;
+    /** When true, shows a close (X) button in the modal header */
+    closable?: boolean;
+    /** Vertical alignment on desktop. "center" (default) or "top" (anchored near top, content grows down) */
+    align?: "center" | "top";
+};
+export declare const Modal: import("react").ForwardRefExoticComponent<Pick<HTMLAttributes<HTMLDivElement>, "className" | "style" | "aria-describedby" | "aria-label" | "aria-labelledby"> & {
+    /**
+     * Called when the modal's open state should change. Today Modal is mount-driven
+     * (parent conditionally renders), so this fires only with `false` on dismissal.
+     * The signature matches Popover/Tooltip/HoverCard/Tabs for API consistency and
+     * leaves room to evolve Modal into a state-driven primitive later.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** Modal size */
+    size?: "sm" | "md" | "lg" | "full";
+    /** Children - use Modal.Header, Modal.Body, Modal.Footer */
+    children: ReactNode;
+    /**
+     * When true (default), clicking outside closes the modal.
+     * When false, the modal can only be closed programmatically.
+     * Note: Escape key is handled by OverlayContext for proper stack ordering.
+     */
+    dismissable?: boolean;
+    /** When true, shows a close (X) button in the modal header */
+    closable?: boolean;
+    /** Vertical alignment on desktop. "center" (default) or "top" (anchored near top, content grows down) */
+    align?: "center" | "top";
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Header: import("react").ForwardRefExoticComponent<import("./components/index.js").ModalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("./components/index.js").ModalBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("./components/index.js").ModalFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAgE,MAAM,OAAO,CAAC;AAOtI,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,YAAY,GAAG,iBAAiB,GAAG,kBAAkB,CAAC,GAAG;IAC7I;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACnC,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yGAAyG;IACzG,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC1B,CAAC;AA6IF,eAAO,MAAM,KAAK;IAlKhB;;;;;OAKG;mBACY,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;IACtC,iBAAiB;WACV,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM;IAClC,4DAA4D;cAClD,SAAS;IACnB;;;;OAIG;kBACW,OAAO;IACrB,8DAA8D;eACnD,OAAO;IAClB,yGAAyG;YACjG,QAAQ,GAAG,KAAK;;;;;CAkJxB,CAAC"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingOverlay, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+import { useMergedFloatingRef, usePresence } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { forwardRef, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
+import { ModalBody, ModalContext, ModalFooter, ModalHeader } from "./components/index.js";
+// =============================================================================
+// Size classes
+// =============================================================================
+const sizeClasses = {
+    sm: "sm:w-80",
+    md: "sm:w-[28rem]",
+    lg: "sm:w-[36rem]",
+    full: "sm:w-[95%] sm:h-[95%]",
+};
+// =============================================================================
+// Modal
+// =============================================================================
+const ModalRoot = forwardRef(({ onOpenChange, size = "md", className, style, children, dismissable = true, closable, align = "center", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }, ref) => {
+    // Prefer explicit prop over context (context is set by useModal's overlay system)
+    const contextValue = useContext(ModalContext);
+    // Context provides a parameterless onClose for programmatic modals; adapt to the boolean shape.
+    const handleDismiss = useCallback(() => {
+        if (onOpenChange)
+            onOpenChange(false);
+        else
+            contextValue?.onClose();
+    }, [onOpenChange, contextValue]);
+    const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
+    useEffect(() => {
+        show();
+    }, [show]);
+    const handleClose = useCallback(() => {
+        hide(handleDismiss);
+    }, [handleDismiss, hide]);
+    const { refs, context } = useFloating({
+        open: true,
+        onOpenChange: (nextOpen) => {
+            if (!nextOpen)
+                handleClose();
+        },
+    });
+    const mergedRef = useMergedFloatingRef(refs, presenceRef, ref);
+    const dismiss = useDismiss(context, {
+        enabled: dismissable,
+        // OverlayContext handles escape key for proper stack ordering
+        escapeKey: false,
+        outsidePress: true,
+        outsidePressEvent: "mousedown",
+    });
+    const role = useRole(context, {
+        role: "dialog",
+    });
+    const { getFloatingProps } = useInteractions([dismiss, role]);
+    // The dialog names itself from its header. `Modal.Header` stamps `titleId`
+    // on itself and reports back, so a headerless modal falls through to the
+    // caller's `aria-label` instead of referencing an id that isn't there.
+    const titleId = useId();
+    const [hasTitle, setHasTitle] = useState(false);
+    const registerTitle = useCallback((present) => setHasTitle(present), []);
+    // `aria-labelledby` beats `aria-label` in the name computation, so a caller
+    // who passes a label must not also be pointed at the header — they would
+    // never see their own string win.
+    const labelledBy = ariaLabelledBy ?? (ariaLabel || !hasTitle ? undefined : titleId);
+    const modalContextValue = useMemo(() => ({ onClose: handleClose, closable, titleId, registerTitle }), [closable, handleClose, titleId, registerTitle]);
+    if (!isMounted)
+        return null;
+    const isEntering = state === "entering";
+    const isExiting = state === "exiting";
+    return (_jsx(FloatingFocusManager, { context: context, modal: true, children: _jsx(FloatingOverlay, { lockScroll: true, className: cn("fixed inset-0 z-modal bg-bg-overlay", isEntering && "animate-fade-in", isExiting && "animate-fade-out"), children: _jsx("div", { ref: mergedRef, role: "dialog", "aria-modal": "true", "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": ariaDescribedBy, tabIndex: -1, "data-state": state, className: cn("fixed flex flex-col overflow-hidden outline-hidden", "rounded-xl border border-border-normal bg-bg-normal", 
+                // Size
+                sizeClasses[size], 
+                // Cap height so ModalBody scrolls instead of overflowing the viewport
+                "max-h-[95%]", 
+                // Mobile: slide up from bottom, full width
+                "max-sm:inset-x-0 max-sm:bottom-0 max-sm:rounded-b-none", isEntering && "max-sm:animate-slide-up-in", isExiting && "max-sm:animate-slide-up-out", 
+                // Desktop: horizontal center + vertical alignment
+                "sm:left-1/2 sm:-translate-x-1/2", align === "center" && "sm:top-1/2 sm:-translate-y-1/2", align === "top" && "sm:top-[15vh]", isEntering && "sm:animate-fade-in", isExiting && "sm:animate-fade-out", className), style: style, ...getFloatingProps({}), children: _jsx(ModalContext.Provider, { value: modalContextValue, children: children }) }) }) }));
+});
+ModalRoot.displayName = "Modal";
+// =============================================================================
+// Compound Component Export
+// =============================================================================
+export const Modal = Object.assign(ModalRoot, {
+    Header: ModalHeader,
+    Body: ModalBody,
+    Footer: ModalFooter,
+});
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC9H,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,UAAU,EAAuC,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtI,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AA8BjF,gFAAgF;AAChF,eAAe;AACf,gFAAgF;AAEhF,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,cAAc;IAClB,EAAE,EAAE,cAAc;IAClB,IAAI,EAAE,uBAAuB;CAC9B,CAAC;AAEF,gFAAgF;AAChF,QAAQ;AACR,gFAAgF;AAEhF,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EACE,YAAY,EACZ,IAAI,GAAG,IAAI,EACX,SAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,GACpC,EACD,GAAG,EACH,EAAE;IACF,kFAAkF;IAClF,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC9C,gGAAgG;IAChG,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,YAAY;YAAE,YAAY,CAAC,KAAK,CAAC,CAAC;;YACjC,YAAY,EAAE,OAAO,EAAE,CAAC;IAC/B,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjC,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,EAAE,CAAC;IACT,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,aAAa,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,WAAW,CAAC;QACpC,IAAI,EAAE,IAAI;QACV,YAAY,EAAE,CAAC,QAAQ,EAAE,EAAE;YACzB,IAAI,CAAC,QAAQ;gBAAE,WAAW,EAAE,CAAC;QAC/B,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,oBAAoB,CAAiB,IAAI,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC;IAE/E,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE;QAClC,OAAO,EAAE,WAAW;QACpB,8DAA8D;QAC9D,SAAS,EAAE,KAAK;QAChB,YAAY,EAAE,IAAI;QAClB,iBAAiB,EAAE,WAAW;KAC/B,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE;QAC5B,IAAI,EAAE,QAAQ;KACf,CAAC,CAAC;IAEH,MAAM,EAAE,gBAAgB,EAAE,GAAG,eAAe,CAAC,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAE9D,2EAA2E;IAC3E,yEAAyE;IACzE,uEAAuE;IACvE,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IAElF,4EAA4E;IAC5E,yEAAyE;IACzE,kCAAkC;IAClC,MAAM,UAAU,GAAG,cAAc,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAEpF,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAEvJ,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,MAAM,UAAU,GAAG,KAAK,KAAK,UAAU,CAAC;IACxC,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;IAEtC,OAAO,CACL,KAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,kBAC3C,KAAC,eAAe,IAAC,UAAU,QAAC,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,UAAU,IAAI,iBAAiB,EAAE,SAAS,IAAI,kBAAkB,CAAC,YAChJ,cACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,gBACF,MAAM,gBACL,SAAS,qBACJ,UAAU,sBACT,eAAe,EACjC,QAAQ,EAAE,CAAC,CAAC,gBACA,KAAK,EACjB,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,qDAAqD;gBACrD,OAAO;gBACP,WAAW,CAAC,IAAI,CAAC;gBACjB,sEAAsE;gBACtE,aAAa;gBACb,2CAA2C;gBAC3C,wDAAwD,EACxD,UAAU,IAAI,4BAA4B,EAC1C,SAAS,IAAI,6BAA6B;gBAC1C,kDAAkD;gBAClD,iCAAiC,EACjC,KAAK,KAAK,QAAQ,IAAI,gCAAgC,EACtD,KAAK,KAAK,KAAK,IAAI,eAAe,EAClC,UAAU,IAAI,oBAAoB,EAClC,SAAS,IAAI,qBAAqB,EAClC,SAAS,CACV,EACD,KAAK,EAAE,KAAK,KACR,gBAAgB,CAAC,EAAE,CAAC,YAExB,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,iBAAiB,YAAG,QAAQ,GAAyB,GAC/E,GACU,GACG,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC;AAEhC,gFAAgF;AAChF,4BAA4B;AAC5B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IAC5C,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,WAAW;CACpB,CAAC,CAAC"}

package/dist/components/Modal/components/ModalBody.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ModalBody.d.ts.map

package/dist/components/Modal/components/ModalBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/components/ModalBody.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,eAAO,MAAM,SAAS,uFAEpB,CAAC"}

package/dist/components/Modal/components/ModalBody.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+export const ModalBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex-1 overflow-y-auto p-6 pt-0", className), ...props })));
+ModalBody.displayName = "ModalBody";
+//# sourceMappingURL=ModalBody.js.map

package/dist/components/Modal/components/ModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.js","sourceRoot":"","sources":["../../../../src/components/Modal/components/ModalBody.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAiC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC1G,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC1F,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/components/Modal/components/ModalContext.d.ts

@@ -0,0 +1,32 @@
+import { type PropsWithChildren } from "react";
+/**
+ * Internal close signal for a mounted modal. App-level callback — no event arg.
+ * Used by ModalHeader's X button and by `useModal`'s programmatic overlay system.
+ */
+export type OnClose = () => void;
+interface ModalContextValue {
+    onClose: OnClose;
+    closable?: boolean | undefined;
+    /**
+     * The id `Modal.Header` stamps on itself so the dialog can name itself from
+     * its own title. A dialog with no accessible name is announced as just
+     * "dialog", which tells a screen-reader user nothing about what interrupted
+     * them.
+     */
+    titleId?: string;
+    /**
+     * The header reports its presence, because a headerless modal must not point
+     * `aria-labelledby` at an element that never rendered — a dangling reference
+     * is worse than no reference at all (it resolves to an empty name and axe
+     * flags it as an invalid attribute value).
+     */
+    registerTitle?: (present: boolean) => void;
+}
+export declare const ModalContext: import("react").Context<ModalContextValue | null>;
+export declare function useModalContext(): ModalContextValue;
+export declare const ModalContextProvider: ({ onClose, closable, children }: PropsWithChildren<{
+    onClose: OnClose;
+    closable?: boolean;
+}>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ModalContext.d.ts.map

package/dist/components/Modal/components/ModalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/components/ModalContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAEnF;;;GAGG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC;AAEjC,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,wBAAgB,eAAe,sBAM9B;AAED,eAAO,MAAM,oBAAoB,oCAAqC,iBAAiB,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,gCAGhI,CAAC"}

package/dist/components/Modal/components/ModalContext.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+export const ModalContext = createContext(null);
+export function useModalContext() {
+    const context = useContext(ModalContext);
+    if (!context) {
+        throw new Error("useModalContext must be used within a Modal");
+    }
+    return context;
+}
+export const ModalContextProvider = ({ onClose, closable, children }) => {
+    const value = useMemo(() => ({ onClose, closable }), [onClose, closable]);
+    return _jsx(ModalContext.Provider, { value: value, children: children });
+};
+//# sourceMappingURL=ModalContext.js.map

package/dist/components/Modal/components/ModalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../../../src/components/Modal/components/ModalContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAA0B,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AA2BnF,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,UAAU,eAAe;IAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IACjE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAA+D,EAAE,EAAE;IACnI,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1E,OAAO,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CAAC;AACjF,CAAC,CAAC"}

package/dist/components/Modal/components/ModalFooter.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ModalFooter.d.ts.map

package/dist/components/Modal/components/ModalFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/components/ModalFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEpE,eAAO,MAAM,WAAW,yFAEtB,CAAC"}

package/dist/components/Modal/components/ModalFooter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+export const ModalFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
+ModalFooter.displayName = "ModalFooter";
+//# sourceMappingURL=ModalFooter.js.map

package/dist/components/Modal/components/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.js","sourceRoot":"","sources":["../../../../src/components/Modal/components/ModalFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAmC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC9G,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACrF,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/components/Modal/components/ModalHeader.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ModalHeader.d.ts.map

package/dist/components/Modal/components/ModalHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/components/ModalHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEpE,eAAO,MAAM,WAAW,yFAgCtB,CAAC"}

package/dist/components/Modal/components/ModalHeader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@sixthshift/design-system/utils";
+import { X } from "lucide-react";
+import * as React from "react";
+import { ModalContext } from "./ModalContext.js";
+export const ModalHeader = React.forwardRef(({ className, children, id, ...props }, ref) => {
+    const context = React.useContext(ModalContext);
+    const closable = context?.closable;
+    const onClose = context?.onClose;
+    const registerTitle = context?.registerTitle;
+    // Tell the dialog it has a title to point `aria-labelledby` at, and take that
+    // back on unmount so a header removed at runtime doesn't leave a dangling
+    // reference behind. A caller-supplied `id` wins over the generated one, which
+    // also means the dialog can no longer find it — say so rather than pointing
+    // at an id that isn't in the DOM, and let the caller label the Modal itself.
+    const ownsTitleId = id === undefined;
+    React.useEffect(() => {
+        registerTitle?.(ownsTitleId);
+        return () => registerTitle?.(false);
+    }, [registerTitle, ownsTitleId]);
+    return (_jsxs("div", { ref: ref, id: id ?? context?.titleId, className: cn("flex flex-col space-y-1.5 p-6", closable && "pr-12", className), ...props, children: [children, closable && (_jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "absolute top-4 right-4 cursor-pointer rounded-md p-1 text-fg-subtle transition-colors hover:bg-bg-subtle hover:text-fg-normal", children: _jsx(X, { size: 16 }) }))] }));
+});
+ModalHeader.displayName = "ModalHeader";
+//# sourceMappingURL=ModalHeader.js.map

package/dist/components/Modal/components/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../../../src/components/Modal/components/ModalHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAmC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3H,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,OAAO,EAAE,QAAQ,CAAC;IACnC,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,CAAC;IACjC,MAAM,aAAa,GAAG,OAAO,EAAE,aAAa,CAAC;IAE7C,8EAA8E;IAC9E,0EAA0E;IAC1E,8EAA8E;IAC9E,4EAA4E;IAC5E,6EAA6E;IAC7E,MAAM,WAAW,GAAG,EAAE,KAAK,SAAS,CAAC;IACrC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,aAAa,EAAE,CAAC,WAAW,CAAC,CAAC;QAC7B,OAAO,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjC,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,IAAI,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,QAAQ,IAAI,OAAO,EAAE,SAAS,CAAC,KAAM,KAAK,aACjI,QAAQ,EACR,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,gBACL,OAAO,EAClB,SAAS,EAAC,+HAA+H,YAEzI,KAAC,CAAC,IAAC,IAAI,EAAE,EAAE,GAAI,GACR,CACV,IACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

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

@@ -0,0 +1,5 @@
+export { ModalBody, type ModalBodyProps } from "./ModalBody.js";
+export { ModalContext, ModalContextProvider, type OnClose, useModalContext, } from "./ModalContext.js";
+export { ModalFooter, type ModalFooterProps } from "./ModalFooter.js";
+export { ModalHeader, type ModalHeaderProps } from "./ModalHeader.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,KAAK,OAAO,EACZ,eAAe,GAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Modal/components/index.js

@@ -0,0 +1,5 @@
+export { ModalBody } from "./ModalBody.js";
+export { ModalContext, ModalContextProvider, useModalContext, } from "./ModalContext.js";
+export { ModalFooter } from "./ModalFooter.js";
+export { ModalHeader } from "./ModalHeader.js";
+//# sourceMappingURL=index.js.map

package/dist/components/Modal/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Modal/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,YAAY,EACZ,oBAAoB,EAEpB,eAAe,GAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,3 @@
+export { ModalBody, type ModalBodyProps, ModalContext, ModalContextProvider, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type OnClose, useModalContext, } from "./components/index.js";
+export { Modal, type ModalProps } from "./Modal.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,YAAY,EACZ,oBAAoB,EACpB,WAAW,EACX,KAAK,gBAAgB,EACrB,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,OAAO,EACZ,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Modal/index.js

@@ -0,0 +1,3 @@
+export { ModalBody, ModalContext, ModalContextProvider, ModalFooter, ModalHeader, useModalContext, } from "./components/index.js";
+export { Modal } from "./Modal.js";
+//# sourceMappingURL=index.js.map

package/dist/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,YAAY,EACZ,oBAAoB,EACpB,WAAW,EAEX,WAAW,EAGX,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC"}

package/dist/components/NavBottom/NavBottom.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { NavItem as NavItemType, NavSection, RenderLinkFn } from "../NavSide/index.js";
+export type NavBottomProps = {
+    /** Navigation sections (will be flattened) */
+    sections: NavSection[];
+    /** Callback to determine if an item is active */
+    isActive: (item: NavItemType) => boolean;
+    /** Render function for links (allows router integration). Falls back to ComponentsContext Link. */
+    renderLink?: RenderLinkFn;
+    /** Maximum number of items to display (default: 5) */
+    maxItems?: number;
+    /** Additional class names */
+    className?: string;
+};
+export declare const NavBottom: React.ForwardRefExoticComponent<NavBottomProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=NavBottom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavBottom.d.ts","sourceRoot":"","sources":["../../../src/components/NavBottom/NavBottom.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnF,MAAM,MAAM,cAAc,GAAG;IAC3B,8CAA8C;IAC9C,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,iDAAiD;IACjD,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,mGAAmG;IACnG,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,SAAS,oFAmCpB,CAAC"}

package/dist/components/NavBottom/NavBottom.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponents } from "@sixthshift/design-system/components";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+export const NavBottom = React.forwardRef(({ sections, isActive, renderLink, maxItems = 5, className }, ref) => {
+    const { Link } = useComponents();
+    const linkRenderer = renderLink ?? (({ to, ...rest }) => _jsx(Link, { href: to, ...rest }));
+    // Flatten all sections and limit to maxItems
+    const items = sections.flatMap((section) => section.items).slice(0, maxItems);
+    return (_jsx("nav", { ref: ref, className: cn("fixed inset-x-0 bottom-0 z-app-bar bg-bg-brand-strong text-fg-on-brand-strong", className), children: _jsx("ul", { className: "flex items-center justify-around", children: items.map((item) => {
+                const Icon = item.icon;
+                const active = isActive(item);
+                return (_jsx("li", { children: linkRenderer({
+                        to: item.to,
+                        className: cn("flex flex-col items-center gap-1 rounded-md px-3 py-2 text-xs", "hover:bg-bg-brand-hovered hover:text-fg-on-brand-hovered", active && "bg-bg-brand-pressed text-fg-on-brand-pressed"),
+                        children: (_jsxs(_Fragment, { children: [_jsx(Icon, { className: "h-5 w-5" }), _jsx("span", { children: item.label })] })),
+                    }) }, item.to));
+            }) }) }));
+});
+NavBottom.displayName = "NavBottom";
+//# sourceMappingURL=NavBottom.js.map

package/dist/components/NavBottom/NavBottom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBottom.js","sourceRoot":"","sources":["../../../src/components/NavBottom/NavBottom.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAA8B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1I,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAC;IACjC,MAAM,YAAY,GAAiB,UAAU,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,IAAI,GAAI,CAAC,CAAC;IACrG,6CAA6C;IAC7C,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IAE9E,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,+EAA+E,EAAE,SAAS,CAAC,YACtH,aAAI,SAAS,EAAC,kCAAkC,YAC7C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAClB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBACvB,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;gBAE9B,OAAO,CACL,uBACG,YAAY,CAAC;wBACZ,EAAE,EAAE,IAAI,CAAC,EAAE;wBACX,SAAS,EAAE,EAAE,CACX,+DAA+D,EAC/D,0DAA0D,EAC1D,MAAM,IAAI,8CAA8C,CACzD;wBACD,QAAQ,EAAE,CACR,8BACE,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAG,EAC5B,yBAAO,IAAI,CAAC,KAAK,GAAQ,IACxB,CACJ;qBACF,CAAC,IAdK,IAAI,CAAC,EAAE,CAeX,CACN,CAAC;YACJ,CAAC,CAAC,GACC,GACD,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

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

@@ -0,0 +1,3 @@
+export type { IconComponent, NavItem, NavSection, RenderLinkFn } from "../NavSide/index.js";
+export { NavBottom, type NavBottomProps } from "./NavBottom.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavBottom/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/NavBottom/index.js

@@ -0,0 +1,2 @@
+export { NavBottom } from "./NavBottom.js";
+//# sourceMappingURL=index.js.map

package/dist/components/NavBottom/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NavBottom/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC"}

package/dist/components/NavSide/NavItem.d.ts

@@ -0,0 +1,9 @@
+import type { NavItem as NavItemType, RenderLinkFn } from "./types.js";
+export type NavItemProps = {
+    item: NavItemType;
+    active: boolean;
+    expanded: boolean;
+    renderLink: RenderLinkFn;
+};
+export declare const NavItem: ({ item, active, expanded, renderLink }: NavItemProps) => import("react").JSX.Element;
+//# sourceMappingURL=NavItem.d.ts.map

package/dist/components/NavSide/NavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../../src/components/NavSide/NavItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpE,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,YAAY,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,OAAO,2CAA4C,YAAY,gCA4B3E,CAAC"}

package/dist/components/NavSide/NavItem.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@sixthshift/design-system/utils";
+export const NavItem = ({ item, active, expanded, renderLink }) => {
+    const Icon = item.icon;
+    return (_jsx(_Fragment, { children: renderLink({
+            to: item.to,
+            className: cn("flex items-center gap-3 rounded-md px-2 py-2 font-medium text-sm", "hover:bg-bg-brand-hovered hover:text-fg-on-brand-hovered", active && "bg-bg-brand-pressed text-fg-on-brand-pressed"),
+            // Only include title when collapsed (for tooltip)
+            ...(expanded ? {} : { title: item.label }),
+            children: (_jsxs(_Fragment, { children: [_jsx(Icon, { className: "h-6 w-6 shrink-0" }), expanded && _jsx("span", { className: "flex-1", children: item.label }), expanded && item.badge !== undefined && item.badge > 0 && (_jsx("span", { className: "flex min-w-5 items-center justify-center rounded-full bg-bg-on-brand/20 px-1.5 py-0.5 font-medium text-fg-on-brand text-xs tabular-nums", children: item.badge > 9 ? "9+" : item.badge }))] })),
+        }) }));
+};
+//# sourceMappingURL=NavItem.js.map

package/dist/components/NavSide/NavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.js","sourceRoot":"","sources":["../../../src/components/NavSide/NavItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAUrD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAgB,EAAE,EAAE;IAC9E,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IAEvB,OAAO,CACL,4BACG,UAAU,CAAC;YACV,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,SAAS,EAAE,EAAE,CACX,kEAAkE,EAClE,0DAA0D,EAC1D,MAAM,IAAI,8CAA8C,CACzD;YACD,kDAAkD;YAClD,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;YAC1C,QAAQ,EAAE,CACR,8BACE,KAAC,IAAI,IAAC,SAAS,EAAC,kBAAkB,GAAG,EACpC,QAAQ,IAAI,eAAM,SAAS,EAAC,QAAQ,YAAE,IAAI,CAAC,KAAK,GAAQ,EACxD,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CACzD,eAAM,SAAS,EAAC,yIAAyI,YACtJ,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAC9B,CACR,IACA,CACJ;SACF,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/NavSide/NavSide.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { NavItem as NavItemType, NavSection, RenderLinkFn } from "./types.js";
+export type NavSideProps = {
+    /** Navigation sections */
+    sections: NavSection[];
+    /** Whether the nav is expanded (shows labels) or collapsed (icons only) */
+    expanded?: boolean;
+    /** Callback to determine if an item is active */
+    isActive: (item: NavItemType) => boolean;
+    /** Render function for links (allows router integration). Falls back to ComponentsContext Link. */
+    renderLink?: RenderLinkFn;
+    /** Additional class names */
+    className?: string;
+};
+export declare const NavSide: React.ForwardRefExoticComponent<NavSideProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=NavSide.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavSide.d.ts","sourceRoot":"","sources":["../../../src/components/NavSide/NavSide.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEhF,MAAM,MAAM,YAAY,GAAG;IACzB,0BAA0B;IAC1B,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,mGAAmG;IACnG,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,OAAO,kFAqBlB,CAAC"}

package/dist/components/NavSide/NavSide.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponents } from "@sixthshift/design-system/components";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+import { NavItem } from "./NavItem.js";
+export const NavSide = React.forwardRef(({ sections, expanded = true, isActive, renderLink, className }, ref) => {
+    const { Link } = useComponents();
+    const linkRenderer = renderLink ?? (({ to, ...rest }) => _jsx(Link, { href: to, ...rest }));
+    return (_jsx("aside", { ref: ref, className: cn("flex flex-col bg-bg-brand-strong text-fg-on-brand-strong", expanded ? "w-48" : "w-16", className), children: _jsx("nav", { className: "flex-1 overflow-y-auto py-3", children: sections.map((section, sectionIndex) => (_jsxs("div", { children: [sectionIndex > 0 && _jsx("div", { className: "my-2 border-border-subtle border-t" }), _jsx("ul", { className: cn("flex flex-col gap-0.5 px-3"), children: section.items.map((item) => (_jsx("li", { children: _jsx(NavItem, { item: item, active: isActive(item), expanded: expanded, renderLink: linkRenderer }) }, item.to))) })] }, section.id))) }) }));
+});
+NavSide.displayName = "NavSide";
+//# sourceMappingURL=NavSide.js.map

package/dist/components/NavSide/NavSide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavSide.js","sourceRoot":"","sources":["../../../src/components/NavSide/NavSide.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAgBpC,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAA4B,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACzI,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAC;IACjC,MAAM,YAAY,GAAiB,UAAU,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,IAAI,GAAI,CAAC,CAAC;IACrG,OAAO,CACL,gBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,0DAA0D,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,YAC/H,cAAK,SAAS,EAAC,6BAA6B,YACzC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE,CAAC,CACvC,0BACG,YAAY,GAAG,CAAC,IAAI,cAAK,SAAS,EAAC,oCAAoC,GAAG,EAC3E,aAAI,SAAS,EAAE,EAAE,CAAC,4BAA4B,CAAC,YAC5C,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,uBACE,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,GAAI,IADtF,IAAI,CAAC,EAAE,CAEX,CACN,CAAC,GACC,KARG,OAAO,CAAC,EAAE,CASd,CACP,CAAC,GACE,GACA,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

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

@@ -0,0 +1,3 @@
+export { NavSide, type NavSideProps } from "./NavSide.js";
+export type { IconComponent, NavItem, NavSection, RenderLinkFn } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavSide/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/NavSide/index.js

@@ -0,0 +1,2 @@
+export { NavSide } from "./NavSide.js";
+//# sourceMappingURL=index.js.map

package/dist/components/NavSide/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NavSide/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC"}

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

@@ -0,0 +1,38 @@
+import type { ComponentType, ReactNode, SVGProps } from "react";
+/**
+ * Icon component type - compatible with lucide-react and similar icon libraries
+ */
+export type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+/**
+ * A single navigation item
+ */
+export type NavItem = {
+    /** Route path */
+    to: string;
+    /** Display label */
+    label: string;
+    /** Icon component (e.g., from lucide-react) */
+    icon: IconComponent;
+    /** Optional count badge (e.g. pending suggestions). Rendered when > 0. */
+    badge?: number;
+};
+/**
+ * A group of navigation items
+ */
+export type NavSection = {
+    /** Unique identifier for the section */
+    id: string;
+    /** Navigation items in this section */
+    items: NavItem[];
+};
+/**
+ * Render function for navigation links.
+ * Allows router-agnostic link rendering.
+ */
+export type RenderLinkFn = (props: {
+    to: string;
+    className: string;
+    title?: string;
+    children: ReactNode;
+}) => ReactNode;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/NavSide/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEnE;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG;IACpB,iBAAiB;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,EAAE,aAAa,CAAC;IACpB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,KAAK,EAAE,OAAO,EAAE,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,KAAK,SAAS,CAAC"}

package/dist/components/NavSide/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/NavSide/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/NavSide/types.ts"],"names":[],"mappings":""}

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+export type PaginationProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Current page index (0-based) */
+    page: number;
+    /** Number of items per page */
+    pageSize: number;
+    /** Total number of items */
+    total: number;
+    /** Called when page changes */
+    onPageChange: (page: number) => void;
+    /** Called when page size changes */
+    onPageSizeChange: (size: number) => void;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+    /** Label for rows per page (default: "Rows per page") */
+    rowsLabel?: string;
+};
+declare const Pagination: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /** Current page index (0-based) */
+    page: number;
+    /** Number of items per page */
+    pageSize: number;
+    /** Total number of items */
+    total: number;
+    /** Called when page changes */
+    onPageChange: (page: number) => void;
+    /** Called when page size changes */
+    onPageSizeChange: (size: number) => void;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+    /** Label for rows per page (default: "Rows per page") */
+    rowsLabel?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Pagination };
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACnE,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,oCAAoC;IACpC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,UAAU;IAhBd,mCAAmC;UAC7B,MAAM;IACZ,+BAA+B;cACrB,MAAM;IAChB,4BAA4B;WACrB,MAAM;IACb,+BAA+B;kBACjB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACpC,oCAAoC;sBAClB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACxC,kCAAkC;sBAChB,MAAM,EAAE;IAC1B,yDAAyD;gBAC7C,MAAM;wCA4DnB,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,CAAC"}