@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

package/dist/components/CountBadge/CountBadge.js

@@ -0,0 +1,60 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@chakra-ui/react');
+var CountBadge_styles = require('./CountBadge.styles.js');
+
+/**
+ * CountBadge — an unread / notification count (moved into the design system
+ * from FactChat's `UnreadCountBadge`).
+ *
+ * - Numeric: `count` as text, capped at `max` (default 99 → `"99+"`). Renders
+ *   nothing for 0 unless `showZero`.
+ * - Dot (`dot`): a small circle with no number. `aria-hidden` unless it is
+ *   given a `label` — then it is an `img` with that name.
+ *
+ * Give it a `label` whenever the number alone would not make sense out of
+ * context and the badge sits in readable content — next to a nav item's
+ * text, in a list row.
+ *
+ * NOT on an icon-only button: the button's `aria-label` replaces its whole
+ * subtree as the accessible name, so the badge's hidden label is never
+ * announced. Put the count in the button's `aria-label` instead and leave
+ * the badge unlabelled (it is then only the visible number):
+ *
+ * ```tsx
+ * <IconButton aria-label={`알림, 읽지 않음 ${n}개`} variant="ghost">
+ *   <BellIcon />
+ *   <CountBadge count={n} position="absolute" top={0} right={0} />
+ * </IconButton>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CountBadge count={5} />
+ * <CountBadge count={120} label="읽지 않은 알림 120개" />   // shows 99+
+ * <CountBadge dot label="새 소식" />
+ * ```
+ */
+const CountBadge = React.forwardRef(({ count, max = 99, dot = false, showZero = false, label, size = 'md', 'aria-label': ariaLabel, ...rest }, ref) => {
+    const name = label ?? ariaLabel;
+    const isEmpty = (count ?? 0) <= 0;
+    if (dot) {
+        if (count !== undefined && isEmpty && !showZero)
+            return null;
+        const dotSize = CountBadge_styles.countBadgeDotSizes[size];
+        return (jsxRuntime.jsx(react.Box, { as: "span", display: "inline-block", flexShrink: 0, boxSize: dotSize, borderRadius: "full", bgColor: "count.bg", ...(name
+                ? { role: 'img', 'aria-label': name }
+                : { 'aria-hidden': true }), "data-count-badge": "dot", ...rest, ref: ref }));
+    }
+    if (isEmpty && !showZero)
+        return null;
+    const text = CountBadge_styles.formatCount(count ?? 0, max);
+    return (jsxRuntime.jsx(react.Box, { as: "span", ...CountBadge_styles.countBadgeBaseStyles, ...CountBadge_styles.countBadgeSizeStyles[size], "data-count-badge": "count", ...rest, ref: ref, children: name ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Box, { as: "span", "aria-hidden": true, children: text }), jsxRuntime.jsx(react.Box, { as: "span", srOnly: true, children: name })] })) : (text) }));
+});
+CountBadge.displayName = 'CountBadge';
+
+exports.CountBadge = CountBadge;
+//# sourceMappingURL=CountBadge.js.map

