svelte-comp 1.2.2 → 1.2.7

package/README.md

@@ -53,7 +53,7 @@ npm i prismjs @types/prismjs
 
 ## 📁 Components included
 
-Accordion • Button • Card • Carousel • CheckBox • CodeView • ColorPicker •
+Accordion • Button • Calendar • Card • Carousel • CheckBox • CodeView • ColorPicker •
 DatePicker • Dialog • Field • FilePicker • Form • Hamburger • Menu •
 PaginatedCard • Pagination • PrimaryColorSelect • ProgressBar • ProgressCircle •
 Radio • SearchInput • Select • Slider • Splitter • Switch • Tabs • Table • ThemeToggle •

package/dist/lang.d.ts

@@ -1,7 +1,7 @@
 export declare const TEXTS: {
     readonly en: {
         readonly app: {
-            readonly version: "v1.2.1";
+            readonly version: "v1.2.6";
             readonly title: "Svelte 5 UI Components";
             readonly footer: "© 2025 MaestroFusion360";
             readonly authorUrl: "https://github.com/MaestroFusion360/svelte-comp";
@@ -360,7 +360,7 @@ export declare const TEXTS: {
     };
     readonly ru: {
         readonly app: {
-            readonly version: "v1.2.1";
+            readonly version: "v1.2.6";
             readonly title: "Svelte 5 UI Components";
             readonly footer: "© 2025 MaestroFusion360";
             readonly authorUrl: "https://github.com/MaestroFusion360/svelte-comp";
@@ -720,7 +720,7 @@ export declare const TEXTS: {
     };
     readonly es: {
         readonly app: {
-            readonly version: "v1.2.1";
+            readonly version: "v1.2.6";
             readonly title: "Svelte 5 UI Components";
             readonly footer: "© 2025 MaestroFusion360";
             readonly authorUrl: "https://github.com/MaestroFusion360/svelte-comp";

package/dist/lang.js

@@ -1,6 +1,6 @@
 var enTexts = {
     app: {
-        version: "v1.2.1",
+        version: "v1.2.6",
         title: "Svelte 5 UI Components",
         footer: "© 2025 MaestroFusion360",
         authorUrl: "https://github.com/MaestroFusion360/svelte-comp",
@@ -361,7 +361,7 @@ var enTexts = {
 };
 var ruTexts = {
     app: {
-        version: "v1.2.1",
+        version: "v1.2.6",
         title: "Svelte 5 UI Components",
         footer: "© 2025 MaestroFusion360",
         authorUrl: "https://github.com/MaestroFusion360/svelte-comp",
@@ -723,7 +723,7 @@ var ruTexts = {
 };
 var esTexts = {
     app: {
-        version: "v1.2.1",
+        version: "v1.2.6",
         title: "Svelte 5 UI Components",
         footer: "© 2025 MaestroFusion360",
         authorUrl: "https://github.com/MaestroFusion360/svelte-comp",

package/dist/lib/Calendar.svelte

@@ -0,0 +1,377 @@
+<!-- src/lib/Calendar.svelte -->
+<script lang="ts">
+  /**
+   * @component Calendar
+   * @description Monthly calendar grid with navigation and date selection.
+   *
+   * @prop value {string | null} - Selected date in ISO `YYYY-MM-DD` (bindable)
+   * @default null
+   *
+   * @prop min {string} - Minimum selectable date (ISO `YYYY-MM-DD`)
+   *
+   * @prop max {string} - Maximum selectable date (ISO `YYYY-MM-DD`)
+   *
+   * @prop locale {string} - Locale used for month/day labels
+   * @default "en-US"
+   *
+   * @prop weekStartsOn {0|1|2|3|4|5|6} - First day of week (0=Sun ... 6=Sat)
+   * @default 1
+   *
+   * @prop showOutsideDays {boolean} - Render days from adjacent months
+   * @default true
+   *
+   * @prop disabled {boolean} - Disables selection and navigation
+   * @default false
+   *
+   * @prop onChange {(value: string | null) => void} - Fired on date selection
+   *
+   * @prop class {string} - Additional classes for the root wrapper
+   * @default ""
+   */
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cx } from "../utils";
+  import { TEXT } from "./types";
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    value?: string | null;
+    min?: string;
+    max?: string;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    showOutsideDays?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string | null) => void;
+    class?: string;
+  };
+
+  let {
+    value = $bindable<string | null>(null),
+    min = "1926-01-01",
+    max,
+    locale = "en-US",
+    weekStartsOn = 1,
+    showOutsideDays = true,
+    disabled = false,
+    onChange,
+    class: externalClass = "",
+    ...rest
+  }: Props = $props();
+
+  type ViewMode = "days" | "months" | "years";
+
+  function startOfDay(date: Date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+
+  function parseIso(value: string | null | undefined): Date | null {
+    if (!value) return null;
+    const [y, m, d] = value.split("-").map((part) => Number(part));
+    if (!y || !m || !d) return null;
+    const date = new Date(y, m - 1, d);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  function toIso(date: Date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }
+
+  function isSameDay(a: Date, b: Date) {
+    return (
+      a.getFullYear() === b.getFullYear() &&
+      a.getMonth() === b.getMonth() &&
+      a.getDate() === b.getDate()
+    );
+  }
+
+  let viewDate = $state(startOfDay(parseIso(value) ?? new Date()));
+  let viewMode = $state<ViewMode>("days");
+
+  const selectedDate = $derived(parseIso(value));
+  const minDate = $derived(parseIso(min));
+  const maxDate = $derived(parseIso(max));
+  const today = $derived(startOfDay(new Date()));
+
+  let lastValue = $state<string | null>(value ?? null);
+
+  $effect(() => {
+    if (value === lastValue) return;
+    lastValue = value;
+    const selected = parseIso(value);
+    if (!selected) return;
+    viewDate = new Date(selected.getFullYear(), selected.getMonth(), 1);
+  });
+
+  const monthLabel = $derived(
+    new Intl.DateTimeFormat(locale, { month: "long" }).format(viewDate)
+  );
+
+  const yearLabel = $derived(String(viewDate.getFullYear()));
+
+  const weekdayLabels = $derived.by(() => {
+    const formatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
+    const labels: string[] = [];
+    const base = new Date(2023, 0, 1);
+    for (let i = 0; i < 7; i += 1) {
+      const offset = (weekStartsOn + i) % 7;
+      const date = new Date(base);
+      date.setDate(base.getDate() + offset);
+      labels.push(formatter.format(date));
+    }
+    return labels;
+  });
+
+  const dayLabelFormatter = $derived.by(
+    () =>
+      new Intl.DateTimeFormat(locale, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      })
+  );
+
+  const monthOptions = $derived.by(() => {
+    const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
+    return Array.from({ length: 12 }, (_, idx) => ({
+      index: idx,
+      label: formatter.format(new Date(2024, idx, 1)),
+    }));
+  });
+
+  const yearRangeStart = $derived(() => {
+    const year = viewDate.getFullYear();
+    return year - (year % 12);
+  });
+
+  const yearOptions = $derived.by(() =>
+    Array.from({ length: 12 }, (_, idx) => yearRangeStart() + idx)
+  );
+
+  type DayCell = {
+    date: Date;
+    iso: string;
+    inMonth: boolean;
+    isToday: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+  };
+
+  const days = $derived.by(() => {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const first = new Date(year, month, 1);
+    const startOffset = (first.getDay() - weekStartsOn + 7) % 7;
+    const start = new Date(year, month, 1 - startOffset);
+    const cells: DayCell[] = [];
+    for (let i = 0; i < 42; i += 1) {
+      const date = new Date(start);
+      date.setDate(start.getDate() + i);
+      const day = startOfDay(date);
+      const inMonth = day.getMonth() === month;
+      const isToday = isSameDay(day, today);
+      const isSelected = selectedDate ? isSameDay(day, selectedDate) : false;
+      const beforeMin = minDate ? day < startOfDay(minDate) : false;
+      const afterMax = maxDate ? day > startOfDay(maxDate) : false;
+      const isDisabled =
+        disabled || beforeMin || afterMax || (!showOutsideDays && !inMonth);
+      cells.push({
+        date: day,
+        iso: toIso(day),
+        inMonth,
+        isToday,
+        isSelected,
+        isDisabled,
+      });
+    }
+    return cells;
+  });
+
+  function shift(delta: number) {
+    if (disabled) return;
+    if (viewMode === "days") {
+      viewDate = new Date(
+        viewDate.getFullYear(),
+        viewDate.getMonth() + delta,
+        1
+      );
+    } else if (viewMode === "months") {
+      viewDate = new Date(viewDate.getFullYear() + delta, viewDate.getMonth(), 1);
+    } else {
+      viewDate = new Date(
+        viewDate.getFullYear() + delta * 12,
+        viewDate.getMonth(),
+        1
+      );
+    }
+  }
+
+  function selectDay(cell: DayCell) {
+    if (cell.isDisabled) return;
+    value = cell.iso;
+    onChange?.(cell.iso);
+  }
+
+  function selectMonth(index: number) {
+    if (disabled) return;
+    viewDate = new Date(viewDate.getFullYear(), index, 1);
+    viewMode = "days";
+  }
+
+  function selectYear(year: number) {
+    if (disabled) return;
+    viewDate = new Date(year, viewDate.getMonth(), 1);
+    viewMode = "months";
+  }
+
+  const wrapperClass = $derived(cx("w-full", externalClass));
+
+  const headerButtonBase =
+    "px-1 py-0.5 rounded-[var(--radius-sm)] transition-colors text-[var(--color-text-default)] hover:bg-[var(--color-bg-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed text-[var(--text-xs)]";
+
+  const arrowButtonBase =
+    "inline-flex items-center justify-center h-3 w-3 rounded-[var(--radius-sm)] text-[var(--color-text-default)] hover:bg-[var(--color-bg-hover)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed";
+
+  const dayButtonBase =
+    "rounded-full flex items-center justify-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] text-[var(--text-xs)]";
+</script>
+
+<div class={wrapperClass} style="width: 240px; max-width: 100%;" {...rest}>
+  <div class="flex items-center justify-between mb-[var(--spacing-sm)]">
+    <div class="flex items-center gap-1">
+      <button
+        type="button"
+          class={cx(headerButtonBase, TEXT.sm)}
+        onclick={() => (viewMode = viewMode === "months" ? "days" : "months")}
+        disabled={disabled}
+      >
+        {monthLabel}
+      </button>
+      <button
+        type="button"
+          class={cx(headerButtonBase, TEXT.sm)}
+        onclick={() => (viewMode = viewMode === "years" ? "days" : "years")}
+        disabled={disabled}
+      >
+        {yearLabel}
+      </button>
+    </div>
+
+    <div class="flex items-center gap-1">
+      <button
+        type="button"
+        class={arrowButtonBase}
+        aria-label="Previous"
+        onclick={() => shift(-1)}
+        disabled={disabled}
+      >
+        ▲
+      </button>
+      <button
+        type="button"
+        class={arrowButtonBase}
+        aria-label="Next"
+        onclick={() => shift(1)}
+        disabled={disabled}
+      >
+        ▼
+      </button>
+    </div>
+  </div>
+
+  {#if viewMode === "days"}
+    <div
+      class={cx("text-center", TEXT.xs)}
+      style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--spacing-xs);"
+    >
+      {#each weekdayLabels as label, i (i)}
+        <div class="py-[var(--spacing-xs)] [color:var(--color-text-muted)]">
+          {label}
+        </div>
+      {/each}
+    </div>
+
+    <div
+      style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--spacing-xs); margin-top: var(--spacing-xs);"
+    >
+      {#each days as cell (cell.iso)}
+        <button
+          type="button"
+          class={cx(
+            dayButtonBase,
+            cell.isSelected &&
+              "bg-[var(--color-bg-primary)] text-white hover:brightness-110",
+            !cell.isSelected && "text-[var(--color-text-default)]",
+            cell.isToday &&
+              !cell.isSelected &&
+              "border border-[var(--border-color-primary)]",
+            !cell.inMonth && "text-[var(--color-text-muted)]",
+            cell.isDisabled &&
+              "opacity-[var(--opacity-disabled)] cursor-not-allowed",
+            !cell.isDisabled && "hover:bg-[var(--color-bg-hover)]"
+          )}
+          style="width: 22px; height: 22px; justify-self: center;"
+          aria-pressed={cell.isSelected}
+          aria-current={cell.isToday ? "date" : undefined}
+          aria-label={dayLabelFormatter.format(cell.date)}
+          disabled={cell.isDisabled}
+          onclick={() => selectDay(cell)}
+        >
+          {#if cell.inMonth || showOutsideDays}
+            {cell.date.getDate()}
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {:else if viewMode === "months"}
+    <div
+      style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-sm);"
+    >
+      {#each monthOptions as month (month.index)}
+        <button
+          type="button"
+          class={cx(
+            "rounded-[var(--radius-md)] text-center transition-colors",
+            TEXT.xs,
+            month.index === viewDate.getMonth() &&
+              "bg-[var(--color-bg-primary)] text-white",
+            month.index !== viewDate.getMonth() &&
+              "text-[var(--color-text-default)] hover:bg-[var(--color-bg-hover)]",
+            disabled && "opacity-[var(--opacity-disabled)] cursor-not-allowed"
+          )}
+          style="height: 22px; width: 22px;"
+          onclick={() => selectMonth(month.index)}
+          disabled={disabled}
+        >
+          {month.label}
+        </button>
+      {/each}
+    </div>
+  {:else}
+    <div
+      style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-sm);"
+    >
+      {#each yearOptions as year (year)}
+        <button
+          type="button"
+          class={cx(
+            "rounded-[var(--radius-md)] text-center transition-colors",
+            TEXT.xs,
+            year === viewDate.getFullYear() &&
+              "bg-[var(--color-bg-primary)] text-white",
+            year !== viewDate.getFullYear() &&
+              "text-[var(--color-text-default)] hover:bg-[var(--color-bg-hover)]",
+            disabled && "opacity-[var(--opacity-disabled)] cursor-not-allowed"
+          )}
+          style="height: 22px; width: 22px;"
+          onclick={() => selectYear(year)}
+          disabled={disabled}
+        >
+          {year}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,43 @@
+/**
+   * @component Calendar
+   * @description Monthly calendar grid with navigation and date selection.
+   *
+   * @prop value {string | null} - Selected date in ISO `YYYY-MM-DD` (bindable)
+   * @default null
+   *
+   * @prop min {string} - Minimum selectable date (ISO `YYYY-MM-DD`)
+   *
+   * @prop max {string} - Maximum selectable date (ISO `YYYY-MM-DD`)
+   *
+   * @prop locale {string} - Locale used for month/day labels
+   * @default "en-US"
+   *
+   * @prop weekStartsOn {0|1|2|3|4|5|6} - First day of week (0=Sun ... 6=Sat)
+   * @default 1
+   *
+   * @prop showOutsideDays {boolean} - Render days from adjacent months
+   * @default true
+   *
+   * @prop disabled {boolean} - Disables selection and navigation
+   * @default false
+   *
+   * @prop onChange {(value: string | null) => void} - Fired on date selection
+   *
+   * @prop class {string} - Additional classes for the root wrapper
+   * @default ""
+   */
+import type { HTMLAttributes } from "svelte/elements";
+type Props = HTMLAttributes<HTMLDivElement> & {
+    value?: string | null;
+    min?: string;
+    max?: string;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    showOutsideDays?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string | null) => void;
+    class?: string;
+};
+declare const Calendar: import("svelte").Component<Props, {}, "value">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/lib/CodeView.svelte

@@ -146,12 +146,12 @@
 </script>
 
 <div
-  class={cx(
-    "cv-root w-full h-full min-h-0 flex flex-col border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]",
-    "text-[var(--color-text-default)]",
-    externalClass
-  )}
->
+  class={cx(
+    "cv-root w-full h-full min-h-0 flex flex-col border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]",
+    "text-[var(--color-text-default)]",
+    externalClass
+  )}
+>
   {#if title}
     <div
       class={cx(
@@ -176,29 +176,29 @@
     </div>
   {/if}
 
-  <div
-    class={cx(
-      "cv-body flex flex-1 min-h-0 font-mono",
-      TEXT[sz],
-      LINE_HEIGHT[sz]
-    )}
-  >
-    {#if showLineNumbers}
-      <div
-        bind:this={gutterEl}
-        class={cx(
-          "select-none px-3 py-[12px] border-r border-[var(--border-color-default)]",
-          "text-[var(--color-text-muted)] text-right overflow-hidden",
-          "cv-gutter bg-[var(--color-bg-surface)] tabular-nums h-full min-h-0"
-        )}
-      >
-        {#each lines as _, i (i)}
-          <div class={LINE_HEIGHT[sz]}>{i + 1}</div>
-        {/each}
-      </div>
-    {/if}
-
-    <div class="cv-editor relative flex-1 min-h-0">
+  <div
+    class={cx(
+      "cv-body flex flex-1 min-h-0 font-mono",
+      TEXT[sz],
+      LINE_HEIGHT[sz]
+    )}
+  >
+    {#if showLineNumbers}
+      <div
+        bind:this={gutterEl}
+        class={cx(
+          "select-none px-3 py-[12px] border-r border-[var(--border-color-default)]",
+          "text-[var(--color-text-muted)] text-right overflow-hidden",
+          "cv-gutter bg-[var(--color-bg-surface)] tabular-nums h-full min-h-0"
+        )}
+      >
+        {#each lines as _, i (i)}
+          <div class={LINE_HEIGHT[sz]}>{i + 1}</div>
+        {/each}
+      </div>
+    {/if}
+
+    <div class="cv-editor relative flex-1 min-h-0">
       <div
         bind:this={highlightEl}
         class={cx("cv-highlight cv-layer", TEXT[sz], LINE_HEIGHT[sz])}

package/dist/lib/ColorPicker.svelte

@@ -28,10 +28,9 @@
    * @note `clearable=false` hides the clear button; when `disabled`, pointer/keyboard handlers are skipped.
    */
   import type { HTMLAttributes } from "svelte/elements";
-  import { getContext } from "svelte";
-  import Button from "./Button.svelte";
-  import { cx } from "../utils";
-  import { TEXTS } from "./lang";
+  import Button from "./Button.svelte";
+  import { cx } from "../utils";
+  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
     value?: string | null;
@@ -54,10 +53,9 @@
     ...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.colorPicker);
+  const langCtx = getLangContext();
+  const langKey = $derived(getLangKey(langCtx));
+  const L = $derived(getComponentText("colorPicker", langKey));
 
   const labelFinal = $derived(label ?? L.text);
   const placeholderFinal = $derived(placeholder ?? L.placeholder);