seblify 0.2.1 → 0.4.0

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

@@ -1,9 +1,37 @@
+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">;
 type Checkbox = ReturnType<typeof Checkbox>;

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

@@ -0,0 +1,46 @@
+export type CheckboxRelationsId = string;
+export interface CheckboxRelationsItemConfig {
+    checked?: boolean;
+    disabled?: boolean;
+    requires?: CheckboxRelationsId[];
+    selects?: CheckboxRelationsId[];
+}
+export type CheckboxRelationsGroupConfig = CheckboxRelationsId[] | {
+    itemIds: CheckboxRelationsId[];
+};
+export interface CheckboxRelationsConfig {
+    groups?: Record<CheckboxRelationsId, CheckboxRelationsGroupConfig>;
+    items: Record<CheckboxRelationsId, CheckboxRelationsItemConfig>;
+}
+export type CheckboxRelationsVisualState = 'default' | 'indirect';
+export interface CheckboxRelationsState {
+    blockedBy: CheckboxRelationsId[];
+    checked: boolean;
+    directChecked: 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 createCheckboxManager(config: CheckboxRelationsConfig): CheckboxRelations;

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

@@ -0,0 +1,202 @@
+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: () => trigger(id),
+            trigger: () => trigger(id),
+            visualState: indirect ? 'indirect' : 'default',
+        };
+    }
+    function group(id) {
+        const itemIds = getGroupItemIds(groups, id);
+        const selectableItems = itemIds
+            .map((itemId) => leafItem(itemId))
+            .filter((itemState) => !itemState.disabled);
+        const selectedCount = selectableItems.filter((itemState) => itemState.checked).length;
+        const directSelectedCount = selectableItems.filter((itemState) => itemState.directChecked).length;
+        const indirectSelectedCount = selectableItems.filter((itemState) => itemState.indirectChecked).length;
+        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: () => 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 = leafItem(id);
+        if (currentItem.disabled && checked) {
+            return;
+        }
+        directChecked[id] = checked;
+    }
+    function toggleItem(id) {
+        const currentItem = leafItem(id);
+        if (currentItem.disabled) {
+            return;
+        }
+        directChecked[id] = !currentItem.directChecked;
+    }
+    function setGroupChecked(id, checked) {
+        const groupItemIds = getGroupItemIds(groups, id);
+        if (!checked) {
+            const selectableItemIds = groupItemIds.filter((itemId) => !leafItem(itemId).disabled);
+            for (const itemId of selectableItemIds) {
+                directChecked[itemId] = false;
+            }
+            return;
+        }
+        let changed = true;
+        while (changed) {
+            changed = false;
+            for (const itemId of groupItemIds) {
+                const currentItem = leafItem(itemId);
+                if (!currentItem.disabled && directChecked[itemId] !== true) {
+                    directChecked[itemId] = true;
+                    changed = true;
+                }
+            }
+        }
+    }
+    function toggleGroup(id) {
+        const currentGroup = group(id);
+        setGroupChecked(id, !(currentGroup.checked && currentGroup.directSelectedCount > 0));
+    }
+    return {
+        group,
+        item,
+        setChecked,
+        setItemChecked,
+        toggleGroup,
+        toggleItem,
+        trigger,
+    };
+}
+function normalizeGroups(groups) {
+    return Object.fromEntries(Object.entries(groups).map(([id, group]) => [
+        id,
+        Array.isArray(group) ? group : group.itemIds,
+    ]));
+}
+function getItemConfig(items, id) {
+    const item = items[id];
+    if (!item) {
+        throw new Error(`Unknown checkbox relations item "${id}".`);
+    }
+    return item;
+}
+function getGroupItemIds(groups, id) {
+    const itemIds = groups[id];
+    if (!itemIds) {
+        throw new Error(`Unknown checkbox relations group "${id}".`);
+    }
+    return itemIds;
+}
+function resolveEffectiveChecked(items, groups, directChecked) {
+    const effectiveChecked = new Set();
+    let changed = true;
+    while (changed) {
+        changed = false;
+        for (const [id, item] of Object.entries(items)) {
+            if (directChecked[id] === true &&
+                item.disabled !== true &&
+                hasRequiredItems(item, effectiveChecked) &&
+                !effectiveChecked.has(id)) {
+                effectiveChecked.add(id);
+                changed = true;
+            }
+        }
+        for (const id of Array.from(effectiveChecked)) {
+            for (const selectedId of getSelectedItemIds(items, groups, id)) {
+                const selectedItem = getItemConfig(items, selectedId);
+                if (selectedItem.disabled !== true &&
+                    hasRequiredItems(selectedItem, effectiveChecked) &&
+                    !effectiveChecked.has(selectedId)) {
+                    effectiveChecked.add(selectedId);
+                    changed = true;
+                }
+            }
+        }
+    }
+    return effectiveChecked;
+}
+function getSelectedItemIds(items, groups, id) {
+    return (items[id]?.selects ?? []).flatMap((selectedId) => [
+        ...(items[selectedId] ? [selectedId] : []),
+        ...(groups[selectedId] ?? []),
+    ]);
+}
+function hasRequiredItems(item, effectiveChecked) {
+    return (item.requires ?? []).every((id) => effectiveChecked.has(id));
+}
+function getBlockedBy(items, id, effectiveChecked) {
+    return (getItemConfig(items, id).requires ?? []).filter((requiredId) => !effectiveChecked.has(requiredId));
+}

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>