@castui/cast-ui 4.6.0 → 4.8.0

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Breadcrumbs — a trail showing where the user is in a hierarchy.
+ *
+ * Compound component. <Breadcrumbs> lays out the row and draws a separator
+ * between items; <Breadcrumb> is one entry. The last item (or any item with
+ * `current`) renders as plain text; the rest are pressable links.
+ *
+ *   <Breadcrumbs>
+ *     <Breadcrumb onPress={goHome}>Home</Breadcrumb>
+ *     <Breadcrumb onPress={goLibrary}>Library</Breadcrumb>
+ *     <Breadcrumb current>This page</Breadcrumb>
+ *   </Breadcrumbs>
+ *
+ * Maps 1:1 to the Figma <Breadcrumbs> component:
+ *   size → small | default | large   (typography + icon size + gap)
+ *   separator → the glyph or string drawn between items (default chevron_right)
+ *
+ * Colours: link items use the brand subtle fg and text/primary on hover; the
+ * current item uses text/primary; separators use text/description; disabled
+ * uses the shared disabled fg. The one spacing token is breadcrumbs/{size}/gap
+ * (density-varying), used as the row gap between every item and separator, and
+ * as the gap between a leading icon and its label. Labels render through the
+ * shared <Text> component, so Breadcrumbs inherits the type ramp.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle, type GestureResponderEvent } from 'react-native';
+export type BreadcrumbsSize = 'small' | 'default' | 'large';
+export type BreadcrumbsProps = {
+    /** `<Breadcrumb>` children. */
+    children: React.ReactNode;
+    /**
+     * Separator between items. A Material Symbols name (e.g. "chevron_right") is
+     * drawn as an icon; any other string (e.g. "/") is drawn as text. A ReactNode
+     * is rendered as-is. Defaults to "chevron_right".
+     */
+    separator?: string | React.ReactNode;
+    /** Size variant — typography scale, icon size, and gap. */
+    size?: BreadcrumbsSize;
+    /** Outer style. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the trail. */
+    accessibilityLabel?: string;
+};
+export type BreadcrumbProps = {
+    /** The item text. */
+    children: string;
+    /** Press handler — omit on the current item. */
+    onPress?: (e: GestureResponderEvent) => void;
+    /** Marks this as the current page — renders as plain text, not a link. */
+    current?: boolean;
+    /** Disables the link. */
+    disabled?: boolean;
+    /** Icon before the label — Material Symbols name string or a ReactNode. */
+    leadingIcon?: string | React.ReactNode;
+    /** Destination URL. Renders a real anchor on web; informational on native. */
+    href?: string;
+    /** Accessibility label — falls back to the item text. */
+    accessibilityLabel?: string;
+    /** Internal: set by <Breadcrumbs> on the final item. */
+    __isLast?: boolean;
+};
+export declare function Breadcrumb({ children, onPress, current, disabled, leadingIcon, href, accessibilityLabel, __isLast, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumbs({ children, separator, size, style, accessibilityLabel, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,143 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumb = Breadcrumb;
+exports.Breadcrumbs = Breadcrumbs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Breadcrumbs — a trail showing where the user is in a hierarchy.
+ *
+ * Compound component. <Breadcrumbs> lays out the row and draws a separator
+ * between items; <Breadcrumb> is one entry. The last item (or any item with
+ * `current`) renders as plain text; the rest are pressable links.
+ *
+ *   <Breadcrumbs>
+ *     <Breadcrumb onPress={goHome}>Home</Breadcrumb>
+ *     <Breadcrumb onPress={goLibrary}>Library</Breadcrumb>
+ *     <Breadcrumb current>This page</Breadcrumb>
+ *   </Breadcrumbs>
+ *
+ * Maps 1:1 to the Figma <Breadcrumbs> component:
+ *   size → small | default | large   (typography + icon size + gap)
+ *   separator → the glyph or string drawn between items (default chevron_right)
+ *
+ * Colours: link items use the brand subtle fg and text/primary on hover; the
+ * current item uses text/primary; separators use text/description; disabled
+ * uses the shared disabled fg. The one spacing token is breadcrumbs/{size}/gap
+ * (density-varying), used as the row gap between every item and separator, and
+ * as the gap between a leading icon and its label. Labels render through the
+ * shared <Text> component, so Breadcrumbs inherits the type ramp.
+ */
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const Text_1 = require("../Text");
+const Icon_1 = require("../Icon");
+const BreadcrumbsCtx = (0, react_1.createContext)(null);
+function useBreadcrumbsContext(component) {
+    const ctx = (0, react_1.useContext)(BreadcrumbsCtx);
+    if (!ctx) {
+        throw new Error(`<${component}> must be used within <Breadcrumbs>`);
+    }
+    return ctx;
+}
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps size → label typography scale (Text component `type`). */
+const LABEL_TYPE = {
+    small: 'body-sm',
+    default: 'body-md',
+    large: 'body-lg',
+};
+/** Maps size → named Icon scale for separators and leading icons. */
+const ICON_SIZE = {
+    small: 'xs',
+    default: 'small',
+    large: 'default',
+};
+/** A bare lowercase/underscore token is treated as a Material Symbols name. */
+const isSymbolName = (s) => /^[a-z0-9_]+$/.test(s);
+// ---------------------------------------------------------------------------
+// Breadcrumb
+// ---------------------------------------------------------------------------
+function Breadcrumb({ children, onPress, current = false, disabled = false, leadingIcon, href, accessibilityLabel, __isLast = false, }) {
+    const { size, gap } = useBreadcrumbsContext('Breadcrumb');
+    const { colors, scheme } = (0, theme_1.useTheme)();
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const isCurrent = current || __isLast;
+    const linkFg = colors.brand.subtle.default.fg;
+    const fg = disabled
+        ? scheme.disabled.fg
+        : isCurrent
+            ? scheme.text.primary
+            : isHovered
+                ? scheme.text.primary
+                : linkFg;
+    const showUnderline = !isCurrent && !disabled && isHovered;
+    const resolvedIcon = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE[size], color: fg })) : (leadingIcon);
+    const content = ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row', alignItems: 'center', gap }, children: [resolvedIcon, (0, jsx_runtime_1.jsx)(Text_1.Text, { type: LABEL_TYPE[size], color: fg, selectable: false, style: { textDecorationLine: showUnderline ? 'underline' : 'none' }, children: children })] }));
+    if (isCurrent) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "text", accessibilityState: { selected: true }, accessibilityLabel: accessibilityLabel || children, ...{ 'aria-current': 'page' }, children: content }));
+    }
+    const hrefProps = href ? { href } : {};
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...hrefProps, onPress: disabled ? undefined : onPress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: "link", accessibilityLabel: accessibilityLabel || children, accessibilityState: { disabled }, children: content }));
+}
+// ---------------------------------------------------------------------------
+// Breadcrumbs
+// ---------------------------------------------------------------------------
+function Breadcrumbs({ children, separator = 'chevron_right', size = 'default', style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const { gap } = components.breadcrumbs[size];
+    const items = react_1.default.Children.toArray(children).filter(Boolean);
+    const lastIndex = items.length - 1;
+    const separatorNode = typeof separator === 'string' ? (isSymbolName(separator) ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: separator, size: ICON_SIZE[size], color: scheme.text.description })) : ((0, jsx_runtime_1.jsx)(Text_1.Text, { type: LABEL_TYPE[size], color: scheme.text.description, selectable: false, children: separator }))) : (separator);
+    const rendered = [];
+    items.forEach((child, i) => {
+        rendered.push(react_1.default.cloneElement(child, { key: `item-${i}`, __isLast: i === lastIndex }));
+        if (i < lastIndex) {
+            rendered.push((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: separatorNode }, `sep-${i}`));
+        }
+    });
+    return ((0, jsx_runtime_1.jsx)(BreadcrumbsCtx.Provider, { value: { size, gap }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityLabel: accessibilityLabel || 'Breadcrumb', style: [
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                    gap,
+                },
+                style,
+            ], children: rendered }) }));
+}

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

