kang-components 0.6.0 → 0.9.0

package/dist/badge.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Badge — a domain-free pill that displays a prominent value with an optional
+ * label, in one of a few visual variants.
+ *
+ * Ported from ymy-components (`./badge/Badge`), where it lived as a 3-file unit
+ * (`Badge.tsx` + `Badge.types.ts` + `Badge.styles.ts`) and shipped untested.
+ * The kang port collapses it into a single flat-ESM module and preserves the
+ * public API exactly (`value`, `label`, `variant`), so xunzi's re-point site
+ * (`StreakBadge.tsx`) is a pure import swap.
+ *
+ * Theming follows kang conventions: every color reads a styled-components
+ * `theme.colors.*` token with a literal fallback, so the badge adapts to a
+ * `ThemeProvider` (light/dark) yet still renders sensibly without one. The ymy
+ * source hardcoded the `success` variant's green; the kang port routes it
+ * through the theme's `successContainer`/`successDark` tokens (same literal
+ * fallbacks) so it matches mode like every other variant.
+ *
+ * `styled-components` and `react` are the only things this module pulls in.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+export type BadgeVariant = 'primary' | 'muted' | 'success';
+export interface BadgeProps {
+    /** The primary value displayed prominently. */
+    value: ReactNode;
+    /** Optional label displayed next to the value (rendered uppercase). */
+    label?: string;
+    /** Visual variant (default: `'primary'`). */
+    variant?: BadgeVariant;
+    /** Optional class name passthrough for layout/positioning by the consumer. */
+    className?: string;
+}
+export declare function Badge({ value, label, variant, className, }: BadgeProps): ReactElement;
+export default Badge;
+//# sourceMappingURL=badge.d.ts.map

package/dist/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../src/badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE3D,MAAM,WAAW,UAAU;IAC1B,+CAA+C;IAC/C,KAAK,EAAE,SAAS,CAAC;IACjB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAiDD,wBAAgB,KAAK,CAAC,EACrB,KAAK,EACL,KAAK,EACL,OAAmB,EACnB,SAAS,GACT,EAAE,UAAU,GAAG,YAAY,CAO3B;AAED,eAAe,KAAK,CAAC"}

package/dist/badge.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled, css } from 'styled-components';
+const containerVariant = {
+    primary: css `
+		background: ${({ theme }) => theme?.colors?.whiteLow ?? 'rgba(255, 255, 255, 0.2)'};
+	`,
+    muted: css `
+		background: ${({ theme }) => theme?.colors?.surfaceVariant ?? 'rgba(0, 0, 0, 0.06)'};
+	`,
+    success: css `
+		background: ${({ theme }) => theme?.colors?.successContainer ?? 'rgba(34, 197, 94, 0.15)'};
+	`,
+};
+const BadgeContainer = styled.div `
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.25rem;
+	padding: 0.75rem 1rem;
+	border-radius: 1rem;
+	min-width: 4rem;
+	${({ $variant }) => containerVariant[$variant]}
+`;
+const BadgeValue = styled.span `
+	font-size: 1.25rem;
+	font-weight: 600;
+	line-height: 1;
+	color: ${({ $variant, theme }) => {
+    const colors = theme?.colors;
+    if ($variant === 'success')
+        return colors?.successDark ?? '#16a34a';
+    return colors?.primaryDarker ?? colors?.primary ?? '#333';
+}};
+`;
+const BadgeLabel = styled.span `
+	font-size: 0.625rem;
+	font-weight: 500;
+	color: ${({ theme }) => theme?.colors?.onSurface ?? '#333'};
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+`;
+export function Badge({ value, label, variant = 'primary', className, }) {
+    return (_jsxs(BadgeContainer, { "$variant": variant, className: className, children: [_jsx(BadgeValue, { "$variant": variant, children: value }), label && _jsx(BadgeLabel, { children: label })] }));
+}
+export default Badge;
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../src/badge.tsx"],"names":[],"mappings":";AAqBA,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAiBhD,MAAM,gBAAgB,GAAG;IACxB,OAAO,EAAE,GAAG,CAAA;gBACG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1B,KAAqB,EAAE,MAAM,EAAE,QAAQ,IAAI,0BAA0B;EACvE;IACD,KAAK,EAAE,GAAG,CAAA;gBACK,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1B,KAAqB,EAAE,MAAM,EAAE,cAAc,IAAI,qBAAqB;EACxE;IACD,OAAO,EAAE,GAAG,CAAA;gBACG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1B,KAAqB,EAAE,MAAM,EAAE,gBAAgB,IAAI,yBAAyB;EAC9E;CACD,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAA4B;;;;;;;;GAQ1D,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;CAC9C,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAA4B;;;;UAIhD,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAChC,MAAM,MAAM,GAAI,KAAqB,EAAE,MAAM,CAAC;IAC9C,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,MAAM,EAAE,WAAW,IAAI,SAAS,CAAC;IACpE,OAAO,MAAM,EAAE,aAAa,IAAI,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC;AAC3D,CAAC;CACD,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA;;;UAGpB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAE,KAAqB,EAAE,MAAM,EAAE,SAAS,IAAI,MAAM;;;CAG3E,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,EACrB,KAAK,EACL,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,SAAS,GACG;IACZ,OAAO,CACN,MAAC,cAAc,gBAAW,OAAO,EAAE,SAAS,EAAE,SAAS,aACtD,KAAC,UAAU,gBAAW,OAAO,YAAG,KAAK,GAAc,EAClD,KAAK,IAAI,KAAC,UAAU,cAAE,KAAK,GAAc,IAC1B,CACjB,CAAC;AACH,CAAC;AAED,eAAe,KAAK,CAAC"}

