@mindlogic-ai/logician-ui 5.0.0-alpha.3 → 5.0.0-alpha.30

package/dist/theme/recipes/controls.mjs

@@ -0,0 +1,144 @@
+"use client";
+import { defineRecipe, defineSlotRecipe } from '@chakra-ui/react';
+import { selectAnatomy, comboboxAnatomy, tabsAnatomy, checkboxAnatomy, radioGroupAnatomy, switchAnatomy } from '@chakra-ui/react/anatomy';
+import { CONTROL_RADIUS, controlSizes, CORE_CONTROL_SIZES, controlHeightToken, CONTROL_SIZES } from '../controlSizes.mjs';
+
+/**
+ * Chakra recipe overrides that put every control's `size` variant on the
+ * shared scale in `../controlSizes`. Chakra deep-merges these into its own
+ * recipes, so only the keys written here change.
+ *
+ * Nothing here holds a literal: every height, textStyle, padding and icon size
+ * comes from `controlSizes`, so a change to the scale lands everywhere at once
+ * and `controlSizes.test.ts` can check the resolved recipes against it.
+ *
+ * **Slot recipes pass Chakra's full anatomy, never a partial `slots` list.**
+ * Chakra merges configs array-by-index, so `slots: ['label']` does not add
+ * to the default list — it overwrites its first entry. For Checkbox that
+ * dropped the `root` slot (the label lost its line box); the old
+ * `['root', 'trigger', 'content']` Select override had been overwriting
+ * Select's `label` and `positioner` slots the same way.
+ */
+const bySize = (sizes, build) => Object.fromEntries(sizes.map((size) => [size, build(size)]));
+/**
+ * Button (and IconButton, which uses the same recipe). These are Chakra's own
+ * values — Button is the reference — restated from the scale so the scale is
+ * the single source and the test can prove nothing else drifted from it.
+ */
+const buttonRecipe = defineRecipe({
+    variants: {
+        size: bySize(CONTROL_SIZES, (size) => {
+            const s = controlSizes[size];
+            return {
+                h: s.height,
+                minW: s.height,
+                textStyle: s.textStyle,
+                px: s.actionPaddingX,
+                gap: s.gap,
+                _icon: { width: s.iconSize, height: s.iconSize },
+            };
+        }),
+    },
+});
+/**
+ * Field sizes, xs–xl. `2xs` is left on Chakra's own value (a 24.5px field):
+ * no field ships a 2xs today and shrinking it to Button's 21px would put a text
+ * box under the 24px target.
+ */
+const FIELD_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+const inputRecipe = defineRecipe({
+    base: { borderRadius: CONTROL_RADIUS },
+    variants: {
+        size: bySize(FIELD_SIZES, (size) => ({
+            textStyle: controlSizes[size].textStyle,
+            px: controlSizes[size].fieldPaddingX,
+            '--input-height': controlHeightToken(size),
+        })),
+    },
+});
+/** Textarea: same type and inline padding as Input; its height is its rows. */
+const textareaRecipe = defineRecipe({
+    base: { borderRadius: CONTROL_RADIUS },
+    variants: {
+        size: bySize(FIELD_SIZES, (size) => ({
+            textStyle: controlSizes[size].textStyle,
+            px: controlSizes[size].fieldPaddingX,
+        })),
+    },
+});
+const selectSlotRecipe = defineSlotRecipe({
+    slots: selectAnatomy.keys(),
+    base: { trigger: { borderRadius: CONTROL_RADIUS } },
+    variants: {
+        size: bySize(CORE_CONTROL_SIZES, (size) => ({
+            root: {
+                '--select-trigger-height': controlHeightToken(size),
+                '--select-trigger-padding-x': `spacing.${controlSizes[size].fieldPaddingX}`,
+            },
+            trigger: {
+                textStyle: controlSizes[size].textStyle,
+                // Chakra's lg `py: 3` is em-based and alone pushes the trigger past
+                // the height token; let the token decide (637d0fe).
+                ...(size === 'lg' && { py: '1.5' }),
+            },
+            content: { textStyle: controlSizes[size].textStyle },
+        })),
+    },
+});
+const comboboxSlotRecipe = defineSlotRecipe({
+    slots: comboboxAnatomy.keys(),
+    base: { input: { borderRadius: CONTROL_RADIUS } },
+    variants: {
+        size: bySize(CORE_CONTROL_SIZES, (size) => ({
+            root: {
+                '--combobox-input-height': controlHeightToken(size),
+                '--combobox-input-padding-x': `spacing.${controlSizes[size].fieldPaddingX}`,
+            },
+            input: { textStyle: controlSizes[size].textStyle },
+            content: { textStyle: controlSizes[size].textStyle },
+        })),
+    },
+});
+/**
+ * Tabs: the trigger height is the tab list's `--tabs-height`, set by the
+ * `Tabs` root's `size` (sm / md / lg — Chakra's tabs have no xs). A `size` on
+ * a single `Tab` does not reach it.
+ */
+const TAB_SIZES = ['sm', 'md', 'lg'];
+const tabsSlotRecipe = defineSlotRecipe({
+    slots: tabsAnatomy.keys(),
+    variants: {
+        size: bySize(TAB_SIZES, (size) => ({
+            root: { '--tabs-height': controlHeightToken(size) },
+            trigger: { textStyle: controlSizes[size].textStyle },
+        })),
+    },
+});
+/** Checkbox / Radio / Switch: the label takes the control type per size. */
+const checkboxSlotRecipe = defineSlotRecipe({
+    slots: checkboxAnatomy.keys(),
+    variants: {
+        size: bySize(CORE_CONTROL_SIZES, (size) => ({
+            label: { textStyle: controlSizes[size].textStyle },
+        })),
+    },
+});
+const radioGroupSlotRecipe = defineSlotRecipe({
+    slots: radioGroupAnatomy.keys(),
+    variants: {
+        size: bySize(CORE_CONTROL_SIZES, (size) => ({
+            item: { textStyle: controlSizes[size].textStyle },
+        })),
+    },
+});
+const switchSlotRecipe = defineSlotRecipe({
+    slots: switchAnatomy.keys(),
+    variants: {
+        size: bySize(CORE_CONTROL_SIZES, (size) => ({
+            label: { textStyle: controlSizes[size].textStyle },
+        })),
+    },
+});
+
+export { buttonRecipe, checkboxSlotRecipe, comboboxSlotRecipe, inputRecipe, radioGroupSlotRecipe, selectSlotRecipe, switchSlotRecipe, tabsSlotRecipe, textareaRecipe };
+//# sourceMappingURL=controls.mjs.map

