includio-cms 0.25.0 → 0.26.0

package/dist/components/ui/checkbox/checkbox.stories.svelte

@@ -0,0 +1,67 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Checkbox } from './index.js';
+	import { Label } from '../label/index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Forms/Checkbox',
+		component: Checkbox,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Pojedynczy wybór typu „włącz/wyłącz". Zawsze sparowany z `<Label>`. W formularzach łącz przez `Field.Control`, by błędy walidacji propagowały się do `aria-invalid` automatycznie.',
+				},
+			},
+		},
+		argTypes: {
+			checked: {
+				control: 'boolean',
+				description: 'Stan zaznaczenia.',
+			},
+			disabled: {
+				control: 'boolean',
+				description: 'Wyłącza interakcję.',
+			},
+		},
+	});
+</script>
+
+<Story name="Default">
+	<div style="display:flex;align-items:center;gap:8px;">
+		<Checkbox id="cb-default" />
+		<Label for="cb-default">Akceptuję regulamin</Label>
+	</div>
+</Story>
+
+<Story name="Checked">
+	<div style="display:flex;align-items:center;gap:8px;">
+		<Checkbox id="cb-checked" checked />
+		<Label for="cb-checked">Zapisz mnie do newslettera</Label>
+	</div>
+</Story>
+
+<Story name="Disabled">
+	<div style="display:flex;align-items:center;gap:8px;">
+		<Checkbox id="cb-disabled" disabled />
+		<Label for="cb-disabled">Opcja niedostępna</Label>
+	</div>
+</Story>
+
+<Story name="Group">
+	<fieldset style="display:flex;flex-direction:column;gap:8px;border:0;padding:0;">
+		<legend style="margin-bottom:8px;font-weight:600;">Wybierz języki</legend>
+		<div style="display:flex;align-items:center;gap:8px;">
+			<Checkbox id="cb-pl" checked />
+			<Label for="cb-pl">Polski</Label>
+		</div>
+		<div style="display:flex;align-items:center;gap:8px;">
+			<Checkbox id="cb-en" />
+			<Label for="cb-en">English</Label>
+		</div>
+		<div style="display:flex;align-items:center;gap:8px;">
+			<Checkbox id="cb-de" />
+			<Label for="cb-de">Deutsch</Label>
+		</div>
+	</fieldset>
+</Story>

package/dist/components/ui/checkbox/checkbox.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Checkbox;
+type Checkbox = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import { Checkbox } from './index.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/checkbox/checkbox.svelte

@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-6 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked
@@ -27,9 +27,9 @@
 	{#snippet children({ checked, indeterminate })}
 		<div data-slot="checkbox-indicator" class="text-current transition-none">
 			{#if checked}
-				<CheckIcon class="size-3.5" />
+				<CheckIcon class="size-4" />
 			{:else if indeterminate}
-				<MinusIcon class="size-3.5" />
+				<MinusIcon class="size-4" />
 			{/if}
 		</div>
 	{/snippet}

package/dist/components/ui/command/command.stories.svelte

@@ -6,9 +6,27 @@
 		title: 'UI/Navigation/Command',
 		component: Command,
 		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Lista wyszukiwalnych komend (Cmd-K palette). Filtrowanie wbudowane — pisz po `CommandItem` z czytelnymi etykietami.',
+				},
+			},
+		},
 	});
 </script>
 
+<Story name="Empty (no results)">
+	<div style="max-width:300px;border:1px solid var(--border);border-radius:12px;overflow:hidden;">
+		<Command>
+			<CommandInput placeholder="Szukaj…" value="zzzz" />
+			<CommandList>
+				<CommandEmpty>Nie znaleziono — sprawdź pisownię lub spróbuj prostszej frazy.</CommandEmpty>
+			</CommandList>
+		</Command>
+	</div>
+</Story>
+
 <Story name="Slash Popup">
 	<div style="max-width:300px;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-xl);overflow:hidden;">
 		<Command>