package/dist/bottom-sheet.d.ts

@@ -0,0 +1,60 @@
+/**
+ * BottomSheet — a draggable bottom-sheet modal with gesture support.
+ *
+ * Ported faithfully from ymy-components (`./bottom-sheet/BottomSheet`). The public
+ * API (`BottomSheetProps`) is preserved 1:1 so xunzi's single re-point site
+ * (`src/views/bottom-sheet/BottomSheet.tsx`, imported as `LibraryBottomSheet`) is a
+ * pure import swap.
+ *
+ * Behavior: an overlay + a panel that slides up from the bottom. The handle area
+ * is draggable (rubber-band physics dragging up, velocity- or distance-based
+ * swipe-to-close dragging down). Clicking the overlay or swiping past the close
+ * threshold calls `onClose`. The component owns a `shouldRender` flag so it can
+ * play the slide-out animation before unmounting, and fires `onExitComplete` once
+ * the close actually finishes (an interrupted close — reopened mid-animation —
+ * does NOT unmount or fire the callback).
+ *
+ * ⚠️ onExitComplete / onClose stability (the historically fragile part):
+ * ymy listed `onExitComplete` in the deps of the effect driving the open/close
+ * spring, so a consumer passing a fresh inline callback every render re-ran that
+ * effect on every parent re-render — snapping the sheet off-screen then back
+ * (jitter), and, when several landed in a row, leaving it off-screen long enough
+ * to look like it self-closed (xunzi worked around this by forcing a stable
+ * `useCallback`). Kang removes that footgun: the latest `onExitComplete` and
+ * `onClose` are stashed in refs and read from the spring's `onRest` / drag-release
+ * handler, so a new callback identity NEVER re-kicks the open/close spring. The
+ * open/close effect depends ONLY on `isOpen` (+ `maxHeight`/`api`), which are the
+ * things that should actually drive it. See the regression test.
+ *
+ * Theming: surface / scrim / outline / radius / padding read off styled-components'
+ * `props.theme` tokens (assembled by kang's `buildTheme`), with the same literal
+ * fallbacks ymy shipped so it renders sensibly with or without a `ThemeProvider`.
+ * `styled-components`, `@react-spring/web` and `@use-gesture/react` are optional
+ * peer dependencies, used only by this module.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+export interface BottomSheetProps {
+    /** Whether the sheet is open */
+    isOpen: boolean;
+    /** Callback when the sheet should close */
+    onClose: () => void;
+    /** Content to render inside the sheet */
+    children: ReactNode;
+    /** Accessible title for screen readers */
+    title?: string;
+    /** Max height of the sheet (default: 300) */
+    maxHeight?: number;
+    /** Velocity threshold for swipe-to-close in px/ms (default: 0.4) */
+    velocityThreshold?: number;
+    /** Percentage of height drag required to close (default: 0.25) */
+    closeThreshold?: number;
+    /** Fires after the close animation finishes (use for cleanup like clearing content) */
+    onExitComplete?: () => void;
+}
+/**
+ * Draggable bottom sheet modal with gesture support.
+ * Features rubber-band physics, velocity-based swipe detection, and smooth animations.
+ */
+export declare function BottomSheet({ isOpen, onClose, children, title, maxHeight, velocityThreshold, closeThreshold, onExitComplete, }: BottomSheetProps): ReactElement;
+export default BottomSheet;
+//# sourceMappingURL=bottom-sheet.d.ts.map

