uisv 0.0.7 → 0.0.9

package/dist/components/slider.svelte

@@ -1,172 +0,0 @@
-<script module lang="ts">
-	import { Slider } from 'bits-ui';
-	import type { PropColor } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-
-	export type SliderProps<T> = {
-		value?: T;
-		default?: number | number[];
-		color?: PropColor;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		disabled?: boolean;
-		thumblabel?: boolean;
-		orientation?: 'vertical' | 'horizontal';
-		step?: number;
-		min?: number;
-		max?: number;
-		ui?: {
-			root?: ClassNameValue;
-			range?: ClassNameValue;
-			thumb?: ClassNameValue;
-		};
-	};
-</script>
-
-<script lang="ts" generics="T extends number | number[]">
-	let {
-		value = $bindable(),
-		default: def_value = 0,
-		color = 'primary',
-		size = 'md',
-		disabled,
-		thumblabel,
-		orientation = 'horizontal',
-		step,
-		min,
-		max,
-		ui = {}
-	}: SliderProps<T> = $props();
-
-	const default_value = $derived.by(() => {
-		if (typeof def_value === 'number') return [def_value];
-
-		return def_value;
-	});
-	let slider_value = $derived({
-		get() {
-			if (typeof value === 'number') return [value];
-
-			return (value as number[]) ?? default_value;
-		},
-		set(v: number[]) {
-			value = (v?.length !== 1 ? v : v[0]) as T;
-		}
-	});
-	const thumbs = $derived(slider_value.get()?.length ?? 1);
-	const classes = $derived.by(() =>
-		tv({
-			slots: {
-				root: [
-					'relative w-full flex rounded-full bg-neutral-300',
-					orientation === 'horizontal' ? 'items-center' : 'justify-center mx-1'
-				],
-				range: [
-					'rounded-full bg-neutral-200 p-0.5 relative transition',
-					orientation === 'horizontal' ? 'h-full' : 'w-full'
-				],
-				thumb: 'bg-white rounded-full border-2 outline-none transition',
-				tick: ''
-			},
-			variants: {
-				color: {
-					primary: {
-						root: '',
-						range: 'bg-primary-500',
-						thumb: 'border-primary-500'
-					},
-					secondary: {
-						range: ['bg-neutral-900'],
-						thumb: 'border-neutral-900'
-					},
-					info: {
-						range: ['bg-info-500'],
-						thumb: 'border-info-500'
-					},
-					success: {
-						range: ['bg-success-500'],
-						thumb: 'border-success-500'
-					},
-					warning: {
-						range: ['bg-warning-500'],
-						thumb: 'border-warning-500'
-					},
-					error: {
-						range: ['bg-error-500'],
-						thumb: 'border-error-500'
-					}
-				},
-				size: {
-					xs: {
-						root: [orientation === 'horizontal' ? 'h-1.5' : ''],
-						thumb: 'size-4',
-						tick: 'size-2.5'
-					},
-					sm: {
-						root: [orientation === 'horizontal' ? 'h-1.75' : ''],
-						thumb: 'size-4.5',
-						tick: 'size-3'
-					},
-					md: {
-						root: [orientation === 'horizontal' ? 'h-2' : 'w-2 h-48'],
-						thumb: 'size-5',
-						tick: 'size-3.5'
-					},
-					lg: {
-						root: [orientation === 'horizontal' ? 'h-2.5' : ''],
-						thumb: 'size-5.5',
-						tick: 'size-4'
-					},
-					xl: {
-						root: [orientation === 'horizontal' ? 'h-3' : 'w-3'],
-						thumb: 'size-6',
-						tick: 'size-4.5'
-					}
-				},
-				orientation: {
-					horizontal: {
-						root: '',
-						thumb: '',
-						tick: ''
-					},
-					vertical: {
-						root: '',
-						thumb: '',
-						tick: ''
-					}
-				}
-			},
-			compoundVariants: []
-		})({ color, size, orientation })
-	);
-</script>
-
-<Slider.Root
-	type="multiple"
-	bind:value={slider_value.get, slider_value.set}
-	{min}
-	{max}
-	{step}
-	{orientation}
-	{disabled}
-	class={classes.root({ class: [disabled ? 'opacity-75 cursor-not-allowed' : '', ui.root] })}
->
-	<Slider.Range class={classes.range({ class: [ui.range] })} />
-
-	{#each { length: thumbs }, index (index)}
-		<Slider.Thumb {index} class={classes.thumb({ class: ['group', ui.thumb] })}>
-			{#if thumblabel}
-				<Slider.ThumbLabel
-					{index}
-					position="bottom"
-					class={[
-						'opacity-0 transition pointer-events-none text-sm shadow-md px-2 h-6 flex items-center rounded-md mt-1 border border-secondary-200',
-						'data-[active=""]:(opacity-100) group-hover:(opacity-100)'
-					]}
-				>
-					{slider_value.get()[index]}
-				</Slider.ThumbLabel>
-			{/if}
-		</Slider.Thumb>
-	{/each}
-</Slider.Root>

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

@@ -1,44 +0,0 @@
-import { Slider } from 'bits-ui';
-import type { PropColor } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
-export type SliderProps<T> = {
-    value?: T;
-    default?: number | number[];
-    color?: PropColor;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    disabled?: boolean;
-    thumblabel?: boolean;
-    orientation?: 'vertical' | 'horizontal';
-    step?: number;
-    min?: number;
-    max?: number;
-    ui?: {
-        root?: ClassNameValue;
-        range?: ClassNameValue;
-        thumb?: ClassNameValue;
-    };
-};
-declare function $$render<T extends number | number[]>(): {
-    props: SliderProps<T>;
-    exports: {};
-    bindings: "value";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends number | number[]> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "value";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends number | number[]>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends number | number[]>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Slider: $$IsomorphicComponent;
-type Slider<T extends number | number[]> = InstanceType<typeof Slider<T>>;
-export default Slider;

package/dist/components/switch.svelte

@@ -1,180 +0,0 @@
-<script module lang="ts">
-	import { type PropColor, isComponent, isSnippet } from '../index.js';
-	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-	import type { Component } from 'vitest-browser-svelte';
-
-	export type SwitchProps = {
-		value?: boolean;
-		color?: PropColor;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		disabled?: boolean;
-		loading?: boolean;
-		loadingicon?: string | Snippet | Component;
-		uncheckedicon?: string | Snippet | Component;
-		checkedicon?: string | Snippet | Component;
-		label?: string | Snippet;
-		description?: string | Snippet;
-		required?: boolean;
-		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			thumb?: ClassNameValue;
-			label?: ClassNameValue;
-			description?: ClassNameValue;
-		};
-	};
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(false),
-		color = 'primary',
-		size = 'md',
-		disabled,
-		loading,
-		loadingicon = 'i-lucide-loader-circle',
-		uncheckedicon,
-		checkedicon,
-		label,
-		description,
-		required,
-		ui = {}
-	}: SwitchProps = $props();
-
-	const classes = $derived.by(() =>
-		tv({
-			slots: {
-				root: 'flex-inline gap-2',
-				container: 'rounded-full bg-neutral-200 p-0.5 relative transition',
-				thumb: [
-					'bg-white block rounded-full absolute top-0.5 transition grid place-items-center',
-					value ? 'translate-x-full' : 'text-neutral-500'
-				],
-				icon: 'pi',
-				label: 'text-sm',
-				description: 'text-sm text-neutral-500'
-			},
-			variants: {
-				color: {
-					primary: {
-						container: ['', value && 'bg-primary-500 text-primary-500']
-					},
-					secondary: {
-						container: ['', value && 'bg-neutral-900 text-neutral-900']
-					},
-					info: {
-						container: ['', value && 'bg-info-500 text-info-500']
-					},
-					success: {
-						container: ['', value && 'bg-success-500 text-success-500']
-					},
-					warning: {
-						container: ['', value && 'bg-warning-500 text-warning-500']
-					},
-					error: {
-						container: ['', value && 'bg-error-500 text-error-500']
-					}
-				},
-				size: {
-					xs: {
-						container: 'w-7 min-w-7 h-4',
-						thumb: 'size-3',
-						icon: 'size-2.5'
-					},
-					sm: {
-						container: 'w-8 min-w-8 h-4.5',
-						thumb: 'size-3.5',
-						icon: 'size-3'
-					},
-					md: {
-						container: 'w-9 min-w-9 h-5',
-						thumb: 'size-4',
-						icon: 'size-3.5'
-					},
-					lg: {
-						container: 'w-10 min-w-10 h-5.5',
-						thumb: 'size-4.5',
-						icon: 'size-4'
-					},
-					xl: {
-						container: 'w-11  min-w-11 h-6',
-						thumb: 'size-5',
-						icon: 'size-4.5'
-					}
-				}
-			},
-			compoundVariants: []
-		})({ color, size })
-	);
-</script>
-
-<div
-	data-state={value ? 'checked' : 'unchecked'}
-	class={classes.root({
-		class: [(loading || disabled) && 'opacity-50', ui.thumb]
-	})}
->
-	<button
-		aria-label="switch"
-		data-state={value ? 'checked' : 'unchecked'}
-		class={classes.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
-		onclick={() => {
-			console.log('click');
-			if (loading) return;
-			value = !value;
-		}}
-	>
-		<span data-state={value ? 'checked' : 'unchecked'} class={classes.thumb({ class: ui.thumb })}>
-			{@render Icon(uncheckedicon, [(loading || value) && 'opacity-0'])}
-			{@render Icon(checkedicon, [(loading || !value) && 'opacity-0'])}
-			{@render Icon(loadingicon || 'i-lucide-loader-circle', [
-				'animate-spin',
-				!loading && 'opacity-0'
-			])}
-		</span>
-	</button>
-
-	{#if label}
-		<span>
-			<div
-				class={classes.label({
-					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.thumb]
-				})}
-			>
-				{#if typeof label === 'string'}
-					{label}
-				{:else}
-					{@render label()}
-				{/if}
-			</div>
-
-			{#if description}
-				<div class={classes.description({ class: ui.thumb })}>
-					{#if typeof description === 'string'}
-						{description}
-					{:else}
-						{@render description()}
-					{/if}
-				</div>
-			{/if}
-		</span>
-	{/if}
-</div>
-
-{#snippet Icon(ico?: SwitchProps['checkedicon'], icon_class?: ClassNameValue)}
-	<div class={['absolute', icon_class]}>
-		{#if typeof ico === 'string'}
-			<div
-				data-state={value ? 'checked' : 'unchecked'}
-				class={classes.icon({ class: [ico] })}
-			></div>
-		{:else if isSnippet(ico)}
-			{@render ico()}
-		{:else if isComponent(ico)}
-			{@const Iconn = ico}
-			<Iconn />
-		{/if}
-	</div>
-{/snippet}

package/dist/components/switch.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 SwitchProps = {
-    value?: boolean;
-    color?: PropColor;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    disabled?: boolean;
-    loading?: boolean;
-    loadingicon?: string | Snippet | Component;
-    uncheckedicon?: string | Snippet | Component;
-    checkedicon?: string | Snippet | Component;
-    label?: string | Snippet;
-    description?: string | Snippet;
-    required?: boolean;
-    ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        thumb?: ClassNameValue;
-        label?: ClassNameValue;
-        description?: ClassNameValue;
-    };
-};
-declare const Switch: import("svelte").Component<SwitchProps, {}, "value">;
-type Switch = ReturnType<typeof Switch>;
-export default Switch;

package/dist/index.d.ts

@@ -1,4 +0,0 @@
-export * from './components/index.js';
-export * from './utils/common.js';
-export type PropColor = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
-export declare const COLORS: PropColor[];

package/dist/index.js

@@ -1,3 +0,0 @@
-export * from './components/index.js';
-export * from './utils/common.js';
-export const COLORS = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];

package/dist/utils/common.d.ts

@@ -1,13 +0,0 @@
-import type { Snippet, Component } from 'svelte';
-/**
- * Checks if a value is a Svelte snippet
- * @param v - The value to check (should be Snippet | Component)
- * @returns true if the value is a snippet, false otherwise
- */
-export declare const isSnippet: (v: unknown) => v is Snippet;
-/**
- * Checks if a value is a Svelte component
- * @param v - The value to check (should be Snippet | Component)
- * @returns true if the value is a component, false otherwise
- */
-export declare const isComponent: (v: unknown) => v is Component;

package/dist/utils/common.js

@@ -1,16 +0,0 @@
-/**
- * Checks if a value is a Svelte snippet
- * @param v - The value to check (should be Snippet | Component)
- * @returns true if the value is a snippet, false otherwise
- */
-export const isSnippet = (v) => {
-    return typeof v === 'object' && v !== null && '$$render' in v;
-};
-/**
- * Checks if a value is a Svelte component
- * @param v - The value to check (should be Snippet | Component)
- * @returns true if the value is a component, false otherwise
- */
-export const isComponent = (v) => {
-    return typeof v === 'function' || (typeof v === 'object' && v !== null && !('$$render' in v));
-};

package/dist/vite.d.ts

@@ -1,38 +0,0 @@
-import { type WebFontsOptions } from '@unocss/preset-web-fonts';
-import type { PropColor } from './types.js';
-export type PluginOptions = {
-    /**
-     * Colors as UnoCSS color name, hex color, or UnoCSS theme color object
-     * @example
-     * {
-     *  primary: 'orange',
-     *  secondary: 'neutral',
-     *  info: '#00F',
-     *  success: '#0F0',
-     *  warning: 'FF0',
-     *  error: {
-     *    50: '#fef2f2';
-     *    100: '#fee2e2';
-     *    200: '#fecaca';
-     *    300: '#fca5a5';
-     *    400: '#f87171';
-     *    500: '#ef4444';
-     *    600: '#dc2626';
-     *    700: '#b91c1c';
-     *    800: '#991b1b';
-     *    900: '#7f1d1d';
-     *    950: '#450a0a';
-     *  }
-     * }
-     */
-    colors?: Partial<Record<PropColor, string | Record<number, string>>>;
-    /**
-     * Options for the UnoCSS web fonts plugin
-     */
-    fonts?: WebFontsOptions;
-    /**
-     * Corner radius for every* component
-     */
-    radius?: number;
-};
-export declare function uisv(options: Required<PluginOptions>): import("vite").Plugin<any>[][];

package/dist/vite.js

@@ -1,57 +0,0 @@
-import uno_plugin from 'unocss/vite';
-import { transformerVariantGroup, transformerCompileClass, transformerDirectives, presetWind4, presetWebFonts } from 'unocss';
-import {} from '@unocss/preset-web-fonts';
-import { presetIcons } from 'unocss';
-import { defu } from 'defu';
-import { getColors } from 'theme-colors';
-export function uisv(options) {
-    const _opts = defu(options, {
-        colors: {
-            primary: 'orange',
-            secondary: 'neutral',
-            info: 'blue',
-            success: 'green',
-            warning: 'yellow',
-            error: 'red'
-        },
-        fonts: {
-            fonts: {
-                sans: 'Public Sans:400,500,600'
-            }
-        }
-    });
-    return [
-        uno_plugin({
-            theme: {
-                radius: {
-                    base: `${_opts.radius || 0.375}rem`
-                }
-            },
-            preflights: [
-                {
-                    getCSS: () => 'body { font-size: var(--font-sans);}'
-                }
-            ],
-            presets: [
-                presetWind4({
-                    preflights: {
-                        reset: true
-                    }
-                }),
-                presetWebFonts(_opts.fonts),
-                presetIcons()
-            ],
-            transformers: [transformerVariantGroup(), transformerCompileClass(), transformerDirectives()],
-            extendTheme: (theme) => {
-                for (const [color, value] of Object.entries(_opts.colors)) {
-                    if (typeof value !== 'string') {
-                        theme.colors[color] = value;
-                        continue;
-                    }
-                    const in_theme = theme.colors[value];
-                    theme.colors[color] = in_theme ? in_theme : getColors(value);
-                }
-            }
-        })
-    ];
-}