svseeds 0.4.6 → 0.4.8

package/_svseeds/_Tooltip.svelte.d.ts

@@ -1,15 +1,15 @@
 export interface TooltipProps {
-    main?: Snippet<[string, string, boolean]>;
+    children?: Snippet<[string, string, boolean]>;
     name?: string;
     position?: Position;
     align?: Align;
     offset?: Vector;
-    status?: string;
-    style?: SVSStyle;
     element?: HTMLDivElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type TooltipReqdProps = never;
-export type TooltipBindProps = "status" | "element";
+export type TooltipBindProps = "variant" | "element";
 export declare function tooltip(node: HTMLElement, params: {
     text: string;
     delay?: number;
@@ -25,25 +25,25 @@ export type Position = "top" | "left" | "bottom" | "right";
 export type Align = "start" | "center" | "end";
 import { type Snippet } from "svelte";
 import { type Action, type ActionReturn } from "svelte/action";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface TooltipProps {
- *   main?: Snippet<[string, string, boolean]>; // Snippet<[status,text,isFlipped]>
+ *   children?: Snippet<[string, string, boolean]>; // Snippet<[text,variant,isFlipped]>
  *   name?: string;
- *   position?: Position; // "top"
- *   align?: Align; // "center"
- *   offset?: Vector; // <{ x: 0, y: 0 }>
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
+ *   position?: Position; // ("top")
+ *   align?: Align; // ("center")
+ *   offset?: Vector; // ({ x: 0, y: 0 })
  *   element?: HTMLDivElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * type Vector = { x: number, y: number };
  * type Position = "top" | "left" | "bottom" | "right";
  * type Align = "start" | "center" | "end";
  * ```
  */
-declare const Tooltip: import("svelte").Component<TooltipProps, {}, "status" | "element">;
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "variant" | "element">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/_svseeds/core.d.ts

@@ -1,13 +1,13 @@
-export { type SVSStyle, BASE, STATE, PARTS, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId, };
+export { type SVSClass, BASE, VARIANT, PARTS, elemId, fnClass, isNeutral, isUnsignedInteger, omit, debounce, throttle, UniqueId, };
 type ClassDictionary = Record<string, unknown>;
 type ClassArray = (ClassArray | ClassDictionary | string | number | bigint | null | boolean | undefined)[];
 type ClassPartialValue = string | ClassArray;
 type ClassValue = ClassPartialValue | ClassDictionary;
 type ClassRule = Record<string, ClassValue> | ClassPartialValue;
-type SVSStyle = Record<string, ClassRule> | string;
-type ClassFn = (part: string, status: string) => ClassValue | undefined;
+type SVSClass = Record<string, ClassRule> | string;
+type ClassFn = (part: string, variant: string) => ClassValue | undefined;
 declare const BASE = "base";
-declare const STATE: Readonly<{
+declare const VARIANT: Readonly<{
     NEUTRAL: "neutral";
     ACTIVE: "active";
     INACTIVE: "inactive";
@@ -25,16 +25,16 @@ declare const PARTS: Readonly<{
     EXTRA: "extra";
 }>;
 /**
- * Creates a function that dynamically generates CSS classes based on component parts and status.
+ * Creates a function that dynamically generates CSS classes based on component parts and variant.
  *
  * Compatible with ClassValue type available in Svelte 5.16+ class attributes,
  * this function generates a ClassFn that returns appropriate CSS classes
- * based on the combination of component parts and their states.
+ * based on the combination of component parts and their variants.
  *
  * @param preset - Preset style definition. Can be a string or style rule object
  * @param style - Optional style definition. Takes precedence over preset when provided
  *
- * @returns Function that takes part and status parameters and returns ClassValue
+ * @returns Function that takes part and variant parameters and returns ClassValue
  *
  * @example
  * // String preset case
@@ -70,7 +70,7 @@ declare const PARTS: Readonly<{
  * const classFn = fnClass(preset, customStyle);
  * classFn("button", "active"); // ["btn", "btn-active"]
  */
-declare function fnClass(preset: SVSStyle, style?: SVSStyle): ClassFn;
+declare function fnClass(preset: SVSClass, style?: SVSClass): ClassFn;
 /**
  * Generates unique random alphabetic ID strings with collision detection.
  * Uses a carefully selected character set of 50 letters (A-Y, a-y) to ensure
@@ -130,7 +130,7 @@ declare class UniqueId {
      *
      * @example
      * ```typescript
-     * const generator = new UniqueId();
+     * const generator = new UniqueId(4);
      * const id1 = generator.get(true);        // "AbCd"
      * const id2 = generator.get(false);       // undefined
      * const id3 = generator.get("hello");     // "XyAb"
@@ -141,20 +141,37 @@ declare class UniqueId {
 }
 declare const elemId: UniqueId;
 /**
- * Determines whether a status is in a neutral state (neither ACTIVE nor INACTIVE).
+ * Determines whether a variant is in a neutral variant (neither ACTIVE nor INACTIVE).
+ *
+ * @param variant - The variant string to check
+ * @returns false if the variant is ACTIVE or INACTIVE, true otherwise
+ *
+ * @example
+ * ```typescript
+ * isNeutral(VARIANT.NEUTRAL); // true
+ * isNeutral("custom variant"); // true
+ * isNeutral(VARIANT.ACTIVE); // false
+ * isNeutral(VARIANT.INACTIVE); // false
+ * ```
+ */
+declare function isNeutral(variant: string): boolean;
+/**
+ * Checks if a given number is an unsigned integer (non-negative integer).
  *
- * @param status - The status string to check
- * @returns false if the status is ACTIVE or INACTIVE, true otherwise
+ * @param num - The number to check
+ * @returns True if the number is an integer and greater than or equal to zero, false otherwise
  *
  * @example
  * ```typescript
- * isNeutral(STATE.NEUTRAL); // true
- * isNeutral("custom state"); // true
- * isNeutral(STATE.ACTIVE); // false
- * isNeutral(STATE.INACTIVE); // false
+ * isUnsignedInteger(5);        // true
+ * isUnsignedInteger(0);        // true
+ * isUnsignedInteger(-1);       // false
+ * isUnsignedInteger(3.14);     // false
+ * isUnsignedInteger(NaN);      // false
+ * isUnsignedInteger(Infinity); // false
  * ```
  */
-declare function isNeutral(status: string): boolean;
+declare function isUnsignedInteger(num: number): boolean;
 /**
  * Creates a new object with specified keys omitted from the original object.
  * Returns an empty object if the input object is undefined or null.

package/_svseeds/core.js

@@ -1 +1 @@
-export{t as BASE,e as STATE,r as PARTS,s as elemId,n as fnClass,a as isNeutral,u as omit,c as debounce,l as throttle,o as UniqueId};const t="base",e=Object.freeze({NEUTRAL:"neutral",ACTIVE:"active",INACTIVE:"inactive"}),r=Object.freeze({WHOLE:"whole",MIDDLE:"middle",MAIN:"main",TOP:"top",LEFT:"left",RIGHT:"right",BOTTOM:"bottom",LABEL:"label",AUX:"aux",EXTRA:"extra"});function n(r,n){const o=i(n)??i(r);return null==o?(t,e)=>{}:"string"==typeof o?(t,e)=>`${o} ${t} ${e}`:(r,n)=>function(r,n,i){const o=r[n]?.[t]??"",s=r[n]?.[i]??r[n]?.[e.NEUTRAL]??"";if(!o&&!s)return;return o&&s?[o,s]:o||s}(o,r,n)}function i(t){if(null==t)return;if("string"==typeof t)return t.trim()?t:void 0;const e=Object.entries(t);return e.length?Object.fromEntries(e.map((([t,e])=>null===e||"object"!=typeof e||Array.isArray(e)?[t,{base:e}]:[t,e]))):void 0}class o{static#t=[...Array.from(Array(25).keys(),(t=>t+65)),...Array.from(Array(25).keys(),(t=>t+97))];#e=new Set;#r=3;#n=1e5;get id(){return this.get(!0)}constructor(t=3,e=1e5){t>2&&(this.#r=t),(e=Math.trunc(e))>0&&e<Math.min(Math.pow(50,this.#r),Number.MAX_SAFE_INTEGER)&&(this.#n=e)}get(t){if(t)return this.#e.size>this.#n&&this.#e.clear(),this.#i()}#o(){return o.#t[Math.trunc(Math.random()*o.#t.length)]}#s(){return String.fromCharCode(...Array(this.#r).fill(null).map((()=>this.#o())))}#i(){let t=this.#s();for(;this.#e.has(t);)t=this.#s();return this.#e.add(t),t}}const s=new o;function a(t){return t!==e.ACTIVE&&t!==e.INACTIVE}function u(t,...e){if(!t)return{};const r={...t};return e.forEach((t=>delete r[t])),r}function c(t,e){let r;return(...n)=>{r&&clearTimeout(r),r=setTimeout((()=>{e.call(null,...n)}),t)}}function l(t,e){let r,n=0;const i=()=>Date.now()-n,o=t=>{e.call(null,...t),n=Date.now()};return(...e)=>{if(!n)return o(e);clearTimeout(r),r=setTimeout((()=>{i()>=t&&o(e)}),t-i())}}
+export{t as BASE,e as VARIANT,r as PARTS,s as elemId,n as fnClass,u as isNeutral,a as isUnsignedInteger,c as omit,l as debounce,h as throttle,o as UniqueId};const t="base",e=Object.freeze({NEUTRAL:"neutral",ACTIVE:"active",INACTIVE:"inactive"}),r=Object.freeze({WHOLE:"whole",MIDDLE:"middle",MAIN:"main",TOP:"top",LEFT:"left",RIGHT:"right",BOTTOM:"bottom",LABEL:"label",AUX:"aux",EXTRA:"extra"});function n(r,n){const o=i(n)??i(r);return null==o?(t,e)=>{}:"string"==typeof o?(t,e)=>`${o} ${t} ${e}`:(r,n)=>function(r,n,i){const o=r[n]?.[t]??"",s=r[n]?.[i]??r[n]?.[e.NEUTRAL]??"";if(!o&&!s)return;return o&&s?[o,s]:o||s}(o,r,n)}function i(t){if(null==t)return;if("string"==typeof t)return t.trim()?t:void 0;const e=Object.entries(t);return e.length?Object.fromEntries(e.map((([t,e])=>null===e||"object"!=typeof e||Array.isArray(e)?[t,{base:e}]:[t,e]))):void 0}class o{static#t=[...Array.from(Array(25).keys(),(t=>t+65)),...Array.from(Array(25).keys(),(t=>t+97))];#e=new Set;#r=3;#n=1e5;get id(){return this.get(!0)}constructor(t=3,e=1e5){t>2&&(this.#r=t),(e=Math.trunc(e))>0&&e<Math.min(Math.pow(50,this.#r),Number.MAX_SAFE_INTEGER)&&(this.#n=e)}get(t){if(t)return this.#e.size>this.#n&&this.#e.clear(),this.#i()}#o(){return o.#t[Math.trunc(Math.random()*o.#t.length)]}#s(){return String.fromCharCode(...Array(this.#r).fill(null).map((()=>this.#o())))}#i(){let t=this.#s();for(;this.#e.has(t);)t=this.#s();return this.#e.add(t),t}}const s=new o;function u(t){return t!==e.ACTIVE&&t!==e.INACTIVE}function a(t){return Number.isInteger(t)&&t>=0}function c(t,...e){if(!t)return{};const r={...t};return e.forEach((t=>delete r[t])),r}function l(t,e){let r;return(...n)=>{r&&clearTimeout(r),r=setTimeout((()=>{e.call(null,...n)}),t)}}function h(t,e){let r,n=0;const i=()=>Date.now()-n,o=t=>{e.call(null,...t),n=Date.now()};return(...e)=>{if(!n)return o(e);clearTimeout(r),r=setTimeout((()=>{i()>=t&&o(e)}),t-i())}}

package/index.d.ts

@@ -1,5 +1,4 @@
-export { type SVSStyle, BASE, STATE, PARTS, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
-export { default as Badge, type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_svseeds/_Badge.svelte";
+export { type SVSClass, BASE, VARIANT, PARTS, elemId, fnClass, isNeutral, isUnsignedInteger, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
 export { default as Button, type ButtonProps, type ButtonReqdProps, type ButtonBindProps } from "./_svseeds/_Button.svelte";
 export { default as CheckField, type CheckFieldProps, type CheckFieldReqdProps, type CheckFieldBindProps, type CheckFieldValidation } from "./_svseeds/_CheckField.svelte";
 export { default as ColorPicker, type ColorPickerProps, type ColorPickerReqdProps, type ColorPickerBindProps, getHex } from "./_svseeds/_ColorPicker.svelte";
@@ -13,12 +12,12 @@ export { default as SelectField, type SelectFieldProps, type SelectFieldReqdProp
 export { default as Slider, type SliderProps, type SliderReqdProps, type SliderBindProps, type Range } from "./_svseeds/_Slider.svelte";
 export { default as Sortable, type SortableProps, type SortableReqdProps, type SortableBindProps, SortableItems } from "./_svseeds/_Sortable.svelte";
 export { default as Tabs, type TabsProps, type TabsReqdProps, type TabsBindProps } from "./_svseeds/_Tabs.svelte";
+export { default as TagsInput, type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputEvents } from "./_svseeds/_TagsInput.svelte";
 export { default as TextField, type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps, type TextFieldValidation } from "./_svseeds/_TextField.svelte";
 export { default as Toggle, type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_svseeds/_Toggle.svelte";
 export { default as ToggleGroup, type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindProps } from "./_svseeds/_ToggleGroup.svelte";
 export { default as Tooltip, type TooltipProps, type TooltipReqdProps, type TooltipBindProps, type Vector, type Position, type Align, tooltip, tooltipAction } from "./_svseeds/_Tooltip.svelte";
 export { default as Accordion, type AccordionProps, type AccordionDeps, type AccordionReqdProps, type AccordionBindProps } from "./_svseeds/Accordion.svelte";
 export { default as DarkToggle, type DarkToggleProps, type DarkToggleDeps, type DarkToggleReqdProps, type DarkToggleBindProps, THEME, setThemeToRoot } from "./_svseeds/DarkToggle.svelte";
-export { default as TagsInput, type TagsInputProps, type TagsInputDeps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputEvents } from "./_svseeds/TagsInput.svelte";
-export { default as TagsInputField, type TagsInputFieldProps, type TagsInputFieldReqdProps, type TagsInputFieldBindProps, type TagsInputFieldConstraint, type TagsInputFieldValidation, type TagsInputFieldCountValidation } from "./_svseeds/TagsInputField.svelte";
+export { default as TagsInputField, type TagsInputFieldProps, type TagsInputFieldDeps, type TagsInputFieldReqdProps, type TagsInputFieldBindProps, type TagsInputFieldConstraint, type TagsInputFieldValidation, type TagsInputFieldCountValidation } from "./_svseeds/TagsInputField.svelte";
 export { default as ToggleGroupField, type ToggleGroupFieldProps, type ToggleGroupFieldDeps, type ToggleGroupFieldReqdProps, type ToggleGroupFieldBindProps, type ToggleGroupFieldValidation } from "./_svseeds/ToggleGroupField.svelte";

package/index.js

@@ -1,5 +1,4 @@
-export { BASE, STATE, PARTS, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
-export { default as Badge } from "./_svseeds/_Badge.svelte";
+export { BASE, VARIANT, PARTS, elemId, fnClass, isNeutral, isUnsignedInteger, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
 export { default as Button } from "./_svseeds/_Button.svelte";
 export { default as CheckField } from "./_svseeds/_CheckField.svelte";
 export { default as ColorPicker, getHex } from "./_svseeds/_ColorPicker.svelte";
@@ -13,12 +12,12 @@ export { default as SelectField } from "./_svseeds/_SelectField.svelte";
 export { default as Slider } from "./_svseeds/_Slider.svelte";
 export { default as Sortable, SortableItems } from "./_svseeds/_Sortable.svelte";
 export { default as Tabs } from "./_svseeds/_Tabs.svelte";
+export { default as TagsInput } from "./_svseeds/_TagsInput.svelte";
 export { default as TextField } from "./_svseeds/_TextField.svelte";
 export { default as Toggle } from "./_svseeds/_Toggle.svelte";
 export { default as ToggleGroup } from "./_svseeds/_ToggleGroup.svelte";
 export { default as Tooltip, tooltip, tooltipAction } from "./_svseeds/_Tooltip.svelte";
 export { default as Accordion } from "./_svseeds/Accordion.svelte";
 export { default as DarkToggle, THEME, setThemeToRoot } from "./_svseeds/DarkToggle.svelte";
-export { default as TagsInput } from "./_svseeds/TagsInput.svelte";
 export { default as TagsInputField } from "./_svseeds/TagsInputField.svelte";
 export { default as ToggleGroupField } from "./_svseeds/ToggleGroupField.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svseeds",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "Simple components for Svelte.",
   "type": "module",
   "main": "./index.js",

package/_svseeds/_Badge.svelte

@@ -1,73 +0,0 @@
-<!--
-  @component
-  default value: `<value>`
-  ```ts
-  interface BadgeProps {
-    children: Snippet;
-    left?: Snippet<[string]>; // Snippet<[status]>
-    right?: Snippet<[string]>; // Snippet<[status]>
-    type?: "plain" | "link" | "left" | "right"; // <"plain">
-    href?: string;
-    onclick?: MouseEventHandler<HTMLButtonElement> | null;
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
-  }
-  ```
--->
-<script module lang="ts">
-  export interface BadgeProps {
-    children: Snippet;
-    left?: Snippet<[string]>; // Snippet<[status]>
-    right?: Snippet<[string]>; // Snippet<[status]>
-    type?: "plain" | "link" | "left" | "right"; // <"plain">
-    href?: string;
-    onclick?: MouseEventHandler<HTMLButtonElement> | null;
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
-  }
-  export type BadgeReqdProps = "children";
-  export type BadgeBindProps = "status";
-
-  const preset = "svs-badge";
-
-  import { type Snippet } from "svelte";
-  import { type MouseEventHandler } from "svelte/elements";
-  import { type SVSStyle, STATE, PARTS, fnClass } from "./core";
-</script>
-
-<script lang="ts">
-  let { children, left, right, type = "plain", href = "", onclick, status = $bindable(""), style }: BadgeProps = $props();
-
-  // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
-</script>
-
-<!---------------------------------------->
-
-{#if type === "link"}
-  <a class={cls(PARTS.WHOLE, status)} {href}>
-    {@render whole()}
-  </a>
-{:else}
-  <span class={cls(PARTS.WHOLE, status)}>
-    {@render whole()}
-  </span>
-{/if}
-
-{#snippet side(area: string, btn: boolean, body?: Snippet<[string]>)}
-  {#if body}
-    {#if btn}
-      <button class={cls(area, status)} {onclick}>{@render body(status)}</button>
-    {:else}
-      <span class={cls(area, status)}>{@render body(status)}</span>
-    {/if}
-  {/if}
-{/snippet}
-{#snippet whole()}
-  {@render side(PARTS.LEFT, type === "left", left)}
-  <span class={cls(PARTS.MAIN, status)}>
-    {@render children()}
-  </span>
-  {@render side(PARTS.RIGHT, type === "right", right)}
-{/snippet}

package/_svseeds/_Badge.svelte.d.ts

@@ -1,33 +0,0 @@
-export interface BadgeProps {
-    children: Snippet;
-    left?: Snippet<[string]>;
-    right?: Snippet<[string]>;
-    type?: "plain" | "link" | "left" | "right";
-    href?: string;
-    onclick?: MouseEventHandler<HTMLButtonElement> | null;
-    status?: string;
-    style?: SVSStyle;
-}
-export type BadgeReqdProps = "children";
-export type BadgeBindProps = "status";
-import { type Snippet } from "svelte";
-import { type MouseEventHandler } from "svelte/elements";
-import { type SVSStyle } from "./core";
-/**
- * default value: `<value>`
- * ```ts
- * interface BadgeProps {
- *   children: Snippet;
- *   left?: Snippet<[string]>; // Snippet<[status]>
- *   right?: Snippet<[string]>; // Snippet<[status]>
- *   type?: "plain" | "link" | "left" | "right"; // <"plain">
- *   href?: string;
- *   onclick?: MouseEventHandler<HTMLButtonElement> | null;
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
- * }
- * ```
- */
-declare const Badge: import("svelte").Component<BadgeProps, {}, "status">;
-type Badge = ReturnType<typeof Badge>;
-export default Badge;