seblify 0.3.0 → 0.4.0

package/dist/components/action/input/select/checkbox/Checkbox.svelte.d.ts

@@ -1,15 +1,36 @@
-type CheckboxTone = 'neutral' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+import type { CustomCssSize } from 'seblify';
+type CheckboxAnimation = 'none' | 'fade' | 'scale' | 'bump' | 'pop' | 'draw' | 'rise' | 'bounce';
+type CheckboxVariant = 'solid' | 'outline' | 'soft' | 'tint' | 'plain' | 'blank' | 'inset' | 'overflow';
+type CheckboxRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+type CheckboxSize = 'sm' | 'md' | 'lg' | 'xl' | CustomCssSize;
+type CheckboxIntermediateMark = 'dash' | 'tilde' | 'dot' | 'square';
+type CheckboxTone = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 type CheckboxVisualState = 'default' | 'derived' | 'indirect' | 'direct-and-derived' | 'direct-and-indirect';
+type CheckboxManagedState = {
+    checked: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    toggle?: () => void;
+    trigger?: () => void;
+    visualState?: CheckboxVisualState;
+};
 declare const Checkbox: import("svelte").Component<{
+    animation?: CheckboxAnimation | undefined;
     ariaLabel?: string | undefined;
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
+    duration?: number | undefined;
     label?: string | undefined;
     description?: string | undefined;
     indeterminate?: boolean | undefined;
+    intermediateMark?: CheckboxIntermediateMark | undefined;
+    managed?: CheckboxManagedState | undefined;
     name?: string | undefined;
     onclick?: ((event: MouseEvent) => void) | undefined;
+    radius?: CheckboxRadius | undefined;
+    size?: CheckboxSize | undefined;
     tone?: CheckboxTone | undefined;
+    variant?: CheckboxVariant | undefined;
     visualState?: CheckboxVisualState | undefined;
     value?: string | undefined;
 }, {}, "checked">;

package/dist/components/action/input/select/checkbox/checkbox-relations.svelte.d.ts

@@ -13,35 +13,34 @@ export interface CheckboxRelationsConfig {
     items: Record<CheckboxRelationsId, CheckboxRelationsItemConfig>;
 }
 export type CheckboxRelationsVisualState = 'default' | 'indirect';
