uisv 0.0.4 → 0.0.6

package/dist/components/slider.svelte

@@ -0,0 +1,172 @@
+<script module lang="ts">
+	import { Slider } from 'bits-ui';
+	import type { PropColor } from '../types.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

@@ -0,0 +1,44 @@
+import { Slider } from 'bits-ui';
+import type { PropColor } from '../types.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

@@ -0,0 +1,181 @@
+<script module lang="ts">
+	import type { PropColor } from '../types.js';
+	import { isComponent, isSnippet } from '../utils/common.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

@@ -0,0 +1,27 @@
+import type { PropColor } from '../types.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

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+export * from './types.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+export * from './types.js';

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+declare module '#theme/button' {
+	import button from './theme/button.ts';
+
+	export default ReturnType<typeof button>;
+}
+
+export {};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/common.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet, Component } from 'svelte';
+export declare const tv: import("tailwind-variants").TV;
+/**
+ * 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

@@ -0,0 +1,18 @@
+import { createTV } from 'tailwind-variants';
+export const tv = createTV({});
+/**
+ * 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/utils/keys.d.ts

@@ -0,0 +1,8 @@
+export declare const FORM_OPTION_CONTEXT_KEY: unique symbol;
+export declare const FORM_BUS_CONTEXT_KEY: unique symbol;
+export declare const FORM_STATE_CONTEXT_KEY: unique symbol;
+export declare const FORM_FIELD_CONTEXT_KEY: unique symbol;
+export declare const FORM_TID_CONTEXT_KEY: unique symbol;
+export declare const FORM_INPUTS_CONTEXT_KEY: unique symbol;
+export declare const FORM_LOADING_CONTEXT_KEY: unique symbol;
+export declare const FORM_ERRORS_CONTEXT_KEY: unique symbol;

package/dist/utils/keys.js

@@ -0,0 +1,8 @@
+export const FORM_OPTION_CONTEXT_KEY = Symbol('uisv.form-options');
+export const FORM_BUS_CONTEXT_KEY = Symbol('uisv.form-events');
+export const FORM_STATE_CONTEXT_KEY = Symbol('uisv.form-state');
+export const FORM_FIELD_CONTEXT_KEY = Symbol('uisv.form-field');
+export const FORM_TID_CONTEXT_KEY = Symbol('uisv.input-id');
+export const FORM_INPUTS_CONTEXT_KEY = Symbol('uisv.form-inputs');
+export const FORM_LOADING_CONTEXT_KEY = Symbol('uisv.form-loading');
+export const FORM_ERRORS_CONTEXT_KEY = Symbol('uisv.form-errors');

package/dist/utils/types.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/vite.d.ts

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,57 @@
+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);
+                }
+            }
+        })
+    ];
+}

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "uisv",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"description": "ui library for the rest of us",
 	"license": "MIT",
 	"repository": "ui-sv/uisv",
-	"homepage": "https://github.com/ui-sv/uisv",
+	"homepage": "https://uisv.pages.dev",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -45,6 +45,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.22.0",
+		"@iconify-json/logos": "^1.2.9",
 		"@iconify-json/lucide": "^1.2.68",
 		"@iconify-json/solar": "^1.2.4",
 		"@sveltejs/adapter-auto": "^6.0.0",
@@ -57,13 +58,13 @@
 		"@unocss/reset": "^66.5.1",
 		"@vitest/browser": "^3.2.3",
 		"bits-ui": "^2.11.0",
-		"carta-md": "^4.11.1",
 		"defu": "^6.1.4",
 		"eslint": "^9.22.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"mdsvex": "^0.12.3",
+		"mode-watcher": "^1.1.0",
 		"playwright": "^1.53.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
@@ -73,7 +74,6 @@
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.3.1",
 		"tailwind-variants": "^3.1.1",
-		"tailwindcss": "^4.1.13",
 		"theme-colors": "^0.1.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",