package/dist/bottom-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-sheet.d.ts","sourceRoot":"","sources":["../src/bottom-sheet.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EACN,KAAK,YAAY,EACjB,KAAK,SAAS,EAKd,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,gBAAgB;IAChC,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uFAAuF;IACvF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAkED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,KAAsB,EACtB,SAAe,EACf,iBAAuB,EACvB,cAAqB,EACrB,cAAc,GACd,EAAE,gBAAgB,GAAG,YAAY,CAkJjC;AAED,eAAe,WAAW,CAAC"}

package/dist/bottom-sheet.js

@@ -0,0 +1,201 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BottomSheet — a draggable bottom-sheet modal with gesture support.
+ *
+ * Ported faithfully from ymy-components (`./bottom-sheet/BottomSheet`). The public
+ * API (`BottomSheetProps`) is preserved 1:1 so xunzi's single re-point site
+ * (`src/views/bottom-sheet/BottomSheet.tsx`, imported as `LibraryBottomSheet`) is a
+ * pure import swap.
+ *
+ * Behavior: an overlay + a panel that slides up from the bottom. The handle area
+ * is draggable (rubber-band physics dragging up, velocity- or distance-based
+ * swipe-to-close dragging down). Clicking the overlay or swiping past the close
+ * threshold calls `onClose`. The component owns a `shouldRender` flag so it can
+ * play the slide-out animation before unmounting, and fires `onExitComplete` once
+ * the close actually finishes (an interrupted close — reopened mid-animation —
+ * does NOT unmount or fire the callback).
+ *
+ * ⚠️ onExitComplete / onClose stability (the historically fragile part):
+ * ymy listed `onExitComplete` in the deps of the effect driving the open/close
+ * spring, so a consumer passing a fresh inline callback every render re-ran that
+ * effect on every parent re-render — snapping the sheet off-screen then back
+ * (jitter), and, when several landed in a row, leaving it off-screen long enough
+ * to look like it self-closed (xunzi worked around this by forcing a stable
+ * `useCallback`). Kang removes that footgun: the latest `onExitComplete` and
+ * `onClose` are stashed in refs and read from the spring's `onRest` / drag-release
+ * handler, so a new callback identity NEVER re-kicks the open/close spring. The
+ * open/close effect depends ONLY on `isOpen` (+ `maxHeight`/`api`), which are the
+ * things that should actually drive it. See the regression test.
+ *
+ * Theming: surface / scrim / outline / radius / padding read off styled-components'
+ * `props.theme` tokens (assembled by kang's `buildTheme`), with the same literal
+ * fallbacks ymy shipped so it renders sensibly with or without a `ThemeProvider`.
+ * `styled-components`, `@react-spring/web` and `@use-gesture/react` are optional
+ * peer dependencies, used only by this module.
+ */
+import { useRef, useEffect, useCallback, useState, } from 'react';
+import { useSpring, animated } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+// Named import (not the default) so styled-components resolves consistently
+// across bundler and raw ESM/CJS environments — matches the other styled
+// kang primitives (ripple.ts, toggle-switch.tsx).
+import { styled } from 'styled-components';
+const colors = (theme) => theme?.colors ?? {};
+const styling = (theme) => theme?.styling ?? {};
+const spacing = (theme) => theme?.spacing ?? {};
+const SheetOverlay = styled.div `
+	position: absolute;
+	inset: 0;
+	background-color: ${({ theme }) => colors(theme).scrim ?? 'rgba(0, 0, 0, 0.4)'};
+`;
+const SheetContent = styled.div `
+	background-color: rgb(${({ theme }) => colors(theme).surfaceRgb ?? '255, 255, 255'});
+	border-top-left-radius: ${({ theme }) => styling(theme).borderRadiusPixel ?? 24}px;
+	border-top-right-radius: ${({ theme }) => styling(theme).borderRadiusPixel ?? 24}px;
+	max-height: 85dvh;
+	padding-bottom: max(env(safe-area-inset-bottom), 16px);
+`;
+const SheetHandle = styled.div `
+	width: 40px;
+	height: 5px;
+	background-color: ${({ theme }) => colors(theme).outline ?? 'rgba(0, 0, 0, 0.3)'};
+	border-radius: 3px;
+	margin: 12px auto 8px;
+`;
+const SheetBody = styled.div `
+	padding: 0 ${({ theme }) => spacing(theme).appStandardPadding ?? '16px'};
+`;
+const VisuallyHidden = styled.span `
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+`;
+// Rubber-band damping function (from Vaul)
+function dampenValue(v) {
+    return 8 * (Math.log(v + 1) - 2);
+}
+/**
+ * Draggable bottom sheet modal with gesture support.
+ * Features rubber-band physics, velocity-based swipe detection, and smooth animations.
+ */
+export function BottomSheet({ isOpen, onClose, children, title = 'Bottom Sheet', maxHeight = 300, velocityThreshold = 0.4, closeThreshold = 0.25, onExitComplete, }) {
+    const modalRef = useRef(null);
+    const [shouldRender, setShouldRender] = useState(isOpen);
+    // Mirror of shouldRender for the effect to read the latest value without
+    // re-subscribing (adding shouldRender to the effect deps would re-run
+    // open/close on every toggle and reintroduce the snap).
+    const shouldRenderRef = useRef(shouldRender);
+    shouldRenderRef.current = shouldRender;
+    // Stash the latest callbacks in refs so the open/close spring effect never
+    // depends on their identity. A consumer passing a fresh inline onExitComplete
+    // (or onClose) every render must NOT re-kick the open/close spring — that was
+    // the jitter / apparent-self-close bug. The effect reads .current at the
+    // moment it actually needs the callback (on close-finished / on drag-release).
+    const onExitCompleteRef = useRef(onExitComplete);
+    onExitCompleteRef.current = onExitComplete;
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    const [spring, api] = useSpring(() => ({
+        y: maxHeight,
+        opacity: 0,
+        config: { tension: 300, friction: 30 },
+    }));
+    // Handle open/close. Deps are intentionally ONLY [isOpen, api, maxHeight]:
+    // the callbacks are read from refs so their identity can't re-run this effect.
+    useEffect(() => {
+        if (isOpen) {
+            const openDistance = modalRef.current?.offsetHeight || maxHeight;
+            // Only hard-snap to the closed position when opening from fully
+            // closed. When reopening mid-close (a sheet swap), reverse from the
+            // current position instead of jumping to the bottom.
+            if (!shouldRenderRef.current) {
+                api.set({ y: openDistance, opacity: 0 });
+            }
+            setShouldRender(true);
+            api.start({ y: 0, opacity: 1 });
+        }
+        else {
+            const closeDistance = modalRef.current?.offsetHeight || maxHeight;
+            api.start({
+                y: closeDistance,
+                opacity: 0,
+                onRest: (result) => {
+                    // Only tear down when the close actually finished. An
+                    // interrupted close (reopened mid-animation) fires onRest
+                    // with finished:false and must NOT unmount the sheet.
+                    if (result?.finished) {
+                        setShouldRender(false);
+                        onExitCompleteRef.current?.();
+                    }
+                },
+            });
+        }
+    }, [isOpen, api, maxHeight]);
+    const handleClose = useCallback(() => {
+        onCloseRef.current();
+    }, []);
+    // Drag handler
+    const bind = useDrag(({ active, movement: [, my], velocity: [, vy], direction: [, dy], cancel }) => {
+        // Prevent dragging up beyond the top
+        if (my < -10) {
+            cancel();
+            return;
+        }
+        const dragDistance = Math.max(0, my);
+        if (active) {
+            // Apply rubber-band effect when dragging up
+            const dampened = my < 0 ? dampenValue(-my) * -0.5 : dragDistance;
+            api.start({ y: dampened, immediate: true });
+            // Fade overlay based on drag progress
+            const progress = Math.min(dragDistance / maxHeight, 1);
+            api.start({ opacity: 1 - progress * 0.5, immediate: true });
+        }
+        else {
+            // Check if should close based on velocity or distance
+            const shouldClose = (vy > velocityThreshold && dy > 0) ||
+                dragDistance > maxHeight * closeThreshold;
+            if (shouldClose) {
+                handleClose();
+            }
+            else {
+                api.start({ y: 0, opacity: 1 });
+            }
+        }
+    }, {
+        from: () => [0, spring.y.get()],
+        filterTaps: true,
+        axis: 'y',
+        pointer: { touch: true },
+        preventDefault: true,
+        eventOptions: { passive: false },
+    });
+    if (!shouldRender) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(animated.div, { style: {
+                    position: 'fixed',
+                    inset: 0,
+                    zIndex: 49,
+                    opacity: spring.opacity,
+                    pointerEvents: isOpen ? 'auto' : 'none',
+                }, onClick: handleClose, children: _jsx(SheetOverlay, {}) }), _jsx(animated.div, { style: {
+                    position: 'fixed',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    zIndex: 50,
+                    transform: spring.y.to((y) => `translateY(${y}px)`),
+                }, children: _jsxs(SheetContent, { ref: modalRef, children: [_jsx(VisuallyHidden, { children: title }), _jsx("div", { ...bind(), style: {
+                                touchAction: 'none',
+                                cursor: 'grab',
+                                padding: '8px 0',
+                            }, children: _jsx(SheetHandle, {}) }), _jsx(SheetBody, { children: children })] }) })] }));
+}
+export default BottomSheet;
+//# sourceMappingURL=bottom-sheet.js.map

