uisv 0.0.7 → 0.0.9

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

@@ -1,27 +0,0 @@
-import { type PropColor } from '../index.js';
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-import type { Component } from 'vitest-browser-svelte';
-export type CheckboxProps = {
-    value?: boolean | 'intermediate';
-    color?: PropColor;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    disabled?: boolean;
-    icon?: string | Snippet | Component;
-    intermediateicon?: string | Snippet | Component;
-    label?: string | Snippet;
-    description?: string | Snippet;
-    required?: boolean;
-    indicator?: 'start' | 'end' | 'hidden';
-    as?: string;
-    ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        icon?: ClassNameValue;
-        label?: ClassNameValue;
-        description?: ClassNameValue;
-    };
-};
-declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value">;
-type Checkbox = ReturnType<typeof Checkbox>;
-export default Checkbox;

package/dist/components/checkboxgroup.svelte

@@ -1,259 +0,0 @@
-<script module lang="ts">
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-	import { Checkbox } from './index.js';
-	import type { Component, Snippet } from 'svelte';
-	import { type PropColor, isComponent, isSnippet } from '../index.js';
-
-	/* eslint @typescript-eslint/no-explicit-any: 0 */
-
-	export type CheckboxGroupProps = {
-		color?: PropColor;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		icon?: string | Snippet | Component;
-		required?: boolean;
-		indicator?: 'start' | 'end' | 'hidden';
-		value?: any[];
-		valuekey?: string;
-		variant?: 'list' | 'card' | 'table';
-		items: Array<any>;
-		labelkey?: string;
-		descriptionkey?: string;
-		legend?: string | Snippet | Component;
-		orientation?: 'horizontal' | 'vertical';
-		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			checkbox?: ClassNameValue;
-		};
-	};
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable([]),
-		valuekey = 'value',
-		color = 'primary',
-		size = 'md',
-		variant = 'list',
-		items = [],
-		labelkey = 'label',
-		descriptionkey = 'description',
-		legend,
-		orientation = 'horizontal',
-		ui = {},
-		...props
-	}: CheckboxGroupProps = $props();
-
-	const classes = $derived.by(() =>
-		tv({
-			slots: {
-				root: '',
-				container: 'flex',
-				checkbox: ''
-			},
-			variants: {
-				color: {
-					primary: {
-						container: []
-					},
-					secondary: {
-						container: []
-					},
-					info: {
-						container: []
-					},
-					success: {
-						container: []
-					},
-					warning: {
-						container: []
-					},
-					error: {
-						container: []
-					}
-				},
-				size: {
-					xs: {
-						container: '',
-						icon: 'size-3'
-					},
-					sm: {
-						container: '',
-						icon: 'size-3.5'
-					},
-					md: {
-						container: '',
-						icon: 'size-4'
-					},
-					lg: {
-						container: '',
-						icon: 'size-4.5'
-					},
-					xl: {
-						container: '',
-						icon: 'size-5'
-					}
-				},
-				variant: {
-					list: { container: 'gap-2' },
-					card: { container: 'gap-2', checkbox: 'p-4 rounded-lg border border-neutral-200' },
-					table: {
-						container: 'gap-0 ',
-						checkbox: 'border border-neutral-200 p-4 data-[state=checked]:z-1'
-					}
-				},
-				orientation: {
-					horizontal: {
-						container: 'flex-row',
-						checkbox:
-							'[&:not(:last-child)]:(-me-px ms-0) first-of-type:rounded-s-lg last-of-type:rounded-e-lg'
-					},
-					vertical: {
-						container: 'flex-col -space-y-px'
-					}
-				},
-				selected: { true: '', false: '' }
-			},
-			compoundVariants: [
-				{
-					color: 'primary',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-primary-500'
-					}
-				},
-				{
-					color: 'secondary',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-secondary-500'
-					}
-				},
-				{
-					color: 'info',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-info-500'
-					}
-				},
-				{
-					color: 'success',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-success-500'
-					}
-				},
-				{
-					color: 'warning',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-warning-500'
-					}
-				},
-				{
-					color: 'error',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-error-500'
-					}
-				},
-
-				{
-					color: 'primary',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-primary-100'
-					}
-				},
-				{
-					color: 'secondary',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-secondary-100'
-					}
-				},
-				{
-					color: 'info',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-info-100'
-					}
-				},
-				{
-					color: 'success',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-success-100'
-					}
-				},
-				{
-					color: 'warning',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-warning-100'
-					}
-				},
-				{
-					color: 'error',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-error-100'
-					}
-				}
-			]
-		})({ color, size, variant, orientation })
-	);
-</script>
-
-<div class={classes.root({ class: [ui.root] })}>
-	{#if typeof legend === 'string'}
-		<legend>{legend}</legend>
-	{:else if isSnippet(legend)}
-		{@render legend()}
-	{:else if isComponent(legend)}
-		{@const Legend = legend}
-		<Legend />
-	{/if}
-
-	<fieldset class={classes.container({ class: [ui.container] })}>
-		{#each items as item, index (index)}
-			{@const key = typeof item === 'object' ? item[valuekey] : item}
-
-			<Checkbox
-				{...props}
-				{color}
-				as={variant === 'list' ? 'div' : 'label'}
-				ui={{
-					root: classes.checkbox({
-						class: [ui.checkbox],
-						selected: value.includes(key)
-					})
-				}}
-				bind:value={
-					() => value.includes(key),
-					(v) => {
-						if (v) return value.push(key);
-						const index = value.findIndex((x) => x === key);
-						if (index < 0) return;
-						value.splice(index, 1);
-					}
-				}
-				description={typeof item === 'object' ? item[descriptionkey] : undefined}
-				label={typeof item === 'object' ? item[labelkey] : item}
-			/>
-		{/each}
-	</fieldset>
-</div>

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

@@ -1,26 +0,0 @@
-import type { ClassNameValue } from 'tailwind-merge';
-import type { Component, Snippet } from 'svelte';
-import { type PropColor } from '../index.js';
-export type CheckboxGroupProps = {
-    color?: PropColor;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    icon?: string | Snippet | Component;
-    required?: boolean;
-    indicator?: 'start' | 'end' | 'hidden';
-    value?: any[];
-    valuekey?: string;
-    variant?: 'list' | 'card' | 'table';
-    items: Array<any>;
-    labelkey?: string;
-    descriptionkey?: string;
-    legend?: string | Snippet | Component;
-    orientation?: 'horizontal' | 'vertical';
-    ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        checkbox?: ClassNameValue;
-    };
-};
-declare const Checkboxgroup: Component<CheckboxGroupProps, {}, "value">;
-type Checkboxgroup = ReturnType<typeof Checkboxgroup>;
-export default Checkboxgroup;

package/dist/components/chip.svelte

@@ -1,82 +0,0 @@
-<script module lang="ts">
-	import type { PropColor } from '../index.js';
-	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-
-	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;
-		};
-	};
-</script>
-
-<script lang="ts">
-	let {
-		children,
-		text,
-		color = 'primary',
-		position = 'top-right',
-		size = 8,
-		ui = {}
-	}: ChipProps = $props();
-
-	const classes = $derived.by(() =>
-		tv({
-			slots: {
-				base: 'relative inline-flex items-center justify-center shrink-0',
-				chip: [
-					'absolute rounded-full ring ring-white flex items-center justify-center text-white font-medium whitespace-nowrap',
-					'-translate-y-1/2 translate-x-1/2 px-0.5'
-				]
-			},
-			variants: {
-				color: {
-					primary: {
-						chip: 'bg-primary'
-					},
-					secondary: {
-						chip: 'bg-secondary'
-					},
-					success: {
-						chip: 'bg-success'
-					},
-					info: {
-						chip: 'bg-info'
-					},
-					warning: {
-						chip: 'bg-warning'
-					},
-					error: {
-						chip: 'bg-error'
-					}
-				},
-				position: {
-					'top-right': { chip: 'top-0 right-0' },
-					'bottom-right': { chip: 'bottom-0 right-0' },
-					'top-left': { chip: 'top-0 left-0' },
-					'bottom-left': { chip: 'bottom-0 left-0' }
-				}
-			}
-		})({ color, position })
-	);
-</script>
-
-<div class={classes.base({ class: [ui.base] })}>
-	{@render children()}
-
-	<span
-		class={classes.chip({ class: ui.chip })}
-		style:height="{size}px"
-		style:min-width="{size}px"
-		style:font-size="{size}px"
-	>
-		{text}
-	</span>
-</div>

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