package/dist/components/CountBadge/CountBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountBadge.js","sources":["../../../src/components/CountBadge/CountBadge.tsx"],"sourcesContent":[null],"names":["forwardRef","countBadgeDotSizes","_jsx","Box","formatCount","countBadgeBaseStyles","countBadgeSizeStyles","_jsxs","_Fragment"],"mappings":";;;;;;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACI,MAAM,UAAU,GAAGA,gBAAU,CAClC,CACE,EACE,KAAK,EACL,GAAG,GAAG,EAAE,EACR,GAAG,GAAG,KAAK,EACX,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACS,EAClB,GAAmC,KACjC;AACF,IAAA,MAAM,IAAI,GAAG,KAAK,IAAI,SAAS;IAC/B,MAAM,OAAO,GAAG,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;IAEjC,IAAI,GAAG,EAAE;AACP,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;AAC5D,QAAA,MAAM,OAAO,GAAGC,oCAAkB,CAAC,IAAI,CAAC;AACxC,QAAA,QACEC,cAAA,CAACC,SAAG,EAAA,EACF,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,cAAc,EACtB,UAAU,EAAE,CAAC,EACb,OAAO,EAAE,OAAO,EAChB,YAAY,EAAC,MAAM,EACnB,OAAO,EAAC,UAAU,EAAA,IACb;kBACD,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI;AACnC,kBAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAA,kBAAA,EACX,KAAK,EAAA,GAClB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR;IAEN;IAEA,IAAI,OAAO,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,IAAI;IAErC,MAAM,IAAI,GAAGC,6BAAW,CAAC,KAAK,IAAI,CAAC,EAAE,GAAG,CAAC;AAEzC,IAAA,QACEF,cAAA,CAACC,SAAG,EAAA,EACF,EAAE,EAAC,MAAM,EAAA,GACLE,sCAAoB,EAAA,GACpBC,sCAAoB,CAAC,IAAI,CAAC,EAAA,kBAAA,EACb,OAAO,EAAA,GACpB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,IAAI,IACHC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEN,cAAA,CAACC,SAAG,EAAA,EAAC,EAAE,EAAC,MAAM,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EACX,IAAI,EAAA,CACD,EACND,cAAA,CAACC,SAAG,EAAA,EAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAA,IAAA,EAAA,QAAA,EAClB,IAAI,EAAA,CACD,CAAA,EAAA,CACL,KAEH,IAAI,CACL,EAAA,CACG;AAEV,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/CountBadge/CountBadge.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '@chakra-ui/react';
+import { countBadgeDotSizes, formatCount, countBadgeSizeStyles, countBadgeBaseStyles } from './CountBadge.styles.mjs';
+
+/**
+ * CountBadge — an unread / notification count (moved into the design system
+ * from FactChat's `UnreadCountBadge`).
+ *
+ * - Numeric: `count` as text, capped at `max` (default 99 → `"99+"`). Renders
+ *   nothing for 0 unless `showZero`.
+ * - Dot (`dot`): a small circle with no number. `aria-hidden` unless it is
+ *   given a `label` — then it is an `img` with that name.
+ *
+ * Give it a `label` whenever the number alone would not make sense out of
+ * context and the badge sits in readable content — next to a nav item's
+ * text, in a list row.
+ *
+ * NOT on an icon-only button: the button's `aria-label` replaces its whole
+ * subtree as the accessible name, so the badge's hidden label is never
+ * announced. Put the count in the button's `aria-label` instead and leave
+ * the badge unlabelled (it is then only the visible number):
+ *
+ * ```tsx
+ * <IconButton aria-label={`알림, 읽지 않음 ${n}개`} variant="ghost">
+ *   <BellIcon />
+ *   <CountBadge count={n} position="absolute" top={0} right={0} />
+ * </IconButton>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CountBadge count={5} />
+ * <CountBadge count={120} label="읽지 않은 알림 120개" />   // shows 99+
+ * <CountBadge dot label="새 소식" />
+ * ```
+ */
+const CountBadge = forwardRef(({ count, max = 99, dot = false, showZero = false, label, size = 'md', 'aria-label': ariaLabel, ...rest }, ref) => {
+    const name = label ?? ariaLabel;
+    const isEmpty = (count ?? 0) <= 0;
+    if (dot) {
+        if (count !== undefined && isEmpty && !showZero)
+            return null;
+        const dotSize = countBadgeDotSizes[size];
+        return (jsx(Box, { as: "span", display: "inline-block", flexShrink: 0, boxSize: dotSize, borderRadius: "full", bgColor: "count.bg", ...(name
+                ? { role: 'img', 'aria-label': name }
+                : { 'aria-hidden': true }), "data-count-badge": "dot", ...rest, ref: ref }));
+    }
+    if (isEmpty && !showZero)
+        return null;
+    const text = formatCount(count ?? 0, max);
+    return (jsx(Box, { as: "span", ...countBadgeBaseStyles, ...countBadgeSizeStyles[size], "data-count-badge": "count", ...rest, ref: ref, children: name ? (jsxs(Fragment, { children: [jsx(Box, { as: "span", "aria-hidden": true, children: text }), jsx(Box, { as: "span", srOnly: true, children: name })] })) : (text) }));
+});
+CountBadge.displayName = 'CountBadge';
+
+export { CountBadge };
+//# sourceMappingURL=CountBadge.mjs.map