package/dist/bottom-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-sheet.js","sourceRoot":"","sources":["../src/bottom-sheet.tsx"],"names":[],"mappings":"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"}

package/dist/confirm-dialog.d.ts

@@ -0,0 +1,40 @@
+/**
+ * ConfirmDialog — a domain-free confirm/cancel prompt: a centered message, an
+ * optional description, and stacked confirm + cancel buttons with Material-style
+ * ripple press feedback. The confirm button can be marked `destructive` for a
+ * red-tinted danger action.
+ *
+ * Ported from ymy-components (`./confirm-dialog/ConfirmDialog`), where it lived
+ * as a 3-file unit (`ConfirmDialog.tsx` + `.types.ts` + `.styles.ts`) and
+ * shipped untested. The kang port collapses it into a single flat-ESM module and
+ * preserves the public API exactly (`message`, `description`, `confirmLabel`,
+ * `cancelLabel`, `destructive`, `onConfirm`, `onCancel`), so xunzi's two
+ * re-point sites (`ClearDataConfirm.tsx`, `LogoutConfirm.tsx`) are pure import
+ * swaps.
+ *
+ * Theming follows kang conventions: the destructive button reads the theme's
+ * `error` token (with the ymy literal `#dc2626` / `rgba(220, 38, 38, 0.1)` as
+ * fallbacks) so it adapts to a `ThemeProvider` (light/dark) yet still renders
+ * sensibly without one. Ripple feedback reuses kang's `useRipple` / `Ripple`
+ * primitives. `styled-components` and `react` are the only runtime imports.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+export interface ConfirmDialogProps {
+    /** Primary message displayed at the top. */
+    message: ReactNode;
+    /** Optional secondary description below the message. */
+    description?: ReactNode;
+    /** Label for the confirm button. */
+    confirmLabel: ReactNode;
+    /** Label for the cancel button. */
+    cancelLabel: ReactNode;
+    /** Whether the confirm action is destructive (red-tinted button). */
+    destructive?: boolean;
+    /** Callback when confirm is clicked. */
+    onConfirm: () => void;
+    /** Callback when cancel is clicked. */
+    onCancel: () => void;
+}
+export declare function ConfirmDialog({ message, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel, }: ConfirmDialogProps): ReactElement;
+export default ConfirmDialog;
+//# sourceMappingURL=confirm-dialog.d.ts.map

