kang-components 0.7.0 → 0.9.1

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';
@@ -17,6 +19,10 @@ 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';

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;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;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;AAEvB,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AACtE,YAAY,EACX,aAAa,EACb,gBAAgB,EAChB,kBAAkB,GAClB,MAAM,gBAAgB,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';
@@ -9,6 +10,8 @@ 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';

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;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,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;AAS1D,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,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/use-viewport-size.d.ts

@@ -0,0 +1,16 @@
+export interface ViewportSize {
+    width: number;
+    height: number;
+}
+/**
+ * Hook to track viewport dimensions with debounced updates.
+ * Listens to resize and orientation change events.
+ *
+ * Ported from ymy-components (`./hooks/useViewportSize`) preserving its public
+ * API exactly so xunzi can re-point as a pure import swap.
+ *
+ * @param debounceMs - Debounce delay in milliseconds (default: 100)
+ * @returns ViewportSize - Current viewport width and height
+ */
+export declare function useViewportSize(debounceMs?: number): ViewportSize;
+//# sourceMappingURL=use-viewport-size.d.ts.map

package/dist/use-viewport-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewport-size.d.ts","sourceRoot":"","sources":["../src/use-viewport-size.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,UAAU,SAAM,GAAG,YAAY,CA8B9D"}

package/dist/use-viewport-size.js

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+/**
+ * Hook to track viewport dimensions with debounced updates.
+ * Listens to resize and orientation change events.
+ *
+ * Ported from ymy-components (`./hooks/useViewportSize`) preserving its public
+ * API exactly so xunzi can re-point as a pure import swap.
+ *
+ * @param debounceMs - Debounce delay in milliseconds (default: 100)
+ * @returns ViewportSize - Current viewport width and height
+ */
+export function useViewportSize(debounceMs = 100) {
+    const [size, setSize] = useState({
+        width: typeof window !== 'undefined' ? window.innerWidth : 0,
+        height: typeof window !== 'undefined' ? window.innerHeight : 0,
+    });
+    useEffect(() => {
+        let timeoutId;
+        const handleResize = () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                setSize({
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                });
+            }, debounceMs);
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+        return () => {
+            clearTimeout(timeoutId);
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleResize);
+        };
+    }, [debounceMs]);
+    return size;
+}
+//# sourceMappingURL=use-viewport-size.js.map

package/dist/use-viewport-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewport-size.js","sourceRoot":"","sources":["../src/use-viewport-size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAO5C;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,UAAU,GAAG,GAAG;IAC/C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAe;QAC9C,KAAK,EAAE,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAC5D,MAAM,EAAE,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;KAC9D,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,SAAwC,CAAC;QAE7C,MAAM,YAAY,GAAG,GAAG,EAAE;YACzB,YAAY,CAAC,SAAS,CAAC,CAAC;YACxB,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC3B,OAAO,CAAC;oBACP,KAAK,EAAE,MAAM,CAAC,UAAU;oBACxB,MAAM,EAAE,MAAM,CAAC,WAAW;iBAC1B,CAAC,CAAC;YACJ,CAAC,EAAE,UAAU,CAAC,CAAC;QAChB,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;QAE3D,OAAO,GAAG,EAAE;YACX,YAAY,CAAC,SAAS,CAAC,CAAC;YACxB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACnD,MAAM,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;QAC/D,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,IAAI,CAAC;AACb,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kang-components",
-	"version": "0.7.0",
+	"version": "0.9.1",
 	"description": "Generic, domain-free React UI primitives (CSS-first press feedback, delayed-action hook, spring presets, cross-fading text, circle icon button).",
 	"type": "module",
 	"license": "MIT",
@@ -25,10 +25,12 @@
 		"build": "tsc -p tsconfig.build.json",
 		"test": "vitest run",
 		"test:watch": "vitest",
+		"test:coverage": "vitest run --coverage",
 		"prepublishOnly": "npm run build"
 	},
 	"peerDependencies": {
 		"@react-spring/web": ">=9",
+		"@use-gesture/react": ">=10",
 		"react": ">=18",
 		"styled-components": ">=6"
 	},
@@ -36,6 +38,9 @@
 		"@react-spring/web": {
 			"optional": true
 		},
+		"@use-gesture/react": {
+			"optional": true
+		},
 		"react": {
 			"optional": true
 		},
@@ -49,7 +54,9 @@
 		"@testing-library/react": "^16.1.0",
 		"@types/react": "^18.3.18",
 		"@types/react-dom": "^18.3.5",
+		"@use-gesture/react": "^10.3.1",
 		"@vitejs/plugin-react": "^4.3.4",
+		"@vitest/coverage-v8": "^2.1.9",
 		"jsdom": "^25.0.1",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",