package/dist/components/CountBadge/CountBadge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountBadge.mjs","sources":["../../../src/components/CountBadge/CountBadge.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,GAAG,GAAG,EAAE,EACR,GAAG,GAAG,KAAK,EACX,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACS,EAClB,GAAmC,KACjC;AACF,IAAA,MAAM,IAAI,GAAG,KAAK,IAAI,SAAS;IAC/B,MAAM,OAAO,GAAG,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;IAEjC,IAAI,GAAG,EAAE;AACP,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;AAC5D,QAAA,MAAM,OAAO,GAAG,kBAAkB,CAAC,IAAI,CAAC;AACxC,QAAA,QACEA,GAAA,CAAC,GAAG,EAAA,EACF,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,cAAc,EACtB,UAAU,EAAE,CAAC,EACb,OAAO,EAAE,OAAO,EAChB,YAAY,EAAC,MAAM,EACnB,OAAO,EAAC,UAAU,EAAA,IACb;kBACD,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI;AACnC,kBAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAA,kBAAA,EACX,KAAK,EAAA,GAClB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR;IAEN;IAEA,IAAI,OAAO,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,IAAI;IAErC,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,IAAI,CAAC,EAAE,GAAG,CAAC;AAEzC,IAAA,QACEA,GAAA,CAAC,GAAG,EAAA,EACF,EAAE,EAAC,MAAM,EAAA,GACL,oBAAoB,EAAA,GACpB,oBAAoB,CAAC,IAAI,CAAC,EAAA,kBAAA,EACb,OAAO,EAAA,GACpB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,IAAI,IACHC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAC,MAAM,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EACX,IAAI,EAAA,CACD,EACNA,GAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAA,IAAA,EAAA,QAAA,EAClB,IAAI,EAAA,CACD,CAAA,EAAA,CACL,KAEH,IAAI,CACL,EAAA,CACG;AAEV,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/CountBadge/CountBadge.styles.d.ts

@@ -0,0 +1,13 @@
+import type { BoxProps } from '@chakra-ui/react';
+import type { CountBadgeSize } from './CountBadge.types';
+/**
+ * Shared look: the `count.*` pair (coral-red fill, white number), a pill whose
+ * min-width equals its height so a single digit is a circle, and tabular
+ * figures so the width does not jitter as the number changes.
+ */
+export declare const countBadgeBaseStyles: BoxProps;
+export declare const countBadgeSizeStyles: Record<CountBadgeSize, BoxProps>;
+export declare const countBadgeDotSizes: Record<CountBadgeSize, string>;
+/** `120, 99 → "99+"`; negative / non-finite → `"0"`. */
+export declare const formatCount: (count: number, max: number) => string;
+//# sourceMappingURL=CountBadge.styles.d.ts.map

package/dist/components/CountBadge/CountBadge.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountBadge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CountBadge/CountBadge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAYlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAIjE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAI7D,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,KAAG,MAGxD,CAAC"}

package/dist/components/CountBadge/CountBadge.styles.js

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+/**
+ * Shared look: the `count.*` pair (coral-red fill, white number), a pill whose
+ * min-width equals its height so a single digit is a circle, and tabular
+ * figures so the width does not jitter as the number changes.
+ */
+const countBadgeBaseStyles = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    bgColor: 'count.bg',
+    color: 'count.fg',
+    borderRadius: 'full',
+    fontWeight: 'bold',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    fontVariantNumeric: 'tabular-nums',
+};
+const countBadgeSizeStyles = {
+    sm: { h: '16px', minW: '16px', px: '4px', fontSize: '10px' },
+    md: { h: '18px', minW: '18px', px: '5px', fontSize: '11px' },
+    lg: { h: '22px', minW: '22px', px: '6px', fontSize: '12px' },
+};
+const countBadgeDotSizes = {
+    sm: '6px',
+    md: '8px',
+    lg: '10px',
+};
+/** `120, 99 → "99+"`; negative / non-finite → `"0"`. */
+const formatCount = (count, max) => {
+    const safe = Number.isFinite(count) && count > 0 ? Math.floor(count) : 0;
+    return safe > max ? `${max}+` : String(safe);
+};
+
+exports.countBadgeBaseStyles = countBadgeBaseStyles;
+exports.countBadgeDotSizes = countBadgeDotSizes;
+exports.countBadgeSizeStyles = countBadgeSizeStyles;
+exports.formatCount = formatCount;
+//# sourceMappingURL=CountBadge.styles.js.map

