@human-synthesis/norns-ui 0.0.1 → 0.0.3

package/src/types/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+
+export type CheckboxProps = Omit<HTMLInputAttributes, 'class' | 'type' | 'checked'> & {
+	checked?: boolean;
+	error?: boolean;
+	class?: string;
+};
+
+declare const Checkbox: Component<CheckboxProps>;
+export default Checkbox;

package/src/types/Dialog.d.ts

@@ -0,0 +1,17 @@
+import type { Component, Snippet } from 'svelte';
+
+export type DialogProps = {
+	open?: boolean;
+	title?: string;
+	description?: string;
+	hideClose?: boolean;
+	trigger?: Snippet;
+	actions?: Snippet;
+	children?: Snippet;
+	triggerClass?: string;
+	overlayClass?: string;
+	class?: string;
+};
+
+declare const Dialog: Component<DialogProps>;
+export default Dialog;

package/src/types/Dropdown.d.ts

@@ -0,0 +1,23 @@
+import type { Component, Snippet } from 'svelte';
+
+export type DropdownItem = {
+	label?: string;
+	separator?: boolean;
+	disabled?: boolean;
+	onSelect?: (event: Event) => void;
+};
+
+export type DropdownProps = {
+	open?: boolean;
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	align?: 'start' | 'center' | 'end';
+	sideOffset?: number;
+	items?: DropdownItem[];
+	trigger?: Snippet;
+	children?: Snippet;
+	triggerClass?: string;
+	class?: string;
+};
+
+declare const Dropdown: Component<DropdownProps>;
+export default Dropdown;

package/src/types/Field.d.ts

@@ -0,0 +1,32 @@
+import type { Component, Snippet } from 'svelte';
+
+export type FieldProps = {
+	/** Label text rendered above the control. Used as id-derivation fallback if no `id`/`name` is given. */
+	label?: string;
+	/** Helper text shown below the control when there's no error. */
+	help?: string;
+	/**
+	 * Explicit error message. Overrides any auto-resolved error from the
+	 * parent `<Form form={...}>` context. Switches the inner control to
+	 * error styling.
+	 */
+	error?: string;
+	/**
+	 * Field name — used to look up an auto-error from the parent `<Form>`
+	 * context (matching `form.errors[*].path[0].key`) and as the default
+	 * id for the inner control. When set, an inner `<Input>` doesn't need
+	 * an explicit `name=` either if it inherits from this Field.
+	 */
+	name?: string;
+	/** Adds a red asterisk after the label. Cosmetic; pair with `required` on the actual input. */
+	required?: boolean;
+	/** Explicit id for the control. Otherwise: `name`, then slugified `label`, then undefined. */
+	id?: string;
+	/** Optional class merged into the field wrapper. */
+	class?: string;
+	/** Snippet that renders the actual control. Children should call `<Input />`, `<Textarea />`, etc. */
+	children?: Snippet;
+};
+
+declare const Field: Component<FieldProps>;
+export default Field;

package/src/types/FieldGroup.d.ts

@@ -0,0 +1,11 @@
+import type { Component, Snippet } from 'svelte';
+
+export type FieldGroupProps = {
+	/** Optional legend text rendered as the fieldset's `<legend>`. */
+	legend?: string;
+	class?: string;
+	children?: Snippet;
+};
+
+declare const FieldGroup: Component<FieldGroupProps>;
+export default FieldGroup;

package/src/types/Form.d.ts

@@ -0,0 +1,30 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+
+/**
+ * The shape returned by `fail(400, { errors, values })` from a SvelteKit
+ * action — what `+page.server.c`'s `page.actions` produces on validation
+ * failure (or a manually-constructed equivalent). `errors` is a valibot
+ * issue list; `values` is the raw form data echoed back for re-rendering.
+ */
+export type FormActionResult = {
+	errors?: Array<{ path?: Array<{ key?: string }>; message: string }>;
+	values?: Record<string, string>;
+} | null | undefined;
+
+export type FormProps = Omit<HTMLFormAttributes, 'class' | 'children'> & {
+	method?: 'GET' | 'POST';
+	action?: string;
+	enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+	/**
+	 * Pass the page's `form` prop here. Form derives a `name → message` errors
+	 * map and exposes it via context so descendant `<Field name="...">` looks
+	 * up its own error automatically.
+	 */
+	form?: FormActionResult;
+	class?: string;
+	children?: Snippet;
+};
+
+declare const Form: Component<FormProps>;
+export default Form;

package/src/types/Input.d.ts