package/dist/confirm-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-dialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAI3E,MAAM,WAAW,kBAAkB;IAClC,4CAA4C;IAC5C,OAAO,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oCAAoC;IACpC,YAAY,EAAE,SAAS,CAAC;IACxB,mCAAmC;IACnC,WAAW,EAAE,SAAS,CAAC;IACvB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,uCAAuC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACrB;AA8DD,wBAAgB,aAAa,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAmB,EACnB,SAAS,EACT,QAAQ,GACR,EAAE,kBAAkB,GAAG,YAAY,CA+BnC;AAED,eAAe,aAAa,CAAC"}

package/dist/confirm-dialog.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from 'styled-components';
+import { Ripple, useRipple } from './ripple.js';
+/** Convert a hex color (`#rrggbb`) to an `r, g, b` triple for rgba() usage. */
+function hexToRgbTriple(hex) {
+    const h = hex.replace('#', '');
+    if (h.length !== 6)
+        return null;
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    if ([r, g, b].some((n) => Number.isNaN(n)))
+        return null;
+    return `${r}, ${g}, ${b}`;
+}
+const DialogContainer = styled.div `
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+`;
+const DialogMessage = styled.div `
+	text-align: center;
+	padding: 0.5rem 1rem;
+	font-weight: 300;
+`;
+const DialogDescription = styled.div `
+	text-align: center;
+	padding: 0 1rem 1rem;
+	font-size: 0.875rem;
+	opacity: 0.7;
+`;
+const DialogButton = styled.button `
+	position: relative;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+	font-family: inherit;
+	font-size: 1.125rem;
+	font-weight: 300;
+	border: none;
+	border-radius: 12px;
+	background-color: ${({ $destructive, theme }) => {
+    if (!$destructive)
+        return 'transparent';
+    const error = theme?.colors?.error;
+    const triple = error ? hexToRgbTriple(error) : null;
+    return triple ? `rgba(${triple}, 0.1)` : 'rgba(220, 38, 38, 0.1)';
+}};
+	color: ${({ $destructive, theme }) => {
+    if (!$destructive)
+        return 'inherit';
+    return theme?.colors?.error ?? '#dc2626';
+}};
+	cursor: pointer;
+	outline: none;
+	overflow: hidden;
+	-webkit-tap-highlight-color: transparent;
+`;
+export function ConfirmDialog({ message, description, confirmLabel, cancelLabel, destructive = false, onConfirm, onCancel, }) {
+    const { ripple, trigger, isTarget } = useRipple();
+    const handleConfirm = (e) => {
+        trigger(e, 'confirm');
+        onConfirm();
+    };
+    const handleCancel = (e) => {
+        trigger(e, 'cancel');
+        onCancel();
+    };
+    return (_jsxs(DialogContainer, { children: [_jsx(DialogMessage, { children: message }), description && _jsx(DialogDescription, { children: description }), _jsxs(DialogButton, { "$destructive": destructive, onClick: handleConfirm, children: [isTarget('confirm') && ripple && (_jsx(Ripple, { "$x": ripple.x, "$y": ripple.y }, ripple.key)), confirmLabel] }), _jsxs(DialogButton, { onClick: handleCancel, children: [isTarget('cancel') && ripple && (_jsx(Ripple, { "$x": ripple.x, "$y": ripple.y }, ripple.key)), cancelLabel] })] }));
+}
+export default ConfirmDialog;
+//# sourceMappingURL=confirm-dialog.js.map

