@human-synthesis/norns-ui 0.0.2 → 0.0.5

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

@@ -1,15 +1,26 @@
 import type { Component, Snippet } from 'svelte';
 
 export type FieldProps = {
-	/** Label text rendered above the control. Used as id-derivation fallback if no `id` is given. */
+	/** 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;
-	/** Error message shown below the control. Switches the inner control to error styling via context. */
+	/**
+	 * 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 derived from `label`, otherwise undefined. */
+	/** Explicit id for the control. Otherwise: `name`, then slugified `label`, then undefined. */
 	id?: string;
 	/** Optional class merged into the field wrapper. */
 	class?: string;

package/src/types/Form.d.ts

@@ -1,10 +1,27 @@
 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;
 };

package/src/types/GradientBackground.d.ts

@@ -0,0 +1,14 @@
+import type { Component, Snippet } from 'svelte';
+
+export type GradientBackgroundProps = {
+	colors?: string[];
+	/** Loop duration in seconds. Default 18. */
+	duration?: number;
+	/** Gradient angle. Default 130. */
+	angle?: number;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const GradientBackground: Component<GradientBackgroundProps>;
+export default GradientBackground;

package/src/types/GradientText.d.ts

@@ -0,0 +1,19 @@
+import type { Component, Snippet } from 'svelte';
+
+export type GradientTextProps = {
+	/** Start color. Default `var(--color-primary-500)`. Accepts any CSS color. */
+	from?: string;
+	/** End color. Default `var(--color-info-500)`. */
+	to?: string;
+	/** Optional middle stop. */
+	via?: string;
+	/** Animate the gradient via background-position keyframes. Default true. */
+	animate?: boolean;
+	/** Gradient angle in degrees. Default 90. */
+	angle?: number;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const GradientText: Component<GradientTextProps>;
+export default GradientText;

package/src/types/Header.d.ts

@@ -0,0 +1,12 @@
+import type { Component, Snippet } from 'svelte';
+
+export type HeaderProps = {
+	sticky?: boolean;
+	brand?: Snippet;
+	nav?: Snippet;
+	actions?: Snippet;
+	class?: string;
+};
+
+declare const Header: Component<HeaderProps>;
+export default Header;

package/src/types/HeroBanner.d.ts

@@ -0,0 +1,17 @@
+import type { Component, Snippet } from 'svelte';
+
+export type HeroBannerProps = {
+	title: string;
+	description?: string;
+	/** Background/decorative image src; rendered with reduced opacity behind the content. */
+	image?: string;
+	align?: 'left' | 'center';
+	/** Apply animated `GradientText` to the title. Default false. */
+	gradient?: boolean;
+	actions?: Snippet;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const HeroBanner: Component<HeroBannerProps>;
+export default HeroBanner;

package/src/types/HierarchicalMenu.d.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'svelte';
+
+export type HierarchicalMenuItem = {
+	label: string;
+	href?: string;
+	icon?: string;
+	description?: string;
+	children?: HierarchicalMenuItem[];
+};
+
+export type HierarchicalMenuProps = {
+	items?: HierarchicalMenuItem[];
+	/** aria-label for the <nav> wrapper. */
+	label?: string;
+	onSelect?: (item: HierarchicalMenuItem) => void;
+	class?: string;
+};
+
+declare const HierarchicalMenu: Component<HierarchicalMenuProps>;
+export default HierarchicalMenu;

package/src/types/Icon.d.ts

@@ -0,0 +1,21 @@
+import type { Component } from 'svelte';
+
+export type IconProps = {
+	/**
+	 * Iconify icon name in `<set>:<name>` form, e.g. `"lucide:check"` or
+	 * `"mdi:home"`. The `@iconify-json/lucide` package ships with the library;
+	 * other sets can be installed alongside (`@iconify-json/heroicons`, etc.).
+	 */
+	name: string;
+	/**
+	 * Tailwind size utility for the icon, e.g. `"size-4"`, `"size-5"`. Default
+	 * `"size-4"`. Pass any class string accepted by Tailwind.
+	 */
+	size?: string;
+	flip?: 'horizontal' | 'vertical' | 'horizontal,vertical';
+	rotate?: 90 | 180 | 270 | string;
+	class?: string;
+};
+
+declare const Icon: Component<IconProps>;
+export default Icon;

package/src/types/Image.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'svelte';
+
+export type ImageProps = {
+	src: string;
+	alt?: string;
+	loading?: 'lazy' | 'eager';
+	fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+	rounded?: boolean | 'sm' | 'md' | 'lg' | 'full';
+	width?: number | string;
+	height?: number | string;
+	class?: string;
+};
+
+declare const Image: Component<ImageProps>;
+export default Image;

package/src/types/LiquidButton.d.ts

@@ -0,0 +1,15 @@
+import type { Component, Snippet } from 'svelte';
+
+export type LiquidButtonProps = {
+	variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+	size?: 'sm' | 'md' | 'lg';
+	type?: 'button' | 'submit' | 'reset';
+	disabled?: boolean;
+	onclick?: (event: MouseEvent) => void;
+	icon?: string;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const LiquidButton: Component<LiquidButtonProps>;
+export default LiquidButton;

package/src/types/MegaMenu.d.ts

@@ -0,0 +1,29 @@
+import type { Component } from 'svelte';
+
+export type MegaMenuItem = {
+	label: string;
+	href?: string;
+	icon?: string;
+	description?: string;
+};
+
+export type MegaMenuColumn = {
+	title?: string;
+	items: MegaMenuItem[];
+};
+
+export type MegaMenuSection = {
+	label: string;
+	cols?: 2 | 3 | 4;
+	columns: MegaMenuColumn[];
+};
+
+export type MegaMenuProps = {
+	sections?: MegaMenuSection[];
+	/** aria-label for the <nav> wrapper. */
+	label?: string;
+	class?: string;
+};
+
+declare const MegaMenu: Component<MegaMenuProps>;
+export default MegaMenu;

package/src/types/MultiSelect.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+import type { ComboboxItem } from './Autocomplete';
+
+export type MultiSelectProps = {
+	items?: ComboboxItem[];
+	value?: string[];
+	open?: boolean;
+	placeholder?: string;
+	disabled?: boolean;
+};
+
+declare const MultiSelect: Component<MultiSelectProps>;
+export default MultiSelect;

package/src/types/NumberInput.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+
+export type NumberInputProps = {
+	value?: number;
+	min?: number;
+	max?: number;
+	stepSize?: number;
+	disabled?: boolean;
+	readonly?: boolean;
+	name?: string;
+	id?: string;
+	error?: boolean;
+	class?: string;
+};
+
+declare const NumberInput: Component<NumberInputProps>;
+export default NumberInput;

package/src/types/OtpField.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+
+export type OtpFieldProps = {
+	value?: string;
+	length?: number;
+	mask?: boolean;
+	label?: string;
+	oncomplete?: (value: string) => void;
+	class?: string;
+};
+
+declare const OtpField: Component<OtpFieldProps>;
+export default OtpField;

package/src/types/Pagination.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+
+export type PaginationProps = {
+	page?: number;
+	total?: number;
+	pageSize?: number;
+	/** How many pages to show on each side of the current. Default 1. */
+	siblingCount?: number;
+	class?: string;
+};
+
+declare const Pagination: Component<PaginationProps>;
+export default Pagination;

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/PreviewCard.d.ts

@@ -0,0 +1,16 @@
+import type { Component, Snippet } from 'svelte';
+
+export type PreviewCardProps = {
+	href?: string;
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	align?: 'start' | 'center' | 'end';
+	sideOffset?: number;
+	openDelay?: number;
+	trigger?: Snippet;
+	children?: Snippet;
+	triggerClass?: string;
+	class?: string;
+};
+
+declare const PreviewCard: Component<PreviewCardProps>;
+export default PreviewCard;

package/src/types/Progress.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+
+export type ProgressVariant = 'primary' | 'success' | 'warning' | 'danger';
+
+export type ProgressProps = {
+	value?: number;
+	max?: number;
+	variant?: ProgressVariant;
+	indeterminate?: boolean;
+	class?: string;
+};
+
+declare const Progress: Component<ProgressProps>;
+export default Progress;

package/src/types/ProgressCircular.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+
+export type ProgressCircularSize = 'sm' | 'md' | 'lg';
+
+export type ProgressCircularProps = {
+	value?: number;
+	max?: number;
+	size?: ProgressCircularSize;
+	indeterminate?: boolean;
+	class?: string;
+};
+
+declare const ProgressCircular: Component<ProgressCircularProps>;
+export default ProgressCircular;

package/src/types/Reveal.d.ts

@@ -0,0 +1,20 @@
+import type { Component, Snippet } from 'svelte';
+
+export type RevealProps = {
+	direction?: 'up' | 'down' | 'left' | 'right';
+	/** Travel distance in pixels. Default 12. */
+	distance?: number;
+	/** Animation duration in seconds. Default 0.5. */
+	duration?: number;
+	/** Delay before animating, seconds. Default 0. */
+	delay?: number;
+	/** Re-trigger on every entry (false) or just the first time (true). Default true. */
+	once?: boolean;
+	/** IntersectionObserver threshold (0–1). Default 0.15. */
+	threshold?: number;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const Reveal: Component<RevealProps>;
+export default Reveal;

package/src/types/RichTooltip.d.ts

@@ -0,0 +1,16 @@
+import type { Component, Snippet } from 'svelte';
+
+export type RichTooltipProps = {
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	align?: 'start' | 'center' | 'end';
+	sideOffset?: number;
+	openDelay?: number;
+	closeDelay?: number;
+	trigger?: Snippet;
+	children?: Snippet;
+	triggerClass?: string;
+	class?: string;
+};
+
+declare const RichTooltip: Component<RichTooltipProps>;
+export default RichTooltip;

package/src/types/RippleButton.d.ts

@@ -0,0 +1,15 @@
+import type { Component, Snippet } from 'svelte';
+
+export type RippleButtonProps = {
+	variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+	size?: 'sm' | 'md' | 'lg';
+	type?: 'button' | 'submit' | 'reset';
+	disabled?: boolean;
+	onclick?: (event: MouseEvent) => void;
+	icon?: string;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const RippleButton: Component<RippleButtonProps>;
+export default RippleButton;

package/src/types/ScrollArea.d.ts

@@ -0,0 +1,11 @@
+import type { Component, Snippet } from 'svelte';
+
+export type ScrollAreaProps = {
+	type?: 'hover' | 'auto' | 'scroll' | 'always';
+	horizontal?: boolean;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const ScrollArea: Component<ScrollAreaProps>;
+export default ScrollArea;

package/src/types/Separator.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+
+export type SeparatorProps = {
+	orientation?: 'horizontal' | 'vertical';
+	class?: string;
+};
+
+declare const Separator: Component<SeparatorProps>;
+export default Separator;

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/ShinyButton.d.ts

@@ -0,0 +1,15 @@
+import type { Component, Snippet } from 'svelte';
+
+export type ShinyButtonProps = {
+	variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+	size?: 'sm' | 'md' | 'lg';
+	type?: 'button' | 'submit' | 'reset';
+	disabled?: boolean;
+	onclick?: (event: MouseEvent) => void;
+	icon?: string;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const ShinyButton: Component<ShinyButtonProps>;
+export default ShinyButton;

package/src/types/Skeleton.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+
+export type SkeletonVariant = 'rect' | 'text' | 'circle';
+
+export type SkeletonProps = {
+	variant?: SkeletonVariant;
+	width?: number | string;
+	height?: number | string;
+	class?: string;
+};
+
+declare const Skeleton: Component<SkeletonProps>;
+export default Skeleton;

package/src/types/Sparkles.d.ts

@@ -0,0 +1,13 @@
+import type { Component, Snippet } from 'svelte';
+
+export type SparklesProps = {
+	density?: number;
+	colors?: string[];
+	minSize?: number;
+	maxSize?: number;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const Sparkles: Component<SparklesProps>;
+export default Sparkles;

package/src/types/Stepper.d.ts

@@ -0,0 +1,19 @@
+import type { Component } from 'svelte';
+
+export type StepperStep = {
+	id?: string;
+	label: string;
+	complete?: boolean;
+	current?: boolean;
+};
+
+export type StepperProps = {
+	steps?: StepperStep[];
+	/** Index of the active step. Steps before are auto-marked complete unless overridden. */
+	current?: number;
+	orientation?: 'horizontal' | 'vertical';
+	class?: string;
+};
+
+declare const Stepper: Component<StepperProps>;
+export default Stepper;

package/src/types/Surface.d.ts

@@ -0,0 +1,10 @@
+import type { Component, Snippet } from 'svelte';
+
+export type SurfaceProps = {
+	tone?: 'glass';
+	children?: Snippet;
+	class?: string;
+};
+
+declare const Surface: Component<SurfaceProps>;
+export default Surface;

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/TagsInput.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+
+export type TagsInputProps = {
+	value?: string[];
+	max?: number;
+	placeholder?: string;
+	commitOnBlur?: boolean;
+	separators?: string[];
+	disabled?: boolean;
+	name?: string;
+	id?: string;
+	error?: boolean;
+	class?: string;
+};
+
+declare const TagsInput: Component<TagsInputProps>;
+export default TagsInput;

package/src/types/ThemeToggler.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+
+export type ThemeTogglerProps = {
+	variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+	size?: 'sm' | 'md' | 'lg';
+	showLabel?: boolean;
+	labelLight?: string;
+	labelDark?: string;
+	lightIcon?: string;
+	darkIcon?: string;
+	/** localStorage key. Default `'norns-theme'`. */
+	storageKey?: string;
+	class?: string;
+};
+
+declare const ThemeToggler: Component<ThemeTogglerProps>;
+export default ThemeToggler;

package/src/types/TimePicker.d.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'svelte';
+
+export type TimePickerProps = {
+	/** Time string `HH:MM` (24h regardless of display `hourCycle`). Bindable. */
+	value?: string;
+	open?: boolean;
+	/** Minute increment in the picker (5, 10, 15, 30). Default 5. */
+	minuteStep?: number;
+	hourCycle?: 12 | 24;
+	placeholder?: string;
+	disabled?: boolean;
+	label?: string;
+	name?: string;
+	id?: string;
+	error?: boolean;
+	class?: string;
+};
+
+declare const TimePicker: Component<TimePickerProps>;
+export default TimePicker;

package/src/types/Timeline.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+
+export type TimelineItem = {
+	time?: string;
+	title?: string;
+	description?: string;
+	icon?: string;
+	variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+};
+
+export type TimelineProps = {
+	items?: TimelineItem[];
+	class?: string;
+};
+
+declare const Timeline: Component<TimelineProps>;
+export default Timeline;