@@ -0,0 +1,29 @@
+import type { Component } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputType =
+	| 'text'
+	| 'email'
+	| 'password'
+	| 'number'
+	| 'tel'
+	| 'url'
+	| 'search'
+	| 'date'
+	| 'time'
+	| 'datetime-local'
+	| 'month'
+	| 'week';
+
+export type InputProps = Omit<HTMLInputAttributes, 'class' | 'type' | 'size' | 'value'> & {
+	value?: string | number;
+	type?: InputType;
+	size?: InputSize;
+	/** Force the error styling regardless of the parent Field's error state. */
+	error?: boolean;
+	class?: string;
+};
+
+declare const Input: Component<InputProps>;
+export default Input;

package/src/types/Popover.d.ts

@@ -0,0 +1,18 @@
+import type { Component, Snippet } from 'svelte';
+
+export type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
+export type PopoverAlign = 'start' | 'center' | 'end';
+
+export type PopoverProps = {
+	open?: boolean;
+	side?: PopoverSide;
+	align?: PopoverAlign;
+	sideOffset?: number;
+	trigger?: Snippet;
+	children?: Snippet;
+	triggerClass?: string;
+	class?: string;
+};
+
+declare const Popover: Component<PopoverProps>;
+export default Popover;

package/src/types/Radio.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+
+export type RadioProps = Omit<HTMLInputAttributes, 'class' | 'type'> & {
+	/** Two-way bound shared group value — pass `bind:group={selected}` from parent. */
+	group?: string;
+	value?: string;
+	error?: boolean;
+	class?: string;
+};
+
+declare const Radio: Component<RadioProps>;
+export default Radio;

package/src/types/Select.d.ts

@@ -0,0 +1,13 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+
+export type SelectProps = Omit<HTMLSelectAttributes, 'class' | 'value' | 'children'> & {
+	value?: string | number | string[];
+	error?: boolean;
+	class?: string;
+	/** `<option>` children. Pass via Pug body. */
+	children?: Snippet;
+};
+
+declare const Select: Component<SelectProps>;
+export default Select;

package/src/types/Sheet.d.ts

@@ -0,0 +1,20 @@
+import type { Component, Snippet } from 'svelte';
+
+export type SheetSide = 'top' | 'right' | 'bottom' | 'left';
+
+export type SheetProps = {
+	open?: boolean;
+	side?: SheetSide;
+	title?: string;
+	description?: string;
+	hideClose?: boolean;
+	trigger?: Snippet;
+	actions?: Snippet;
+	children?: Snippet;
+	triggerClass?: string;
+	overlayClass?: string;
+	class?: string;
+};
+
+declare const Sheet: Component<SheetProps>;
+export default Sheet;

package/src/types/Switch.d.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+
+export type SwitchProps = Omit<HTMLInputAttributes, 'class' | 'type' | 'checked' | 'role'> & {
+	checked?: boolean;
+	error?: boolean;
+	class?: string;
+};
+
+declare const Switch: Component<SwitchProps>;
+export default Switch;

package/src/types/Tabs.d.ts

@@ -0,0 +1,17 @@
+import type { Component, Snippet } from 'svelte';
+
+export type TabsItem = {
+	value: string;
+	label: string;
+	panel?: Snippet;
+	disabled?: boolean;
+};
+
+export type TabsProps = {
+	value?: string;
+	items?: TabsItem[];
+	class?: string;
+};
+
+declare const Tabs: Component<TabsProps>;
+export default Tabs;

package/src/types/Textarea.d.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+export type TextareaProps = Omit<HTMLTextareaAttributes, 'class' | 'value' | 'rows'> & {
+	value?: string;
+	rows?: number;
+	error?: boolean;
+	class?: string;
+};
+
+declare const Textarea: Component<TextareaProps>;
+export default Textarea;

package/src/types/ToastProvider.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'svelte';
+
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+
+export type ToastProviderProps = {
+	class?: string;
+};
+
+export type ToastOpts = {
+	variant?: ToastVariant;
+	duration?: number;
+};
+
+declare const ToastProvider: Component<ToastProviderProps>;
+export default ToastProvider;

package/src/types/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import type { Component, Snippet } from 'svelte';
+
+export type TooltipProps = {
+	content?: string;
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	sideOffset?: number;
+	delay?: number;
+	trigger?: Snippet;
+	children?: Snippet;
+	triggerClass?: string;
+	class?: string;
+};
+
+declare const Tooltip: Component<TooltipProps>;
+export default Tooltip;