package/dist/components/CountBadge/CountBadge.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountBadge.styles.js","sources":["../../../src/components/CountBadge/CountBadge.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;AAIG;AACI,MAAM,oBAAoB,GAAa;AAC5C,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,QAAQ;AACxB,IAAA,UAAU,EAAE,CAAC;AACb,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,YAAY,EAAE,MAAM;AACpB,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,kBAAkB,EAAE,cAAc;;AAG7B,MAAM,oBAAoB,GAAqC;AACpE,IAAA,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC5D,IAAA,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC5D,IAAA,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;;AAGvD,MAAM,kBAAkB,GAAmC;AAChE,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,MAAM;;AAGZ;MACa,WAAW,GAAG,CAAC,KAAa,EAAE,GAAW,KAAY;IAChE,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AACxE,IAAA,OAAO,IAAI,GAAG,GAAG,GAAG,CAAA,EAAG,GAAG,CAAA,CAAA,CAAG,GAAG,MAAM,CAAC,IAAI,CAAC;AAC9C;;;;;;;"}

package/dist/components/CountBadge/CountBadge.styles.mjs

@@ -0,0 +1,37 @@
+"use client";
+/**
+ * Shared look: the `count.*` pair (coral-red fill, white number), a pill whose
+ * min-width equals its height so a single digit is a circle, and tabular
+ * figures so the width does not jitter as the number changes.
+ */
+const countBadgeBaseStyles = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    bgColor: 'count.bg',
+    color: 'count.fg',
+    borderRadius: 'full',
+    fontWeight: 'bold',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    fontVariantNumeric: 'tabular-nums',
+};
+const countBadgeSizeStyles = {
+    sm: { h: '16px', minW: '16px', px: '4px', fontSize: '10px' },
+    md: { h: '18px', minW: '18px', px: '5px', fontSize: '11px' },
+    lg: { h: '22px', minW: '22px', px: '6px', fontSize: '12px' },
+};
+const countBadgeDotSizes = {
+    sm: '6px',
+    md: '8px',
+    lg: '10px',
+};
+/** `120, 99 → "99+"`; negative / non-finite → `"0"`. */
+const formatCount = (count, max) => {
+    const safe = Number.isFinite(count) && count > 0 ? Math.floor(count) : 0;
+    return safe > max ? `${max}+` : String(safe);
+};
+
+export { countBadgeBaseStyles, countBadgeDotSizes, countBadgeSizeStyles, formatCount };
+//# sourceMappingURL=CountBadge.styles.mjs.map

package/dist/components/CountBadge/CountBadge.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountBadge.styles.mjs","sources":["../../../src/components/CountBadge/CountBadge.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAIA;;;;AAIG;AACI,MAAM,oBAAoB,GAAa;AAC5C,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,QAAQ;AACxB,IAAA,UAAU,EAAE,CAAC;AACb,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,YAAY,EAAE,MAAM;AACpB,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,kBAAkB,EAAE,cAAc;;AAG7B,MAAM,oBAAoB,GAAqC;AACpE,IAAA,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC5D,IAAA,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC5D,IAAA,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;;AAGvD,MAAM,kBAAkB,GAAmC;AAChE,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,MAAM;;AAGZ;MACa,WAAW,GAAG,CAAC,KAAa,EAAE,GAAW,KAAY;IAChE,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AACxE,IAAA,OAAO,IAAI,GAAG,GAAG,GAAG,CAAA,EAAG,GAAG,CAAA,CAAA,CAAG,GAAG,MAAM,CAAC,IAAI,CAAC;AAC9C;;;;"}

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