package/dist/components/ui/data-table/data-table.stories.svelte

@@ -0,0 +1,61 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { createSvelteTable, FlexRender } from './index.js';
+	import * as Table from '../table/index.js';
+	import { getCoreRowModel, type ColumnDef } from '@tanstack/table-core';
+	import { orders } from '../../../../stories/_fixtures/index.js';
+
+	type Order = (typeof orders.allStatuses)[number];
+
+	const columns: ColumnDef<Order>[] = [
+		{ accessorKey: 'number', header: 'Numer' },
+		{ accessorKey: 'customerEmail', header: 'Email klienta' },
+		{ accessorKey: 'totalGross', header: 'Kwota (grosze)' },
+		{ accessorKey: 'status', header: 'Status' }
+	];
+
+	const { Story } = defineMeta({
+		title: 'UI/Data/DataTable',
+		component: FlexRender,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Renderer wiersza/komórki dla `@tanstack/table-core`. W praktyce kompozyt — kolumny i model definiujesz w komponencie wyższego rzędu, ten primitive tylko renderuje.',
+				},
+			},
+		},
+	});
+</script>
+
+<Story name="Orders sample">
+	{@const table = createSvelteTable({
+		data: orders.allStatuses,
+		columns,
+		getCoreRowModel: getCoreRowModel()
+	})}
+	<Table.Root>
+		<Table.Header>
+			{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+				<Table.Row>
+					{#each headerGroup.headers as header (header.id)}
+						<Table.Head>
+							<FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+						</Table.Head>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Header>
+		<Table.Body>
+			{#each table.getRowModel().rows as row (row.id)}
+				<Table.Row>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell>
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</Story>

package/dist/components/ui/data-table/data-table.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DataTable: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataTable = InstanceType<typeof DataTable>;
+export default DataTable;

package/dist/components/ui/dialog/dialog-content.svelte

@@ -11,11 +11,14 @@
 		portalProps,
 		children,
 		showCloseButton = true,
+		fullscreenMobile = false,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: DialogPrimitive.PortalProps;
 		children: Snippet;
 		showCloseButton?: boolean;
+		/** Render the dialog as a fullscreen sheet on viewports < 640px (sm). */
+		fullscreenMobile?: boolean;
 	} = $props();
 </script>
 
@@ -26,6 +29,8 @@
 		data-slot="dialog-content"
 		class={cn(
 			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+			fullscreenMobile &&
+				'max-sm:top-0 max-sm:left-0 max-sm:h-[100dvh] max-sm:max-h-none max-sm:max-w-none max-sm:w-screen max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-none max-sm:border-0',
 			className
 		)}
 		{...restProps}

package/dist/components/ui/dialog/dialog-content.svelte.d.ts

@@ -5,6 +5,8 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;
     showCloseButton?: boolean;
+    /** Render the dialog as a fullscreen sheet on viewports < 640px (sm). */
+    fullscreenMobile?: boolean;
 };
 declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DialogContent = ReturnType<typeof DialogContent>;

package/dist/components/ui/dialog/dialog.stories.svelte

@@ -7,6 +7,19 @@
 		title: 'UI/Overlays/Dialog',
 		component: Dialog,
 		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Niskopoziomowy modal (formularz, picker). Dla potwierdzeń destrukcyjnych użyj `AlertDialog`. Pierwszy fokus → pierwsze pole edytowalne, nie przycisk Anuluj.',
+				},
+			},
+		},
+		argTypes: {
+			open: {
+				control: 'boolean',
+				description: 'Stan otwarcia (opcjonalne — Trigger steruje sam).',
+			},
+		},
 	});
 </script>
 
@@ -27,3 +40,25 @@
 		</DialogContent>
 	</Dialog>
 </Story>
