@svelte-atoms/core 1.0.0-alpha.32 → 1.0.0-alpha.34

package/dist/components/root/root.css

@@ -1,119 +1,119 @@
-@import 'tailwindcss';
-
-:root {
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-foreground: oklch(1 0 0);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.99 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--radius: 0.625rem;
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
-	--radius: 0.625rem;
-	--shadow-x: 0px;
-	--shadow-y: 1px;
-	--shadow-blur: 2px;
-	--shadow-spread: 0px;
-	--shadow-opacity: 0.18;
-	--shadow-color: hsl(0 0% 0%);
-	--tracking-normal: 0em;
-	--spacing: 0.25rem;
-}
-
-.dark {
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.205 0 0);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.205 0 0);
-	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.922 0 0);
-	--primary-foreground: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.269 0 0);
-	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 5%);
-	--ring: oklch(0.556 0 0);
-	--chart-1: oklch(0.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
-	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
-	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.556 0 0);
-	--shadow-color: hsl(0, 0%, 100%);
-}
-
-@theme inline {
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-destructive-foreground: var(--destructive-foreground);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
-	--color-chart-1: var(--chart-1);
-	--color-chart-2: var(--chart-2);
-	--color-chart-3: var(--chart-3);
-	--color-chart-4: var(--chart-4);
-	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-
-	--radius-inherit: inherit;
-}
+@import 'tailwindcss';
+
+:root {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(1 0 0);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.99 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--radius: 0.625rem;
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+	--radius: 0.625rem;
+	--shadow-x: 0px;
+	--shadow-y: 1px;
+	--shadow-blur: 2px;
+	--shadow-spread: 0px;
+	--shadow-opacity: 0.18;
+	--shadow-color: hsl(0 0% 0%);
+	--tracking-normal: 0em;
+	--spacing: 0.25rem;
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--destructive-foreground: oklch(0.985 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 5%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+	--shadow-color: hsl(0, 0%, 100%);
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	--radius-inherit: inherit;
+}

package/dist/components/stepper/README.md

@@ -0,0 +1,38 @@
+# Stepper
+
+A flexible stepper component for building multi-step workflows, forms, and guided processes. The stepper module provides a complete set of composable components to create linear or non-linear step-based interfaces.
+
+## Components
+
+The stepper module consists of two main components and their sub-components:
+
+### Stepper (Root Container)
+
+The main container component that manages the overall stepper state and layout.
+
+- **`Stepper.Root`** - The root stepper container
+- **`Stepper.Header`** - Container for step indicators/navigation
+- **`Stepper.Body`** - Container for step content
+- **`Stepper.Content`** - Individual step content wrapper
+- **`Stepper.Footer`** - Container for navigation buttons/actions
+
+### Step (Individual Step)
+
+Represents a single step in the workflow with its own state and content.
+
+- **`Step.Root`** - The root step container
+- **`Step.Header`** - Step header with title/indicator
+- **`Step.Title`** - Step title text
+- **`Step.Description`** - Step description/subtitle
+- **`Step.Indicator`** - Visual step indicator (number, icon, status)
+- **`Step.Separator`** - Visual separator between steps
+- **`Step.Body`** - Step content area
+
+## Features
+
+- **Flexible Layout** - Horizontal or vertical orientation
+- **State Management** - Built-in step state (active, completed, disabled, optional)
+- **Navigation Control** - Linear or non-linear step progression
+- **Composable** - Mix and match components to build custom steppers
+- **Accessible** - ARIA attributes and keyboard navigation support
+- **Customizable** - Full control over styling and behavior through the atoms system

package/dist/components/stepper/atoms.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from './stepper-root.svelte';
+export { default as Header } from './stepper-header.svelte';
+export { default as Body } from './stepper-body.svelte';
+export { default as Content } from './stepper-content.svelte';
+export { default as Footer } from './stepper-footer.svelte';

package/dist/components/stepper/atoms.js

@@ -0,0 +1,5 @@
+export { default as Root } from './stepper-root.svelte';
+export { default as Header } from './stepper-header.svelte';
+export { default as Body } from './stepper-body.svelte';
+export { default as Content } from './stepper-content.svelte';
+export { default as Footer } from './stepper-footer.svelte';

package/dist/components/stepper/attachments.svelte.d.ts

@@ -0,0 +1,2 @@
+import { StepperBond } from './bond.svelte';
+export declare function stepper(callback: (node: HTMLElement, bond?: StepperBond) => any): (node: HTMLElement) => any;

package/dist/components/stepper/attachments.svelte.js

@@ -0,0 +1,5 @@
+import { StepperBond } from './bond.svelte';
+export function stepper(callback) {
+    const bond = StepperBond.get();
+    return (node) => callback(node, bond);
+}

package/dist/components/stepper/bond.svelte.d.ts

@@ -0,0 +1,56 @@
+import type { StepBond } from './step/bond.svelte';
+import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+import type { Snippet } from 'svelte';
+export type StepperStateProps = BondStateProps & {
+    step: number;
+    linear?: boolean;
+};
+export type StepperElements = {
+    root: HTMLElement;
+};
+export type StepContentSnippet = {
+    props: Record<string, unknown>;
+    children: Snippet<[{
+        step?: StepBond;
+    }]>;
+};
+export declare class StepperBond extends Bond<StepperStateProps, StepperState, StepperElements> {
+    static CONTEXT_KEY: string;
+    constructor(s: StepperState);
+    share(): this;
+    root(): {
+        [x: symbol]: (node: HTMLElement) => void;
+        'data-atom': string;
+        id: string;
+        role: string;
+    };
+    static get(): StepperBond | undefined;
+    static set(bond: StepperBond): StepperBond;
+}
+export declare class StepperState extends BondState<StepperStateProps> {
+    #private;
+    constructor(props: () => StepperStateProps);
+    get activeStep(): number;
+    get totalSteps(): number;
+    get isFirstStep(): boolean;
+    get isLastStep(): boolean;
+    get activeStepContent(): {
+        props: Record<string, unknown>;
+        children: Snippet<[{
+            step?: StepBond;
+        }]>;
+    } | undefined;
+    get navigation(): {
+        next: () => void;
+        previous: () => void;
+        reset: () => void;
+        goto: (step: number) => void;
+    };
+    mountStep(index: number, step: StepBond): void;
+    unmountStep(index: number): void;
+    getStep(index: number): StepBond | undefined;
+    registerStepContent(index: number, props: Record<string, unknown>, children: Snippet<[{
+        step?: StepBond;
+    }]>): void;
+    unregisterStepContent(index: number): void;
+}

package/dist/components/stepper/bond.svelte.js

@@ -0,0 +1,99 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { createAttachmentKey } from 'svelte/attachments';
+import { Bond, BondState } from '../../shared/bond.svelte';
+import { getContext, setContext } from 'svelte';
+export class StepperBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/stepper';
+    constructor(s) {
+        super(s);
+    }
+    share() {
+        return StepperBond.set(this);
+    }
+    root() {
+        return {
+            'data-atom': this.id ?? '',
+            id: `stepper-${this.id}`,
+            role: 'group',
+            [createAttachmentKey()]: (node) => {
+                this.elements.root = node;
+            }
+        };
+    }
+    static get() {
+        return getContext(StepperBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(StepperBond.CONTEXT_KEY, bond);
+    }
+}
+export class StepperState extends BondState {
+    #steps = new SvelteMap();
+    #stepContents = new SvelteMap();
+    #totalSteps = $state(0);
+    constructor(props) {
+        super(props);
+    }
+    get activeStep() {
+        return this.props.step;
+    }
+    get totalSteps() {
+        return this.#totalSteps;
+    }
+    get isFirstStep() {
+        return this.props.step === 0;
+    }
+    get isLastStep() {
+        return this.props.step === this.#totalSteps - 1;
+    }
+    get activeStepContent() {
+        return this.#stepContents.get(this.props.step);
+    }
+    get navigation() {
+        return {
+            next: () => {
+                if (!this.isLastStep) {
+                    this.props.step = this.props.step + 1;
+                }
+            },
+            previous: () => {
+                if (!this.isFirstStep) {
+                    this.props.step = this.props.step - 1;
+                }
+            },
+            reset: () => {
+                this.props.step = 0;
+            },
+            goto: (step) => {
+                if (step >= 0 && step < this.#totalSteps) {
+                    // In linear mode, only allow going to previous steps or next immediate step
+                    if (this.props.linear) {
+                        if (step <= this.props.step + 1) {
+                            this.props.step = step;
+                        }
+                    }
+                    else {
+                        this.props.step = step;
+                    }
+                }
+            }
+        };
+    }
+    mountStep(index, step) {
+        this.#steps.set(index, step);
+        this.#totalSteps = this.#steps.size;
+    }
+    unmountStep(index) {
+        this.#steps.delete(index);
+        this.#totalSteps = this.#steps.size;
+    }
+    getStep(index) {
+        return this.#steps.get(index);
+    }
+    registerStepContent(index, props, children) {
+        this.#stepContents.set(index, { props, children });
+    }
+    unregisterStepContent(index) {
+        this.#stepContents.delete(index);
+    }
+}

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

@@ -0,0 +1,3 @@
+export * as Stepper from './atoms';
+export * from './step';
+export * from './types';

package/dist/components/stepper/index.js

@@ -0,0 +1,3 @@
+export * as Stepper from './atoms';
+export * from './step';
+export * from './types';

package/dist/components/stepper/step/README.md

@@ -0,0 +1,97 @@
+# Step
+
+The Step component represents an individual step within a Stepper workflow. It manages its own state (active, completed, disabled, optional) and provides a composable structure for building step indicators, headers, and content.
+
+## Usage
+
+Steps are typically used within a `Stepper.Root` component to create multi-step workflows. Each step can display an indicator, title, description, and content.
+
+```svelte
+<script>
+  import { Stepper, Step } from '@svelte-atoms/core';
+</script>
+
+<Stepper.Root>
+  <Step.Root index={0} header="Account Setup" body="Create your account">
+    {#snippet children({ step })}
+      <Step.Header>
+        <Step.Indicator />
+        <Step.Separator />
+        
+        <div>
+          <Step.Title>Account Setup</Step.Title>
+          <Step.Description>Create your account</Step.Description>
+        </div>
+      </Step.Header>
+      
+      <Step.Body>
+        <!-- Step content goes here -->
+      </Step.Body>
+    {/snippet}
+  </Step.Root>
+</Stepper.Root>
+```
+
+## Components
+
+### Step.Root
+
+The root container for a step. Manages step state and provides context to child components.
+
+**Props:**
+- `index` - Step index in the stepper sequence
+- `header` - Step header text
+- `body` - Step body/description text
+- `optional` - Whether the step is optional
+- `disabled` - Whether the step is disabled
+
+### Step.Header
+
+Container for the step's header section, typically containing the indicator, title, and description.
+
+### Step.Indicator
+
+Visual indicator showing the step's state (number, icon, checkmark for completed steps).
+
+### Step.Separator
+
+Visual separator line between step indicators, typically used in horizontal steppers.
+
+### Step.Title
+
+The main title/label for the step.
+
+### Step.Description
+
+Secondary description or subtitle for the step.
+
+### Step.Body
+
+Container for the step's main content area. This content is rendered when the step is active.
+
+## Step States
+
+Each step can be in one of several states:
+
+- **Active** - Currently visible/selected step
+- **Completed** - Step that has been completed
+- **Disabled** - Step that cannot be accessed
+- **Optional** - Step that can be skipped
+- **Pending** - Step that hasn't been reached yet
+
+## Integration
+
+Steps work seamlessly with the Stepper component's navigation system. The step's state is automatically managed based on the active step index and user interactions.
+
+```svelte
+<Step.Root index={0}>
+  {#snippet children({ step })}
+    {@const isActive = step?.state?.isActive}
+    {@const isCompleted = step?.state?.isCompleted}
+    
+    <Step.Title class={isActive ? 'font-bold' : ''}>
+      Step 1
+    </Step.Title>
+  {/snippet}
+</Step.Root>
+```

package/dist/components/stepper/step/atoms.d.ts

@@ -0,0 +1,7 @@
+export { default as Root } from './step-root.svelte';
+export { default as Indicator } from './step-indicator.svelte';
+export { default as Header } from './step-header.svelte';
+export { default as Separator } from './step-separator.svelte';
+export { default as Body } from './step-body.svelte';
+export { default as Title } from './step-title.svelte';
+export { default as Description } from './step-description.svelte';

package/dist/components/stepper/step/atoms.js

@@ -0,0 +1,7 @@
+export { default as Root } from './step-root.svelte';
+export { default as Indicator } from './step-indicator.svelte';
+export { default as Header } from './step-header.svelte';
+export { default as Separator } from './step-separator.svelte';
+export { default as Body } from './step-body.svelte';
+export { default as Title } from './step-title.svelte';
+export { default as Description } from './step-description.svelte';

package/dist/components/stepper/step/attachments.svelte.d.ts

@@ -0,0 +1,2 @@
+import { StepBond } from './bond.svelte';
+export declare function step(callback: (node: HTMLElement, bond?: StepBond) => any): (node: HTMLElement) => any;

package/dist/components/stepper/step/attachments.svelte.js

@@ -0,0 +1,5 @@
+import { StepBond } from './bond.svelte';
+export function step(callback) {
+    const bond = StepBond.get();
+    return (node) => callback(node, bond);
+}