package/dist/confirm-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.js","sourceRoot":"","sources":["../src/confirm-dialog.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { BOUNCE_CURVE, PRESS_SCALE_PRIMARY, PRESS_SCALE_SUBTLE, pressPrimary, pressSubtle, pressPrimaryScale, pressSubtleScale, } from './press.js';
 export { useAnimatedAction } from './use-animated-action.js';
+export { useViewportSize } from './use-viewport-size.js';
+export type { ViewportSize } from './use-viewport-size.js';
 export { actionSheetContainer, actionSheetList, actionSheetRow, } from './action-sheet.js';
 export { Ripple, rippleAnimation, useRipple } from './ripple.js';
 export type { RippleState } from './ripple.js';
@@ -13,9 +15,19 @@ export { default as CircleIconButton } from './circle-icon-button.js';
 export type { CircleIconButtonProps, CircleIconName } from './circle-icon-button.js';
 export { default as BannerButton } from './banner-button.js';
 export type { BannerButtonProps } from './banner-button.js';
+export { Badge } from './badge.js';
+export type { BadgeProps, BadgeVariant } from './badge.js';
+export { default as ToggleSwitch } from './toggle-switch.js';
+export type { ToggleSwitchProps } from './toggle-switch.js';
+export { ConfirmDialog } from './confirm-dialog.js';
+export type { ConfirmDialogProps } from './confirm-dialog.js';
+export { BottomSheet } from './bottom-sheet.js';
+export type { BottomSheetProps } from './bottom-sheet.js';
 export { buildTheme, theme, hexToRgb } from './theme.js';
 export type { ThemeType } from './theme.js';
 export { lightPalette, darkPalette } from './palettes.js';
 export type { ModeColorPalette } from './palettes.js';
 export type { DynamicLanguage, CharacterPreference, StaticLanguage, } from './language.js';
