svelte-comp 1.2.5 → 1.2.6

package/dist/lib/ProgressCircle.svelte

@@ -1,192 +0,0 @@
-<!-- src/lib/ProgressCircle.svelte -->
-<script lang="ts">
-  /**
-   * @component ProgressCircle
-   * @description Circular progress indicator for visualizing completion or load state (0-100). Supports indeterminate mode.
-   * @prop value {number} - Current progress value
-   * @default 0
-   * @prop indeterminate {boolean} - Enables spinning infinite mode
-   * @default false
-   * @prop size {number} - Diameter in px
-   * @default 48
-   * @prop stroke {number} - Stroke width in px
-   * @default 4
-   * @prop variant {ComponentVariant} - Color/style variant
-   * @options default|neutral|success|warning|error
-   * @default default
-   * @prop label {string} - Optional text shown in center
-   * @default ""
-   * @prop max {number} - Max progress value for normalization
-   * @default 100
-   * @prop class {string} - Extra wrapper classes
-   * @default ""
-   * @note Clamps value between 0-max
-   * @note Uses SVG stroke-dashoffset animation
-   * @note Accessible role=progressbar with aria-valuenow
-   * @note Works in both determinate/indeterminate modes
-   */
-  import type { HTMLAttributes } from "svelte/elements";
-  import { type SizeKey, type ComponentVariant, TEXT } from "./types";
-  import { cx, clamp } from "../utils";
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    value?: number;
-    indeterminate?: boolean;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-  };
-
-  let {
-    value = 0,
-    indeterminate = false,
-    sz = "md",
-    variant = "default",
-    class: externalClass = "",
-    label = "",
-    disabled = false,
-    ...rest
-  }: Props = $props();
-
-  const sizes: Record<SizeKey, { diameter: number; stroke: number }> = {
-    xs: { diameter: 40, stroke: 4 },
-    sm: { diameter: 48, stroke: 5 },
-    md: { diameter: 56, stroke: 6 },
-    lg: { diameter: 64, stroke: 7 },
-    xl: { diameter: 72, stroke: 8 },
-  };
-
-  const pctValue = $derived(clamp(value, 0, 100));
-  const pctText = $derived(Math.round(pctValue));
-
-  const geometry = $derived(sizes[sz]);
-  const center = $derived(geometry.diameter / 2);
-  const radius = $derived(center - geometry.stroke / 2);
-  const circumference = $derived(2 * Math.PI * radius);
-
-  const dashOffset = $derived(((100 - pctValue) / 100) * circumference);
-  const dashArray = $derived(`${circumference} ${circumference}`);
-  const indeterminateDash = $derived(`${circumference * 0.3} ${circumference}`);
-
-  const strokeColor = $derived(
-    variant === "neutral"
-      ? "stroke-[var(--color-bg-secondary)]"
-      : "stroke-[var(--color-bg-primary)]"
-  );
-
-  const rootClass = $derived(
-    cx(
-      "inline-flex flex-col items-center gap-1 data-[disabled=true]:opacity-[var(--opacity-disabled)] data-[disabled=true]:cursor-not-allowed",
-      externalClass
-    )
-  );
-</script>
-
-<div
-  class={rootClass}
-  role="progressbar"
-  aria-valuemin="0"
-  aria-valuemax="100"
-  aria-valuenow={indeterminate ? undefined : pctText}
-  data-disabled={disabled ? "true" : undefined}
-  {...rest}
->
-  {#if label}
-    <span class={cx("text-[var(--color-text-muted)] select-none", TEXT[sz])}>
-      {label}
-    </span>
-  {/if}
-
-  <div
-    class="relative inline-flex items-center justify-center"
-    style={`width:${geometry.diameter}px;height:${geometry.diameter}px;`}
-  >
-    <svg
-      class="pc-svg"
-      viewBox={`0 0 ${geometry.diameter} ${geometry.diameter}`}
-      role="presentation"
-      aria-hidden="true"
-    >
-      <g class="pc-rot">
-        <circle
-          class="pc-track"
-          cx={center}
-          cy={center}
-          r={radius}
-          stroke-width={geometry.stroke}
-        ></circle>
-
-        {#if indeterminate}
-          <circle
-            class={cx("pc-bar pc-indet", strokeColor)}
-            cx={center}
-            cy={center}
-            r={radius}
-            stroke-width={geometry.stroke}
-            stroke-dasharray={indeterminateDash}
-          ></circle>
-        {:else}
-          <circle
-            class={cx("pc-bar", strokeColor)}
-            cx={center}
-            cy={center}
-            r={radius}
-            stroke-width={geometry.stroke}
-            stroke-dasharray={dashArray}
-            stroke-dashoffset={dashOffset}
-          ></circle>
-        {/if}
-      </g>
-    </svg>
-
-    {#if !indeterminate}
-      <div
-        class={cx(
-          "absolute inset-0 flex items-center justify-center text-[var(--color-text-muted)] font-medium select-none",
-          TEXT[sz]
-        )}
-      >
-        {pctText}%
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .pc-svg {
-    width: 100%;
-    height: 100%;
-  }
-  .pc-rot {
-    transform: rotate(-90deg);
-    transform-origin: center;
-  }
-  .pc-track {
-    fill: none;
-    stroke: var(--border-color-default);
-  }
-  .pc-bar {
-    fill: none;
-    stroke-linecap: round;
-    transition:
-      stroke-dashoffset 0.25s ease,
-      stroke 0.2s ease;
-    transform-origin: center;
-  }
-  .pc-indet {
-    animation: pc-spin 1.2s linear infinite;
-  }
-
-  :global {
-    @keyframes pc-spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  }
-</style>

package/dist/lib/ProgressCircle.svelte.d.ts

@@ -1,39 +0,0 @@
-/**
-   * @component ProgressCircle
-   * @description Circular progress indicator for visualizing completion or load state (0-100). Supports indeterminate mode.
-   * @prop value {number} - Current progress value
-   * @default 0
-   * @prop indeterminate {boolean} - Enables spinning infinite mode
-   * @default false
-   * @prop size {number} - Diameter in px
-   * @default 48
-   * @prop stroke {number} - Stroke width in px
-   * @default 4
-   * @prop variant {ComponentVariant} - Color/style variant
-   * @options default|neutral|success|warning|error
-   * @default default
-   * @prop label {string} - Optional text shown in center
-   * @default ""
-   * @prop max {number} - Max progress value for normalization
-   * @default 100
-   * @prop class {string} - Extra wrapper classes
-   * @default ""
-   * @note Clamps value between 0-max
-   * @note Uses SVG stroke-dashoffset animation
-   * @note Accessible role=progressbar with aria-valuenow
-   * @note Works in both determinate/indeterminate modes
-   */
-import type { HTMLAttributes } from "svelte/elements";
-import { type SizeKey, type ComponentVariant } from "./types";
-type Props = HTMLAttributes<HTMLDivElement> & {
-    value?: number;
-    indeterminate?: boolean;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-};
-declare const ProgressCircle: import("svelte").Component<Props, {}, "">;
-type ProgressCircle = ReturnType<typeof ProgressCircle>;
-export default ProgressCircle;

package/dist/lib/Radio.svelte

@@ -1,189 +0,0 @@
-<!-- src/lib/Radio.svelte -->
-<script lang="ts">
-  /**
-   * @component Radio
-   * @description Single choice input with optional label, custom sizing and theme variants.
-   *
-   * @prop label {string} - Text label shown next to the radio
-   *
-   * @prop children {Snippet} - Custom label content
-   *
-   * @prop sz {SizeKey} - Size option
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ComponentVariant} - Visual style preset
-   * @options default|neutral
-   * @default default
-   *
-   * @prop checked {boolean} - Controlled checked state
-   * @default false
-   *
-   * @prop group {unknown} - Native radio group binding (`bind:group`)
-   *
-   * @prop onChange {(checked: boolean) => void} - Fired when the radio toggles
-   *
-   * @prop class {string} - Extra classes applied to the root container
-   * @default ""
-   *
-   * @prop describedBy {string} - ID of helper or error text for accessibility
-   *
-   * @prop value {string} - Radio value
-   * @default "on"
-   *
-   * @note Fully supports native radio grouping through `bind:group`
-   * @note Works as a controlled component when `checked` and `onChange` are used together
-   * @note `children` takes priority over `label`
-   * @note Size and variant affect circle size, dot size and colors
-   * @note Hidden native input is focusable and exposes full accessibility attributes
-   * @note Uses data-state attributes to enable custom styling
-   */
-  import type { Snippet } from "svelte";
-  import type { HTMLInputAttributes } from "svelte/elements";
-  import { type SizeKey, type ComponentVariant, TEXT } from "./types";
-  import { cx, uid } from "../utils";
-
-  type Props = HTMLInputAttributes & {
-    label?: string;
-    children?: Snippet;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    checked?: boolean;
-    group?: unknown;
-    onChange?: (checked: boolean) => void;
-    class?: string;
-    describedBy?: string;
-  };
-
-  let {
-    label,
-    children,
-    sz = "md",
-    variant = "default",
-    checked = $bindable(false),
-    group = $bindable<unknown>(undefined),
-    onChange,
-    class: externalClass = "",
-    describedBy,
-    value = "on",
-    ...rest
-  }: Props = $props();
-
-  const inputId = $derived(rest.id ?? uid("rd-"));
-
-  const sizeClasses = {
-    xs: "w-3 h-3",
-    sm: "w-3.5 h-3.5",
-    md: "w-4 h-4",
-    lg: "w-[18px] h-[18px]",
-    xl: "w-5 h-5",
-  } as const;
-
-  const dotSizes: Record<SizeKey, string> = {
-    xs: "w-1.5 h-1.5",
-    sm: "w-2 h-2",
-    md: "w-2.5 h-2.5",
-    lg: "w-3 h-3",
-    xl: "w-3.5 h-3.5",
-  };
-
-  const gapBySize: Record<SizeKey, string> = {
-    xs: "gap-1.5",
-    sm: "gap-2",
-    md: "gap-2.5",
-    lg: "gap-3",
-    xl: "gap-3.5",
-  };
-
-  const variants = $derived(
-    variant === "neutral"
-      ? {
-          checked: "bg-transparent border-[var(--border-color-strong)]",
-          unchecked: "bg-transparent border-[var(--border-color-default)]",
-        }
-      : {
-          checked: "bg-transparent border-[var(--color-bg-primary)]",
-          unchecked: "bg-transparent border-[var(--border-color-default)]",
-        }
-  );
-
-  const baseCircle =
-    "rounded-full border border-solid cursor-pointer transition-all duration-[var(--transition-fast)] ease-[var(--timing-default)] flex items-center justify-center";
-
-  const focusFromPeer =
-    "peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--border-color-focus)] peer-focus-visible:border-[var(--border-color-focus)]";
-
-  const dotColor = $derived(
-    variant === "neutral"
-      ? "bg-[var(--border-color-strong)]"
-      : "bg-[var(--color-bg-primary)]"
-  );
-
-  const isUsingGroup = $derived(typeof group !== "undefined");
-  const isChecked = $derived(isUsingGroup ? group === value : checked);
-  const state = $derived(isChecked ? "checked" : "unchecked");
-
-  const rootClass = $derived(
-    cx(
-      "inline-flex items-center cursor-pointer select-none",
-      gapBySize[sz],
-      externalClass
-    )
-  );
-
-  const radioClass = $derived(
-    cx(
-      baseCircle,
-      focusFromPeer,
-      sizeClasses[sz],
-      isChecked && variants.checked,
-      !isChecked && variants.unchecked,
-      "peer-disabled:opacity-[var(--opacity-disabled)] peer-disabled:cursor-not-allowed"
-    )
-  );
-
-  const dotClass = $derived(
-    cx(
-      "rounded-full transition-transform duration-[var(--transition-fast)] ease-[var(--timing-default)]",
-      dotSizes[sz],
-      dotColor,
-      isChecked ? "scale-100 opacity-100" : "scale-50 opacity-0"
-    )
-  );
-
-  const labelClass = $derived(
-    cx(
-      TEXT[sz],
-      "[color:var(--color-text-muted)] font-medium peer-disabled:cursor-not-allowed"
-    )
-  );
-</script>
-
-<label class={rootClass} for={inputId}>
-  <input
-    id={inputId}
-    type="radio"
-    {value}
-    bind:group
-    checked={isChecked}
-    {...rest}
-    class="sr-only peer"
-    aria-checked={isChecked}
-    aria-describedby={describedBy}
-    onchange={(event) => {
-      const next = (event.currentTarget as HTMLInputElement).checked;
-      checked = next;
-      onChange?.(next);
-    }}
-  />
-
-  <span data-state={state} class={radioClass} aria-hidden="true">
-    <span class={dotClass}></span>
-  </span>
-
-  {#if children}
-    <span class={labelClass}>{@render children?.()}</span>
-  {:else if label}
-    <span class={labelClass}>{label}</span>
-  {/if}
-</label>

package/dist/lib/Radio.svelte.d.ts

@@ -1,55 +0,0 @@
-/**
-   * @component Radio
-   * @description Single choice input with optional label, custom sizing and theme variants.
-   *
-   * @prop label {string} - Text label shown next to the radio
-   *
-   * @prop children {Snippet} - Custom label content
-   *
-   * @prop sz {SizeKey} - Size option
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ComponentVariant} - Visual style preset
-   * @options default|neutral
-   * @default default
-   *
-   * @prop checked {boolean} - Controlled checked state
-   * @default false
-   *
-   * @prop group {unknown} - Native radio group binding (`bind:group`)
-   *
-   * @prop onChange {(checked: boolean) => void} - Fired when the radio toggles
-   *
-   * @prop class {string} - Extra classes applied to the root container
-   * @default ""
-   *
-   * @prop describedBy {string} - ID of helper or error text for accessibility
-   *
-   * @prop value {string} - Radio value
-   * @default "on"
-   *
-   * @note Fully supports native radio grouping through `bind:group`
-   * @note Works as a controlled component when `checked` and `onChange` are used together
-   * @note `children` takes priority over `label`
-   * @note Size and variant affect circle size, dot size and colors
-   * @note Hidden native input is focusable and exposes full accessibility attributes
-   * @note Uses data-state attributes to enable custom styling
-   */
-import type { Snippet } from "svelte";
-import type { HTMLInputAttributes } from "svelte/elements";
-import { type SizeKey, type ComponentVariant } from "./types";
-type Props = HTMLInputAttributes & {
-    label?: string;
-    children?: Snippet;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    checked?: boolean;
-    group?: unknown;
-    onChange?: (checked: boolean) => void;
-    class?: string;
-    describedBy?: string;
-};
-declare const Radio: import("svelte").Component<Props, {}, "group" | "checked">;
-type Radio = ReturnType<typeof Radio>;
-export default Radio;

package/dist/lib/SearchInput.svelte

@@ -1,106 +0,0 @@
-<script lang="ts">
-  /**
-   * @component SearchInput
-   * @description Search input field with a leading search icon.
-   *
-   * @prop label {string} - Label text rendered above the field
-   *
-   * @prop placeholder {string} - Placeholder text (localized by default)
-   *
-   * @prop value {string} - Controlled field value (bindable)
-   * @default ""
-   *
-   * @prop sz {SizeKey} - Size preset for spacing and typography
-   * @options xs|sm|md|lg|xl
-   * @default sm
-   *
-   * @prop variant {FieldVariant} - Visual style variant
-   * @options default|filled|neutral
-   * @default filled
-   *
-   * @prop class {string} - Additional classes applied to the Field root
-   * @default ""
-   *
-   * @note Renders a leading search icon and uses `Field` with `type="search"` and `clearable`.
-   */
-  import { getContext } from "svelte";
-  import Field from "./Field.svelte";
-  import type { FieldVariant, SizeKey } from "./types";
-  import { TEXTS } from "./lang";
-
-  type Props = {
-    label?: string;
-    placeholder?: string;
-    value?: string;
-    sz?: SizeKey;
-    variant?: FieldVariant;
-    class?: string;
-    [key: string]: unknown;
-  };
-
-  let {
-    label,
-    placeholder,
-    value = $bindable(''),
-    sz = 'sm',
-    variant = 'filled',
-    class: externalClass = '',
-    ...rest
-  }: Props = $props();
-
-  const langCtx =
-    getContext<{ value: keyof typeof TEXTS } | undefined>("lang") ?? null;
-  const langKey = $derived(langCtx?.value ?? "en");
-  const L = $derived(TEXTS[langKey].components.searchInput);
-
-  const placeholderFinal = $derived(placeholder ?? L.placeholder);
-</script>
-
-{#snippet leading()}
-  <span class="ml-1 inline-flex h-6 w-6 items-center justify-center text-[var(--color-text-muted)]">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="lucide lucide-search-icon lucide-search"
-    >
-      <path d="m21 21-4.34-4.34" />
-      <circle cx="11" cy="11" r="8" />
-    </svg>
-  </span>
-{/snippet}
-
-<Field
-  {label}
-  bind:value
-  {sz}
-  {variant}
-  type="search"
-  clearable={true}
-  {leading}
-  placeholder={placeholderFinal}
-  class={`search-input w-full max-w-[520px] [&_input]:pl-10 ${externalClass}`}
-  {...rest}
-/>
-
-<style>
-  :global(.search-input input[type="search"]) {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  :global(.search-input input[type="search"]::-webkit-search-cancel-button),
-  :global(.search-input input[type="search"]::-webkit-search-decoration),
-  :global(.search-input input[type="search"]::-webkit-search-results-button),
-  :global(.search-input input[type="search"]::-webkit-search-results-decoration) {
-    -webkit-appearance: none;
-    appearance: none;
-    display: none;
-  }
-</style>

package/dist/lib/SearchInput.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { FieldVariant, SizeKey } from "./types";
-type Props = {
-    label?: string;
-    placeholder?: string;
-    value?: string;
-    sz?: SizeKey;
-    variant?: FieldVariant;
-    class?: string;
-    [key: string]: unknown;
-};
-declare const SearchInput: import("svelte").Component<Props, {}, "value">;
-type SearchInput = ReturnType<typeof SearchInput>;
-export default SearchInput;