svseeds 0.4.7 → 0.4.8

package/_svseeds/_ToggleGroup.svelte

@@ -8,10 +8,10 @@
     multiple?: boolean; // (true)
     ariaDescId?: string;
     ariaErrMsgId?: string; // bindable
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     action?: Action;
-    [key: string]: unknown | Snippet<[string]>;
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+    [key: string]: unknown | Snippet<[string]>; // contents instead of the value
   }
   ```
 -->
@@ -22,13 +22,13 @@
     multiple?: boolean; // (true)
     ariaDescId?: string;
     ariaErrMsgId?: string; // bindable
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     action?: Action;
-    [key: string]: unknown | Snippet<[string]>;
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+    [key: string]: unknown | Snippet<[string]>; // contents instead of the value
   }
   export type ToggleGroupReqdProps = "options";
-  export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "status";
+  export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "variant";
 
   const preset = "svs-toggle-group";
 
@@ -41,15 +41,15 @@
   import { type Snippet } from "svelte";
   import { type Action } from "svelte/action";
   import { type SvelteMap } from "svelte/reactivity";
-  import { type SVSStyle, STATE, PARTS, fnClass } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass } from "./core";
 </script>
 
 <script lang="ts">
-  let { options, values = $bindable([]), multiple = true, ariaDescId, ariaErrMsgId = $bindable(), status = $bindable(""), style, attributes, action, ...rest }: ToggleGroupProps = $props();
+  let { options, values = $bindable([]), multiple = true, ariaDescId, ariaErrMsgId = $bindable(), attributes, action, styling, variant = $bindable(""), ...rest }: ToggleGroupProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const role = multiple ? "checkbox" : "radio";
   const roleGroup = multiple ? "group" : "radiogroup";
 
@@ -69,9 +69,9 @@
 <!---------------------------------------->
 
 {#if opts.length}
-  <span class={cls(PARTS.WHOLE, status)} role={roleGroup} aria-describedby={ariaDescId} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple ? ariaErrMsgId : undefined}>
+  <span class={cls(PARTS.WHOLE, variant)} role={roleGroup} aria-describedby={ariaDescId} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple ? ariaErrMsgId : undefined}>
     {#each opts as { value, text, checked } (value)}
-      {@const c = cls(PARTS.MAIN, checked ? STATE.ACTIVE : status)}
+      {@const c = cls(PARTS.MAIN, checked ? VARIANT.ACTIVE : variant)}
       {#if action}
         <button class={c} aria-checked={checked} aria-invalid={multiple ? invalid : undefined} aria-errormessage={multiple ? ariaErrMsgId : undefined} onclick={updateValues(value)} type="button" {role} use:action>
           {@render content(value, text)}

package/_svseeds/_ToggleGroup.svelte.d.ts

@@ -4,17 +4,17 @@ export interface ToggleGroupProps {
     multiple?: boolean;
     ariaDescId?: string;
     ariaErrMsgId?: string;
-    status?: string;
-    style?: SVSStyle;
     action?: Action;
+    styling?: SVSClass;
+    variant?: string;
     [key: string]: unknown | Snippet<[string]>;
 }
 export type ToggleGroupReqdProps = "options";
-export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "status";
+export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "variant";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
@@ -24,13 +24,13 @@ import { type SVSStyle } from "./core";
  *   multiple?: boolean; // (true)
  *   ariaDescId?: string;
  *   ariaErrMsgId?: string; // bindable
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
  *   action?: Action;
- *   [key: string]: unknown | Snippet<[string]>;
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
+ *   [key: string]: unknown | Snippet<[string]>; // contents instead of the value
  * }
  * ```
  */
-declare const ToggleGroup: import("svelte").Component<ToggleGroupProps, {}, "status" | "values" | "ariaErrMsgId">;
+declare const ToggleGroup: import("svelte").Component<ToggleGroupProps, {}, "variant" | "values" | "ariaErrMsgId">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;
 export default ToggleGroup;

package/_svseeds/_Tooltip.svelte

@@ -3,14 +3,14 @@
   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;
     element?: HTMLDivElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   type Vector = { x: number, y: number };
   type Position = "top" | "left" | "bottom" | "right";
@@ -19,17 +19,17 @@
 -->
 <script module lang="ts">
   export 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;
     element?: HTMLDivElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type TooltipReqdProps = never;
-  export type TooltipBindProps = "status" | "element";
+  export type TooltipBindProps = "variant" | "element";
   export function tooltip(node: HTMLElement, params: { text: string, delay?: number, cursor?: boolean, name?: string }): ActionReturn {
     return core.action(node, params.text, params.delay, params.cursor, params.name);
   }
@@ -247,15 +247,15 @@
   import { type Snippet, untrack } from "svelte";
   import { on } from "svelte/events";
   import { type Action, type ActionReturn } from "svelte/action";
-  import { type SVSStyle, STATE, PARTS, elemId, fnClass, throttle } from "./core";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass, throttle } from "./core";
 </script>
 
 <script lang="ts">
-  let { main, name, position = "top", align = "center", offset = { ...INIT_VEC }, status = $bindable(""), style, element = $bindable() }: TooltipProps = $props();
+  let { children, name, position = "top", align = "center", offset = { ...INIT_VEC }, element = $bindable(), styling, variant = $bindable("") }: TooltipProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const id = core.register(name);
   let point: Vector = $state.raw(INIT_VEC);
 
@@ -275,9 +275,9 @@
 <!---------------------------------------->
 
 {#if core.mount(id)}
-  <div bind:this={element} class={cls(PARTS.WHOLE, status)} style={dynStyle} {id} role="tooltip">
-    {#if main}
-      {@render main(status, core.text, core.flipped)}
+  <div bind:this={element} class={cls(PARTS.WHOLE, variant)} style={dynStyle} {id} role="tooltip">
+    {#if children}
+      {@render children(core.text, variant, core.flipped)}
     {:else}
       {core.text}
     {/if}

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)`
  * ```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;
  *   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
@@ -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 status - The status string to check
- * @returns false if the status is ACTIVE or INACTIVE, true otherwise
+ * @param variant - The variant string to check
+ * @returns false if the variant is ACTIVE or INACTIVE, true otherwise
  *
  * @example
  * ```typescript
- * isNeutral(STATE.NEUTRAL); // true
- * isNeutral("custom state"); // true
- * isNeutral(STATE.ACTIVE); // false
- * isNeutral(STATE.INACTIVE); // false
+ * isNeutral(VARIANT.NEUTRAL); // true
+ * isNeutral("custom variant"); // true
+ * isNeutral(VARIANT.ACTIVE); // false
+ * isNeutral(VARIANT.INACTIVE); // false
  * ```
  */
-declare function isNeutral(status: string): boolean;
+declare function isNeutral(variant: string): boolean;
+/**
+ * Checks if a given number is an unsigned integer (non-negative integer).
+ *
+ * @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
+ * isUnsignedInteger(5);        // true
+ * isUnsignedInteger(0);        // true
+ * isUnsignedInteger(-1);       // false
+ * isUnsignedInteger(3.14);     // false
+ * isUnsignedInteger(NaN);      // false
+ * isUnsignedInteger(Infinity); // false
+ * ```
+ */
+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,4 +1,4 @@
-export { type SVSStyle, BASE, STATE, PARTS, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
+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";

package/index.js

@@ -1,4 +1,4 @@
-export { BASE, STATE, PARTS, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
+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";

package/package.json

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