@@ -1,17 +0,0 @@
-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/h1.svelte

@@ -1,28 +0,0 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-
-	export type H1Props = {
-		children: Snippet;
-		ui?: { root?: ClassNameValue };
-	};
-</script>
-
-<script lang="ts">
-	const { children, ui = {} }: H1Props = $props();
-
-	const classes = $derived(
-		tv({
-			variants: {
-				slots: {
-					root: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)'
-				}
-			}
-		})({ class: ui.root })
-	);
-</script>
-
-<h1 class={classes}>
-	{@render children()}
-</h1>

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

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-export type H1Props = {
-    children: Snippet;
-    ui?: {
-        root?: ClassNameValue;
-    };
-};
-declare const H1: import("svelte").Component<H1Props, {}, "">;
-type H1 = ReturnType<typeof H1>;
-export default H1;

package/dist/components/h2.svelte

@@ -1,30 +0,0 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-
-	export type H2Props = {
-		children: Snippet;
-		ui?: { root?: ClassNameValue };
-	};
-</script>
-
-<script lang="ts">
-	const { children, ui = {} }: H2Props = $props();
-
-	const classes = $derived(
-		tv({
-			base: [
-				'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'
-			]
-		})({ class: ui.root })
-	);
-</script>
-
-<h1 class={classes}>
-	{@render children()}
-</h1>

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

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-export type H2Props = {
-    children: Snippet;
-    ui?: {
-        root?: ClassNameValue;
-    };
-};
-declare const H2: import("svelte").Component<H2Props, {}, "">;
-type H2 = ReturnType<typeof H2>;
-export default H2;

package/dist/components/index.d.ts

@@ -1,34 +0,0 @@
-export * from './button.svelte';
-export { default as Button } from './button.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 './checkboxgroup.svelte';
-export { default as CheckboxGroup } from './checkboxgroup.svelte';
-export * from './h1.svelte';
-export { default as H1 } from './h1.svelte';
-export * from './h2.svelte';
-export { default as H2 } from './h2.svelte';
-export * from './p.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';

package/dist/components/index.js

@@ -1,34 +0,0 @@
-export * from './button.svelte';
-export { default as Button } from './button.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 './checkboxgroup.svelte';
-export { default as CheckboxGroup } from './checkboxgroup.svelte';
-export * from './h1.svelte';
-export { default as H1 } from './h1.svelte';
-export * from './h2.svelte';
-export { default as H2 } from './h2.svelte';
-export * from './p.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';