@@ -0,0 +1,33 @@
+import type { BoxProps } from '@chakra-ui/react';
+export type CountBadgeSize = 'sm' | 'md' | 'lg';
+export type CountBadgeProps = Omit<BoxProps, 'children'> & {
+    /**
+     * The number to show. In numeric mode a count of 0 (or less, or missing)
+     * renders nothing unless `showZero`. In dot mode a count is optional — pass
+     * one to hide the dot when it reaches 0.
+     */
+    count?: number;
+    /**
+     * Largest number shown as-is; anything above renders as `"{max}+"`.
+     * @default 99
+     */
+    max?: number;
+    /** Dot mode: a small circle with no number ("something new"). */
+    dot?: boolean;
+    /** Render `0` (numeric) / the dot (dot mode) even when `count` is 0. */
+    showZero?: boolean;
+    /**
+     * Accessible name. In numeric mode it is read INSTEAD of the bare number
+     * (e.g. "읽지 않은 알림 120개" rather than "99+"); in dot mode it is what
+     * makes the dot visible to assistive tech at all — without it the dot is
+     * `aria-hidden`. `aria-label` is accepted as an alias.
+     *
+     * Inside an element that has its own `aria-label` (an icon-only button) it
+     * is never announced — that `aria-label` replaces the subtree. Put the
+     * count in the button's `aria-label` there instead.
+     */
+    label?: string;
+    /** @default 'md' */
+    size?: CountBadgeSize;
+};
+//# sourceMappingURL=CountBadge.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CountBadge.types.d.ts","sourceRoot":"","sources":["../../../src/components/CountBadge/CountBadge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACzD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC"}

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

@@ -0,0 +1,3 @@
+export { CountBadge } from './CountBadge';
+export type { CountBadgeProps, CountBadgeSize } from './CountBadge.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CountBadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/CountUp/CountUp.d.ts

@@ -0,0 +1,30 @@
+import { CountUpProps } from './CountUp.types';
+/**
+ * Counts a number up to `to` — for a balance that just grew, a total that just
+ * settled, a KPI that just refreshed.
+ *
+ * The only thing in the motion layer that CSS cannot animate at all: a number
+ * is text, and text content is not an animatable property. So this interpolates
+ * in JavaScript — and then reads the *same* curve CSS would have used, through
+ * {@link cubicBezier}, rather than inventing an ease-out for the occasion.
+ *
+ * `motion.slower` is the default and is the top of the response scale on
+ * purpose. FactChat's purchase modal counts for 1500ms after a 1000ms delay,
+ * which is two and a half seconds of a modal that has already told the reader
+ * the answer in its heading. A count-up is a flourish on a number that is
+ * already known; past ~700ms it stops reading as earned and starts reading as
+ * something to wait out.
+ *
+ * Under reduced motion the final value renders immediately — the number is the
+ * information, and the count is the decoration.
+ *
+ * **Renders a single `<span>` and wraps nothing.** The other primitives here put
+ * a wrapper around their children; this one takes no children and *is* the
+ * element, so it drops into running text or a heading with nothing in between.
+ *
+ * ```tsx
+ * <CountUp from={previousBalance} to={balance} />
+ * ```
+ */
+export declare const CountUp: import("react").ForwardRefExoticComponent<CountUpProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=CountUp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CountUp.d.ts","sourceRoot":"","sources":["../../../src/components/CountUp/CountUp.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAO/C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,OAAO,0GA+EnB,CAAC"}

package/dist/components/CountUp/CountUp.js