+export { ListItem, UnorderedListItemContainer } from './list-item.js';
+export type { ListItemProps, ListItemIconName, ListItemActionName, } from './list-item.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,YAAY,EACX,eAAe,EACf,mBAAmB,EACnB,cAAc,GACd,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,YAAY,EACX,eAAe,EACf,mBAAmB,EACnB,cAAc,GACd,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AACtE,YAAY,EACX,aAAa,EACb,gBAAgB,EAChB,kBAAkB,GAClB,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -1,5 +1,6 @@
 export { BOUNCE_CURVE, PRESS_SCALE_PRIMARY, PRESS_SCALE_SUBTLE, pressPrimary, pressSubtle, pressPrimaryScale, pressSubtleScale, } from './press.js';
 export { useAnimatedAction } from './use-animated-action.js';
+export { useViewportSize } from './use-viewport-size.js';
 export { actionSheetContainer, actionSheetList, actionSheetRow, } from './action-sheet.js';
 export { Ripple, rippleAnimation, useRipple } from './ripple.js';
 export { SPRING_COMFORTABLE, SPRING_COMFORTABLE_SLOW, SPRING_SNAPPY, SPRING_RESPONSIVE, SPRING_STAGGERED, SPRING_INSTANT, SPRING_GENTLE, SPRING_VERY_SLOW, SPRING_LANDING, SPRING_RISING, } from './spring.js';
@@ -7,6 +8,11 @@ export { default as AnimatedText } from './animated-text.js';
 export { default as BackButton } from './back-button.js';
 export { default as CircleIconButton } from './circle-icon-button.js';
 export { default as BannerButton } from './banner-button.js';
+export { Badge } from './badge.js';
+export { default as ToggleSwitch } from './toggle-switch.js';
+export { ConfirmDialog } from './confirm-dialog.js';
+export { BottomSheet } from './bottom-sheet.js';
 export { buildTheme, theme, hexToRgb } from './theme.js';
 export { lightPalette, darkPalette } from './palettes.js';
+export { ListItem, UnorderedListItemContainer } from './list-item.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS1D,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/list-item.d.ts

