uisv 0.0.12 → 0.0.14

package/dist/components/chip.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { PropColor } from '../index.js';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type ChipProps = {
+    children: Snippet;
+    text?: string;
+    color?: PropColor;
+    position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+    size?: number;
+    ui?: {
+        base?: ClassNameValue;
+        chip?: ClassNameValue;
+    };
+};
+declare const Chip: import("svelte").Component<ChipProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/components/color-picker.svelte

@@ -0,0 +1,48 @@
+<script module lang="ts">
+	import { ColorTranslator } from 'colortranslator';
+	import { tv } from 'tailwind-variants';
+
+	export type ColorPickerProps = {
+		throttle?: number;
+		disabled?: boolean;
+		value?: string;
+		format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	};
+</script>
+
+<script lang="ts">
+	let {
+		throttle = 50,
+		disabled,
+		value = $bindable('#FFF'),
+		format = 'hex',
+		size = 'md',
+	}: ColorPickerProps = $props();
+
+	const translated = $derived(new ColorTranslator(value));
+
+	const classes = $derived(
+		tv({
+			slots: {
+				root: '',
+				picker: '',
+				select: '',
+				track: '',
+				thumb: '',
+			},
+			variants: {
+				size: {
+					xs: {},
+					sm: {},
+					md: {},
+					lg: {},
+					xl: {},
+				},
+			},
+		})({ size }),
+	);
+</script>
+
+<!-- linear-gradient(0deg,red,#f0f 17%,#00f 33%,#0ff,#0f0 67%,#ff0 83%,red) -->
+<div></div>

package/dist/components/color-picker.svelte.d.ts

@@ -0,0 +1,10 @@
+export type ColorPickerProps = {
+    throttle?: number;
+    disabled?: boolean;
+    value?: string;
+    format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/components/h1.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h1'] = $props();
+</script>
+
+<h1
+	{...rest}
+	class={cn(
+		'text-4xl font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h1>

package/dist/components/h1.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const H1: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H1 = ReturnType<typeof H1>;
+export default H1;

package/dist/components/h2.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h2'] = $props();
+</script>
+
+<h2
+	{...rest}
+	class={cn(
+		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
+		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
+		'[&>a]:(focus-visible:outline-primary)',
+		'[&>a>code]:(transition-colors border-dashed font-bold text-xl/7)',
+		'hover:[&>a>code]:(border-primary text-primary)',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h2>

package/dist/components/h2.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const H2: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H2 = ReturnType<typeof H2>;
+export default H2;

package/dist/components/h3.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h3'] = $props();
+</script>
+
+<h3
+	{...rest}
+	class={cn(
+		'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
+		'[&>a>code]:transition-colors',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h3>

package/dist/components/h3.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const H3: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H3 = ReturnType<typeof H3>;
+export default H3;

package/dist/components/h4.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h4'] = $props();
+</script>
+
+<h4
+	{...rest}
+	class={cn(
+		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
+		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
+		'hover:[&>a>code]:(border-primary text-primary)',
+		'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
+		'[&>a]:focus-visible:outline-primary',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h4>

package/dist/components/h4.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const H4: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H4 = ReturnType<typeof H4>;
+export default H4;

package/dist/components/h5.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h5'] = $props();
+</script>
+
+<h5
+	{...rest}
+	class={cn(
+		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
+		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
+		'hover:[&>a>code]:(border-primary text-primary)',
+		'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
+		'[&>a]:focus-visible:outline-primary',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h5>

package/dist/components/h5.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const H5: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H5 = ReturnType<typeof H5>;
+export default H5;

package/dist/components/h6.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h6'] = $props();
+</script>
+
+<h6
+	{...rest}
+	class={cn(
+		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
+		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
+		'hover:[&>a>code]:(border-primary text-primary)',
+		'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
+		'[&>a]:focus-visible:outline-primary',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h6>

package/dist/components/h6.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const H6: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H6 = ReturnType<typeof H6>;
+export default H6;

package/dist/components/index.d.ts

@@ -0,0 +1,45 @@
+export * from './button.svelte';
+export { default as Button } from './button.svelte';
+export * from './badge.svelte';
+export { default as Input } from './input.svelte';
+export * from './badge.svelte';
+export { default as InputTime } from './input-time.svelte';
+export * from './badge.svelte';
+export { default as Badge } from './badge.svelte';
+export * from './alert.svelte';
+export { default as Alert } from './alert.svelte';
+export * from './banner.svelte';
+export { default as Banner } from './banner.svelte';
+export * from './progress.svelte';
+export { default as Progress } from './progress.svelte';
+export * from './card.svelte';
+export { default as Card } from './card.svelte';
+export * from './chip.svelte';
+export { default as Chip } from './chip.svelte';
+export * from './switch.svelte';
+export { default as Switch } from './switch.svelte';
+export * from './slider.svelte';
+export { default as Slider } from './slider.svelte';
+export * from './checkbox.svelte';
+export { default as Checkbox } from './checkbox.svelte';
+export * from './checkbox-group.svelte';
+export { default as CheckboxGroup } from './checkbox-group.svelte';
+export { default as H1 } from './h1.svelte';
+export { default as H2 } from './h2.svelte';
+export { default as H3 } from './h3.svelte';
+export { default as H4 } from './h4.svelte';
+export { default as H5 } from './h5.svelte';
+export { default as H6 } from './h6.svelte';
+export { default as P } from './p.svelte';
+export * from './pin-input.svelte';
+export { default as PinInput } from './pin-input.svelte';
+export * from './accordion.svelte';
+export { default as Accordion } from './accordion.svelte';
+export * from './kbd.svelte';
+export { default as Kbd } from './kbd.svelte';
+export * from './tabs.svelte';
+export { default as Tabs } from './tabs.svelte';
+export * from './color-picker.svelte';
+export { default as ColorPicker } from './color-picker.svelte';
+export * from './select.svelte';
+export { default as Select } from './select.svelte';

package/dist/components/index.js

@@ -0,0 +1,45 @@
+export * from './button.svelte';
+export { default as Button } from './button.svelte';
+export * from './badge.svelte';
+export { default as Input } from './input.svelte';
+export * from './badge.svelte';
+export { default as InputTime } from './input-time.svelte';
+export * from './badge.svelte';
+export { default as Badge } from './badge.svelte';
+export * from './alert.svelte';
+export { default as Alert } from './alert.svelte';
+export * from './banner.svelte';
+export { default as Banner } from './banner.svelte';
+export * from './progress.svelte';
+export { default as Progress } from './progress.svelte';
+export * from './card.svelte';
+export { default as Card } from './card.svelte';
+export * from './chip.svelte';
+export { default as Chip } from './chip.svelte';
+export * from './switch.svelte';
+export { default as Switch } from './switch.svelte';
+export * from './slider.svelte';
+export { default as Slider } from './slider.svelte';
+export * from './checkbox.svelte';
+export { default as Checkbox } from './checkbox.svelte';
+export * from './checkbox-group.svelte';
+export { default as CheckboxGroup } from './checkbox-group.svelte';
+export { default as H1 } from './h1.svelte';
+export { default as H2 } from './h2.svelte';
+export { default as H3 } from './h3.svelte';
+export { default as H4 } from './h4.svelte';
+export { default as H5 } from './h5.svelte';
+export { default as H6 } from './h6.svelte';
+export { default as P } from './p.svelte';
+export * from './pin-input.svelte';
+export { default as PinInput } from './pin-input.svelte';
+export * from './accordion.svelte';
+export { default as Accordion } from './accordion.svelte';
+export * from './kbd.svelte';
+export { default as Kbd } from './kbd.svelte';
+export * from './tabs.svelte';
+export { default as Tabs } from './tabs.svelte';
+export * from './color-picker.svelte';
+export { default as ColorPicker } from './color-picker.svelte';
+export * from './select.svelte';
+export { default as Select } from './select.svelte';

package/dist/components/input-time.svelte

@@ -0,0 +1,234 @@
+<script module lang="ts">
+	import { type PropColor } from '../index.js';
+	import type { Component, Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+	import { Time } from '@internationalized/date';
+
+	export { Time };
+	export { default as InputTime } from './input-time.svelte';
+
+	export type InputTimeProps = {
+		id?: string;
+		name?: string;
+		hourcycle?: 12 | 24;
+		max?: Time;
+		min?: Time;
+		/**
+		 * The placeholder text when the input is empty.
+		 */
+		placeholder?: string;
+		/**
+		 * @default primary
+		 */
+		color?: PropColor;
+		/**
+		 * @default outline
+		 */
+		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		/**
+		 * @default md
+		 */
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		/**
+		 * @default off
+		 */
+		autocomplete?: 'on' | 'off';
+		/**
+		 * @default false
+		 */
+		autofocus?: boolean | number;
+		disabled?: boolean;
+		/**
+		 * Highlight the ring color like a focus state.
+		 */
+		highlight?: boolean;
+		value?: Time;
+		icon?: string | Snippet | Component;
+		ui?: {
+			root?: ClassNameValue;
+			leading?: ClassNameValue;
+			icon?: ClassNameValue;
+			trailing?: ClassNameValue;
+			segment?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	import { TimeField } from 'bits-ui';
+
+	let {
+		hourcycle = 12,
+		value = $bindable(),
+		color = 'primary',
+		variant = 'outline',
+		size = 'md',
+		icon,
+		disabled,
+		highlight,
+		ui = {},
+		...rest
+	}: InputTimeProps = $props();
+
+	const variants = $derived(
+		tv({
+			slots: {
+				root: 'inline-flex items-center rounded transition-all ring ring-inset ring-transparent',
+				leading: 'text-muted',
+				trailing: 'text-muted',
+				icon: '',
+				segment: [
+					'rounded text-center outline-hidden transition-all focus:bg-surface-accented shrink',
+					'aria-[valuetext="Empty"]:text-dimmed data-[segment="literal"]:(text-muted px-1) data-invalid:text-error data-disabled:(cursor-not-allowed opacity-75)',
+				],
+			},
+			variants: {
+				fieldGroup: {
+					horizontal: {
+						root: '',
+					},
+					vertical: {
+						root: '',
+					},
+				},
+				size: {
+					xs: {
+						root: 'px-2 h-6 text-xs',
+						leading: 'ps-2',
+						trailing: 'pe-2',
+						icon: 'size-4',
+						segment: 'px-1',
+					},
+					sm: {
+						root: 'px-2.5 h-7 text-xs',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						icon: 'size-4',
+						segment: 'px-1',
+					},
+					md: {
+						root: 'px-2.5 h-8 text-sm',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						icon: 'size-5',
+						segment: 'px-2',
+					},
+					lg: {
+						root: 'px-3 h-9 text-sm',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						icon: 'size-5',
+						segment: 'px-3',
+					},
+					xl: {
+						root: 'px-3 h-10 text-base',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						icon: 'size-6',
+						segment: 'px-3',
+					},
+				},
+				variant: {
+					outline: { root: 'ring ring-surface-accented' },
+					soft: {
+						root: 'bg-surface-muted hover:bg-surface-elevated focus-within:bg-surface-elevated',
+					},
+					subtle: { root: 'ring ring-accented' },
+					ghost: { root: 'hover:bg-surface-elevated focus-within:bg-surface-elevated' },
+					none: { root: '' },
+				},
+				color: {
+					primary: { root: '' },
+					surface: { root: '' },
+					info: { root: '' },
+					success: { root: '' },
+					warning: { root: '' },
+					error: { root: '' },
+				},
+				leading: {
+					false: { leading: 'hidden' },
+				},
+				trailing: {
+					false: { trailing: 'hidden' },
+				},
+				loading: {
+					true: '',
+				},
+				highlight: {
+					true: '',
+				},
+				type: {
+					file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
+				},
+			},
+			compoundVariants: [
+				{
+					color: 'primary',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-primary-500 ring-2',
+					},
+				},
+				{
+					color: 'surface',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-surface-800 ring-2',
+					},
+				},
+				{
+					color: 'info',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-info-500 ring-2',
+					},
+				},
+				{
+					color: 'success',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-success-500 ring-2',
+					},
+				},
+				{
+					color: 'warning',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-warning-500 ring-2',
+					},
+				},
+				{
+					color: 'error',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-error-500 ring-2',
+					},
+				},
+			],
+		})({
+			size,
+			color,
+			variant,
+			highlight,
+		}),
+	);
+</script>
+
+<TimeField.Root bind:value hourCycle={hourcycle}>
+	<TimeField.Input name="hello" class={variants.root({ class: ui.root })}>
+		{#snippet children({ segments })}
+			{#each segments as { part, value }, i (part + i)}
+				<TimeField.Segment {part} class={variants.segment({ class: ui.segment })}>
+					{value}
+				</TimeField.Segment>
+			{/each}
+		{/snippet}
+	</TimeField.Input>
+</TimeField.Root>

package/dist/components/input-time.svelte.d.ts

@@ -0,0 +1,54 @@
+import { type PropColor } from '../index.js';
+import type { Component, Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import { Time } from '@internationalized/date';
+export { Time };
+export { default as InputTime } from './input-time.svelte';
+export type InputTimeProps = {
+    id?: string;
+    name?: string;
+    hourcycle?: 12 | 24;
+    max?: Time;
+    min?: Time;
+    /**
+     * The placeholder text when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * @default primary
+     */
+    color?: PropColor;
+    /**
+     * @default outline
+     */
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    /**
+     * @default md
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * @default off
+     */
+    autocomplete?: 'on' | 'off';
+    /**
+     * @default false
+     */
+    autofocus?: boolean | number;
+    disabled?: boolean;
+    /**
+     * Highlight the ring color like a focus state.
+     */
+    highlight?: boolean;
+    value?: Time;
+    icon?: string | Snippet | Component;
+    ui?: {
+        root?: ClassNameValue;
+        leading?: ClassNameValue;
+        icon?: ClassNameValue;
+        trailing?: ClassNameValue;
+        segment?: ClassNameValue;
+    };
+};
+declare const InputTime: Component<InputTimeProps, {}, "value">;
+type InputTime = ReturnType<typeof InputTime>;
+export default InputTime;