-export interface CheckboxRelationsItemState {
+export interface CheckboxRelationsState {
     blockedBy: CheckboxRelationsId[];
     checked: boolean;
     directChecked: boolean;
-    disabled: boolean;
-    indirectChecked: boolean;
-    requires: CheckboxRelationsId[];
-    selects: CheckboxRelationsId[];
-    setChecked: (checked: boolean) => void;
-    toggle: () => void;
-    visualState: CheckboxRelationsVisualState;
-}
-export interface CheckboxRelationsGroupState {
-    checked: boolean;
     directSelectedCount: number;
+    disabled: boolean;
     indeterminate: boolean;
+    indirectChecked: boolean;
     indirectSelectedCount: number;
     itemIds: CheckboxRelationsId[];
+    requires: CheckboxRelationsId[];
+    selects: CheckboxRelationsId[];
     selectedCount: number;
     selectableCount: number;
     setChecked: (checked: boolean) => void;
     toggle: () => void;
+    trigger: () => void;
     visualState: CheckboxRelationsVisualState;
 }
+export type CheckboxRelationsItemState = CheckboxRelationsState;
+export type CheckboxRelationsGroupState = CheckboxRelationsState;
 export interface CheckboxRelations {
     group: (id: CheckboxRelationsId) => CheckboxRelationsGroupState;
     item: (id: CheckboxRelationsId) => CheckboxRelationsItemState;
+    setChecked: (id: CheckboxRelationsId, checked: boolean) => void;
     setItemChecked: (id: CheckboxRelationsId, checked: boolean) => void;
     toggleGroup: (id: CheckboxRelationsId) => void;
     toggleItem: (id: CheckboxRelationsId) => void;
+    trigger: (id: CheckboxRelationsId) => void;
 }
-export declare function createCheckboxRelations(config: CheckboxRelationsConfig): CheckboxRelations;
+export declare function createCheckboxManager(config: CheckboxRelationsConfig): CheckboxRelations;

package/dist/components/action/input/select/checkbox/checkbox-relations.svelte.js

@@ -1,31 +1,48 @@
-export function createCheckboxRelations(config) {
+export function createCheckboxManager(config) {
     const items = config.items;
     const groups = normalizeGroups(config.groups ?? {});
     let directChecked = $state(Object.fromEntries(Object.entries(items).map(([id, item]) => [id, item.checked === true])));
     const effectiveChecked = $derived(resolveEffectiveChecked(items, groups, directChecked));
     function item(id) {
+        if (items[id]) {
+            return leafItem(id);
+        }
+        if (groups[id]) {
+            return group(id);
+        }
+        throw new Error(`Unknown checkbox relations item or group "${id}".`);
+    }
+    function leafItem(id) {
         const config = getItemConfig(items, id);
         const blockedBy = getBlockedBy(items, id, effectiveChecked);
         const checked = effectiveChecked.has(id);
         const direct = directChecked[id] === true && checked;
         const indirect = checked && !direct;
+        const selectableCount = config.disabled === true || blockedBy.length > 0 ? 0 : 1;
         return {
             blockedBy,
             checked,
             directChecked: direct,
+            directSelectedCount: direct ? 1 : 0,
             disabled: config.disabled === true || blockedBy.length > 0,
+            indeterminate: false,
             indirectChecked: indirect,
+            indirectSelectedCount: indirect ? 1 : 0,
+            itemIds: [id],
             requires: config.requires ?? [],
             selects: config.selects ?? [],
+            selectedCount: checked ? 1 : 0,
+            selectableCount,
             setChecked: (checked) => setItemChecked(id, checked),
-            toggle: () => toggleItem(id),
+            toggle: () => trigger(id),
+            trigger: () => trigger(id),
             visualState: indirect ? 'indirect' : 'default',
         };
     }
     function group(id) {
         const itemIds = getGroupItemIds(groups, id);
         const selectableItems = itemIds
-            .map((itemId) => item(itemId))
+            .map((itemId) => leafItem(itemId))
             .filter((itemState) => !itemState.disabled);
         const selectedCount = selectableItems.filter((itemState) => itemState.checked).length;
         const directSelectedCount = selectableItems.filter((itemState) => itemState.directChecked).length;
@@ -33,27 +50,56 @@ export function createCheckboxRelations(config) {
         const checked = selectableItems.length > 0 && selectedCount === selectableItems.length;
         const visualState = selectedCount > 0 && directSelectedCount === 0 ? 'indirect' : 'default';
         return {
+            blockedBy: [],
             checked,
+            directChecked: checked && directSelectedCount > 0,
             directSelectedCount,
+            disabled: selectableItems.length === 0,
             indeterminate: selectedCount > 0 && !checked,
+            indirectChecked: checked && directSelectedCount === 0,
             indirectSelectedCount,
             itemIds,
+            requires: [],
+            selects: [],
             selectedCount,
             selectableCount: selectableItems.length,
             setChecked: (checked) => setGroupChecked(id, checked),
-            toggle: () => toggleGroup(id),
+            toggle: () => trigger(id),
+            trigger: () => trigger(id),
             visualState,
         };
     }
+    function trigger(id) {
+        if (items[id]) {
+            toggleItem(id);
+            return;
+        }
+        if (groups[id]) {
+            toggleGroup(id);
+            return;
+        }
+        throw new Error(`Unknown checkbox relations item or group "${id}".`);
+    }
+    function setChecked(id, checked) {
+        if (items[id]) {
+            setItemChecked(id, checked);
+            return;
+        }
+        if (groups[id]) {
+            setGroupChecked(id, checked);
+            return;
+        }
+        throw new Error(`Unknown checkbox relations item or group "${id}".`);
+    }
     function setItemChecked(id, checked) {
-        const currentItem = item(id);
+        const currentItem = leafItem(id);
         if (currentItem.disabled && checked) {
             return;
         }
         directChecked[id] = checked;
     }
     function toggleItem(id) {
-        const currentItem = item(id);
+        const currentItem = leafItem(id);
         if (currentItem.disabled) {
             return;
         }
@@ -62,7 +108,7 @@ export function createCheckboxRelations(config) {
     function setGroupChecked(id, checked) {
         const groupItemIds = getGroupItemIds(groups, id);
         if (!checked) {
-            const selectableItemIds = groupItemIds.filter((itemId) => !item(itemId).disabled);
+            const selectableItemIds = groupItemIds.filter((itemId) => !leafItem(itemId).disabled);
             for (const itemId of selectableItemIds) {
                 directChecked[itemId] = false;
             }
@@ -72,7 +118,7 @@ export function createCheckboxRelations(config) {
         while (changed) {
             changed = false;
             for (const itemId of groupItemIds) {
-                const currentItem = item(itemId);
+                const currentItem = leafItem(itemId);
                 if (!currentItem.disabled && directChecked[itemId] !== true) {
                     directChecked[itemId] = true;
                     changed = true;
@@ -87,9 +133,11 @@ export function createCheckboxRelations(config) {
     return {
         group,
         item,
+        setChecked,
         setItemChecked,
         toggleGroup,
         toggleItem,
+        trigger,
     };
 }
 function normalizeGroups(groups) {

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/bounce.d.ts

@@ -0,0 +1 @@
+import '../../../../../../../theme.css';

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/bounce.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox Bounce Visual Test</title>
+    <script type="module" src="./bounce.ts"></script>
+    <style>
+      body {
+        min-height: 100vh;
+        margin: 0;
+        background: #f5f7fb;
+        color: #172033;
+        display: grid;
+        place-items: center;
+        font-family:
+          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          'Segoe UI', sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div id="checkbox-root"></div>
+    </main>
+  </body>
+</html>

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/bounce.js

@@ -0,0 +1,13 @@
+import { mount } from 'svelte';
+import '../../../../../../../theme.css';
+import Checkbox from '../../Checkbox.svelte';
+mount(Checkbox, {
+    target: document.getElementById('checkbox-root'),
+    props: {
+        animation: 'bounce',
+        duration: 900,
+        label: 'Bounce checkbox',
+        size: 'xl',
+        tone: 'primary',
+    },
+});

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/bump.d.ts

@@ -0,0 +1 @@
+import '../../../../../../../theme.css';

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/bump.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox bump animation fixture</title>
+  </head>
+  <body>
+    <div id="checkbox-root"></div>
+    <script type="module" src="./bump.ts"></script>
+  </body>
+</html>

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/bump.js

@@ -0,0 +1,13 @@
+import { mount } from 'svelte';
+import '../../../../../../../theme.css';
+import Checkbox from '../../Checkbox.svelte';
+mount(Checkbox, {
+    target: document.getElementById('checkbox-root'),
+    props: {
+        animation: 'bump',
+        duration: 1000,
+        label: 'Bump checkbox',
+        size: 'xl',
+        tone: 'primary',
+    },
+});

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/draw.d.ts

@@ -0,0 +1 @@
+import '../../../../../../../theme.css';

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/draw.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox draw animation fixture</title>
+  </head>
+  <body>
+    <div id="checkbox-root"></div>
+    <script type="module" src="./draw.ts"></script>
+  </body>
+</html>

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/draw.js

@@ -0,0 +1,12 @@
+import { mount } from 'svelte';
+import '../../../../../../../theme.css';
+import Checkbox from '../../Checkbox.svelte';
+mount(Checkbox, {
+    target: document.getElementById('checkbox-root'),
+    props: {
+        animation: 'draw',
+        label: 'Draw checkbox',
+        size: 'xl',
+        tone: 'primary',
+    },
+});

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/fade.d.ts

@@ -0,0 +1 @@
+import '../../../../../../../theme.css';

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/fade.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox fade animation fixture</title>
+  </head>
+  <body>
+    <div id="checkbox-root"></div>
+    <script type="module" src="./fade.ts"></script>
+  </body>
+</html>

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/fade.js

@@ -0,0 +1,12 @@
+import { mount } from 'svelte';
+import '../../../../../../../theme.css';
+import Checkbox from '../../Checkbox.svelte';
+mount(Checkbox, {
+    target: document.getElementById('checkbox-root'),
+    props: {
+        animation: 'fade',
+        label: 'Fade checkbox',
+        size: 'xl',
+        tone: 'primary',
+    },
+});

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/pop.d.ts

@@ -0,0 +1 @@
+import '../../../../../../../theme.css';

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/pop.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox pop animation fixture</title>
+  </head>
+  <body>
+    <div id="checkbox-root"></div>
+    <script type="module" src="./pop.ts"></script>
+  </body>
+</html>

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/pop.js

@@ -0,0 +1,13 @@
+import { mount } from 'svelte';
+import '../../../../../../../theme.css';
+import Checkbox from '../../Checkbox.svelte';
+mount(Checkbox, {
+    target: document.getElementById('checkbox-root'),
+    props: {
+        animation: 'pop',
+        duration: 1000,
+        label: 'Pop checkbox',
+        size: 'xl',
+        tone: 'primary',
+    },
+});

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/rise.d.ts

@@ -0,0 +1 @@
+import '../../../../../../../theme.css';

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/rise.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox Rise Visual Test</title>
+    <script type="module" src="./rise.ts"></script>
+    <style>
+      body {
+        min-height: 100vh;
+        margin: 0;
+        background: #f5f7fb;
+        color: #172033;
+        display: grid;
+        place-items: center;
+        font-family:
+          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          'Segoe UI', sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div id="checkbox-root"></div>
+    </main>
+  </body>
+</html>

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/rise.js

@@ -0,0 +1,13 @@
+import { mount } from 'svelte';
+import '../../../../../../../theme.css';
+import Checkbox from '../../Checkbox.svelte';
+mount(Checkbox, {
+    target: document.getElementById('checkbox-root'),
+    props: {
+        animation: 'rise',
+        duration: 800,
+        label: 'Rise checkbox',
+        size: 'xl',
+        tone: 'primary',
+    },
+});

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/scale.d.ts

@@ -0,0 +1 @@
+import '../../../../../../../theme.css';

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/scale.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox Scale Visual Test</title>
+    <script type="module" src="./scale.ts"></script>
+    <style>
+      body {
+        min-height: 100vh;
+        margin: 0;
+        background: #f5f7fb;
+        color: #172033;
+        display: grid;
+        place-items: center;
+        font-family:
+          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          'Segoe UI', sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div id="checkbox-root"></div>
+    </main>
+  </body>
+</html>

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/scale.js

@@ -0,0 +1,13 @@
+import { mount } from 'svelte';
+import '../../../../../../../theme.css';
+import Checkbox from '../../Checkbox.svelte';
+mount(Checkbox, {
+    target: document.getElementById('checkbox-root'),
+    props: {
+        animation: 'scale',
+        duration: 1000,
+        label: 'Scale checkbox',
+        size: 'xl',
+        tone: 'primary',
+    },
+});

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/visual-state.d.ts

@@ -0,0 +1 @@
+import '../../../../../../../theme.css';

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/visual-state.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox visual state fixture</title>
+  </head>
+  <body>
+    <div id="checkbox-root"></div>
+    <script type="module" src="./visual-state.ts"></script>
+  </body>
+</html>