@@ -0,0 +1,95 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@chakra-ui/react');
+var cubicBezier = require('../../utils/cubicBezier.js');
+var motion = require('../../theme/motion.js');
+
+/** Comma-grouped, which is what a balance is read as. */
+const groupDigits = (n) => Math.round(n).toLocaleString('en-US');
+const ease = cubicBezier.cubicBezier('emphasized');
+/**
+ * Counts a number up to `to` — for a balance that just grew, a total that just
+ * settled, a KPI that just refreshed.
+ *
+ * The only thing in the motion layer that CSS cannot animate at all: a number
+ * is text, and text content is not an animatable property. So this interpolates
+ * in JavaScript — and then reads the *same* curve CSS would have used, through
+ * {@link cubicBezier}, rather than inventing an ease-out for the occasion.
+ *
+ * `motion.slower` is the default and is the top of the response scale on
+ * purpose. FactChat's purchase modal counts for 1500ms after a 1000ms delay,
+ * which is two and a half seconds of a modal that has already told the reader
+ * the answer in its heading. A count-up is a flourish on a number that is
+ * already known; past ~700ms it stops reading as earned and starts reading as
+ * something to wait out.
+ *
+ * Under reduced motion the final value renders immediately — the number is the
+ * information, and the count is the decoration.
+ *
+ * **Renders a single `<span>` and wraps nothing.** The other primitives here put
+ * a wrapper around their children; this one takes no children and *is* the
+ * element, so it drops into running text or a heading with nothing in between.
+ *
+ * ```tsx
+ * <CountUp from={previousBalance} to={balance} />
+ * ```
+ */
+const CountUp = React.forwardRef(({ to, from, durationMs = motion.MOTION_DURATION_MS.slower, delayMs = 0, format = groupDigits, onEnd, ...rest }, ref) => {
+    // Chakra resolves this from the same media query the `_motionReduce`
+    // condition compiles to, so the JS branch and the CSS branch cannot drift.
+    const reduced = react.useBreakpointValue({ base: false, _motionReduce: true }, { ssr: false });
+    // The displayed value lives in a ref and paints through a forced render, so
+    // the ~60 frames of a count do not each rebuild the subtree. Only this node
+    // re-renders, and only its text changes.
+    const shown = React.useRef(from ?? to);
+    const [, repaint] = React.useReducer((n) => n + 1, 0);
+    // Read inside the effect rather than listed as dependencies: a caller that
+    // rebuilds `format` inline every render would otherwise restart the count
+    // on every parent render.
+    const latest = React.useRef({ format, onEnd, durationMs, delayMs });
+    latest.current = { format, onEnd, durationMs, delayMs };
+    React.useEffect(() => {
+        const start = shown.current;
+        if (reduced || start === to) {
+            shown.current = to;
+            repaint();
+            latest.current.onEnd?.();
+            return;
+        }
+        const { durationMs: ms, delayMs: delay } = latest.current;
+        let frame = 0;
+        let began = 0;
+        const step = (now) => {
+            if (!began)
+                began = now;
+            const elapsed = now - began - delay;
+            if (elapsed < 0) {
+                frame = requestAnimationFrame(step);
+                return;
+            }
+            if (elapsed >= ms) {
+                shown.current = to;
+                repaint();
+                latest.current.onEnd?.();
+                return;
+            }
+            shown.current = start + (to - start) * ease(elapsed / ms);
+            repaint();
+            frame = requestAnimationFrame(step);
+        };
+        frame = requestAnimationFrame(step);
+        return () => cancelAnimationFrame(frame);
+        // `from` is a starting value, not a target: changing it mid-count would
+        // restart from a number the reader never saw. Later counts pick up from
+        // wherever the last one landed, which is what makes a second reward read
+        // as adding to the first.
+    }, [to, reduced]);
+    return (jsxRuntime.jsx(react.chakra.span, { ref: ref, fontVariantNumeric: "tabular-nums", ...rest, children: format(shown.current) }));
+});
+CountUp.displayName = 'CountUp';
+
+exports.CountUp = CountUp;
+//# sourceMappingURL=CountUp.js.map

package/dist/components/CountUp/CountUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountUp.js","sources":["../../../src/components/CountUp/CountUp.tsx"],"sourcesContent":[null],"names":["cubicBezier","forwardRef","MOTION_DURATION_MS","useBreakpointValue","useRef","useReducer","useEffect","_jsx","chakra"],"mappings":"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"}

package/dist/components/CountUp/CountUp.mjs