@@ -0,0 +1 @@
+export { Breadcrumbs, Breadcrumb, type BreadcrumbsProps, type BreadcrumbProps, type BreadcrumbsSize, } from './Breadcrumbs';

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumb = exports.Breadcrumbs = void 0;
+var Breadcrumbs_1 = require("./Breadcrumbs");
+Object.defineProperty(exports, "Breadcrumbs", { enumerable: true, get: function () { return Breadcrumbs_1.Breadcrumbs; } });
+Object.defineProperty(exports, "Breadcrumb", { enumerable: true, get: function () { return Breadcrumbs_1.Breadcrumb; } });

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,42 @@
+/**
+ * CodeBlock — a block of monospaced code on a subtle surface.
+ *
+ * Maps 1:1 to the Figma <CodeBlock> component (code-block):
+ *   size → small | default | large   (padding, gap, mono type scale)
+ *
+ * Renders code in JetBrains Mono via the mono font family. An optional header
+ * row shows a title/filename and a language tag; an optional copy button copies
+ * the code. Copy uses the web Clipboard API when available, so the package keeps
+ * zero dependencies, and always calls the `onCopy` callback so a native host can
+ * wire its own clipboard. Optional line numbers render in a muted gutter. Long
+ * lines scroll horizontally rather than wrapping.
+ *
+ * Colours: the surface is surface/subtle with the shared overlay border; code
+ * text is text/primary; the gutter, title, language tag, and copy icon use
+ * text/description. Tokens: code-block/{size}/{padding,gap} (density-varying)
+ * and a constant code-block/border-radius. Typography uses the body scale in the
+ * mono family, constant across densities. Fonts are consumer-loaded.
+ */
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type CodeBlockSize = 'small' | 'default' | 'large';
+export type CodeBlockProps = {
+    /** The code to display. Newlines split into lines. */
+    children: string;
+    /** Size variant — controls padding, gap, and the mono type scale. */
+    size?: CodeBlockSize;
+    /** Language tag shown in the header (e.g. "tsx"). Display only. */
+    language?: string;
+    /** Title/filename shown in the header. */
+    title?: string;
+    /** Show the copy button. Defaults to true. */
+    showCopy?: boolean;
+    /** Show a line-number gutter. Defaults to false. */
+    showLineNumbers?: boolean;
+    /** Called with the code when the copy button is pressed. */
+    onCopy?: (code: string) => void;
+    /** Outer style — use for positioning (margin, width, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label. */
+    accessibilityLabel?: string;
+};
+export declare function CodeBlock({ children, size, language, title, showCopy, showLineNumbers, onCopy, style, accessibilityLabel, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = CodeBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * CodeBlock — a block of monospaced code on a subtle surface.
+ *
+ * Maps 1:1 to the Figma <CodeBlock> component (code-block):
+ *   size → small | default | large   (padding, gap, mono type scale)
+ *
+ * Renders code in JetBrains Mono via the mono font family. An optional header
+ * row shows a title/filename and a language tag; an optional copy button copies
+ * the code. Copy uses the web Clipboard API when available, so the package keeps
+ * zero dependencies, and always calls the `onCopy` callback so a native host can
+ * wire its own clipboard. Optional line numbers render in a muted gutter. Long
+ * lines scroll horizontally rather than wrapping.
+ *
+ * Colours: the surface is surface/subtle with the shared overlay border; code
+ * text is text/primary; the gutter, title, language tag, and copy icon use
+ * text/description. Tokens: code-block/{size}/{padding,gap} (density-varying)
+ * and a constant code-block/border-radius. Typography uses the body scale in the
+ * mono family, constant across densities. Fonts are consumer-loaded.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+const Icon_1 = require("../Icon");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps size → body typography scale (rendered in the mono family). */
+const MONO_SCALE = {
+    small: tokens_1.body.sm,
+    default: tokens_1.body.md,
+    large: tokens_1.body.lg,
+};
+/** How long the "copied" check stays visible. */
+const COPIED_RESET_MS = 1500;
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function CodeBlock({ children, size = 'default', language, title, showCopy = true, showLineNumbers = false, onCopy, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const tokens = components.codeBlock[size];
+    const radius = components.codeBlock.borderRadius;
+    const mono = MONO_SCALE[size];
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const handleCopy = (0, react_1.useCallback)(() => {
+        try {
+            if (typeof navigator !== 'undefined' &&
+                navigator.clipboard &&
+                typeof navigator.clipboard.writeText === 'function') {
+                navigator.clipboard.writeText(children);
+            }
+        }
+        catch {
+            // Clipboard unavailable (native / insecure context) — onCopy still fires.
+        }
+        onCopy?.(children);
+        setCopied(true);
+        setTimeout(() => setCopied(false), COPIED_RESET_MS);
+    }, [children, onCopy]);
+    const lines = children.split('\n');
+    const gutterDigits = String(lines.length).length;
+    const codeTextStyle = {
+        fontFamily: tokens_1.fontFamily.mono,
+        fontWeight: tokens_1.fontWeight.regular,
+        fontSize: mono.fontSize,
+        lineHeight: mono.lineHeight,
+        color: scheme.text.primary,
+    };
+    const showHeader = Boolean(title) || Boolean(language) || showCopy;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityLabel: accessibilityLabel || title || 'Code block', style: [
+            {
+                backgroundColor: scheme.surface.subtle,
+                borderWidth: 1,
+                borderColor: scheme.surface.overlay.border,
+                borderRadius: radius,
+                padding: tokens.padding,
+                gap: tokens.gap,
+            },
+            style,
+        ], children: [showHeader ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: tokens.gap,
+                }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row', alignItems: 'center', gap: tokens.gap, flexShrink: 1 }, children: [title ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: {
+                                    fontFamily: tokens_1.fontFamily.mono,
+                                    fontWeight: tokens_1.fontWeight.medium,
+                                    fontSize: tokens_1.body.sm.fontSize,
+                                    lineHeight: tokens_1.body.sm.lineHeight,
+                                    color: scheme.text.description,
+                                }, children: title })) : null, language ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                                    fontFamily: tokens_1.fontFamily.mono,
+                                    fontWeight: tokens_1.fontWeight.medium,
+                                    fontSize: tokens_1.caption.fontSize,
+                                    lineHeight: tokens_1.caption.lineHeight,
+                                    letterSpacing: tokens_1.caption.letterSpacing,
+                                    color: scheme.text.description,
+                                    textTransform: 'uppercase',
+                                }, children: language })) : null] }), showCopy ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: handleCopy, accessibilityRole: "button", accessibilityLabel: copied ? 'Copied' : 'Copy code', hitSlop: 8, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: copied ? 'check' : 'content_copy', size: "small", color: copied ? scheme.text.primary : scheme.text.description }) })) : null] })) : null, (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, bounces: false, children: showLineNumbers ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: lines.map((line, i) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: false, style: {
+                                    ...codeTextStyle,
+                                    color: scheme.text.description,
+                                    textAlign: 'right',
+                                    minWidth: gutterDigits * (mono.fontSize * 0.62),
+                                    marginRight: tokens.gap,
+                                }, children: String(i + 1) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: true, style: codeTextStyle, children: line.length ? line : ' ' })] }, i))) })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: true, style: codeTextStyle, children: children })) })] }));
+}

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

