svseeds 0.0.2 → 0.0.7

package/README.md

@@ -1,56 +1,9 @@
-# svseeds - the SvSeeds CLI
-A CLI to copy SvSeeds components for Svelte.
+# SvSeeds - Simple Components of Svelte
 
-## Quick Start
-```
-npx svseeds
-```
+[![npm version](https://img.shields.io/npm/v/svseeds)](https://www.npmjs.com/package/svseeds)
+[![JSR](https://jsr.io/badges/@svseeds/ui)](https://jsr.io/@svseeds/ui)
+[![license](https://img.shields.io/npm/l/svseeds)](LICENSE.md)
 
-## Basic Usage
-Copy specified SvSeeds files.
-```
-npx svseeds [components...]
-```
+Simple headless components for Svelte.
 
-## Main Options
-- Specify directory:
-```
-npx svseeds -d <directory> [components...]
-```
-
-- Specify all components:
-```
-npx svseeds -a
-```
-
-- Update copied components:
-```
-npx svseeds -u [components...]
-```
-
-- Remove components:
-```
-npx svseeds -r [components...]
-```
-(Of course, the components are just a file, you can use `rm` command instead.)
-
-- Run without interactions:
-```
-npx svseeds --no-confirm [components...]
-```
-
-## Other Options
-- Remove all components:
-```
-npx svseeds --uninstall
-```
-
-- Copy without overwrite
-```
-npx svseeds --no-overwrite [components...]
-```
-
-- Copy without `_style.ts` file
-```
-npx svseeds --no-style [components...]
-```
+**WIP**

package/_svseeds/_TextField.svelte

@@ -0,0 +1,144 @@
+<script module lang="ts">
+  export type TextFieldProps = {
+    label?: string,
+    extra?: string,
+    aux?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>,   // Snippet<[value,status,element]>
+    left?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>,  // Snippet<[value,status,element]>
+    right?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>, // Snippet<[value,status,element]>
+    bottom?: string,  // bindable
+    value?: string,  // bindable, [""]
+    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number",  // bindable, ["text"]
+    options?: string[],  // bindable
+    status?: StateName,  // bindable, [STATE.DEFAULT]
+    validations?: ((value: string, validity?: ValidityState) => string)[],
+    style?: ClassRuleSet | string,
+    attributes?: HTMLInputAttributes & HTMLTextareaAttributes,
+    action?: Action,
+    element?: HTMLInputElement | HTMLTextAreaElement,  // bindable
+  };
+
+  const seed = "text-field";
+  const preset: ClassRuleSet = {};
+
+  type TextFieldEvent = Event & { currentTarget: EventTarget & HTMLInputElement & HTMLTextAreaElement; };
+  import { type Snippet } from "svelte";
+  import { type Action } from "svelte/action";
+  import { type HTMLInputAttributes, type HTMLTextareaAttributes } from "svelte/elements";
+  import { type ClassRuleSet, type StateName, STATE, AREA, elemId, getClassFn, isUndef, omit } from "./core";
+</script>
+
+<script lang="ts">
+  let { label, extra, aux, left, right, bottom = $bindable(), value = $bindable(""), type = $bindable("text"), options = $bindable(), status = $bindable(STATE.DEFAULT), validations = [], style = {}, attributes = {}, action, element = $bindable() }: TextFieldProps = $props();
+
+  // *** Initialize *** //
+  const cls = getClassFn(seed, preset, style);
+  const id = !isUndef(attributes.id) ? attributes.id : elemId.get(label);
+  const idLabel = elemId.get(label?.trim());
+  const idDesc = elemId.get(bottom?.trim());
+  const idList = elemId.get(Array.isArray(options));
+  const idErr = isUndef(idDesc) ? elemId.get(true) : idDesc;
+  const attrs = omit({ ...attributes }, "class", "id", "type", "value", "list", "onchange", "oninput", "oninvalid");
+  const description = bottom;
+
+  // *** Status *** //
+  let role = $derived(isInvalid() ? "alert" : undefined);
+  let invalid = $derived(isInvalid() ? true : undefined);
+  let errMsg = $derived(isInvalid() ? idErr : undefined);
+  function isInvalid() { return status === STATE.INACTIVE && !isUndef(bottom); }
+  function toInvalid(msg?: string) { shiftStatus(STATE.INACTIVE, msg); }
+  function toNonInvalid(stat: StateName) { shiftStatus(stat); }
+  function shiftStatus(stat: StateName, msg?: string) {
+    status = stat;
+    bottom = msg ?? description;
+    element?.setCustomValidity(msg ?? "");
+  }
+  function validate(onchange?: boolean) {
+    if (!value && onchange) return toNonInvalid(STATE.DEFAULT);
+    for (let i = 0; i < validations.length; i++) {
+      const msg = validations[i](value, element?.validity);
+      if (msg) return toInvalid(msg);
+    }
+    toNonInvalid(STATE.ACTIVE);
+  }
+
+  // *** Event Handlers *** //
+  // const debounceValidate = debounce(300, validate);
+  function onchange(ev: Event) {
+    attributes.onchange?.(ev as TextFieldEvent);
+    validate(true);
+  }
+  function oninput(ev: Event) {
+    attributes.oninput?.(ev as TextFieldEvent);
+    if (status === STATE.DEFAULT) return;
+    validate();  // debounceValidate();
+  }
+  function oninvalid(ev: Event) {
+    attributes.oninvalid?.(ev as TextFieldEvent);
+    validate();
+    if (status !== STATE.INACTIVE) toInvalid(element?.validationMessage);
+  }
+</script>
+
+<!---------------------------------------->
+
+<div class={cls(AREA.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+  {#if typeof aux === "function"}
+    <div class={cls(AREA.TOP, status)}>
+      {@render lbl()}
+      {#if typeof aux === "function"}
+        <span class={cls(AREA.AUX, status)}>{@render aux(value, status, element)}</span>
+      {/if}
+    </div>
+  {:else}
+    {@render lbl()}
+  {/if}
+  {#if typeof left === "function" || typeof right === "function"}
+    <div class={cls(AREA.MIDDLE, status)}>
+      {#if typeof left === "function"}
+        <span class={cls(AREA.LEFT, status)}>{@render left(value, status, element)}</span>
+      {/if}
+      {@render main()}
+      {#if typeof right === "function"}
+        <span class={cls(AREA.RIGHT, status)}>{@render right(value, status, element)}</span>
+      {/if}
+    </div>
+  {:else}
+    {@render main()}
+  {/if}
+  {#if bottom?.trim()}
+    <output class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} {role}>{bottom}</output>
+  {/if}
+</div>
+
+{#snippet lbl()}
+  {#if label?.trim()}
+    <label class={cls(AREA.LABEL, status)} for={id} id={idLabel}>
+      {label}
+      {#if extra?.trim()}
+        <span class={cls(AREA.EXTRA, status)}>{extra}</span>
+      {/if}
+    </label>
+  {/if}
+{/snippet}
+{#snippet main()}
+  {#if type === "area"}
+    {#if typeof action === "function"}
+      <textarea bind:value bind:this={element} class={cls(AREA.MAIN, status)} {id} {onchange} {oninput} {oninvalid} {...attrs} use:action aria-describedby={idDesc} aria-controls={idDesc} aria-invalid={invalid} aria-errormessage={errMsg}></textarea>
+    {:else}
+      <textarea bind:value bind:this={element} class={cls(AREA.MAIN, status)} {id} {onchange} {oninput} {oninvalid} {...attrs} aria-describedby={idDesc} aria-controls={idDesc} aria-invalid={invalid} aria-errormessage={errMsg}></textarea>
+    {/if}
+  {:else}
+    {#if typeof action === "function"}
+      <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} list={idList} {id} {type} {onchange} {oninput} {oninvalid} {...attrs} use:action aria-describedby={idDesc} aria-controls={idDesc} aria-invalid={invalid} aria-errormessage={errMsg} />
+    {:else}
+      <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} list={idList} {id} {type} {onchange} {oninput} {oninvalid} {...attrs} aria-describedby={idDesc} aria-controls={idDesc} aria-invalid={invalid} aria-errormessage={errMsg} />
+    {/if}
+    {#if Array.isArray(options) && options.length > 0}
+      <datalist id={idList}>
+        {#each options as option (option)}
+          <option value={option}></option>
+        {/each}
+      </datalist>
+    {/if}
+  {/if}
+{/snippet}

package/_svseeds/_TextField.svelte.d.ts

@@ -0,0 +1,24 @@
+export type TextFieldProps = {
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>;
+    left?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>;
+    right?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>;
+    bottom?: string;
+    value?: string;
+    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number";
+    options?: string[];
+    status?: StateName;
+    validations?: ((value: string, validity?: ValidityState) => string)[];
+    style?: ClassRuleSet | string;
+    attributes?: HTMLInputAttributes & HTMLTextareaAttributes;
+    action?: Action;
+    element?: HTMLInputElement | HTMLTextAreaElement;
+};
+import { type Snippet } from "svelte";
+import { type Action } from "svelte/action";
+import { type HTMLInputAttributes, type HTMLTextareaAttributes } from "svelte/elements";
+import { type ClassRuleSet, type StateName } from "./core";
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "type" | "bottom" | "value" | "options" | "status" | "element">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/_svseeds/core.d.ts

@@ -0,0 +1,47 @@
+export { type StateName, type AreaName, type ClassRule, type ClassRuleSet, type ThemePreset, CONST, STATE, AREA, elemId, theme, getClassFn, isUndef, omit, debounce, throttle, };
+type valueof<T> = T[keyof T];
+type StateName = valueof<typeof STATE>;
+type AreaName = valueof<typeof AREA>;
+type ClassRule = Partial<Record<StateName | typeof CONST, string>>;
+type ClassRuleSet = Partial<Record<AreaName, ClassRule>>;
+type CssVarSet = Record<string, string>;
+type ThemePreset = Record<string, CssVarSet>;
+declare const CONST = "constant";
+declare const STATE: Readonly<{
+    DEFAULT: "default";
+    ACTIVE: "active";
+    INACTIVE: "inactive";
+}>;
+declare const AREA: Readonly<{
+    WHOLE: "whole";
+    MIDDLE: "middle";
+    MAIN: "main";
+    TOP: "top";
+    LEFT: "left";
+    RIGHT: "right";
+    BOTTOM: "bottom";
+    LABEL: "label";
+    AUX: "aux";
+    EXTRA: "extra";
+}>;
+declare class RandomId {
+    #private;
+    get(v: unknown): string | undefined;
+}
+declare class ThemeSwitcher {
+    #private;
+    get current(): string;
+    constructor();
+    setPreset(preset: ThemePreset): ThemeSwitcher;
+    toLight(): void;
+    toDark(): void;
+    switch(theme: string): void;
+}
+declare const elemId: RandomId;
+declare const theme: ThemeSwitcher;
+type ClassFn = (area: AreaName, status: StateName) => string | undefined;
+declare function getClassFn(name: string, preset: ClassRuleSet, style: ClassRuleSet | string): ClassFn;
+declare function isUndef(v: unknown): boolean;
+declare function omit<T extends Record<string, unknown>, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K>;
+declare function debounce<Args extends unknown[], R>(delay: number, fn: (...args: Args) => R): (...args: Args) => void;
+declare function throttle<Args extends unknown[], R>(interval: number, fn: (...args: Args) => R): (...args: Args) => void;

package/_svseeds/core.js

@@ -0,0 +1 @@
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,r=1,i=arguments.length;r<i;r++){t=arguments[r];for(var a in t)if(Object.prototype.hasOwnProperty.call(t,a))e[a]=t[a]}return e};return __assign.apply(this,arguments)};var __classPrivateFieldGet=this&&this.__classPrivateFieldGet||function(e,t,r,i){if(r==="a"&&!i)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?i:r==="a"?i.call(e):i?i.value:t.get(e)};var __classPrivateFieldSet=this&&this.__classPrivateFieldSet||function(e,t,r,i,a){if(i==="m")throw new TypeError("Private method is not writable");if(i==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?e!==t||!a:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return i==="a"?a.call(e,r):a?a.value=r:t.set(e,r),r};var __spreadArray=this&&this.__spreadArray||function(e,t,r){if(r||arguments.length===2)for(var i=0,a=t.length,n;i<a;i++){if(n||!(i in t)){if(!n)n=Array.prototype.slice.call(t,0,i);n[i]=t[i]}}return e.concat(n||Array.prototype.slice.call(t))};export{CONST,STATE,AREA,elemId,theme,getClassFn,isUndef,omit,debounce,throttle};var CONST="constant";var STATE=Object.freeze({DEFAULT:"default",ACTIVE:"active",INACTIVE:"inactive"});var AREA=Object.freeze({WHOLE:"whole",MIDDLE:"middle",MAIN:"main",TOP:"top",LEFT:"left",RIGHT:"right",BOTTOM:"bottom",LABEL:"label",AUX:"aux",EXTRA:"extra"});var RandomId=function(){function e(){t.add(this);a.set(this,new Set)}e.prototype.get=function(e){if(!e)return;if(__classPrivateFieldGet(this,a,"f").size>1e4)__classPrivateFieldGet(this,a,"f").clear();return __classPrivateFieldGet(this,t,"m",l).call(this)};var t,r,i,a,n,s,l;r=e,a=new WeakMap,t=new WeakSet,n=function e(){return __classPrivateFieldGet(r,r,"f",i)[Math.trunc(Math.random()*__classPrivateFieldGet(r,r,"f",i).length)]},s=function e(){var r=this;return String.fromCharCode.apply(String,__spreadArray(__spreadArray([],Array(4).fill(null).map((function(){return __classPrivateFieldGet(r,t,"m",n).call(r)})),false),[58],false))},l=function e(){var r=__classPrivateFieldGet(this,t,"m",s).call(this);while(__classPrivateFieldGet(this,a,"f").has(r)){r=__classPrivateFieldGet(this,t,"m",s).call(this)}__classPrivateFieldGet(this,a,"f").add(r);return r};i={value:__spreadArray(__spreadArray([],Array.from(Array(25).keys(),(function(e){return e+65})),true),Array.from(Array(25).keys(),(function(e){return e+97})),true)};return e}();var ThemeSwitcher=function(){function e(){t.add(this);n.set(this,{});s.set(this,void 0);__classPrivateFieldSet(this,s,__classPrivateFieldGet(r,r,"m",d).call(r),"f")}Object.defineProperty(e.prototype,"current",{get:function(){return __classPrivateFieldGet(this,s,"f")},enumerable:false,configurable:true});e.prototype.setPreset=function(e){__classPrivateFieldSet(this,n,__classPrivateFieldGet(r,r,"m",u).call(r,e),"f");__classPrivateFieldGet(this,t,"m",o).call(this);return this};e.prototype.toLight=function(){this.switch(__classPrivateFieldGet(r,r,"f",a))};e.prototype.toDark=function(){this.switch(__classPrivateFieldGet(r,r,"f",i))};e.prototype.switch=function(e){if(!__classPrivateFieldGet(this,t,"m",c).call(this,e))return;__classPrivateFieldSet(this,s,e,"f");__classPrivateFieldGet(this,t,"m",l).call(this)};var t,r,i,a,n,s,l,c,o,u,f,d;r=e,n=new WeakMap,s=new WeakMap,t=new WeakSet,l=function e(){if(typeof window==="undefined")return;var t=window.document.body.style;Object.entries(__classPrivateFieldGet(this,n,"f")[__classPrivateFieldGet(this,s,"f")]).forEach((function(e){var r=e[0],i=e[1];return t.setProperty(r,i)}))},c=function e(t){return Object.keys(__classPrivateFieldGet(this,n,"f")).includes(t)},o=function e(){if(typeof window==="undefined")return;var t=Object.keys(__classPrivateFieldGet(this,n,"f")).filter((function(e){return e===__classPrivateFieldGet(r,r,"f",a)||e===__classPrivateFieldGet(r,r,"f",i)}));window.document.documentElement.style.colorScheme=t.join(" ")},u=function e(t){return Object.fromEntries(Object.entries(t).map((function(e){var t=e[0],i=e[1];return[t,__classPrivateFieldGet(r,r,"m",f).call(r,i)]})))},f=function e(t){return Object.fromEntries(Object.entries(t).map((function(e){var t=e[0],r=e[1];return["--".concat(t.replaceAll("_","-")),r]})))},d=function e(){if(typeof window==="undefined")return __classPrivateFieldGet(r,r,"f",a);return window.matchMedia("(prefers-color-scheme: light)").matches?__classPrivateFieldGet(r,r,"f",a):__classPrivateFieldGet(r,r,"f",i)};i={value:"dark"};a={value:"light"};return e}();var elemId=new RandomId;var theme=new ThemeSwitcher;function getClassFn(e,t,r){var i=getRule(e,t,r);if(typeof i==="string"){return function(e,t){return cssClass(i,e,t)}}else{return function(e,t){return ruleClass(i,e,t)}}}function getRule(e,t,r){if(typeof r==="string")return r.trim()?r:e;var i=mergeRule(t,r);return Object.keys(i).length<=0?e:i}function cssClass(e,t,r){return"".concat(e," ").concat(t).concat(r===STATE.DEFAULT?"":" ".concat(r))}function ruleClass(e,t,r){var i,a,n,s,l,c;var o=(a=(i=e[t])===null||i===void 0?void 0:i.constant)!==null&&a!==void 0?a:"";var u=(c=(s=(n=e[t])===null||n===void 0?void 0:n[r])!==null&&s!==void 0?s:(l=e[t])===null||l===void 0?void 0:l.default)!==null&&c!==void 0?c:"";return o===""&&u===""?undefined:"".concat(o).concat(o&&u?" ":"").concat(u)}function mergeRule(e,t){var r=Object.keys(e);if(r.length<=0)return t;var i=Object.keys(t);if(i.length<=0)return e;var a={};new Set(__spreadArray(__spreadArray([],r,true),i,true)).forEach((function(r){var i,n;a[r]=__assign(__assign({},(i=e[r])!==null&&i!==void 0?i:{}),(n=t[r])!==null&&n!==void 0?n:{})}));return a}function isUndef(e){return e===void 0}function omit(e){var t=[];for(var r=1;r<arguments.length;r++){t[r-1]=arguments[r]}if(Object.isFrozen(e)||Object.isSealed(e))return e;t.forEach((function(t){return delete e[t]}));return e}function debounce(e,t){var r;return function(){var i=[];for(var a=0;a<arguments.length;a++){i[a]=arguments[a]}if(r)clearTimeout(r);r=setTimeout((function(){t.call.apply(t,__spreadArray([null],i,false))}),e)}}function throttle(e,t){var r;var i=0;var a=function(){return Date.now()-i};var n=function(e){t.call.apply(t,__spreadArray([null],e,false));i=Date.now()};return function(){var t=[];for(var s=0;s<arguments.length;s++){t[s]=arguments[s]}if(!i)return n(t);clearTimeout(r);r=setTimeout((function(){if(a()>=e)n(t)}),e-a())}}

package/_svseeds/core.ts

@@ -0,0 +1,195 @@
+// deno-fmt-ignore
+export {
+  type StateName,
+  type AreaName,
+  type ClassRule,
+  type ClassRuleSet,
+  type ThemePreset,
+  CONST,
+  STATE,
+  AREA,
+  elemId,
+  theme,
+  getClassFn,
+  isUndef,
+  omit,
+  debounce,
+  throttle,
+};
+
+type valueof<T> = T[keyof T];
+type StateName = valueof<typeof STATE>;
+type AreaName = valueof<typeof AREA>;
+type ClassRule = Partial<Record<StateName | typeof CONST, string>>;
+type ClassRuleSet = Partial<Record<AreaName, ClassRule>>;
+type CssVarSet = Record<string, string>;
+type ThemePreset = Record<string, CssVarSet>;
+
+const CONST = "constant";
+const STATE = Object.freeze({ DEFAULT: "default", ACTIVE: "active", INACTIVE: "inactive" });
+const AREA = Object.freeze({
+  WHOLE: "whole",
+  MIDDLE: "middle",
+  MAIN: "main",
+  TOP: "top",
+  LEFT: "left",
+  RIGHT: "right",
+  BOTTOM: "bottom",
+  LABEL: "label",
+  AUX: "aux",
+  EXTRA: "extra",
+});
+
+class RandomId {
+  static #ALPHABETIC = [...Array.from(Array(25).keys(), (x) => x + 65), ...Array.from(Array(25).keys(), (x) => x + 97)];
+  #store = new Set<string>();
+
+  get(v: unknown): string | undefined {
+    if (!v) return;
+    if (this.#store.size > 10000) this.#store.clear();
+    return this.#add();
+  }
+  #char(): number {
+    return RandomId.#ALPHABETIC[Math.trunc(Math.random() * RandomId.#ALPHABETIC.length)];
+  }
+  #gen(): string {
+    return String.fromCharCode(...Array(4).fill(null).map(() => this.#char()), 58);
+  }
+  #add(): string {
+    let id = this.#gen();
+    while (this.#store.has(id)) {
+      id = this.#gen();
+    }
+    this.#store.add(id);
+    return id;
+  }
+}
+class ThemeSwitcher {
+  static #DARK = "dark";
+  static #LIGHT = "light";
+  #styles: ThemePreset = {};
+  #current;
+  get current() {
+    return this.#current;
+  }
+
+  constructor() {
+    this.#current = ThemeSwitcher.#setInitialTheme();
+  }
+  setPreset(preset: ThemePreset): ThemeSwitcher {
+    this.#styles = ThemeSwitcher.#toCSSVarName(preset);
+    this.#setColorScheme();
+    return this;
+  }
+  toLight() {
+    this.switch(ThemeSwitcher.#LIGHT);
+  }
+  toDark() {
+    this.switch(ThemeSwitcher.#DARK);
+  }
+  switch(theme: string) {
+    if (!this.#exists(theme)) return;
+    this.#current = theme;
+    this.#apply();
+  }
+  #apply() {
+    if (typeof window === "undefined") return;
+    const style = window.document.body.style;
+    Object.entries(this.#styles[this.#current])
+      .forEach(([name, value]) => style.setProperty(name, value));
+  }
+  #exists(theme: string): boolean {
+    return Object.keys(this.#styles).includes(theme);
+  }
+  #setColorScheme() {
+    if (typeof window === "undefined") return;
+    const themes = Object.keys(this.#styles).filter((x) => x === ThemeSwitcher.#LIGHT || x === ThemeSwitcher.#DARK);
+    window.document.documentElement.style.colorScheme = themes.join(" ");
+  }
+
+  static #toCSSVarName(styles: ThemePreset): ThemePreset {
+    return Object.fromEntries(
+      Object.entries(styles)
+        .map(([theme, obj]) => [theme, ThemeSwitcher.#renameProperties(obj)]),
+    ) as ThemePreset;
+  }
+  static #renameProperties(obj: Record<string, string>): CssVarSet {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .map(([name, value]) => [`--${name.replaceAll("_", "-")}`, value]),
+    );
+  }
+  static #setInitialTheme(): string {
+    if (typeof window === "undefined") return ThemeSwitcher.#LIGHT;
+    return window.matchMedia("(prefers-color-scheme: light)").matches ? ThemeSwitcher.#LIGHT : ThemeSwitcher.#DARK;
+  }
+}
+const elemId = new RandomId();
+const theme = new ThemeSwitcher();
+
+type ClassFn = (area: AreaName, status: StateName) => string | undefined;
+function getClassFn(name: string, preset: ClassRuleSet, style: ClassRuleSet | string): ClassFn {
+  const rule = getRule(name, preset, style);
+  if (typeof rule === "string") {
+    return (area: AreaName, status: StateName) => cssClass(rule, area, status);
+  } else {
+    return (area: AreaName, status: StateName) => ruleClass(rule, area, status);
+  }
+}
+function getRule(name: string, preset: ClassRuleSet, style: ClassRuleSet | string): ClassRuleSet | string {
+  if (typeof style === "string") return style.trim() ? style : name;
+  const rule = mergeRule(preset, style);
+  return Object.keys(rule).length <= 0 ? name : rule;
+}
+function cssClass(name: string, area: AreaName, status: StateName): string {
+  return `${name} ${area}${status === STATE.DEFAULT ? "" : ` ${status}`}`;
+}
+function ruleClass(rule: ClassRuleSet, area: AreaName, status: StateName): string | undefined {
+  const constant = rule[area]?.constant ?? "";
+  const dynamic = rule[area]?.[status] ?? rule[area]?.default ?? "";
+  return constant === "" && dynamic === "" ? undefined : `${constant}${constant && dynamic ? " " : ""}${dynamic}`;
+}
+function mergeRule(preset: ClassRuleSet, style: ClassRuleSet): ClassRuleSet {
+  const presetKeys = Object.keys(preset) as AreaName[];
+  if (presetKeys.length <= 0) return style;
+  const styleKeys = Object.keys(style) as AreaName[];
+  if (styleKeys.length <= 0) return preset;
+  const result: ClassRuleSet = {};
+  new Set([...presetKeys, ...styleKeys]).forEach((key) => {
+    result[key] = { ...preset[key] ?? {}, ...style[key] ?? {} };
+  });
+  return result;
+}
+function isUndef(v: unknown): boolean {
+  return v === void 0;
+}
+function omit<T extends Record<string, unknown>, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K> {
+  if (Object.isFrozen(obj) || Object.isSealed(obj)) return obj;
+  keys.forEach((key) => delete obj[key]);
+  return obj;
+}
+function debounce<Args extends unknown[], R>(delay: number, fn: (...args: Args) => R): (...args: Args) => void {
+  let timer: number | undefined;
+  return (...args: Args) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.call(null, ...args);
+    }, delay);
+  };
+}
+function throttle<Args extends unknown[], R>(interval: number, fn: (...args: Args) => R): (...args: Args) => void {
+  let timer: number | undefined;
+  let last: number = 0;
+  const elapsed = () => Date.now() - last;
+  const run = (args: Args) => {
+    fn.call(null, ...args);
+    last = Date.now();
+  };
+  return (...args: Args) => {
+    if (!last) return run(args);
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (elapsed() >= interval) run(args);
+    }, interval - elapsed());
+  };
+}

package/_svseeds/dep.json

@@ -0,0 +1 @@
+{"components":{"_TextField.svelte":{"dependencies":[]}}}

package/index.d.ts

@@ -0,0 +1 @@
+export { default as TextField } from "./_svseeds/_TextField.svelte";

package/index.js

@@ -1,2 +1 @@
-import { main } from "./dist/main.js";
-main();
+export { default as TextField } from "./_svseeds/_TextField.svelte";

package/package.json

@@ -1,42 +1,38 @@
 {
-	"name": "svseeds",
-	"version": "0.0.2",
-	"description": "A CLI to copy SvSeeds components.",
-	"type": "module",
-	"exports": "./index.js",
-	"files": [
-		"dist/**/*",
-		"index.js"
-	],
-	"keywords": [
-		"svelte",
-		"headless",
-		"components",
-		"cli"
-	],
-	"author": "scirexs",
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/scirexs/svseeds-cli-node.git"
-	},
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
-		"lint": "eslint .",
-		"format": "eslint --fix ."
-	},
-	"devDependencies": {
-		"@eslint/js": "^9.21.0",
-		"@stylistic/eslint-plugin": "^4.2.0",
-		"@types/node": "^22.13.9",
-		"eslint": "^9.21.0",
-		"globals": "^16.0.0",
-		"typescript": "^5.8.2",
-		"typescript-eslint": "^8.26.0"
-	},
-	"dependencies": {
-		"@clack/prompts": "^0.10.0",
-		"commander": "^13.1.0",
-		"tar": "^7.4.3"
-	}
+  "name": "svseeds",
+  "version": "0.0.7",
+  "description": "Simple headless components for Svelte.",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "svelte": "./index.js"
+    }
+  },
+  "svelte": "./index.js",
+  "files": [
+    "_svseeds",
+    "index.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "svelte",
+    "headless",
+    "components",
+    "ui"
+  ],
+  "author": "scirexs",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scirexs/svseeds-ui.git"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
 }