@stephen-netu/design-system 0.1.0 → 0.2.0

package/{src → dist}/f0-forms/radio/RadioGroup.svelte

@@ -4,7 +4,7 @@
     label: string;
   }
 
-  interface Props {
+  export interface Props {
     options: RadioOption[];
     selected?: string;
     name: string;
@@ -155,7 +155,7 @@
   }
 
   .ds-radio-option.is-selected .ds-radio-dot {
-    border-color: var(--color-accent, #b87333);
+    border-color: var(--color-accent, var(--color-accent));
   }
 
   .ds-radio-option.is-selected:hover:not(:has(:disabled)) .ds-radio-dot {
@@ -171,7 +171,7 @@
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background: var(--color-accent, #b87333);
+    background: var(--color-accent, var(--color-accent));
     animation: ds-radio-in 150ms ease-out;
   }
 

package/dist/f0-forms/radio/RadioGroup.svelte.d.ts

@@ -0,0 +1,18 @@
+interface RadioOption {
+    value: string;
+    label: string;
+}
+export interface Props {
+    options: RadioOption[];
+    selected?: string;
+    name: string;
+    label?: string;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    onchange?: (value: string) => void;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "selected">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.svelte.d.ts.map

package/dist/f0-forms/radio/RadioGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/f0-forms/radio/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAkEH,QAAA,MAAM,UAAU,mDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/f0-forms/radio/RadioGroup.test.js

@@ -0,0 +1,54 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import RadioGroup from './RadioGroup.svelte';
+const options = [
+    { value: 'a', label: 'Alpha' },
+    { value: 'b', label: 'Beta' },
+    { value: 'c', label: 'Gamma' }
+];
+describe('RadioGroup', () => {
+    afterEach(() => cleanup());
+    it('renders all radio options', () => {
+        const { container } = render(RadioGroup, { options, name: 'test' });
+        const radios = container.querySelectorAll('input[type="radio"]');
+        expect(radios.length).toBe(3);
+    });
+    it('clicking an option selects it and calls onchange', async () => {
+        const onchange = vi.fn();
+        const { container } = render(RadioGroup, { options, name: 'test', onchange });
+        const radios = container.querySelectorAll('input[type="radio"]');
+        await fireEvent.click(radios[1]);
+        expect(onchange).toHaveBeenCalledWith('b');
+    });
+    it('disabled group does not call onchange on click', async () => {
+        const onchange = vi.fn();
+        const { container } = render(RadioGroup, { options, name: 'test', disabled: true, onchange });
+        const radios = container.querySelectorAll('input[type="radio"]');
+        await fireEvent.click(radios[0]);
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('keyboard navigation: ArrowDown selects next option in vertical orientation', async () => {
+        const onchange = vi.fn();
+        const { container } = render(RadioGroup, { options, name: 'test', onchange, selected: 'a' });
+        const radios = container.querySelectorAll('input[type="radio"]');
+        radios[0].focus();
+        await fireEvent.keyDown(radios[0], { key: 'ArrowDown' });
+        expect(onchange).toHaveBeenCalledWith('b');
+    });
+    it('keyboard navigation: ArrowUp selects previous option', async () => {
+        const onchange = vi.fn();
+        const { container } = render(RadioGroup, { options, name: 'test', onchange, selected: 'b' });
+        const radios = container.querySelectorAll('input[type="radio"]');
+        radios[1].focus();
+        await fireEvent.keyDown(radios[1], { key: 'ArrowUp' });
+        expect(onchange).toHaveBeenCalledWith('a');
+    });
+    it('applies horizontal class when orientation is horizontal', () => {
+        const { container } = render(RadioGroup, { options, name: 'test', orientation: 'horizontal' });
+        expect(container.querySelector('.is-horizontal')).not.toBeNull();
+    });
+    it('applies custom class to wrapper', () => {
+        const { container } = render(RadioGroup, { options, name: 'test', class: 'custom-class' });
+        expect(container.querySelector('.custom-class')).not.toBeNull();
+    });
+});

package/{src → dist}/f0-forms/search/SearchBar.svelte

@@ -2,7 +2,7 @@
   import { Search } from '@lucide/svelte';
   import Input from '../../u0-primitives/input/Input.svelte';
   
-  interface Props {
+  export interface Props {
     value?: string;
     placeholder?: string;
     shortcut?: string;

package/dist/f0-forms/search/SearchBar.svelte.d.ts

@@ -0,0 +1,12 @@
+export interface Props {
+    value?: string;
+    placeholder?: string;
+    shortcut?: string;
+    class?: string;
+    disabled?: boolean;
+    onsearch?: (value: string) => void;
+}
+declare const SearchBar: import("svelte").Component<Props, {}, "value">;
+type SearchBar = ReturnType<typeof SearchBar>;
+export default SearchBar;
+//# sourceMappingURL=SearchBar.svelte.d.ts.map

package/dist/f0-forms/search/SearchBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/f0-forms/search/SearchBar.svelte.ts"],"names":[],"mappings":"AAOE,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA2DH,QAAA,MAAM,SAAS,gDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/f0-forms/search/SearchBar.test.js

@@ -0,0 +1,46 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import SearchBar from './SearchBar.svelte';
+describe('SearchBar', () => {
+    afterEach(() => cleanup());
+    it('renders input with placeholder', () => {
+        const { container } = render(SearchBar, { props: { placeholder: 'Search...' } });
+        expect(container.querySelector('input')).not.toBeNull();
+    });
+    it('applies placeholder text to input', () => {
+        const { container } = render(SearchBar, { placeholder: 'Find things' });
+        const input = container.querySelector('input');
+        expect(input.placeholder).toBe('Find things');
+    });
+    it('renders with search type on input', () => {
+        const { container } = render(SearchBar);
+        expect(container.querySelector('input[type="search"]')).not.toBeNull();
+    });
+    it('displays shortcut when value is empty', () => {
+        const { container } = render(SearchBar, { props: { shortcut: '⌘K', value: '' } });
+        expect(container.querySelector('.ds-search-shortcut')).not.toBeNull();
+    });
+    it('renders the search wrapper with input and search icon', () => {
+        const { container } = render(SearchBar, { value: 'test' });
+        expect(container.querySelector('input')).not.toBeNull();
+        expect(container.querySelector('.ds-searchbar')).not.toBeNull();
+    });
+    it('updates value binding when input changes', async () => {
+        const { container } = render(SearchBar, { props: { value: '' } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'new search' } });
+        expect(input.value).toBe('new search');
+    });
+    it('appends custom class to wrapper', () => {
+        const { container } = render(SearchBar, { props: { class: 'my-search' } });
+        expect(container.querySelector('.my-search')).not.toBeNull();
+    });
+    it('passes disabled to the input', () => {
+        const { container } = render(SearchBar, { props: { disabled: true } });
+        expect(container.querySelector('input')?.hasAttribute('disabled')).toBe(true);
+    });
+    it('renders the search wrapper with ds-searchbar class', () => {
+        const { container } = render(SearchBar);
+        expect(container.querySelector('.ds-searchbar')).not.toBeNull();
+    });
+});

package/{src → dist}/f0-forms/select/Select.svelte

@@ -5,7 +5,7 @@
     disabled?: boolean;
   }
 
-  interface Props {
+  export interface Props {
     options: SelectOption[];
     selected?: string;
     placeholder?: string;
@@ -57,7 +57,7 @@
     onblur={() => isFocused = false}
     class="ds-select-element"
     aria-label={label}
-    aria-invalid={error}
+    aria-invalid={error || undefined}
   >
     {#if placeholder}
       <option value="" disabled hidden>{placeholder}</option>
@@ -103,7 +103,7 @@
   .ds-select-wrapper.is-focused {
     border-color: var(--color-accent);
     background: var(--color-bg-app);
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+    box-shadow: var(--shadow-inner);
   }
 
   .ds-select-wrapper.has-error {
@@ -112,7 +112,7 @@
 
   .ds-select-wrapper.is-disabled {
     opacity: 0.5;
-    background: rgba(0,0,0,0.2);
+    background: var(--color-bg-canvas);
     cursor: not-allowed;
   }
 
@@ -193,6 +193,6 @@
 
   .ds-select-wrapper.has-error .ds-select-glow {
     background: var(--color-error);
-    box-shadow: 0 -1px 4px rgba(166, 94, 94, 0.4);
+     box-shadow: 0 -1px 4px color-mix(in srgb, var(--color-error) 40%, transparent);
   }
 </style>

package/dist/f0-forms/select/Select.svelte.d.ts

@@ -0,0 +1,21 @@
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface Props {
+    options: SelectOption[];
+    selected?: string;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    error?: boolean;
+    class?: string;
+    id?: string;
+    name?: string;
+    onchange?: (value: string) => void;
+}
+declare const Select: import("svelte").Component<Props, {}, "selected">;
+type Select = ReturnType<typeof Select>;
+export default Select;
+//# sourceMappingURL=Select.svelte.d.ts.map

package/dist/f0-forms/select/Select.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/f0-forms/select/Select.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAoDH,QAAA,MAAM,MAAM,mDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/f0-forms/select/Select.test.js

@@ -0,0 +1,51 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import Select from './Select.svelte';
+const options = [
+    { value: 'a', label: 'Alpha' },
+    { value: 'b', label: 'Bravo' },
+    { value: 'c', label: 'Charlie' },
+];
+describe('Select', () => {
+    afterEach(() => cleanup());
+    it('renders a <select> element', () => {
+        const { container } = render(Select, { props: { options } });
+        expect(container.querySelector('select')).not.toBeNull();
+    });
+    it('renders all options', () => {
+        const { container } = render(Select, { props: { options } });
+        const select = container.querySelector('select');
+        // +1 for the placeholder option
+        expect(select.querySelectorAll('option').length).toBe(options.length + 1);
+    });
+    it('applies placeholder when no selection', () => {
+        const { container } = render(Select, { props: { options, placeholder: 'Pick one' } });
+        const select = container.querySelector('select');
+        const placeholderOpt = Array.from(select.options).find(o => o.textContent === 'Pick one');
+        expect(placeholderOpt).toBeDefined();
+    });
+    it('calls onchange when selection changes', async () => {
+        const handleChange = vi.fn();
+        const { container } = render(Select, { props: { options, onchange: handleChange } });
+        const select = container.querySelector('select');
+        await fireEvent.change(select, { target: { value: 'b' } });
+        expect(handleChange).toHaveBeenCalledTimes(1);
+        expect(handleChange).toHaveBeenCalledWith('b');
+    });
+    it('sets disabled attribute when disabled prop is true', () => {
+        const { container } = render(Select, { props: { options, disabled: true } });
+        expect(container.querySelector('select')?.hasAttribute('disabled')).toBe(true);
+    });
+    it('applies error class when error is true', () => {
+        const { container } = render(Select, { props: { options, error: true } });
+        expect(container.querySelector('.has-error')).not.toBeNull();
+    });
+    it('applies custom class to wrapper', () => {
+        const { container } = render(Select, { props: { options, class: 'my-select' } });
+        expect(container.querySelector('.my-select')).not.toBeNull();
+    });
+    it('sets id on the native select element', () => {
+        const { container } = render(Select, { props: { options, id: 'my-select' } });
+        expect(container.querySelector('#my-select')).not.toBeNull();
+    });
+});

package/{src → dist}/f0-forms/textarea/TextArea.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  interface Props {
+  export interface Props {
     value?: string;
     placeholder?: string;
     label?: string;
@@ -139,7 +139,7 @@
   }
 
   .ds-textarea-counter.is-near {
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
   }
 
   .ds-textarea-counter.is-over {

package/dist/f0-forms/textarea/TextArea.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface Props {
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    rows?: number;
+    maxLength?: number;
+    disabled?: boolean;
+    error?: boolean;
+    class?: string;
+    id?: string;
+    name?: string;
+    oninput?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+}
+declare const TextArea: import("svelte").Component<Props, {}, "value">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;
+//# sourceMappingURL=TextArea.svelte.d.ts.map

package/dist/f0-forms/textarea/TextArea.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.svelte.d.ts","sourceRoot":"","sources":["../../../src/f0-forms/textarea/TextArea.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAyCH,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/{src → dist}/f0-forms/toggle/FormToggle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  interface Props {
+  export interface Props {
     checked?: boolean;
     label?: string;
     disabled?: boolean;
@@ -110,8 +110,8 @@
   }
 
   .ds-form-toggle.is-checked .ds-form-toggle-track {
-    background: var(--color-accent, #b87333);
-    border-color: var(--color-accent, #b87333);
+    background: var(--color-accent, var(--color-accent));
+    border-color: var(--color-accent, var(--color-accent));
   }
 
   .ds-form-toggle.is-checked:hover:not(.is-disabled) .ds-form-toggle-track {

package/dist/f0-forms/toggle/FormToggle.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface Props {
+    checked?: boolean;
+    label?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    class?: string;
+    id?: string;
+    name?: string;
+    onchange?: (e: Event) => void;
+}
+declare const FormToggle: import("svelte").Component<Props, {}, "checked">;
+type FormToggle = ReturnType<typeof FormToggle>;
+export default FormToggle;
+//# sourceMappingURL=FormToggle.svelte.d.ts.map

package/dist/f0-forms/toggle/FormToggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/f0-forms/toggle/FormToggle.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAoCH,QAAA,MAAM,UAAU,kDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/f0-forms/toggle/FormToggle.test.js

@@ -0,0 +1,73 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import FormToggle from './FormToggle.svelte';
+describe('FormToggle', () => {
+    afterEach(() => cleanup());
+    it('renders a checkbox input with role="switch"', () => {
+        const { container } = render(FormToggle);
+        expect(container.querySelector('input[type="checkbox"][role="switch"]')).not.toBeNull();
+    });
+    it('renders label text when label prop is provided', () => {
+        const { container } = render(FormToggle, { props: { label: 'Enable dark mode' } });
+        expect(container.querySelector('.ds-form-toggle-label')?.textContent).toBe('Enable dark mode');
+    });
+    it('does not render label element when label is empty', () => {
+        const { container } = render(FormToggle);
+        expect(container.querySelector('.ds-form-toggle-label')).toBeNull();
+    });
+    it('is unchecked by default', () => {
+        const { container } = render(FormToggle);
+        const input = container.querySelector('input');
+        expect(input.checked).toBe(false);
+    });
+    it('reflects checked state via aria-checked', () => {
+        const { container } = render(FormToggle, { props: { checked: true } });
+        expect(container.querySelector('input')?.getAttribute('aria-checked')).toBe('true');
+    });
+    it('applies is-checked class when checked is true', () => {
+        const { container } = render(FormToggle, { props: { checked: true } });
+        expect(container.querySelector('.is-checked')).not.toBeNull();
+    });
+    it('applies is-disabled class and disabled attribute when disabled', () => {
+        const { container } = render(FormToggle, { props: { disabled: true } });
+        expect(container.querySelector('.is-disabled')).not.toBeNull();
+        expect(container.querySelector('input')?.hasAttribute('disabled')).toBe(true);
+    });
+    it('applies is-sm class when size is sm', () => {
+        const { container } = render(FormToggle, { props: { size: 'sm' } });
+        expect(container.querySelector('.is-sm')).not.toBeNull();
+    });
+    it('uses correct track dimensions for sm size', () => {
+        const { container } = render(FormToggle, { props: { size: 'sm' } });
+        const track = container.querySelector('.ds-form-toggle-track');
+        expect(track.style.width).toBe('32px');
+        expect(track.style.height).toBe('18px');
+    });
+    it('uses correct track dimensions for md size (default)', () => {
+        const { container } = render(FormToggle);
+        const track = container.querySelector('.ds-form-toggle-track');
+        expect(track.style.width).toBe('40px');
+        expect(track.style.height).toBe('22px');
+    });
+    it('calls onchange callback when toggled', async () => {
+        const onchange = vi.fn();
+        const { container } = render(FormToggle, {
+            props: { onchange, checked: false },
+        });
+        const input = container.querySelector('input');
+        await fireEvent.click(input);
+        expect(onchange).toHaveBeenCalledTimes(1);
+    });
+    it('applies custom id to the native input', () => {
+        const { container } = render(FormToggle, { props: { id: 'toggle-dark' } });
+        expect(container.querySelector('#toggle-dark')).not.toBeNull();
+    });
+    it('applies name attribute when provided', () => {
+        const { container } = render(FormToggle, { props: { name: 'dark-mode' } });
+        expect(container.querySelector('input')?.getAttribute('name')).toBe('dark-mode');
+    });
+    it('applies custom class to the wrapper label', () => {
+        const { container } = render(FormToggle, { props: { class: 'my-toggle' } });
+        expect(container.querySelector('.my-toggle')).not.toBeNull();
+    });
+});

package/dist/f0-forms/validation/validate.d.ts

@@ -0,0 +1,12 @@
+export type Validator = (value: string) => string | null;
+/** Fails if the value is empty or whitespace-only. */
+export declare function required(value: string): string | null;
+/** Returns a validator that fails if value length is below `min`. */
+export declare function minLength(min: number): Validator;
+/** Returns a validator that fails if value length exceeds `max`. */
+export declare function maxLength(max: number): Validator;
+/** Returns a validator that fails if value does not match the given regex. */
+export declare function pattern(regex: RegExp, message: string): Validator;
+/** Composes multiple validators, returning the first error encountered or null. */
+export declare function compose(...validators: Validator[]): Validator;
+//# sourceMappingURL=validate.d.ts.map

package/dist/f0-forms/validation/validate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.d.ts","sourceRoot":"","sources":["../../../src/f0-forms/validation/validate.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;AAEzD,sDAAsD;AACtD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAGrD;AAED,qEAAqE;AACrE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAKhD;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAKhD;AAED,8EAA8E;AAC9E,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,CAKjE;AAED,mFAAmF;AACnF,wBAAgB,OAAO,CAAC,GAAG,UAAU,EAAE,SAAS,EAAE,GAAG,SAAS,CAU7D"}

package/dist/f0-forms/validation/validate.js

@@ -0,0 +1,44 @@
+// F0 Forms — Pure validation utilities
+// Each validator returns null on success, or an error message string on failure.
+/** Fails if the value is empty or whitespace-only. */
+export function required(value) {
+    if (value == null)
+        value = '';
+    return value.trim().length === 0 ? 'This field is required' : null;
+}
+/** Returns a validator that fails if value length is below `min`. */
+export function minLength(min) {
+    return (value) => {
+        if (value == null)
+            value = '';
+        return value.length < min ? `Must be at least ${min} characters` : null;
+    };
+}
+/** Returns a validator that fails if value length exceeds `max`. */
+export function maxLength(max) {
+    return (value) => {
+        if (value == null)
+            value = '';
+        return value.length > max ? `Must be at most ${max} characters` : null;
+    };
+}
+/** Returns a validator that fails if value does not match the given regex. */
+export function pattern(regex, message) {
+    return (value) => {
+        if (value == null)
+            value = '';
+        return regex.test(value) ? null : message;
+    };
+}
+/** Composes multiple validators, returning the first error encountered or null. */
+export function compose(...validators) {
+    return (value) => {
+        for (const validator of validators) {
+            const error = validator(value);
+            if (error !== null) {
+                return error;
+            }
+        }
+        return null;
+    };
+}

package/dist/f0-forms/validation/validate.test.js

@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest';
+import { required, minLength, maxLength, pattern, compose } from './validate';
+describe('required', () => {
+    it('returns null for non-empty string', () => {
+        expect(required('hello')).toBeNull();
+    });
+    it('returns error for empty string', () => {
+        expect(required('')).toBe('This field is required');
+    });
+    it('returns error for whitespace-only string', () => {
+        expect(required('   ')).toBe('This field is required');
+    });
+    it('returns null for string with leading/trailing spaces but non-empty', () => {
+        expect(required('  a  ')).toBeNull();
+    });
+});
+describe('minLength', () => {
+    it('returns null when value meets minimum length', () => {
+        expect(minLength(3)('abc')).toBeNull();
+    });
+    it('returns null when value exceeds minimum length', () => {
+        expect(minLength(3)('abcd')).toBeNull();
+    });
+    it('returns error when value is shorter than minimum', () => {
+        expect(minLength(5)('ab')).toBe('Must be at least 5 characters');
+    });
+    it('returns error for empty string when min is 1', () => {
+        expect(minLength(1)('')).toBe('Must be at least 1 characters');
+    });
+});
+describe('maxLength', () => {
+    it('returns null when value is within maximum length', () => {
+        expect(maxLength(10)('abc')).toBeNull();
+    });
+    it('returns null when value equals maximum length', () => {
+        expect(maxLength(3)('abc')).toBeNull();
+    });
+    it('returns error when value exceeds maximum', () => {
+        expect(maxLength(3)('abcd')).toBe('Must be at most 3 characters');
+    });
+    it('returns null for empty string (within any max)', () => {
+        expect(maxLength(5)('')).toBeNull();
+    });
+});
+describe('pattern', () => {
+    it('returns null when value matches regex', () => {
+        const noNumbers = pattern(/^\D+$/, 'No numbers allowed');
+        expect(noNumbers('abc')).toBeNull();
+    });
+    it('returns custom error message when value does not match regex', () => {
+        const noNumbers = pattern(/^\D+$/, 'No numbers allowed');
+        expect(noNumbers('abc123')).toBe('No numbers allowed');
+    });
+    it('works for email-like pattern', () => {
+        const isEmail = pattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, 'Invalid email');
+        expect(isEmail('test@example.com')).toBeNull();
+        expect(isEmail('not-an-email')).toBe('Invalid email');
+    });
+    it('returns error for empty string when pattern requires content', () => {
+        const nonEmpty = pattern(/.+/, 'Cannot be empty');
+        expect(nonEmpty('')).toBe('Cannot be empty');
+    });
+});
+describe('compose', () => {
+    it('returns null when all validators pass', () => {
+        const validator = compose(required, minLength(3));
+        expect(validator('hello')).toBeNull();
+    });
+    it('returns first error from failing validator', () => {
+        const validator = compose(required, minLength(10));
+        expect(validator('')).toBe('This field is required');
+    });
+    it('returns error from second validator if first passes', () => {
+        const validator = compose(required, minLength(10));
+        expect(validator('ab')).toBe('Must be at least 10 characters');
+    });
+    it('returns null for empty validator list', () => {
+        const validator = compose();
+        expect(validator('anything')).toBeNull();
+    });
+    it('stops at first failing validator without running subsequent ones', () => {
+        const second = () => 'second error';
+        const validator = compose(required, second);
+        // required('') fails, so second() should never be called
+        expect(validator('')).toBe('This field is required');
+    });
+});