kang-components 0.5.0 → 0.7.0

package/dist/back-button.d.ts

@@ -0,0 +1,51 @@
+/**
+ * BackButton — a domain-free "go back" control.
+ *
+ * Ported from ymy-components (`./buttons/BackButton`), where it was a bare
+ * `<IoChevronBackOutline onClick={...} />` with no semantics, no press feedback
+ * and no theming. The kang port keeps the same public surface (`size`, `onClick`)
+ * but upgrades it into a real, accessible control following kang conventions:
+ *
+ * - Renders a semantic `<button type="button">` (was a bare SVG with a click
+ *   handler) so it is keyboard-focusable and announced as a button.
+ * - Press feedback via the shared `pressPrimary()` CSS primitive — the same
+ *   scale/bounce language every kang action button uses.
+ * - A Material `Ripple` overlay on press, themed off `theme.colors.ripple`.
+ * - Icon color reads `theme.colors.onSurface` (falls back to `currentColor`),
+ *   so it adapts to a styled-components `ThemeProvider` but still works without
+ *   one.
+ * - `disabled` support: blocks the click and dims the control.
+ *
+ * Icon: ymy hard-depended on `react-icons` (IoChevronBackOutline). To keep kang
+ * dependency-light and domain-free, the same chevron-back glyph ships as an
+ * inline SVG (identical Ionicons path data), and consumers may override it with
+ * any node via `icon` — the same pattern as BannerButton.
+ *
+ * `styled-components` and `react` are the only things this module pulls in;
+ * consumers importing the press/string primitives never touch them.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+export type BackButtonProps = {
+    /** Icon size (any CSS size value). Defaults to `'1.5rem'` — matching ymy. */
+    size?: string;
+    /**
+     * Optional click handler, invoked on click/activation. If omitted the button
+     * is inert (renders, but does nothing on press).
+     */
+    onClick?: () => void;
+    /** Disable the control: blocks the handler and dims the icon. */
+    disabled?: boolean;
+    /** Accessible label for screen readers. Defaults to `'Back'`. */
+    ariaLabel?: string;
+    /** Optional class name passthrough for layout/positioning by the consumer. */
+    className?: string;
+    /**
+     * An explicit icon node, overriding the default inline chevron. Lets
+     * consumers supply their own glyph (e.g. a react-icons element) without kang
+     * depending on an icon library.
+     */
+    icon?: ReactNode;
+};
+declare const BackButton: ({ size, onClick, disabled, ariaLabel, className, icon, }: BackButtonProps) => ReactElement;
+export default BackButton;
+//# sourceMappingURL=back-button.d.ts.map

package/dist/back-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"back-button.d.ts","sourceRoot":"","sources":["../src/back-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAgC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxF,MAAM,MAAM,eAAe,GAAG;IAC7B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAoDF,QAAA,MAAM,UAAU,6DAOb,eAAe,KAAG,YAyBpB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/back-button.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BackButton — a domain-free "go back" control.
+ *
+ * Ported from ymy-components (`./buttons/BackButton`), where it was a bare
+ * `<IoChevronBackOutline onClick={...} />` with no semantics, no press feedback
+ * and no theming. The kang port keeps the same public surface (`size`, `onClick`)
+ * but upgrades it into a real, accessible control following kang conventions:
+ *
+ * - Renders a semantic `<button type="button">` (was a bare SVG with a click
+ *   handler) so it is keyboard-focusable and announced as a button.
+ * - Press feedback via the shared `pressPrimary()` CSS primitive — the same
+ *   scale/bounce language every kang action button uses.
+ * - A Material `Ripple` overlay on press, themed off `theme.colors.ripple`.
+ * - Icon color reads `theme.colors.onSurface` (falls back to `currentColor`),
+ *   so it adapts to a styled-components `ThemeProvider` but still works without
+ *   one.
+ * - `disabled` support: blocks the click and dims the control.
+ *
+ * Icon: ymy hard-depended on `react-icons` (IoChevronBackOutline). To keep kang
+ * dependency-light and domain-free, the same chevron-back glyph ships as an
+ * inline SVG (identical Ionicons path data), and consumers may override it with
+ * any node via `icon` — the same pattern as BannerButton.
+ *
+ * `styled-components` and `react` are the only things this module pulls in;
+ * consumers importing the press/string primitives never touch them.
+ */
+import { useCallback } from 'react';
+import { styled } from 'styled-components';
+import { pressPrimary } from './press.js';
+import { Ripple, useRipple } from './ripple.js';
+/**
+ * Inline IoChevronBackOutline (react-icons/io5) — identical Ionicons path data
+ * (viewBox + stroke-width 48 outline chevron) so the glyph is unchanged.
+ */
+const ChevronBackIcon = ({ size }) => (_jsx("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 512 512", height: size, width: size, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("path", { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "48", d: "M328 112 184 256l144 144" }) }));
+const StyledBackButton = styled.button `
+	position: relative;
+	overflow: hidden;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	margin: 0;
+	border: none;
+	background: transparent;
+	cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+	color: ${({ theme }) => theme?.colors?.onSurface ?? 'currentColor'};
+	opacity: ${({ $disabled }) => ($disabled ? 0.4 : 1)};
+	line-height: 0;
+	-webkit-tap-highlight-color: transparent;
+
+	${pressPrimary()}
+
+	&:disabled {
+		pointer-events: none;
+	}
+`;
+const BackButton = ({ size, onClick, disabled = false, ariaLabel = 'Back', className, icon, }) => {
+    const { ripple, trigger, isTarget } = useRipple();
+    const handleClick = useCallback((e) => {
+        if (disabled)
+            return;
+        trigger(e, 'back');
+        onClick?.();
+    }, [disabled, onClick, trigger]);
+    return (_jsxs(StyledBackButton, { type: "button", className: className, "$disabled": disabled, disabled: disabled, "aria-label": ariaLabel, onClick: handleClick, children: [icon !== undefined ? icon : _jsx(ChevronBackIcon, { size: size != null ? size : '1.5rem' }), isTarget('back') && ripple && _jsx(Ripple, { "$x": ripple.x, "$y": ripple.y }, ripple.key)] }));
+};
+export default BackButton;
+//# sourceMappingURL=back-button.js.map