+
+<Story name="Information only">
+	<Dialog>
+		<DialogTrigger>
+			<Button variant="outline">Pokaż informację</Button>
+		</DialogTrigger>
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>Sesja zostanie odświeżona</DialogTitle>
+				<DialogDescription>
+					Twoja sesja jest aktywna. Za 5 minut nastąpi automatyczne odświeżenie tokena bez utraty pracy.
+				</DialogDescription>
+			</DialogHeader>
+			<DialogFooter>
+				<Button>OK</Button>
+			</DialogFooter>
+		</DialogContent>
+	</Dialog>
+</Story>
+
+<!-- SUGESTIA(S3): focus trap test (Tab nie ucieka) + ESC return focus na trigger — manual sprawdzenie. -->
+

package/dist/components/ui/dropdown-menu/dropdown-menu.stories.svelte

@@ -0,0 +1,74 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as DropdownMenu from './index.js';
+	import { DropdownMenu as DropdownMenuRoot } from './index.js';
+	import { Button } from '../button/index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Overlays/DropdownMenu',
+		component: DropdownMenuRoot,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Menu kontekstowe powiązane z triggerem. Klawiatura: Enter/Space otwiera, Esc zamyka, strzałki nawigują.',
+				},
+			},
+		},
+		argTypes: {
+			open: {
+				control: 'boolean',
+				description: 'Stan otwarcia (opcjonalne).',
+			},
+			dir: {
+				control: 'select',
+				options: ['ltr', 'rtl'],
+				description: 'Kierunek tekstu — domyślnie z `<html dir>`.',
+			},
+		},
+	});
+</script>
+
+<Story name="Basic actions">
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Akcje wpisu</Button>
+			{/snippet}
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content>
+			<DropdownMenu.Item>Edytuj</DropdownMenu.Item>
+			<DropdownMenu.Item>Duplikuj</DropdownMenu.Item>
+			<DropdownMenu.Separator />
+			<DropdownMenu.Item>Archiwizuj</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+</Story>
+
+<Story name="Z grupą i shortcutami">
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Plik</Button>
+			{/snippet}
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content>
+			<DropdownMenu.Group>
+				<DropdownMenu.GroupHeading>Plik</DropdownMenu.GroupHeading>
+				<DropdownMenu.Item>
+					Nowy
+					<DropdownMenu.Shortcut>⌘N</DropdownMenu.Shortcut>
+				</DropdownMenu.Item>
+				<DropdownMenu.Item>
+					Otwórz
+					<DropdownMenu.Shortcut>⌘O</DropdownMenu.Shortcut>
+				</DropdownMenu.Item>
+			</DropdownMenu.Group>
+			<DropdownMenu.Separator />
+			<DropdownMenu.Item>
+				Zapisz
+				<DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+</Story>

package/dist/components/ui/dropdown-menu/dropdown-menu.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default DropdownMenu;
+type DropdownMenu = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const DropdownMenu: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import * as DropdownMenu from './index.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/field/field-context.svelte.d.ts

@@ -0,0 +1,22 @@
+export type FieldA11yProps = {
+    id: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: "true" | undefined;
+    "aria-required"?: "true" | undefined;
+};
+export type FieldContext = {
+    inputId: string;
+    descriptionId: string;
+    errorId: string;
+    required: boolean;
+    hasDescription: boolean;
+    hasError: boolean;
+    invalid: boolean;
+    registerDescription: () => void;
+    unregisterDescription: () => void;
+    registerError: () => void;
+    unregisterError: () => void;
+    getControlProps: () => FieldA11yProps;
+};
+export declare function setFieldContext(ctx: FieldContext): FieldContext;
+export declare function getFieldContext(): FieldContext | undefined;

package/dist/components/ui/field/field-context.svelte.js

@@ -0,0 +1,9 @@
+import { getContext, setContext } from "svelte";
+const FIELD_CONTEXT_KEY = Symbol("ui-field");
+export function setFieldContext(ctx) {
+    setContext(FIELD_CONTEXT_KEY, ctx);
+    return ctx;
+}
+export function getFieldContext() {
+    return getContext(FIELD_CONTEXT_KEY);
+}