@@ -0,0 +1,93 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useReducer, useEffect } from 'react';
+import { useBreakpointValue, chakra } from '@chakra-ui/react';
+import { cubicBezier } from '../../utils/cubicBezier.mjs';
+import { MOTION_DURATION_MS } from '../../theme/motion.mjs';
+
+/** Comma-grouped, which is what a balance is read as. */
+const groupDigits = (n) => Math.round(n).toLocaleString('en-US');
+const ease = cubicBezier('emphasized');
+/**
+ * Counts a number up to `to` — for a balance that just grew, a total that just
+ * settled, a KPI that just refreshed.
+ *
+ * The only thing in the motion layer that CSS cannot animate at all: a number
+ * is text, and text content is not an animatable property. So this interpolates
+ * in JavaScript — and then reads the *same* curve CSS would have used, through
+ * {@link cubicBezier}, rather than inventing an ease-out for the occasion.
+ *
+ * `motion.slower` is the default and is the top of the response scale on
+ * purpose. FactChat's purchase modal counts for 1500ms after a 1000ms delay,
+ * which is two and a half seconds of a modal that has already told the reader
+ * the answer in its heading. A count-up is a flourish on a number that is
+ * already known; past ~700ms it stops reading as earned and starts reading as
+ * something to wait out.
+ *
+ * Under reduced motion the final value renders immediately — the number is the
+ * information, and the count is the decoration.
+ *
+ * **Renders a single `<span>` and wraps nothing.** The other primitives here put
+ * a wrapper around their children; this one takes no children and *is* the
+ * element, so it drops into running text or a heading with nothing in between.
+ *
+ * ```tsx
+ * <CountUp from={previousBalance} to={balance} />
+ * ```
+ */
+const CountUp = forwardRef(({ to, from, durationMs = MOTION_DURATION_MS.slower, delayMs = 0, format = groupDigits, onEnd, ...rest }, ref) => {
+    // Chakra resolves this from the same media query the `_motionReduce`
+    // condition compiles to, so the JS branch and the CSS branch cannot drift.
+    const reduced = useBreakpointValue({ base: false, _motionReduce: true }, { ssr: false });
+    // The displayed value lives in a ref and paints through a forced render, so
+    // the ~60 frames of a count do not each rebuild the subtree. Only this node
+    // re-renders, and only its text changes.
+    const shown = useRef(from ?? to);
+    const [, repaint] = useReducer((n) => n + 1, 0);
+    // Read inside the effect rather than listed as dependencies: a caller that
+    // rebuilds `format` inline every render would otherwise restart the count
+    // on every parent render.
+    const latest = useRef({ format, onEnd, durationMs, delayMs });
+    latest.current = { format, onEnd, durationMs, delayMs };
+    useEffect(() => {
+        const start = shown.current;
+        if (reduced || start === to) {
+            shown.current = to;
+            repaint();
+            latest.current.onEnd?.();
+            return;
+        }
+        const { durationMs: ms, delayMs: delay } = latest.current;
+        let frame = 0;
+        let began = 0;
+        const step = (now) => {
+            if (!began)
+                began = now;
+            const elapsed = now - began - delay;
+            if (elapsed < 0) {
+                frame = requestAnimationFrame(step);
+                return;
+            }
+            if (elapsed >= ms) {
+                shown.current = to;
+                repaint();
+                latest.current.onEnd?.();
+                return;
+            }
+            shown.current = start + (to - start) * ease(elapsed / ms);
+            repaint();
+            frame = requestAnimationFrame(step);
+        };
+        frame = requestAnimationFrame(step);
+        return () => cancelAnimationFrame(frame);
+        // `from` is a starting value, not a target: changing it mid-count would
+        // restart from a number the reader never saw. Later counts pick up from
+        // wherever the last one landed, which is what makes a second reward read
+        // as adding to the first.
+    }, [to, reduced]);
+    return (jsx(chakra.span, { ref: ref, fontVariantNumeric: "tabular-nums", ...rest, children: format(shown.current) }));
+});
+CountUp.displayName = 'CountUp';
+
+export { CountUp };
+//# sourceMappingURL=CountUp.mjs.map

package/dist/components/CountUp/CountUp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountUp.mjs","sources":["../../../src/components/CountUp/CountUp.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import type { HTMLChakraProps } from '@chakra-ui/react';
+export interface CountUpProps extends HTMLChakraProps<'span'> {
+    /** The value to land on. */
+    to: number;
+    /**
+     * Where the first count starts. Omit to render `to` immediately and count
+     * only when it changes later.
+     */
+    from?: number;
+    /** Count duration. Defaults to `motion.slower` (700ms). */
+    durationMs?: number;
+    /** Delay before counting — e.g. to let a modal finish arriving. */
+    delayMs?: number;
+    /** Formats each intermediate value. Defaults to comma-grouped digits. */
+    format?: (n: number) => string;
+    /** Fires once a count settles, including under reduced motion. */
+    onEnd?: () => void;
+}
+//# sourceMappingURL=CountUp.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CountUp.types.d.ts","sourceRoot":"","sources":["../../../src/components/CountUp/CountUp.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,WAAW,YAAa,SAAQ,eAAe,CAAC,MAAM,CAAC;IAC3D,4BAA4B;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB"}

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