package/dist/theme/recipes/controls.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.mjs","sources":["../../../src/theme/recipes/controls.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/translations/Defaults.translations.json.js

@@ -220,6 +220,13 @@ var downloading = {
 	ja: "ダウンロード中",
 	es: "Descargando"
 };
+var processing = {
+	ko: "처리 중",
+	en: "Processing",
+	zh: "处理中",
+	ja: "処理中",
+	es: "Procesando"
+};
 var deleting = {
 	ko: "삭제 중",
 	en: "Deleting",
@@ -234,6 +241,13 @@ var close = {
 	ja: "閉じる",
 	es: "Cerrar"
 };
+var clear_selection = {
+	ko: "선택 지우기",
+	en: "Clear selection",
+	zh: "清除选择",
+	ja: "選択をクリア",
+	es: "Borrar selección"
+};
 var defaultTranslations = {
 	get_started: get_started,
 	next: next,
@@ -273,12 +287,15 @@ var defaultTranslations = {
 	es: "Eliminar"
 },
 	downloading: downloading,
+	processing: processing,
 	deleting: deleting,
-	close: close
+	close: close,
+	clear_selection: clear_selection
 };
 
 exports.anonymous = anonymous;
 exports.clear = clear;
+exports.clear_selection = clear_selection;
 exports.close = close;
 exports.component = component;
 exports.copied = copied;
@@ -301,6 +318,7 @@ exports.page = page;
 exports.pagination_items_per_page = pagination_items_per_page;
 exports.pagination_range_text = pagination_range_text;
 exports.previous = previous;
+exports.processing = processing;
 exports.refresh_page = refresh_page;
 exports.see_less = see_less;
 exports.see_more = see_more;

package/dist/translations/Defaults.translations.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"Defaults.translations.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Defaults.translations.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/translations/Defaults.translations.json.mjs

@@ -216,6 +216,13 @@ var downloading = {
 	ja: "ダウンロード中",
 	es: "Descargando"
 };
+var processing = {
+	ko: "처리 중",
+	en: "Processing",
+	zh: "处理中",
+	ja: "処理中",
+	es: "Procesando"
+};
 var deleting = {
 	ko: "삭제 중",
 	en: "Deleting",
@@ -230,6 +237,13 @@ var close = {
 	ja: "閉じる",
 	es: "Cerrar"
 };
+var clear_selection = {
+	ko: "선택 지우기",
+	en: "Clear selection",
+	zh: "清除选择",
+	ja: "選択をクリア",
+	es: "Borrar selección"
+};
 var defaultTranslations = {
 	get_started: get_started,
 	next: next,
@@ -269,9 +283,11 @@ var defaultTranslations = {
 	es: "Eliminar"
 },
 	downloading: downloading,
+	processing: processing,
 	deleting: deleting,
-	close: close
+	close: close,
+	clear_selection: clear_selection
 };
 
-export { anonymous, clear, close, component, copied, copy, copy_error_details, defaultTranslations as default, deleting, download, downloading, error_boundary_default_message, error_boundary_subtitle, error_boundary_title, error_details_copied, error_id, get_started, go_next_page_button, month_range_placeholder, next, page, pagination_items_per_page, pagination_range_text, previous, refresh_page, see_less, see_more, support_help_text, support_information, time, try_again, unknown, upload_your_file, user_id };
+export { anonymous, clear, clear_selection, close, component, copied, copy, copy_error_details, defaultTranslations as default, deleting, download, downloading, error_boundary_default_message, error_boundary_subtitle, error_boundary_title, error_details_copied, error_id, get_started, go_next_page_button, month_range_placeholder, next, page, pagination_items_per_page, pagination_range_text, previous, processing, refresh_page, see_less, see_more, support_help_text, support_information, time, try_again, unknown, upload_your_file, user_id };
 //# sourceMappingURL=Defaults.translations.json.mjs.map

package/dist/translations/Defaults.translations.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Defaults.translations.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Defaults.translations.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/disabledControl.d.ts

@@ -17,9 +17,16 @@ export declare const disabledControl: {
     readonly opacity: 1;
     readonly boxShadow: "none";
 };
+/**
+ * Disabled look for fill-less (ghost) buttons — ghost Button, ghost
+ * IconButton. With no `disabled.bg` behind it the colour is the only cue, and
+ * `disabled.fg` sat ~1.4:1 from the resting ghost glyph (`fg.icon`), so the
+ * two read as the same state. `disabled.fgGhost` is a lighter grey (~2.7:1
+ * from `fg.icon` in light and dark).
+ */
 export declare const disabledText: {
     readonly bg: "transparent";
-    readonly color: "disabled.fg";
+    readonly color: "disabled.fgGhost";
     readonly borderColor: "transparent";
     readonly opacity: 1;
     readonly boxShadow: "none";

package/dist/utils/disabledControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"disabledControl.d.ts","sourceRoot":"","sources":["../../src/utils/disabledControl.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;;;;CAMlB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC"}
+{"version":3,"file":"disabledControl.d.ts","sourceRoot":"","sources":["../../src/utils/disabledControl.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;;;;CAMlB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC"}

package/dist/utils/disabledControl.js

@@ -20,9 +20,16 @@ const disabledControl = {
     opacity: 1,
     boxShadow: 'none',
 };
+/**
+ * Disabled look for fill-less (ghost) buttons — ghost Button, ghost
+ * IconButton. With no `disabled.bg` behind it the colour is the only cue, and
+ * `disabled.fg` sat ~1.4:1 from the resting ghost glyph (`fg.icon`), so the
+ * two read as the same state. `disabled.fgGhost` is a lighter grey (~2.7:1
+ * from `fg.icon` in light and dark).
+ */
 const disabledText = {
     bg: 'transparent',
-    color: 'disabled.fg',
+    color: 'disabled.fgGhost',
     borderColor: 'transparent',
     opacity: 1,
     boxShadow: 'none',

package/dist/utils/disabledControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"disabledControl.js","sources":["../../src/utils/disabledControl.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA;;;;;;;;;;;AAWG;AACI,MAAM,eAAe,GAAG;AAC7B,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,SAAS,EAAE,MAAM;;AAGZ,MAAM,YAAY,GAAG;AAC1B,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,SAAS,EAAE,MAAM;;;;;;"}
+{"version":3,"file":"disabledControl.js","sources":["../../src/utils/disabledControl.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA;;;;;;;;;;;AAWG;AACI,MAAM,eAAe,GAAG;AAC7B,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,SAAS,EAAE,MAAM;;AAGnB;;;;;;AAMG;AACI,MAAM,YAAY,GAAG;AAC1B,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,KAAK,EAAE,kBAAkB;AACzB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,SAAS,EAAE,MAAM;;;;;;"}

package/dist/utils/disabledControl.mjs

@@ -18,9 +18,16 @@ const disabledControl = {
     opacity: 1,
     boxShadow: 'none',
 };
+/**
+ * Disabled look for fill-less (ghost) buttons — ghost Button, ghost
+ * IconButton. With no `disabled.bg` behind it the colour is the only cue, and
+ * `disabled.fg` sat ~1.4:1 from the resting ghost glyph (`fg.icon`), so the
+ * two read as the same state. `disabled.fgGhost` is a lighter grey (~2.7:1
+ * from `fg.icon` in light and dark).
+ */
 const disabledText = {
     bg: 'transparent',
-    color: 'disabled.fg',
+    color: 'disabled.fgGhost',
     borderColor: 'transparent',
     opacity: 1,
     boxShadow: 'none',

package/dist/utils/disabledControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"disabledControl.mjs","sources":["../../src/utils/disabledControl.ts"],"sourcesContent":[null],"names":[],"mappings":";AAAA;;;;;;;;;;;AAWG;AACI,MAAM,eAAe,GAAG;AAC7B,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,SAAS,EAAE,MAAM;;AAGZ,MAAM,YAAY,GAAG;AAC1B,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,SAAS,EAAE,MAAM;;;;;"}
+{"version":3,"file":"disabledControl.mjs","sources":["../../src/utils/disabledControl.ts"],"sourcesContent":[null],"names":[],"mappings":";AAAA;;;;;;;;;;;AAWG;AACI,MAAM,eAAe,GAAG;AAC7B,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,SAAS,EAAE,MAAM;;AAGnB;;;;;;AAMG;AACI,MAAM,YAAY,GAAG;AAC1B,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,KAAK,EAAE,kBAAkB;AACzB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,SAAS,EAAE,MAAM;;;;;"}

package/dist/utils/focusRing.d.ts

@@ -25,4 +25,26 @@ export declare const focusRing: {
         readonly boxShadow: "var(--chakra-colors-bg-canvas) 0px 0px 0px 2px, var(--chakra-colors-focus-ring) 0px 0px 0px 4px";
     };
 };
+/**
+ * The same two bands as {@link FOCUS_RING_SHADOW}, drawn INSIDE the element's
+ * edge: the outer 2px in `focus.ring`, then the 2px `bg.canvas` band that keeps
+ * the ring legible against whatever fill the element has.
+ *
+ * {@link focusRing} needs 4px of clear space on every side, because both bands
+ * paint outside the box. Rows packed into a list cannot give it that — the band
+ * lands on the neighbouring row, which paints its own background back over
+ * half of it — and a list that scrolls (`overflow-x: auto`) clips it outright.
+ * Same colour and weight, inside the box instead.
+ */
+export declare const FOCUS_RING_INSET_SHADOW = "inset 0 0 0 2px var(--chakra-colors-focus-ring), inset 0 0 0 4px var(--chakra-colors-bg-canvas)";
+/** {@link focusRing}'s inset counterpart, for rows in a dense or scrolling list. */
+export declare const focusRingInset: {
+    readonly _focus: {
+        readonly outline: "none";
+    };
+    readonly _focusVisible: {
+        readonly outline: "none";
+        readonly boxShadow: "inset 0 0 0 2px var(--chakra-colors-focus-ring), inset 0 0 0 4px var(--chakra-colors-bg-canvas)";
+    };
+};
 //# sourceMappingURL=focusRing.d.ts.map

package/dist/utils/focusRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../src/utils/focusRing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB,oGACqE,CAAC;AAEpG,eAAO,MAAM,SAAS;;;;;;;;CAMZ,CAAC"}
+{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../src/utils/focusRing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB,oGACqE,CAAC;AAEpG,eAAO,MAAM,SAAS;;;;;;;;CAMZ,CAAC;AAEX;;;;;;;;;;GAUG;AACH,eAAO,MAAM,uBAAuB,oGAC+D,CAAC;AAEpG,oFAAoF;AACpF,eAAO,MAAM,cAAc;;;;;;;;CAMjB,CAAC"}

package/dist/utils/focusRing.js

@@ -26,7 +26,29 @@ const focusRing = {
         boxShadow: FOCUS_RING_SHADOW,
     },
 };
+/**
+ * The same two bands as {@link FOCUS_RING_SHADOW}, drawn INSIDE the element's
+ * edge: the outer 2px in `focus.ring`, then the 2px `bg.canvas` band that keeps
+ * the ring legible against whatever fill the element has.
+ *
+ * {@link focusRing} needs 4px of clear space on every side, because both bands
+ * paint outside the box. Rows packed into a list cannot give it that — the band
+ * lands on the neighbouring row, which paints its own background back over
+ * half of it — and a list that scrolls (`overflow-x: auto`) clips it outright.
+ * Same colour and weight, inside the box instead.
+ */
+const FOCUS_RING_INSET_SHADOW = 'inset 0 0 0 2px var(--chakra-colors-focus-ring), inset 0 0 0 4px var(--chakra-colors-bg-canvas)';
+/** {@link focusRing}'s inset counterpart, for rows in a dense or scrolling list. */
+const focusRingInset = {
+    _focus: { outline: 'none' },
+    _focusVisible: {
+        outline: 'none',
+        boxShadow: FOCUS_RING_INSET_SHADOW,
+    },
+};
 
+exports.FOCUS_RING_INSET_SHADOW = FOCUS_RING_INSET_SHADOW;
 exports.FOCUS_RING_SHADOW = FOCUS_RING_SHADOW;
 exports.focusRing = focusRing;
+exports.focusRingInset = focusRingInset;
 //# sourceMappingURL=focusRing.js.map

package/dist/utils/focusRing.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusRing.js","sources":["../../src/utils/focusRing.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,iBAAiB,GAC5B;AAEK,MAAM,SAAS,GAAG;AACvB,IAAA,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC3B,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EAAE,iBAAiB;AAC7B,KAAA;;;;;;"}
+{"version":3,"file":"focusRing.js","sources":["../../src/utils/focusRing.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,iBAAiB,GAC5B;AAEK,MAAM,SAAS,GAAG;AACvB,IAAA,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC3B,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EAAE,iBAAiB;AAC7B,KAAA;;AAGH;;;;;;;;;;AAUG;AACI,MAAM,uBAAuB,GAClC;AAEF;AACO,MAAM,cAAc,GAAG;AAC5B,IAAA,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC3B,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EAAE,uBAAuB;AACnC,KAAA;;;;;;;;"}

package/dist/utils/focusRing.mjs

@@ -24,6 +24,26 @@ const focusRing = {
         boxShadow: FOCUS_RING_SHADOW,
     },
 };
+/**
+ * The same two bands as {@link FOCUS_RING_SHADOW}, drawn INSIDE the element's
+ * edge: the outer 2px in `focus.ring`, then the 2px `bg.canvas` band that keeps
+ * the ring legible against whatever fill the element has.
+ *
+ * {@link focusRing} needs 4px of clear space on every side, because both bands
+ * paint outside the box. Rows packed into a list cannot give it that — the band
+ * lands on the neighbouring row, which paints its own background back over
+ * half of it — and a list that scrolls (`overflow-x: auto`) clips it outright.
+ * Same colour and weight, inside the box instead.
+ */
+const FOCUS_RING_INSET_SHADOW = 'inset 0 0 0 2px var(--chakra-colors-focus-ring), inset 0 0 0 4px var(--chakra-colors-bg-canvas)';
+/** {@link focusRing}'s inset counterpart, for rows in a dense or scrolling list. */
+const focusRingInset = {
+    _focus: { outline: 'none' },
+    _focusVisible: {
+        outline: 'none',
+        boxShadow: FOCUS_RING_INSET_SHADOW,
+    },
+};
 
-export { FOCUS_RING_SHADOW, focusRing };
+export { FOCUS_RING_INSET_SHADOW, FOCUS_RING_SHADOW, focusRing, focusRingInset };
 //# sourceMappingURL=focusRing.mjs.map

package/dist/utils/focusRing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"focusRing.mjs","sources":["../../src/utils/focusRing.ts"],"sourcesContent":[null],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,iBAAiB,GAC5B;AAEK,MAAM,SAAS,GAAG;AACvB,IAAA,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC3B,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EAAE,iBAAiB;AAC7B,KAAA;;;;;"}
+{"version":3,"file":"focusRing.mjs","sources":["../../src/utils/focusRing.ts"],"sourcesContent":[null],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,iBAAiB,GAC5B;AAEK,MAAM,SAAS,GAAG;AACvB,IAAA,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC3B,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EAAE,iBAAiB;AAC7B,KAAA;;AAGH;;;;;;;;;;AAUG;AACI,MAAM,uBAAuB,GAClC;AAEF;AACO,MAAM,cAAc,GAAG;AAC5B,IAAA,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC3B,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EAAE,uBAAuB;AACnC,KAAA;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.30",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -111,6 +111,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jscodeshift": "^17.3.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,6 +1,8 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
 import { Accordion, AccordionButton, AccordionItem, AccordionPanel } from '.';
 
 const meta = {
@@ -239,3 +241,86 @@ export const WithCustomContent: Story = {
     );
   },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `Accordion.usage.mdx` with <Canvas of={…} />. Hidden from the
+// sidebar (`!dev`); `tags` is written out on each story because the indexer
+// reads CSF statically.
+
+const FAQ = [
+  {
+    q: '요금제를 바꾸면 남은 크레딧은 어떻게 되나요?',
+    a: '남은 크레딧은 새 요금제로 그대로 옮겨집니다.',
+  },
+  {
+    q: '팀원을 추가하면 바로 쓸 수 있나요?',
+    a: '초대를 수락하는 즉시 쓸 수 있습니다.',
+  },
+  {
+    q: '영수증은 어디에서 받나요?',
+    a: '계정 설정의 결제 내역에서 받을 수 있습니다.',
+  },
+];
+
+export const DoFaq: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: questions the reader scans, answers on demand',
+  render: (args) => (
+    <Box maxW="560px">
+      <Accordion {...args} defaultValue={['faq-0']}>
+        {FAQ.map(({ q, a }, i) => (
+          <AccordionItem key={q} value={`faq-${i}`}>
+            <AccordionButton>{q}</AccordionButton>
+            <AccordionPanel>{a}</AccordionPanel>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </Box>
+  ),
+};
+
+export const DontHideRequired: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: required steps behind a closed section",
+  render: (args) => (
+    <Box maxW="560px">
+      <Accordion {...args}>
+        <AccordionItem value="basic">
+          <AccordionButton>기본 정보</AccordionButton>
+          <AccordionPanel>이름, 이메일</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="consent">
+          <AccordionButton>필수 약관 동의</AccordionButton>
+          <AccordionPanel>서비스 이용약관, 개인정보 처리방침</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Box>
+  ),
+};
+
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        {
+          token: 'focus.ring',
+          use: (
+            <T
+              en="AccordionButton · keyboard focus ring"
+              ko="AccordionButton · 키보드 초점 링"
+            />
+          ),
+        },
+        {
+          token: 'bg.canvas',
+          use: <T en="Focus ring inner band" ko="초점 링 안쪽 띠" />,
+        },
+      ]}
+    />
+  ),
+};