package/dist/back-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"back-button.js","sourceRoot":"","sources":["../src/back-button.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,WAAW,EAAsD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAwBhD;;;GAGG;AACH,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAgB,EAAE,CAAC,CACrE,cACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,aAAa,EACrB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,YAEjB,eACC,IAAI,EAAC,MAAM,EACX,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,EAChB,CAAC,EAAC,0BAA0B,GAC3B,GACG,CACN,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAwB;;;;;;;;;;WAUnD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;UAC3D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrB,KAA6C,EAAE,MAAM,EAAE,SAAS,IAAI,cAAc;YACzE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;;;;GAIjD,YAAY,EAAE;;;;;CAKhB,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,MAAM,EAClB,SAAS,EACT,IAAI,GACa,EAAgB,EAAE;IACnC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAU,CAAC;IAE1D,MAAM,WAAW,GAAG,WAAW,CAC9B,CAAC,CAAgC,EAAE,EAAE;QACpC,IAAI,QAAQ;YAAE,OAAO;QACrB,OAAO,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACnB,OAAO,EAAE,EAAE,CAAC;IACb,CAAC,EACD,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAC5B,CAAC;IAEF,OAAO,CACN,MAAC,gBAAgB,IAChB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,eACT,QAAQ,EACnB,QAAQ,EAAE,QAAQ,gBACN,SAAS,EACrB,OAAO,EAAE,WAAW,aAEnB,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,GAAI,EACrF,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,IAAI,KAAC,MAAM,UAAsB,MAAM,CAAC,CAAC,QAAM,MAAM,CAAC,CAAC,IAAtC,MAAM,CAAC,GAAG,CAAgC,IACpE,CACnB,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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/banner-button.d.ts

@@ -0,0 +1,53 @@
+/**
+ * BannerButton — a pill-shaped call-to-action button with a leading icon and
+ * cross-fading multilingual label.
+ *
+ * Ported from ymy-components (`./buttons/BannerButton`). The visual language is
+ * preserved (rounded pill, drop shadow, primary/secondary variants, a press
+ * "scale-down" feedback) but reconciled onto kang's conventions:
+ *
+ * - **Theme-driven colors** read off styled-components' `props.theme` (the same
+ *   tokens {@link buildTheme} produces), with literal fallbacks so the button
+ *   still renders without a `ThemeProvider`.
+ * - **Press feedback** uses kang's CSS-first {@link pressPrimary} primitive
+ *   instead of a bespoke keyframe, keeping the press language consistent across
+ *   the library.
+ * - **Label** delegates to kang's domain-free {@link AnimatedText}: the
+ *   multilingual `buttonText` is mapped to `variants` (english ↔ preferred
+ *   Chinese set) with all three strings reserved as sizers so the box never
+ *   reflows mid-swap.
+ *
+ * Icons: ymy hard-depended on `react-icons` (FaPlus / FiSend). To keep kang
+ * dependency-light and domain-free, the same two glyphs ship as inline SVGs
+ * selectable via `iconComponent`, and consumers may pass any node via `icon`.
+ *
+ * `styled-components` and `react` are optional peer dependencies, pulled in only
+ * by this (and other runtime) modules.
+ */
+import { type ReactNode } from 'react';
+import type { CharacterPreference, DynamicLanguage } from './language.js';
+export type BannerButtonProps = {
+    /**
+     * Which built-in icon to display. `'plus'` and `'send'` ship as inline SVGs.
+     * Ignored when an explicit `icon` node is provided.
+     */
+    iconComponent?: 'plus' | 'send';
+    /**
+     * An explicit icon node, overriding `iconComponent`. Lets consumers supply
+     * their own glyph (e.g. a react-icons element) without kang depending on an
+     * icon library.
+     */
+    icon?: ReactNode;
+    /** The button label, available in english / traditional / simplified. */
+    buttonText: DynamicLanguage;
+    /** Visual variant. Defaults to `'primary'`. */
+    buttonType?: 'primary' | 'secondary';
+    /** Click handler. */
+    onClick?: () => void;
+    /** Preferred Chinese character set for the label. Defaults to `'simplified'`. */
+    characterPreference?: CharacterPreference;
+    /** Whether the label cross-fades between english and Chinese. Defaults to true. */
+    animate?: boolean;
+};
+export default function BannerButton({ iconComponent, icon, buttonText, buttonType, onClick, characterPreference, animate, }: BannerButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=banner-button.d.ts.map

package/dist/banner-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-button.d.ts","sourceRoot":"","sources":["../src/banner-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE1E,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,UAAU,EAAE,eAAe,CAAC;IAC5B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACrC,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA+FF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACpC,aAAa,EACb,IAAI,EACJ,UAAU,EACV,UAAsB,EACtB,OAAO,EACP,mBAAkC,EAClC,OAAc,GACd,EAAE,iBAAiB,+BAwBnB"}

package/dist/banner-button.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Named imports (not the default) so this resolves consistently across bundler
+// and raw ESM/CJS environments — see the note in ripple.ts.
+import { styled } from 'styled-components';
+import AnimatedText from './animated-text.js';
+import { pressPrimary } from './press.js';
+const BannerButtonContainer = styled.div `
+	display: inline-block;
+	position: relative;
+	overflow: hidden;
+	border-radius: 2.5rem;
+	background: ${({ theme }) => theme?.colors?.primary ?? '#489fb5'};
+	box-shadow: 0px 4px 4px 0px
+		${({ theme }) => theme?.colors?.shadow ?? 'rgba(0, 0, 0, 0.25)'};
+
+	${pressPrimary()}
+`;
+const StyledButton = styled.button `
+	display: flex;
+	align-items: center;
+	position: relative;
+	z-index: 10;
+	padding: 0.5rem 1rem;
+	border: none;
+	outline: none;
+	cursor: pointer;
+	transition: background-color 0.3s;
+
+	&.primary {
+		background-color: ${({ theme }) => theme?.colors?.primary ?? '#489fb5'};
+		color: ${({ theme }) => theme?.colors?.onPrimary ?? 'white'};
+	}
+
+	&.secondary {
+		background-color: ${({ theme }) => theme?.colors?.secondaryLight ?? '#ffb652'};
+		color: ${({ theme }) => theme?.colors?.onSecondary ?? 'black'};
+	}
+`;
+const IconContainer = styled.span `
+	display: flex;
+	margin-right: 1.25rem;
+
+	@media (min-width: 640px) {
+		margin-right: 0.25rem;
+	}
+`;
+/** Inline FaPlus (react-icons/fa) — kept identical so the glyph is unchanged. */
+const PlusIcon = () => (_jsx("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 448 512", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" }) }));
+/** Inline FiSend (react-icons/fi) — kept identical so the glyph is unchanged. */
+const SendIcon = () => (_jsxs("svg", { stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }));
+function resolveIcon(icon, iconComponent) {
+    if (icon !== undefined)
+        return icon;
+    if (iconComponent === 'plus')
+        return _jsx(PlusIcon, {});
+    if (iconComponent === 'send')
+        return _jsx(SendIcon, {});
+    return null;
+}
+export default function BannerButton({ iconComponent, icon, buttonText, buttonType = 'primary', onClick, characterPreference = 'simplified', animate = true, }) {
+    const iconElement = resolveIcon(icon, iconComponent);
+    // Map the multilingual label onto AnimatedText's domain-free variant model:
+    // cycle english <-> the preferred Chinese set, static index 0 = english
+    // (matching ymy's default). All three strings are reserved as sizers so the
+    // box is always sized to the widest and never reflows mid-swap.
+    const chineseText = characterPreference === 'traditional' ? buttonText.traditional : buttonText.simplified;
+    return (_jsx(BannerButtonContainer, { onClick: onClick, children: _jsxs(StyledButton, { type: "button", className: buttonType, children: [iconElement !== null && _jsx(IconContainer, { children: iconElement }), _jsx(AnimatedText, { textStyles: { lineHeight: '0.8rem', minWidth: '3rem' }, variants: [buttonText.english, chineseText], sizers: [buttonText.english, buttonText.simplified, buttonText.traditional], staticIndex: 0, animate: animate })] }) }));
+}
+//# sourceMappingURL=banner-button.js.map

package/dist/banner-button.js.map

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

package/dist/circle-icon-button.d.ts

@@ -0,0 +1,52 @@
+/**
+ * CircleIconButton — a round, themed icon button with a spring entry animation.
+ *
+ * Ported faithfully from ymy-components (`./buttons/CircleIconButton`). It renders
+ * one of a small set of built-in icons (`person`, `qr`) inside a circular outlined
+ * button that scales/fades in on mount via react-spring, and fires `onClick` when
+ * pressed. The two xunzi sites that consume it (HeroBanner, ProfileButton) drive it
+ * purely through the `iconComponent` string + `onClick`, so that API is preserved
+ * 1:1 to keep the re-point a pure import swap.
+ *
+ * Theming: the border reads `theme.colors.onPrimary` and the icon reads
+ * `theme.colors.onSurface` off styled-components' `props.theme`, with literal
+ * fallbacks so it renders sensibly with or without a `ThemeProvider`.
+ *
+ * Press feedback: layered on top of ymy's behavior using kang's `pressPrimary`
+ * (the icon-button tier). The entry animation owns `transform` via react-spring,
+ * so press uses the CSS `scale` property (`pressPrimaryScale`) to avoid fighting it.
+ *
+ * Icons: ymy hard-depended on `react-icons` (BsPerson / BsQrCodeScan). To keep
+ * kang dependency-light and domain-free, the same two glyphs ship as inline SVGs
+ * (matching Bootstrap-icons path data) selectable via `iconComponent`, and
+ * consumers may pass any node via `icon` — the same pattern as BannerButton.
+ *
+ * `styled-components` and `@react-spring/web` are optional peer dependencies, used
+ * only by this module — consumers importing just the string primitives never pull
+ * them in.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+/** The built-in icon set this button can render. */
+export type CircleIconName = 'person' | 'qr';
+export type CircleIconButtonProps = {
+    /**
+     * Which built-in icon to render. Ignored when an explicit `icon` node is
+     * provided.
+     * - `'person'` — person icon (profile).
+     * - `'qr'` — QR-code scan icon (invite/friend).
+     */
+    iconComponent: CircleIconName;
+    /**
+     * An explicit icon node, overriding `iconComponent`. Lets consumers supply
+     * their own glyph (e.g. a react-icons element) without kang depending on an
+     * icon library — the same override pattern as BannerButton.
+     */
+    icon?: ReactNode;
+    /**
+     * Optional click handler, invoked when the button is pressed. If omitted the
+     * button still renders and is interactive but performs no action.
+     */
+    onClick?: () => void;
+};
+export default function CircleIconButton({ iconComponent, icon, onClick, }: CircleIconButtonProps): ReactElement;
+//# sourceMappingURL=circle-icon-button.d.ts.map

package/dist/circle-icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle-icon-button.d.ts","sourceRoot":"","sources":["../src/circle-icon-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO1D,oDAAoD;AACpD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAE7C,MAAM,MAAM,qBAAqB,GAAG;IACnC;;;;;OAKG;IACH,aAAa,EAAE,cAAc,CAAC;IAE9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAyEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACxC,aAAa,EACb,IAAI,EACJ,OAAO,GACP,EAAE,qBAAqB,GAAG,YAAY,CAqBtC"}

package/dist/circle-icon-button.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animated, useSpring } from '@react-spring/web';
+// Named import (not the default) so styled-components resolves consistently
+// across bundler and raw ESM/CJS environments — matches ripple.ts.
+import { styled } from 'styled-components';
+import { pressPrimaryScale } from './press.js';
+const StyledCircleButton = styled(animated.button) `
+	width: 2.5rem;
+	height: 2.5rem;
+	padding: 0;
+	border-radius: 50%;
+	border: 1px solid
+		${({ theme }) => theme?.colors?.onPrimary ?? 'white'};
+	background: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	${pressPrimaryScale()}
+`;
+const StyledIcon = styled.span `
+	display: flex;
+	color: ${({ theme }) => theme?.colors?.onSurface ?? 'black'};
+	font-size: 1.125rem;
+`;
+/** Inline BsPerson (react-icons/bs) — Bootstrap-icons path data, glyph unchanged. */
+const PersonIcon = () => (_jsx("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 16 16", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z" }) }));
+/** Inline BsQrCodeScan (react-icons/bs) — Bootstrap-icons path data, glyph unchanged. */
+const QrIcon = () => (_jsxs("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 16 16", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M0 .5A.5.5 0 0 1 .5 0h3a.5.5 0 0 1 0 1H1v2.5a.5.5 0 0 1-1 0zm12 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V1h-2.5a.5.5 0 0 1-.5-.5M.5 12a.5.5 0 0 1 .5.5V15h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H15v-2.5a.5.5 0 0 1 .5-.5M4 4h1v1H4z" }), _jsx("path", { d: "M7 2H2v5h5zM3 3h3v3H3zm2 8H4v1h1z" }), _jsx("path", { d: "M7 9H2v5h5zm-4 1h3v3H3zm8-6h1v1h-1z" }), _jsx("path", { d: "M9 2h5v5H9zm1 1v3h3V3zM8 8v2h1v1H8v1h2v-2h1v2h1v-1h2v-1h-3V8zm2 2H9V9h1zm4 2h-1v1h-2v1h3zm-4 2v-1H8v1z" }), _jsx("path", { d: "M12 9h2V8h-2z" })] }));
+const ICONS = {
+    person: _jsx(PersonIcon, {}),
+    qr: _jsx(QrIcon, {}),
+};
+function resolveIcon(icon, iconComponent) {
+    if (icon !== undefined)
+        return icon;
+    return ICONS[iconComponent];
+}
+export default function CircleIconButton({ iconComponent, icon, onClick, }) {
+    const animatedStyles = useSpring({
+        from: { opacity: 0, scale: 0.5 },
+        to: { opacity: 1, scale: 1 },
+    });
+    const handleClick = () => {
+        if (onClick) {
+            onClick();
+        }
+    };
+    return (_jsx(StyledCircleButton, { type: "button", style: animatedStyles, onClick: handleClick, children: _jsx(StyledIcon, { children: resolveIcon(icon, iconComponent) }) }));
+}
+//# sourceMappingURL=circle-icon-button.js.map

package/dist/circle-icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle-icon-button.js","sourceRoot":"","sources":["../src/circle-icon-button.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxD,4EAA4E;AAC5E,mEAAmE;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA8B/C,MAAM,kBAAkB,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;;;;;;IAM9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAE,KAAqB,EAAE,MAAM,EAAE,SAAS,IAAI,OAAO;;;;;;GAMpE,iBAAiB,EAAE;CACrB,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA;;UAEpB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAE,KAAqB,EAAE,MAAM,EAAE,SAAS,IAAI,OAAO;;CAE5E,CAAC;AAEF,qFAAqF;AACrF,MAAM,UAAU,GAAG,GAAiB,EAAE,CAAC,CACtC,cACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,YAEjB,eAAM,CAAC,EAAC,uOAAuO,GAAG,GAC7O,CACN,CAAC;AAEF,yFAAyF;AACzF,MAAM,MAAM,GAAG,GAAiB,EAAE,CAAC,CAClC,eACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,aAEjB,eAAM,CAAC,EAAC,gUAAgU,GAAG,EAC3U,eAAM,CAAC,EAAC,mCAAmC,GAAG,EAC9C,eAAM,CAAC,EAAC,qCAAqC,GAAG,EAChD,eAAM,CAAC,EAAC,wGAAwG,GAAG,EACnH,eAAM,CAAC,EAAC,eAAe,GAAG,IACrB,CACN,CAAC;AAEF,MAAM,KAAK,GAAyC;IACnD,MAAM,EAAE,KAAC,UAAU,KAAG;IACtB,EAAE,EAAE,KAAC,MAAM,KAAG;CACd,CAAC;AAEF,SAAS,WAAW,CAAC,IAAe,EAAE,aAA6B;IAClE,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACpC,OAAO,KAAK,CAAC,aAAa,CAAC,CAAC;AAC7B,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACxC,aAAa,EACb,IAAI,EACJ,OAAO,GACgB;IACvB,MAAM,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;QAChC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;KAC5B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,EAAE,CAAC;QACX,CAAC;IACF,CAAC,CAAC;IAEF,OAAO,CACN,KAAC,kBAAkB,IAClB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,WAAW,YAEpB,KAAC,UAAU,cAAE,WAAW,CAAC,IAAI,EAAE,aAAa,CAAC,GAAc,GACvC,CACrB,CAAC;AACH,CAAC"}

package/dist/index.d.ts

@@ -7,9 +7,21 @@ export { SPRING_COMFORTABLE, SPRING_COMFORTABLE_SLOW, SPRING_SNAPPY, SPRING_RESP
 export type { SpringConfigConstant } from './spring.js';
 export { default as AnimatedText } from './animated-text.js';
 export type { AnimatedTextProps } from './animated-text.js';
+export { default as BackButton } from './back-button.js';
+export type { BackButtonProps } from './back-button.js';
+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 { 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,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,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"}

package/dist/index.js

@@ -4,6 +4,12 @@ export { actionSheetContainer, actionSheetList, actionSheetRow, } from './action
 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';
 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 { 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,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,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"}

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"}

package/dist/list-item.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { useState, } from 'react';
+import AnimatedText from './animated-text.js';
+import { Ripple, useRipple } from './ripple.js';
+import { ListItemContainer, ListItemContent, ListItemIcon, ListItemLeftContent, ListItemText, SwitchContainer, SwitchInput, SwitchRipple, SwitchThumb, SwitchTrack, } from './list-item.styles.js';
+/** Inline MdTranslate (react-icons/md) — Material-icons path data, glyph unchanged. */
+const TranslateIcon = ({ size }) => (_jsxs("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 24 24", height: size, width: size, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7 1.62-4.33L19.12 17h-3.24z" })] }));
+/** Inline MdOutlineWbSunny (react-icons/md) — Material-icons path data, glyph unchanged. */
+const SunnyIcon = ({ size }) => (_jsxs("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 24 24", height: size, width: size, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0V0z" }), _jsx("path", { d: "m6.76 4.84-1.8-1.79-1.41 1.41 1.79 1.79zM1 10.5h3v2H1zM11 .55h2V3.5h-2zm8.04 2.495 1.408 1.407-1.79 1.79-1.407-1.408zm-1.8 15.115 1.79 1.8 1.41-1.41-1.8-1.79zM20 10.5h3v2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm-1 4h2v2.95h-2zm-7.45-.96 1.41 1.41 1.79-1.8-1.41-1.41z" })] }));
+/**
+ * The "character" glyph: the literal Chinese character 字, rendered as text
+ * (ymy did the same — not an SVG icon).
+ */
+const CharacterIcon = ({ size }) => (_jsx("span", { style: {
+        fontSize: size,
+        height: size,
+        lineHeight: size,
+        display: 'inline-flex',
+        alignItems: 'center',
+    }, children: "\u5B57" }));
+/** Inline MdChevronRight (react-icons/md) — Material-icons path data, glyph unchanged. */
+const ChevronRightIcon = () => (_jsxs("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 24 24", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })] }));
+const LEADING_ICONS = {
+    translate: TranslateIcon,
+    sunny: SunnyIcon,
+    character: CharacterIcon,
+};
+/**
+ * Inline Material toggle (ymy's `ToggleSwitch`). Controlled when `checked` is
+ * supplied, otherwise uncontrolled. Stops click propagation so toggling the
+ * switch doesn't also fire the row's click.
+ */
+function InlineToggle({ checked: controlledChecked, onChange, }) {
+    const [internalChecked, setInternalChecked] = useState(false);
+    const isControlled = controlledChecked !== undefined;
+    const checked = isControlled ? controlledChecked : internalChecked;
+    const handleChange = (e) => {
+        // Blur immediately to drop the focus highlight (matches ymy).
+        e.target.blur();
+        const next = !checked;
+        if (!isControlled)
+            setInternalChecked(next);
+        onChange?.(next);
+    };
+    return (_jsxs(SwitchContainer, { "$checked": checked, onClick: (e) => e.stopPropagation(), children: [_jsx(SwitchInput, { type: "checkbox", checked: checked, onChange: handleChange }), _jsx(SwitchTrack, { "$checked": checked }), _jsx(SwitchRipple, { "$checked": checked }), _jsx(SwitchThumb, { "$checked": checked })] }));
+}
+export const ListItem = ({ icon, iconNode, text, textContent, characterPreference, animate = true, maxDelay, actionIcon = 'chevron', onClick, styles, switchChecked, onSwitchChange, staticLanguage, }) => {
+    const { ripple, trigger, isTarget } = useRipple();
+    const handleRowClick = (e) => {
+        trigger(e, 'row');
+        if (actionIcon === 'switch') {
+            onSwitchChange?.(!switchChecked);
+        }
+        else {
+            onClick?.();
+        }
+    };
+    const LeadingIcon = LEADING_ICONS[icon];
+    const renderTrailingAction = () => actionIcon === 'switch' ? (_jsx(InlineToggle, { checked: switchChecked, onChange: onSwitchChange })) : (_jsx(ChevronRightIcon, {}));
+    // Map the app's DynamicLanguage onto kang's domain-free AnimatedText, exactly
+    // as xunzi's AnimatedText adapter does, so output is identical to ymy.
+    let labelNode = text;
+    if (textContent) {
+        const charPref = characterPreference ?? 'simplified';
+        const chinese = charPref === 'traditional' ? textContent.traditional : textContent.simplified;
+        labelNode = (_jsx(AnimatedText, { variants: [textContent.english, chinese], animate: animate, staticIndex: staticLanguage === 'chinese' ? 1 : 0, sizers: [
+                textContent.english,
+                textContent.simplified,
+                textContent.traditional,
+            ], maxDelay: maxDelay }));
+    }
+    return (_jsxs(ListItemContainer, { onClick: handleRowClick, style: styles, children: [isTarget('row') && ripple && (_jsx(Ripple, { "$x": ripple.x, "$y": ripple.y }, ripple.key)), _jsxs(ListItemContent, { children: [_jsxs(ListItemLeftContent, { children: [_jsx(ListItemIcon, { children: iconNode !== undefined ? iconNode : _jsx(LeadingIcon, { size: "1rem" }) }), _jsx(ListItemText, { children: labelNode })] }), _jsx(ListItemIcon, { children: renderTrailingAction() })] })] }));
+};
+export { UnorderedListItemContainer } from './list-item.styles.js';
+export default ListItem;
+//# sourceMappingURL=list-item.js.map

package/dist/list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../src/list-item.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EACN,QAAQ,GAMR,MAAM,OAAO,CAAC;AACf,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMhD,OAAO,EACN,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAW,GACX,MAAM,uBAAuB,CAAC;AAO/B,uFAAuF;AACvF,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAgB,EAAE,CAAC,CACnE,eACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,aAEjB,eAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,GAAG,EACtC,eAAM,CAAC,EAAC,qSAAqS,GAAG,IAC3S,CACN,CAAC;AAEF,4FAA4F;AAC5F,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAgB,EAAE,CAAC,CAC/D,eACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,aAEjB,eAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,iBAAiB,GAAG,EACxC,eAAM,CAAC,EAAC,4VAA4V,GAAG,IAClW,CACN,CAAC;AAEF;;;GAGG;AACH,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAgB,EAAE,CAAC,CACnE,eACC,KAAK,EAAE;QACN,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;KACpB,uBAGK,CACP,CAAC;AAEF,0FAA0F;AAC1F,MAAM,gBAAgB,GAAG,GAAiB,EAAE,CAAC,CAC5C,eACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,aAEjB,eAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,GAAG,EACtC,eAAM,CAAC,EAAC,gDAAgD,GAAG,IACtD,CACN,CAAC;AAEF,MAAM,aAAa,GAGf;IACH,SAAS,EAAE,aAAa;IACxB,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,aAAa;CACxB,CAAC;AAsCF;;;;GAIG;AACH,SAAS,YAAY,CAAC,EACrB,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,GAIR;IACA,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,iBAAiB,KAAK,SAAS,CAAC;IACrD,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAAC;IAEnE,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE;QACzD,8DAA8D;QAC9D,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QAChB,MAAM,IAAI,GAAG,CAAC,OAAO,CAAC;QACtB,IAAI,CAAC,YAAY;YAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC5C,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO,CACN,MAAC,eAAe,gBAAW,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,aACtE,KAAC,WAAW,IAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,GAAI,EACzE,KAAC,WAAW,gBAAW,OAAO,GAAI,EAClC,KAAC,YAAY,gBAAW,OAAO,GAAI,EACnC,KAAC,WAAW,gBAAW,OAAO,GAAI,IACjB,CAClB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,mBAAmB,EACnB,OAAO,GAAG,IAAI,EACd,QAAQ,EACR,UAAU,GAAG,SAAS,EACtB,OAAO,EACP,MAAM,EACN,aAAa,EACb,cAAc,EACd,cAAc,GACC,EAAgB,EAAE;IACjC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAS,CAAC;IAEzD,MAAM,cAAc,GAAG,CAAC,CAA4B,EAAE,EAAE;QACvD,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QAClB,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC7B,cAAc,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACP,OAAO,EAAE,EAAE,CAAC;QACb,CAAC;IACF,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAExC,MAAM,oBAAoB,GAAG,GAAiB,EAAE,CAC/C,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,KAAC,YAAY,IAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,GAAI,CAClE,CAAC,CAAC,CAAC,CACH,KAAC,gBAAgB,KAAG,CACpB,CAAC;IAEH,8EAA8E;IAC9E,uEAAuE;IACvE,IAAI,SAAS,GAAc,IAAI,CAAC;IAChC,IAAI,WAAW,EAAE,CAAC;QACjB,MAAM,QAAQ,GAAG,mBAAmB,IAAI,YAAY,CAAC;QACrD,MAAM,OAAO,GACZ,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC;QAC/E,SAAS,GAAG,CACX,KAAC,YAAY,IACZ,QAAQ,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,EACxC,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjD,MAAM,EAAE;gBACP,WAAW,CAAC,OAAO;gBACnB,WAAW,CAAC,UAAU;gBACtB,WAAW,CAAC,WAAW;aACvB,EACD,QAAQ,EAAE,QAAQ,GACjB,CACF,CAAC;IACH,CAAC;IAED,OAAO,CACN,MAAC,iBAAiB,IAAC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,aACvD,QAAQ,CAAC,KAAK,CAAC,IAAI,MAAM,IAAI,CAC7B,KAAC,MAAM,UAAsB,MAAM,CAAC,CAAC,QAAM,MAAM,CAAC,CAAC,IAAtC,MAAM,CAAC,GAAG,CAAgC,CACvD,EACD,MAAC,eAAe,eACf,MAAC,mBAAmB,eACnB,KAAC,YAAY,cACX,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,IAAI,EAAC,MAAM,GAAG,GAClD,EACf,KAAC,YAAY,cAAE,SAAS,GAAgB,IACnB,EACtB,KAAC,YAAY,cAAE,oBAAoB,EAAE,GAAgB,IACpC,IACC,CACpB,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,55 @@
+/**
+ * Styled building blocks for {@link ListItem} and its list container.
+ *
+ * Ported from ymy-components (`./collections/ListItem.styles` +
+ * `./components/ToggleSwitch`) and kept as a co-located pair so the list
+ * semantics, spacing and the inline toggle travel with the component. All color
+ * values read off styled-components' `props.theme` with literal fallbacks (the
+ * same fallbacks ymy used), so the primitives render sensibly with or without a
+ * themed `ThemeProvider` — matching the rest of kang (ripple.ts,
+ * circle-icon-button.tsx).
+ *
+ * `styled-components` is an optional peer dependency, pulled in only by this
+ * module (and the component that imports it). Consumers importing just the
+ * string / press primitives never load it.
+ */
+/**
+ * The list container: a `<ul>` that lays its {@link ListItem} children out in a
+ * centered column with the browser's default inline padding removed. Ported 1:1
+ * from ymy so list semantics + spacing are preserved.
+ */
+export declare const UnorderedListItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
+/** The pressable row element — a relatively-positioned `<li>` that clips its ripple. */
+export declare const ListItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
+/** Row inner layout: left content (icon + text) pushed apart from the trailing action. */
+export declare const ListItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+/** Left cluster: the leading icon and the text, spaced apart. */
+export declare const ListItemLeftContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+/** Wrapper that vertically centers an icon (leading or trailing). */
+export declare const ListItemIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+/** The row's text span. */
+export declare const ListItemText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+/** Hover/focus ripple disc behind the thumb (Material affordance). */
+export declare const SwitchRipple: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$checked"> & {
+    $checked: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$checked"> & {
+    $checked: boolean;
+}, never>>> & string;
+/** The toggle's label/container; stops click propagation so the row isn't double-fired. */
+export declare const SwitchContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$checked"> & {
+    $checked: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$checked"> & {
+    $checked: boolean;
+}, never>>> & string;
+export declare const SwitchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
+export declare const SwitchTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$checked"> & {
+    $checked: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$checked"> & {
+    $checked: boolean;
+}, never>>> & string;
+export declare const SwitchThumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$checked"> & {
+    $checked: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$checked"> & {
+    $checked: boolean;
+}, never>>> & string;
+//# sourceMappingURL=list-item.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../src/list-item.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAuBH;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,+VAKtC,CAAC;AAEF,wFAAwF;AACxF,eAAO,MAAM,iBAAiB,uVAS7B,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,eAAe,uVAM3B,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,uVAK/B,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,YAAY,uVAKxB,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,YAAY,2VAGxB,CAAC;AASF,sEAAsE;AACtE,eAAO,MAAM,YAAY;cAA2B,OAAO;;cAAP,OAAO;oBAY1D,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,eAAe;cAA4B,OAAO;;cAAP,OAAO;oBA0B9D,CAAC;AAEF,eAAO,MAAM,WAAW,yWAKvB,CAAC;AAEF,eAAO,MAAM,WAAW;cAA2B,OAAO;;cAAP,OAAO;oBAUzD,CAAC;AAEF,eAAO,MAAM,WAAW;cAA2B,OAAO;;cAAP,OAAO;oBAyBzD,CAAC"}

package/dist/list-item.styles.js

@@ -0,0 +1,151 @@
+/**
+ * Styled building blocks for {@link ListItem} and its list container.
+ *
+ * Ported from ymy-components (`./collections/ListItem.styles` +
+ * `./components/ToggleSwitch`) and kept as a co-located pair so the list
+ * semantics, spacing and the inline toggle travel with the component. All color
+ * values read off styled-components' `props.theme` with literal fallbacks (the
+ * same fallbacks ymy used), so the primitives render sensibly with or without a
+ * themed `ThemeProvider` — matching the rest of kang (ripple.ts,
+ * circle-icon-button.tsx).
+ *
+ * `styled-components` is an optional peer dependency, pulled in only by this
+ * module (and the component that imports it). Consumers importing just the
+ * string / press primitives never load it.
+ */
+// Named import (not the default) so styled-components resolves consistently
+// across bundler and raw ESM/CJS environments — matches ripple.ts.
+import { styled } from 'styled-components';
+/**
+ * The list container: a `<ul>` that lays its {@link ListItem} children out in a
+ * centered column with the browser's default inline padding removed. Ported 1:1
+ * from ymy so list semantics + spacing are preserved.
+ */
+export const UnorderedListItemContainer = styled.ul `
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding-inline-start: unset;
+`;
+/** The pressable row element — a relatively-positioned `<li>` that clips its ripple. */
+export const ListItemContainer = styled.li `
+	position: relative;
+	list-style: none;
+	cursor: pointer;
+	overflow: hidden;
+	-webkit-tap-highlight-color: transparent;
+	border-bottom: 1px solid
+		${({ theme }) => theme?.colors?.scrimLight ?? 'rgba(0, 0, 0, 0.3)'};
+`;
+/** Row inner layout: left content (icon + text) pushed apart from the trailing action. */
+export const ListItemContent = styled.div `
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.5rem 0.75rem;
+`;
+/** Left cluster: the leading icon and the text, spaced apart. */
+export const ListItemLeftContent = styled.div `
+	display: flex;
+	flex-direction: row;
+	gap: 2rem;
+	align-items: center;
+`;
+/** Wrapper that vertically centers an icon (leading or trailing). */
+export const ListItemIcon = styled.div `
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	color: ${({ theme }) => theme?.colors?.onSurface ?? 'black'};
+`;
+/** The row's text span. */
+export const ListItemText = styled.span `
+	font-size: 1rem;
+	color: ${({ theme }) => theme?.colors?.onSurface ?? 'black'};
+`;
+/* ── Inline toggle switch ──────────────────────────────────────────────────
+ * ymy's ListItem rendered its `ToggleSwitch` component when `actionIcon` was
+ * 'switch'. kang has no ToggleSwitch yet, so the same Material-style toggle is
+ * inlined here, reading kang's `toggle*` theme tokens with the identical literal
+ * fallbacks ymy used. Look + behavior are preserved 1:1.
+ */
+/** Hover/focus ripple disc behind the thumb (Material affordance). */
+export const SwitchRipple = styled.span `
+	position: absolute;
+	top: 50%;
+	left: ${({ $checked }) => ($checked ? '14px' : '0px')};
+	transform: translate(-50%, -50%) translateX(50%);
+	width: 38px;
+	height: 38px;
+	border-radius: 50%;
+	background-color: transparent;
+	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+		left 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
+	pointer-events: none;
+`;
+/** The toggle's label/container; stops click propagation so the row isn't double-fired. */
+export const SwitchContainer = styled.label `
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+	-webkit-tap-highlight-color: transparent;
+
+	@media (hover: hover) {
+		&:hover ${SwitchRipple} {
+			background-color: ${({ $checked, theme }) => $checked
+    ? theme?.colors?.toggleHoverOn ??
+        'rgba(72, 159, 181, 0.08)'
+    : theme?.colors?.toggleHoverOff ??
+        'rgba(0, 0, 0, 0.04)'};
+		}
+	}
+
+	&:focus-within ${SwitchRipple} {
+		background-color: ${({ $checked, theme }) => $checked
+    ? theme?.colors?.toggleFocusOn ??
+        'rgba(72, 159, 181, 0.12)'
+    : theme?.colors?.toggleFocusOff ??
+        'rgba(0, 0, 0, 0.06)'};
+	}
+`;
+export const SwitchInput = styled.input `
+	opacity: 0;
+	width: 0;
+	height: 0;
+	position: absolute;
+`;
+export const SwitchTrack = styled.span `
+	width: 34px;
+	height: 14px;
+	background-color: ${({ $checked, theme }) => $checked
+    ? theme?.colors?.toggleTrackOn ??
+        'rgba(72, 159, 181, 0.5)'
+    : theme?.colors?.toggleTrackOff ?? 'rgba(0, 0, 0, 0.38)'};
+	border-radius: 7px;
+	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+`;
+export const SwitchThumb = styled.span `
+	position: absolute;
+	top: 50%;
+	left: ${({ $checked }) => ($checked ? '14px' : '0px')};
+	transform: translateY(-50%) scale(${({ $checked }) => ($checked ? 1.1 : 1)});
+	width: 20px;
+	height: 20px;
+	background-color: ${({ $checked, theme }) => $checked
+    ? theme?.colors?.toggleThumbOn ?? '#489fb5'
+    : theme?.colors?.toggleThumbOff ?? '#fafafa'};
+	border-radius: 50%;
+	box-shadow: 0px 2px 1px -1px
+			${({ theme }) => theme?.colors?.shadowLight ?? 'rgba(0, 0, 0, 0.2)'},
+		0px 1px 1px 0px
+			${({ theme }) => theme?.colors?.shadowLighter ?? 'rgba(0, 0, 0, 0.14)'},
+		0px 1px 3px 0px
+			${({ theme }) => theme?.colors?.shadowLighter ?? 'rgba(0, 0, 0, 0.12)'};
+	transition: left 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
+		transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
+		background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+	pointer-events: none;
+`;
+//# sourceMappingURL=list-item.styles.js.map

package/dist/list-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../src/list-item.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,4EAA4E;AAC5E,mEAAmE;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAmB3C;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAKlD,CAAC;AAEF,wFAAwF;AACxF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;IAOtC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAqB,EAAE,MAAM,EAAE,UAAU,IAAI,oBAAoB;CACpE,CAAC;AAEF,0FAA0F;AAC1F,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMxC,CAAC;AAEF,iEAAiE;AACjE,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK5C,CAAC;AAEF,qEAAqE;AACrE,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;UAI5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAE,KAAqB,EAAE,MAAM,EAAE,SAAS,IAAI,OAAO;CAC5E,CAAC;AAEF,2BAA2B;AAC3B,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAA;;UAE7B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAE,KAAqB,EAAE,MAAM,EAAE,SAAS,IAAI,OAAO;CAC5E,CAAC;AAEF;;;;;GAKG;AAEH,sEAAsE;AACtE,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAuB;;;SAGrD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;;;;;CASrD,CAAC;AAEF,2FAA2F;AAC3F,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAuB;;;;;;;;YAQtD,YAAY;uBACD,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAC3C,QAAQ;IACP,CAAC,CAAE,KAAqB,EAAE,MAAM,EAAE,aAAa;QAC7C,0BAA0B;IAC5B,CAAC,CAAE,KAAqB,EAAE,MAAM,EAAE,cAAc;QAC9C,qBAAqB;;;;kBAIV,YAAY;sBACR,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAC3C,QAAQ;IACP,CAAC,CAAE,KAAqB,EAAE,MAAM,EAAE,aAAa;QAC7C,0BAA0B;IAC5B,CAAC,CAAE,KAAqB,EAAE,MAAM,EAAE,cAAc;QAC9C,qBAAqB;;CAE1B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;CAKtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAuB;;;qBAGxC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAC3C,QAAQ;IACP,CAAC,CAAE,KAAqB,EAAE,MAAM,EAAE,aAAa;QAC7C,yBAAyB;IAC3B,CAAC,CAAE,KAAqB,EAAE,MAAM,EAAE,cAAc,IAAI,qBAAqB;;;CAG3E,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAuB;;;SAGpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;qCACjB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;;;qBAGtD,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAC3C,QAAQ;IACP,CAAC,CAAE,KAAqB,EAAE,MAAM,EAAE,aAAa,IAAI,SAAS;IAC5D,CAAC,CAAE,KAAqB,EAAE,MAAM,EAAE,cAAc,IAAI,SAAS;;;KAG3D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAqB,EAAE,MAAM,EAAE,WAAW,IAAI,oBAAoB;;KAElE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAqB,EAAE,MAAM,EAAE,aAAa,IAAI,qBAAqB;;KAErE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAqB,EAAE,MAAM,EAAE,aAAa,IAAI,qBAAqB;;;;;CAKzE,CAAC"}

package/dist/toggle-switch.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ToggleSwitch — a Material-style on/off switch with an animated thumb.
+ *
+ * Ported faithfully from ymy-components (`./components/ToggleSwitch`). The public
+ * API is preserved 1:1 so xunzi's single re-point site (Profile.tsx, the error-
+ * reporting toggle) is a pure import swap: it drives the switch through `checked`
+ * + `onChange`, both unchanged here.
+ *
+ * Behavior (uncontrolled / controlled): if `checked` is provided the component is
+ * controlled and renders that value; otherwise it owns internal state seeded by
+ * `defaultChecked`. Either way `onChange(next)` fires on toggle (suppressed when
+ * `disabled`). The hidden checkbox is blurred on change to drop the focus ring,
+ * and the label stops click propagation so it can sit inside clickable rows.
+ *
+ * Fluid animation (a core principle): the thumb slides + slightly scales between
+ * the off/on positions via a spring-like cubic-bezier CSS transition, and the
+ * track / ripple cross-fade their colors — preserved exactly from ymy.
+ *
+ * Theming: track / thumb / hover / focus colors read off styled-components'
+ * `props.theme.colors.toggle*` tokens (assembled by kang's `buildTheme`), with the
+ * same literal fallbacks ymy shipped so it renders sensibly with or without a
+ * `ThemeProvider`. `styled-components` is an optional peer dependency, used only by
+ * this module.
+ */
+import { type ReactElement } from 'react';
+export type ToggleSwitchProps = {
+    /** Controlled checked state. When provided, the component is controlled. */
+    checked?: boolean;
+    /** Initial checked state for the uncontrolled case. Defaults to `false`. */
+    defaultChecked?: boolean;
+    /** Fired with the next checked value whenever the switch is toggled. */
+    onChange?: (checked: boolean) => void;
+    /** When `true`, the switch is non-interactive and suppresses `onChange`. */
+    disabled?: boolean;
+};
+export declare const ToggleSwitch: ({ checked: controlledChecked, defaultChecked, onChange, disabled, }: ToggleSwitchProps) => ReactElement;
+export default ToggleSwitch;
+//# sourceMappingURL=toggle-switch.d.ts.map

package/dist/toggle-switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../src/toggle-switch.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAoB,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AAqGtE,MAAM,MAAM,iBAAiB,GAAG;IAC/B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,YAAY,wEAKtB,iBAAiB,KAAG,YAgCtB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/toggle-switch.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ToggleSwitch — a Material-style on/off switch with an animated thumb.
+ *
+ * Ported faithfully from ymy-components (`./components/ToggleSwitch`). The public
+ * API is preserved 1:1 so xunzi's single re-point site (Profile.tsx, the error-
+ * reporting toggle) is a pure import swap: it drives the switch through `checked`
+ * + `onChange`, both unchanged here.
+ *
+ * Behavior (uncontrolled / controlled): if `checked` is provided the component is
+ * controlled and renders that value; otherwise it owns internal state seeded by
+ * `defaultChecked`. Either way `onChange(next)` fires on toggle (suppressed when
+ * `disabled`). The hidden checkbox is blurred on change to drop the focus ring,
+ * and the label stops click propagation so it can sit inside clickable rows.
+ *
+ * Fluid animation (a core principle): the thumb slides + slightly scales between
+ * the off/on positions via a spring-like cubic-bezier CSS transition, and the
+ * track / ripple cross-fade their colors — preserved exactly from ymy.
+ *
+ * Theming: track / thumb / hover / focus colors read off styled-components'
+ * `props.theme.colors.toggle*` tokens (assembled by kang's `buildTheme`), with the
+ * same literal fallbacks ymy shipped so it renders sensibly with or without a
+ * `ThemeProvider`. `styled-components` is an optional peer dependency, used only by
+ * this module.
+ */
+import { useState } from 'react';
+// Named import (not the default) so styled-components resolves consistently
+// across bundler and raw ESM/CJS environments — matches ripple.ts / the other
+// styled kang primitives.
+import { styled } from 'styled-components';
+const c = (theme) => theme?.colors ?? {};
+const SwitchInput = styled.input `
+	opacity: 0;
+	width: 0;
+	height: 0;
+	position: absolute;
+`;
+const RippleEffect = styled.span `
+	position: absolute;
+	top: 50%;
+	left: ${({ $checked }) => ($checked ? '14px' : '0px')};
+	transform: translate(-50%, -50%) translateX(50%);
+	width: 38px;
+	height: 38px;
+	border-radius: 50%;
+	background-color: transparent;
+	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+		left 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
+	pointer-events: none;
+`;
+const SwitchContainer = styled.label `
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+	-webkit-tap-highlight-color: transparent;
+
+	@media (hover: hover) {
+		&:hover ${RippleEffect} {
+			background-color: ${({ $checked, theme }) => $checked
+    ? c(theme).toggleHoverOn ?? 'rgba(72, 159, 181, 0.08)'
+    : c(theme).toggleHoverOff ?? 'rgba(0, 0, 0, 0.04)'};
+		}
+	}
+
+	&:focus-within ${RippleEffect} {
+		background-color: ${({ $checked, theme }) => $checked
+    ? c(theme).toggleFocusOn ?? 'rgba(72, 159, 181, 0.12)'
+    : c(theme).toggleFocusOff ?? 'rgba(0, 0, 0, 0.06)'};
+	}
+`;
+const SwitchTrack = styled.span `
+	width: 34px;
+	height: 14px;
+	background-color: ${({ $checked, theme }) => $checked
+    ? c(theme).toggleTrackOn ?? 'rgba(72, 159, 181, 0.5)'
+    : c(theme).toggleTrackOff ?? 'rgba(0, 0, 0, 0.38)'};
+	border-radius: 7px;
+	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+`;
+const SwitchThumb = styled.span `
+	position: absolute;
+	top: 50%;
+	left: ${({ $checked }) => ($checked ? '14px' : '0px')};
+	transform: translateY(-50%) scale(${({ $checked }) => ($checked ? 1.1 : 1)});
+	width: 20px;
+	height: 20px;
+	background-color: ${({ $checked, theme }) => $checked
+    ? c(theme).toggleThumbOn ?? '#489fb5'
+    : c(theme).toggleThumbOff ?? '#fafafa'};
+	border-radius: 50%;
+	box-shadow: 0px 2px 1px -1px ${({ theme }) => c(theme).shadowLight ?? 'rgba(0, 0, 0, 0.2)'},
+		0px 1px 1px 0px ${({ theme }) => c(theme).shadowLighter ?? 'rgba(0, 0, 0, 0.14)'},
+		0px 1px 3px 0px ${({ theme }) => c(theme).shadowLighter ?? 'rgba(0, 0, 0, 0.12)'};
+	transition: left 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
+		transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
+		background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+	pointer-events: none;
+`;
+export const ToggleSwitch = ({ checked: controlledChecked, defaultChecked = false, onChange, disabled = false, }) => {
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const isControlled = controlledChecked !== undefined;
+    const checked = isControlled ? controlledChecked : internalChecked;
+    const handleChange = (e) => {
+        if (disabled)
+            return;
+        // Blur immediately to remove the focus highlight.
+        e.target.blur();
+        const newValue = !checked;
+        if (!isControlled) {
+            setInternalChecked(newValue);
+        }
+        onChange?.(newValue);
+    };
+    return (_jsxs(SwitchContainer, { "$checked": checked, onClick: (e) => e.stopPropagation(), children: [_jsx(SwitchInput, { type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled }), _jsx(SwitchTrack, { "$checked": checked }), _jsx(RippleEffect, { "$checked": checked }), _jsx(SwitchThumb, { "$checked": checked })] }));
+};
+export default ToggleSwitch;
+//# sourceMappingURL=toggle-switch.js.map

package/dist/toggle-switch.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "kang-components",
-	"version": "0.5.0",
-	"description": "Generic, domain-free React UI primitives (CSS-first press feedback, delayed-action hook, spring presets, cross-fading text).",
+	"version": "0.7.0",
+	"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",
 	"repository": {