@@ -0,0 +1,74 @@
+/**
+ * ListItem + UnorderedListItemContainer — a pressable settings/menu row and its
+ * list wrapper.
+ *
+ * Ported from ymy-components (`./collections/ListItem` + `./collections/
+ * ListItem.styles`), preserving the exact public API the xunzi call sites
+ * (`AuthSection`, `Profile`) drive, so re-pointing them at kang is a pure import
+ * swap. A row renders a leading icon, a label, and a trailing action (a chevron,
+ * or an inline Material toggle when `actionIcon === 'switch'`), with a Material
+ * ripple on press.
+ *
+ * kang-specific upgrades / adaptations:
+ * - **Press feedback** uses kang's shared `Ripple` / `useRipple` primitives
+ *   (themed off `theme.colors.ripple`), replacing ymy's bespoke ripple wiring.
+ * - **Icons:** ymy hard-depended on `react-icons` (MdTranslate / MdOutlineWbSunny
+ *   / MdChevronRight). To keep kang dependency-light and domain-free, the same
+ *   glyphs ship as inline SVGs (identical Material-icons path data), selectable
+ *   via the `icon` string. Consumers may override the leading glyph with any node
+ *   via `iconNode` — the same override pattern as BackButton / CircleIconButton.
+ * - **Text:** the `textContent` path maps the app's `DynamicLanguage` model onto
+ *   kang's domain-free `AnimatedText` (`variants` / `staticIndex` / `sizers`),
+ *   exactly as xunzi's AnimatedText adapter does — so language knowledge stays in
+ *   the shared language types and the motion stays in `AnimatedText`.
+ * - **Toggle:** ymy rendered a separate `ToggleSwitch`; that Material toggle is
+ *   inlined (controlled or uncontrolled) so kang needn't ship a ToggleSwitch yet.
+ *
+ * `styled-components`, `@react-spring/web` (via AnimatedText) and `react` are the
+ * only things this module pulls in, all optional peer deps.
+ */
+import { type CSSProperties, type ReactElement, type ReactNode } from 'react';
+import type { CharacterPreference, DynamicLanguage, StaticLanguage } from './language.js';
+/** The built-in leading icons a row can render (was ymy's `PrimaryIcons`). */
+export type ListItemIconName = 'translate' | 'sunny' | 'character';
+/** The built-in trailing actions a row can render (was ymy's `SecondaryIconName`). */
+export type ListItemActionName = 'chevron' | 'switch';
+export type ListItemProps = {
+    /** Which built-in leading icon to render. Ignored when `iconNode` is provided. */
+    icon: ListItemIconName;
+    /**
+     * An explicit leading-icon node, overriding the built-in `icon`. Lets
+     * consumers supply their own glyph without kang depending on an icon library —
+     * the same override pattern as BackButton / CircleIconButton.
+     */
+    iconNode?: ReactNode;
+    /** Plain-text label (used when `textContent` is absent). */
+    text?: string;
+    /**
+     * Multilingual label. When present it renders kang's cross-fading
+     * {@link AnimatedText}, cycling english ⇄ chinese per `characterPreference`.
+     */
+    textContent?: DynamicLanguage;
+    /** Which character set (`simplified`/`traditional`) the chinese variant uses. */
+    characterPreference?: CharacterPreference;
+    /** Cross-fade the label (true) or hold a single static variant (false). Default true. */
+    animate?: boolean;
+    /** Max ms between cross-fade cycles, forwarded to AnimatedText. */
+    maxDelay?: number;
+    /** Trailing action: a chevron (default) or an inline toggle. */
+    actionIcon?: ListItemActionName;
+    /** Row click handler (used when `actionIcon !== 'switch'`). */
+    onClick?: () => void;
+    /** Inline style passthrough on the `<li>`. */
+    styles?: CSSProperties;
+    /** Toggle state when `actionIcon === 'switch'` (controlled). */
+    switchChecked?: boolean;
+    /** Fired with the next toggle value when `actionIcon === 'switch'`. */
+    onSwitchChange?: (checked: boolean) => void;
+    /** Which language to show when `animate` is false. Forwarded to AnimatedText. */
+    staticLanguage?: StaticLanguage;
+};
+export declare const ListItem: ({ icon, iconNode, text, textContent, characterPreference, animate, maxDelay, actionIcon, onClick, styles, switchChecked, onSwitchChange, staticLanguage, }: ListItemProps) => ReactElement;
+export { UnorderedListItemContainer } from './list-item.styles.js';
+export default ListItem;
+//# sourceMappingURL=list-item.d.ts.map

package/dist/list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../src/list-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAGN,KAAK,aAAa,EAElB,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACX,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,MAAM,eAAe,CAAC;AAcvB,8EAA8E;AAC9E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,OAAO,GAAG,WAAW,CAAC;AACnE,sFAAsF;AACtF,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAmFtD,MAAM,MAAM,aAAa,GAAG;IAC3B,kFAAkF;IAClF,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gEAAgE;IAChE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,iFAAiF;IACjF,cAAc,CAAC,EAAE,cAAc,CAAC;CAChC,CAAC;AAoCF,eAAO,MAAM,QAAQ,+JAclB,aAAa,KAAG,YA2DlB,CAAC;AAEF,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,eAAe,QAAQ,CAAC"}