@@ -0,0 +1 @@
+export { CodeBlock, type CodeBlockProps, type CodeBlockSize } from './CodeBlock';

package/dist/components/CodeBlock/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = void 0;
+var CodeBlock_1 = require("./CodeBlock");
+Object.defineProperty(exports, "CodeBlock", { enumerable: true, get: function () { return CodeBlock_1.CodeBlock; } });

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Drawer — a panel that slides in from an edge of the screen.
+ *
+ * Maps to the Figma <Drawer> component. Like BottomSheet, but anchored to any
+ * edge: left and right give a vertical side panel (default 320 wide, full
+ * height); top and bottom give a horizontal panel (full width, hugging content
+ * up to ~90% of the screen). Spacing (padding, gap) comes from the density
+ * theme. The panel is square (no corner radius), like a standard edge drawer,
+ * with a single border and shadow on the inner edge.
+ *
+ * Interaction model matches BottomSheet: slide in on open, slide out on close,
+ * the scrim fades with it. There is no finger dragging, so web and native behave
+ * the same. Dismiss by pressing the scrim (when enabled) or calling onClose.
+ *
+ * Structure: scrim backdrop -> panel (optional title + scrolling content). The
+ * panel surface reuses the shared overlay tokens; the scrim reuses
+ * overlay.scrimOpacity. Fonts are consumer-loaded (Inter).
+ *
+ * Exports:
+ *   Drawer        — full modal (scrim + animated panel)
+ *   DrawerContent — just the panel, for inline use or static stories
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerContentProps = {
+    /** Which edge the panel is anchored to. Defaults to "left". */
+    anchor?: DrawerAnchor;
+    /** Heading shown above the content. Optional. */
+    title?: string;
+    /** Panel content. */
+    children?: React.ReactNode;
+    /** Style override for the panel (e.g. set a custom width). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label. Falls back to the title. */
+    accessibilityLabel?: string;
+};
+export type DrawerProps = DrawerContentProps & {
+    /** Controls visibility. */
+    open: boolean;
+    /** Called when the scrim is pressed or the panel requests close. */
+    onClose?: () => void;
+    /** Dismiss when the scrim is pressed. Defaults to true. */
+    closeOnBackdropPress?: boolean;
+};
+/**
+ * The panel rendered inline. No modal, no scrim, no animation. Use this for
+ * static display (Storybook visual stories) or custom overlay implementations.
+ */
+export declare function DrawerContent({ anchor, title: titleText, children, style, accessibilityLabel, }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ open, onClose, closeOnBackdropPress, anchor, ...contentProps }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerContent = DrawerContent;
+exports.Drawer = Drawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Drawer — a panel that slides in from an edge of the screen.
+ *
+ * Maps to the Figma <Drawer> component. Like BottomSheet, but anchored to any
+ * edge: left and right give a vertical side panel (default 320 wide, full
+ * height); top and bottom give a horizontal panel (full width, hugging content
+ * up to ~90% of the screen). Spacing (padding, gap) comes from the density
+ * theme. The panel is square (no corner radius), like a standard edge drawer,
+ * with a single border and shadow on the inner edge.
+ *
+ * Interaction model matches BottomSheet: slide in on open, slide out on close,
+ * the scrim fades with it. There is no finger dragging, so web and native behave
+ * the same. Dismiss by pressing the scrim (when enabled) or calling onClose.
+ *
+ * Structure: scrim backdrop -> panel (optional title + scrolling content). The
+ * panel surface reuses the shared overlay tokens; the scrim reuses
+ * overlay.scrimOpacity. Fonts are consumer-loaded (Inter).
+ *
+ * Exports:
+ *   Drawer        — full modal (scrim + animated panel)
+ *   DrawerContent — just the panel, for inline use or static stories
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Default width of a left/right panel. Override via `style`. */
+const DEFAULT_WIDTH = 320;
+/** Top/bottom panels never grow past this share of the screen height. */
+const MAX_HEIGHT_RATIO = 0.9;
+/** Animation timing. */
+const DURATION = 240;
+/** react-native-web does not support the native animation driver. */
+const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
+const SHADOW_WEB = {
+    boxShadow: '0px 0px 6px rgba(0,0,0,0.04), 0px 0px 15px rgba(0,0,0,0.08)',
+};
+const SHADOW_NATIVE = {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.12,
+    shadowRadius: 15,
+    elevation: 16,
+};
+const isHorizontal = (a) => a === 'left' || a === 'right';
+// ---------------------------------------------------------------------------
+// DrawerContent — the panel, without modal/scrim/animation
+// ---------------------------------------------------------------------------
+/**
+ * The panel rendered inline. No modal, no scrim, no animation. Use this for
+ * static display (Storybook visual stories) or custom overlay implementations.
+ */
+function DrawerContent({ anchor = 'left', title: titleText, children, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const tokens = components.drawer;
+    const surface = scheme.surface;
+    const titleTokens = tokens_1.title.md;
+    const horizontal = isHorizontal(anchor);
+    // One border + shadow on the inner edge (the edge facing the content area).
+    const edgeBorder = anchor === 'left'
+        ? { borderRightWidth: 1 }
+        : anchor === 'right'
+            ? { borderLeftWidth: 1 }
+            : anchor === 'top'
+                ? { borderBottomWidth: 1 }
+                : { borderTopWidth: 1 };
+    const sizing = horizontal
+        ? { width: DEFAULT_WIDTH, maxWidth: '100%', height: '100%' }
+        : { width: '100%', maxHeight: `${MAX_HEIGHT_RATIO * 100}%` };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityViewIsModal: true, accessibilityLabel: accessibilityLabel || titleText, style: [
+            {
+                backgroundColor: surface.overlay.bg,
+                borderColor: surface.overlay.border,
+                ...edgeBorder,
+                padding: tokens.padding,
+                ...(react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
+            },
+            sizing,
+            style,
+        ], children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { bounces: false, showsVerticalScrollIndicator: false, contentContainerStyle: { gap: tokens.gap }, style: { flexGrow: 0, flexShrink: 1 }, children: [titleText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "header", style: {
+                        fontFamily: tokens_1.fontFamily.sans,
+                        fontWeight: tokens_1.fontWeight.medium,
+                        fontSize: titleTokens.fontSize,
+                        lineHeight: titleTokens.lineHeight,
+                        letterSpacing: titleTokens.letterSpacing,
+                        color: scheme.text.primary,
+                    }, children: titleText })) : null, children] }) }));
+}
+// ---------------------------------------------------------------------------
+// Drawer — full modal with scrim and slide animation
+// ---------------------------------------------------------------------------
+function Drawer({ open, onClose, closeOnBackdropPress = true, anchor = 'left', ...contentProps }) {
+    const { scheme } = (0, theme_1.useTheme)();
+    const scrimOpacity = scheme.overlay.scrimOpacity;
+    const screen = react_native_1.Dimensions.get('window');
+    const horizontal = isHorizontal(anchor);
+    const distance = horizontal ? screen.width : screen.height;
+    const sign = anchor === 'left' || anchor === 'top' ? -1 : 1;
+    const offset = (0, react_1.useRef)(new react_native_1.Animated.Value(distance * sign)).current;
+    const backdrop = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const [mounted, setMounted] = (0, react_1.useState)(open);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setMounted(true);
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.timing(backdrop, {
+                    toValue: 1,
+                    duration: DURATION,
+                    useNativeDriver: USE_NATIVE_DRIVER,
+                }),
+                react_native_1.Animated.spring(offset, {
+                    toValue: 0,
+                    damping: 24,
+                    stiffness: 240,
+                    mass: 0.9,
+                    useNativeDriver: USE_NATIVE_DRIVER,
+                }),
+            ]).start();
+        }
+        else if (mounted) {
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.timing(backdrop, {
+                    toValue: 0,
+                    duration: DURATION,
+                    useNativeDriver: USE_NATIVE_DRIVER,
+                }),
+                react_native_1.Animated.timing(offset, {
+                    toValue: distance * sign,
+                    duration: DURATION,
+                    useNativeDriver: USE_NATIVE_DRIVER,
+                }),
+            ]).start(({ finished }) => {
+                if (finished)
+                    setMounted(false);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    if (!mounted)
+        return null;
+    const rootAlign = horizontal
+        ? { flexDirection: 'row', justifyContent: anchor === 'left' ? 'flex-start' : 'flex-end' }
+        : { flexDirection: 'column', justifyContent: anchor === 'top' ? 'flex-start' : 'flex-end' };
+    const transform = horizontal ? [{ translateX: offset }] : [{ translateY: offset }];
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: mounted, transparent: true, animationType: "none", onRequestClose: onClose, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, ...rootAlign }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundColor: '#000000',
+                        opacity: backdrop.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [0, scrimOpacity],
+                        }),
+                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: { flex: 1 }, disabled: !closeOnBackdropPress, onPress: closeOnBackdropPress ? onClose : undefined, accessibilityRole: "button", accessibilityLabel: "Close drawer" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+                        transform,
+                        ...(horizontal ? { height: '100%' } : { width: '100%' }),
+                    }, children: (0, jsx_runtime_1.jsx)(DrawerContent, { anchor: anchor, ...contentProps }) })] }) }));
+}

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

@@ -0,0 +1 @@
+export { Drawer, DrawerContent, type DrawerProps, type DrawerContentProps, type DrawerAnchor, } from './Drawer';

package/dist/components/Drawer/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerContent = exports.Drawer = void 0;
+var Drawer_1 = require("./Drawer");
+Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return Drawer_1.Drawer; } });
+Object.defineProperty(exports, "DrawerContent", { enumerable: true, get: function () { return Drawer_1.DrawerContent; } });