@human-synthesis/norns-ui 0.0.3 → 0.0.5

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/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/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/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;

package/src/types/ToggleButton.d.ts

@@ -0,0 +1,15 @@
+import type { Component, Snippet } from 'svelte';
+
+export type ToggleButtonProps = {
+	pressed?: boolean;
+	disabled?: boolean;
+	icon?: string;
+	variant?: 'default' | 'outline';
+	size?: 'sm' | 'md' | 'lg';
+	onpressedchange?: (pressed: boolean) => void;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const ToggleButton: Component<ToggleButtonProps>;
+export default ToggleButton;

package/src/types/ToggleButtonGroup.d.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'svelte';
+
+export type ToggleGroupItem = {
+	value: string;
+	label?: string;
+	icon?: string;
+	iconOnly?: boolean;
+	disabled?: boolean;
+};
+
+export type ToggleButtonGroupProps = {
+	items?: ToggleGroupItem[];
+	value?: string | string[];
+	multiple?: boolean;
+	disabled?: boolean;
+	class?: string;
+};
+
+declare const ToggleButtonGroup: Component<ToggleButtonGroupProps>;
+export default ToggleButtonGroup;

package/src/types/Toolbar.d.ts

@@ -0,0 +1,12 @@
+import type { Component, Snippet } from 'svelte';
+
+export type ToolbarProps = {
+	orientation?: 'horizontal' | 'vertical';
+	/** Accessible label, used as aria-label. */
+	label?: string;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const Toolbar: Component<ToolbarProps>;
+export default Toolbar;

package/src/types/Tree.d.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'svelte';
+
+export type TreeNode = {
+	id: string | number;
+	label: string;
+	icon?: string;
+	children?: TreeNode[];
+};
+
+export type TreeProps = {
+	items?: TreeNode[];
+	/** Array of node ids that are expanded. Bindable. */
+	expanded?: (string | number)[];
+	/** Currently-selected node id. Bindable. */
+	selected?: string | number;
+	class?: string;
+};
+
+declare const Tree: Component<TreeProps>;
+export default Tree;

package/src/types/Uploader.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'svelte';
+
+export type UploaderProps = {
+	files?: File[];
+	multiple?: boolean;
+	accept?: string;
+	disabled?: boolean;
+	placeholder?: string;
+	helper?: string;
+	onchange?: (files: File[]) => void;
+	class?: string;
+};
+
+declare const Uploader: Component<UploaderProps>;
+export default Uploader;

package/src/types/Video.d.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'svelte';
+
+export type VideoSource = { src: string; type?: string };
+
+export type VideoProps = {
+	src?: string;
+	sources?: VideoSource[];
+	controls?: boolean;
+	autoplay?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+	playsinline?: boolean;
+	preload?: 'none' | 'metadata' | 'auto';
+	poster?: string;
+	fallback?: string;
+	class?: string;
+};
+
+declare const Video: Component<VideoProps>;
+export default Video;