@@ -0,0 +1,3 @@
+export { CountUp } from './CountUp';
+export type { CountUpProps } from './CountUp.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CountUp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/DatePicker/RangeDatePicker.js

@@ -7,6 +7,7 @@ var chakraDayzedDatepicker = require('chakra-dayzed-datepicker');
 var dateFns = require('date-fns');
 var useLanguage = require('../../hooks/useLanguage.js');
 var Button = require('../Button/Button.js');
+require('../Button/Button.styles.js');
 var index = require('../Icon/index.js');
 var constants = require('../MonthPicker/constants.js');
 
@@ -27,7 +28,7 @@ const RangeDatePicker = ({ propsConfigs, configs, usePortal = true, ...rest }) =
                 ...propsConfigs?.triggerBtnProps,
             },
             inputProps: {
-                color: 'primary.dark',
+                color: 'fg.default',
                 ...propsConfigs?.inputProps,
             },
             popoverCompProps: {
@@ -63,7 +64,7 @@ const RangeDatePicker = ({ propsConfigs, configs, usePortal = true, ...rest }) =
                     px: 6,
                     py: 4,
                     borderWidth: '1px',
-                    borderColor: 'primary.extralight',
+                    borderColor: 'border.default',
                     borderRadius: 16,
                     bg: 'bg.surface',
                     ...propsConfigs?.calendarPanelProps?.contentProps,
@@ -93,17 +94,18 @@ const RangeDatePicker = ({ propsConfigs, configs, usePortal = true, ...rest }) =
                     color: 'fg.default',
                     fontWeight: 'regular',
                     _hover: {
-                        background: 'primary.extralight',
+                        background: 'primary.wash',
                         ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps?._hover,
                     },
                     ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps,
                 },
                 todayBtnProps: {
                     fontWeight: 'semibold',
+                    boxShadow: 'inset 0 0 0 1px var(--chakra-colors-border-strong)',
                     ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps,
                 },
                 selectedBtnProps: {
-                    color: 'white',
+                    color: 'fg.onPrimary',
                     background: 'primary.main',
                     fontWeight: 'semibold',
                     position: 'relative',
@@ -112,8 +114,8 @@ const RangeDatePicker = ({ propsConfigs, configs, usePortal = true, ...rest }) =
                     ...propsConfigs?.dayOfMonthBtnProps?.selectedBtnProps,
                 },
                 isInRangeBtnProps: {
-                    color: 'primary.main',
-                    background: 'primary.extralight',
+                    color: 'fg.default',
+                    background: 'primary.selected',
                     borderRadius: 'none',
                     css: {
                         // pressed="true" 직전의 pressed="false" 요소에 borderRight
@@ -138,7 +140,7 @@ const RangeDatePicker = ({ propsConfigs, configs, usePortal = true, ...rest }) =
                 ...propsConfigs?.dayOfMonthBtnProps,
             },
             ...propsConfigs,
-        }, children: (selectedDates) => (jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(Button.Button, { pl: 2, colorPalette: "neutral", variant: "outline", ...propsConfigs?.triggerBtnProps, children: [jsxRuntime.jsx(index.MdOutlineCalendarToday, { color: "fg.subtle", style: { marginInlineEnd: 3 } }), selectedDates && selectedDates.length > 0
+        }, children: (selectedDates) => (jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(Button.Button, { pl: 2, variant: "secondary", ...propsConfigs?.triggerBtnProps, children: [jsxRuntime.jsx(index.MdOutlineCalendarToday, { color: "fg.subtle", style: { marginInlineEnd: 3 } }), selectedDates && selectedDates.length > 0
                         ? selectedDates.length === 1
                             ? `${dateFns.format(selectedDates[0], dateFormat, { locale: dateFnsLocale })} - `
                             : `${dateFns.format(selectedDates[0], dateFormat, { locale: dateFnsLocale })} - ${dateFns.format(selectedDates[1], dateFormat, { locale: dateFnsLocale })}`