package/dist/components/ui/field/field-control.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { getFieldContext, type FieldA11yProps } from "./field-context.svelte.js";
+
+	let { child }: { child: Snippet<[FieldA11yProps]> } = $props();
+
+	const ctx = getFieldContext();
+
+	if (!ctx && import.meta.env.DEV) {
+		console.warn(
+			"[ui/field] <FieldControl> użyte poza <Field> — brak context, ARIA props nie zostaną wstrzyknięte.",
+		);
+	}
+</script>
+
+{#if ctx}
+	{@render child(ctx.getControlProps())}
+{/if}

package/dist/components/ui/field/field-control.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import { type FieldA11yProps } from "./field-context.svelte.js";
+type $$ComponentProps = {
+    child: Snippet<[FieldA11yProps]>;
+};
+declare const FieldControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldControl = ReturnType<typeof FieldControl>;
+export default FieldControl;

package/dist/components/ui/field/field-description.svelte

@@ -1,17 +1,29 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { onMount } from "svelte";
+	import { getFieldContext } from "./field-context.svelte.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		id: idProp,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+
+	const ctx = getFieldContext();
+	const id = $derived(idProp ?? ctx?.descriptionId);
+
+	onMount(() => {
+		ctx?.registerDescription();
+		return () => ctx?.unregisterDescription();
+	});
 </script>
 
 <p
 	bind:this={ref}
+	{id}
 	data-slot="field-description"
 	class={cn(
 		"text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",

package/dist/components/ui/field/field-error.svelte

@@ -2,10 +2,13 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
+	import { onMount } from "svelte";
+	import { getFieldContext } from "./field-context.svelte.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		id: idProp,
 		children,
 		errors,
 		...restProps
@@ -14,21 +17,24 @@
 		errors?: { message?: string }[];
 	} = $props();
 
+	const ctx = getFieldContext();
+	const id = $derived(idProp ?? ctx?.errorId);
+
 	const hasContent = $derived.by(() => {
-		// has slotted error
 		if (children) return true;
-
-		// no errors
 		if (!errors) return false;
-
-		// has an error but no message
 		if (errors.length === 1 && !errors[0]?.message) {
 			return false;
 		}
-
 		return true;
 	});
 
+	onMount(() => {
+		if (!ctx) return;
+		ctx.registerError();
+		return () => ctx.unregisterError();
+	});
+
 	const isMultipleErrors = $derived(errors && errors.length > 1);
 	const singleErrorMessage = $derived(errors && errors.length === 1 && errors[0]?.message);
 </script>
@@ -36,7 +42,9 @@
 {#if hasContent}
 	<div
 		bind:this={ref}
+		{id}
 		role="alert"
+		aria-live="polite"
 		data-slot="field-error"
 		class={cn("text-destructive text-sm font-normal", className)}
 		{...restProps}

package/dist/components/ui/field/field-label.svelte

@@ -2,17 +2,24 @@
 	import { Label } from "../label/index.js";
 	import { cn } from "../../../utils.js";
 	import type { ComponentProps } from "svelte";
+	import { getFieldContext } from "./field-context.svelte.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		for: forProp,
 		children,
 		...restProps
 	}: ComponentProps<typeof Label> = $props();
+
+	const ctx = getFieldContext();
+	const forId = $derived(forProp ?? ctx?.inputId);
+	const required = $derived(ctx?.required ?? false);
 </script>
 
 <Label
 	bind:ref
+	for={forId}
 	data-slot="field-label"
 	class={cn(
 		"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
@@ -23,4 +30,7 @@
 	{...restProps}
 >
 	{@render children?.()}
+	{#if required}
+		<span aria-hidden="true" class="text-destructive">*</span>
+	{/if}
 </Label>