@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/components/Wizard/Wizard.css

@@ -0,0 +1,109 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Wizard-root-1d649 {
+    gap: var(--sti-space-5);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+    container-type: inline-size;
+  }
+
+  .sti-Wizard-flowTitle-8e5f3 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-2xl);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-2xl);
+    letter-spacing: var(--sti-tracking-2xl);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-Wizard-steps-f8fac {
+    min-inline-size: 0;
+  }
+
+  .sti-Wizard-card-79246 {
+    gap: var(--sti-space-4);
+    min-inline-size: 0;
+    padding: var(--sti-space-6);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    display: grid;
+  }
+
+  .sti-Wizard-head-fef14 {
+    gap: var(--sti-space-1);
+    display: grid;
+  }
+
+  .sti-Wizard-counter-4567c {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-xs);
+    margin: 0;
+  }
+
+  .sti-Wizard-title-e5385 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-lg);
+    overflow-wrap: anywhere;
+    outline: none;
+    margin: 0;
+  }
+
+  .sti-Wizard-description-63464 {
+    max-inline-size: 48rem;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-Wizard-body-5eec9 {
+    min-inline-size: 0;
+  }
+
+  .sti-Wizard-footer-f2458 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    flex-wrap: wrap;
+    margin-block-start: var(--sti-space-2);
+    padding-block-start: var(--sti-space-4);
+    display: flex;
+  }
+
+  .sti-Wizard-nav-ee791 {
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    margin-inline-start: auto;
+    display: flex;
+  }
+
+  @container (width <= 29.99rem) {
+    .sti-Wizard-card-79246 {
+      padding: var(--sti-space-4);
+    }
+
+    .sti-Wizard-footer-f2458 {
+      flex-direction: column-reverse;
+      align-items: stretch;
+    }
+
+    .sti-Wizard-nav-ee791 {
+      flex-direction: column-reverse;
+      margin-inline-start: 0;
+    }
+
+    .sti-Wizard-footer-f2458 button {
+      inline-size: 100%;
+    }
+  }
+}

package/dist/components/Wizard/Wizard.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from "react";
+export interface WizardStep {
+  id: string;
+  /** Adımın adı: adım göstergesinde ve adımın başlığında. */
+  title: string;
+  /** Başlığın altında kısa açıklama. */
+  description?: ReactNode;
+  /** Adımın içeriği (genellikle form alanları). */
+  content: ReactNode;
+  /**
+   * İlerlemeden önce denetim: `true` geçer; `false` kalır (alan hatalarını uygulama gösterir);
+   * metin döndürülürse adımın üstünde hata iletisi olarak gösterilir. Sözle de çalışır.
+   */
+  validate?: () => boolean | string | Promise<boolean | string>;
+}
+export interface WizardProps {
+  steps: readonly WizardStep[];
+  /** Akışın adı (zorunlu): "Kampanya oluştur". Bölge bununla adlanır. */
+  title: ReactNode;
+  /** Denetimli adım kimliği. */
+  step?: string;
+  /** Denetimsiz başlangıç adımı; varsayılan ilk adım. */
+  defaultStep?: string;
+  onStepChange?: (id: string) => void;
+  /** Son adımda "Tamamla" (son adımın denetimi geçtikten sonra). Sözle de çalışır. */
+  onComplete: () => void | Promise<void>;
+  /** Verilirse sol altta "Vazgeç". */
+  onCancel?: () => void;
+  /**
+   * Kaldığı yerden devam: verilirse geçerli adımın kimliği oturum deposunda (sessionStorage) bu
+   * anahtarla saklanır; sayfa yenilenince ya da geri gelinince o adımdan sürer. Yalnız adım
+   * kimliği saklanır, form verisi saklanmaz (verinin korunması uygulamanın işidir).
+   */
+  storageKey?: string;
+  nextLabel?: string;
+  backLabel?: string;
+  finishLabel?: string;
+  cancelLabel?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Adımlı iş akışı: üstte adım göstergesi (tamamlanmış adımlara geri dönülebilir), ortada geçerli
+ * adımın başlığı, açıklaması ve içeriği, altta Vazgeç, Geri ve Devam et / Tamamla. İlerlemeden önce
+ * adımın denetimi çalışır (bekleme gösterilir, hata metni adımın üstünde). Adım değişince odak
+ * adımın başlığına taşınır ve "Adım 2 / 4: …" duyurulur. `storageKey` ile kaldığı yerden devam eder.
+ */
+export declare function Wizard({ steps, title, step, defaultStep, onStepChange, onComplete, onCancel, storageKey, nextLabel, backLabel, finishLabel, cancelLabel, className, id }: WizardProps): import("react").JSX.Element | null;

package/dist/components/Wizard/Wizard.js

@@ -0,0 +1,192 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { announce } from "../Alert/announcer.js";
+import { Button } from "../Button/Button.js";
+import { InlineMessage } from "../InlineMessage/InlineMessage.js";
+import { Steps } from "../Steps/Steps.js";
+import Wizard_module_default from "./Wizard.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+// src/components/Wizard/Wizard.tsx
+const STORAGE_PREFIX = "sti-wizard:";
+function readStored(key) {
+	if (!key || typeof window === "undefined") return null;
+	try {
+		return window.sessionStorage.getItem(STORAGE_PREFIX + key);
+	} catch {
+		return null;
+	}
+}
+function writeStored(key, value) {
+	if (!key || typeof window === "undefined") return;
+	try {
+		if (value === null) window.sessionStorage.removeItem(STORAGE_PREFIX + key);
+		else window.sessionStorage.setItem(STORAGE_PREFIX + key, value);
+	} catch {}
+}
+/**
+* Adımlı iş akışı: üstte adım göstergesi (tamamlanmış adımlara geri dönülebilir), ortada geçerli
+* adımın başlığı, açıklaması ve içeriği, altta Vazgeç, Geri ve Devam et / Tamamla. İlerlemeden önce
+* adımın denetimi çalışır (bekleme gösterilir, hata metni adımın üstünde). Adım değişince odak
+* adımın başlığına taşınır ve "Adım 2 / 4: …" duyurulur. `storageKey` ile kaldığı yerden devam eder.
+*/
+function Wizard({ steps, title, step, defaultStep, onStepChange, onComplete, onCancel, storageKey, nextLabel, backLabel, finishLabel, cancelLabel, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const titleId = useId();
+	const heading = useRef(null);
+	const firstId = steps[0]?.id ?? "";
+	const valid = (s) => s && steps.some((x) => x.id === s) ? s : void 0;
+	const [internal, setInternal] = useState(() => valid(defaultStep) ?? firstId);
+	const [resumed, setResumed] = useState(false);
+	const [pending, setPending] = useState(false);
+	const [error, setError] = useState(null);
+	const moved = useRef(false);
+	const current = valid(step) ?? internal;
+	const index = Math.max(0, steps.findIndex((s) => s.id === current));
+	const active = steps[index];
+	const isLast = index === steps.length - 1;
+	useEffect(() => {
+		if (step !== void 0) return;
+		const stored = valid(readStored(storageKey));
+		if (stored && stored !== internal) {
+			setInternal(stored);
+			setResumed(true);
+			announce(t.wizardResumed);
+		}
+	}, []);
+	useEffect(() => {
+		writeStored(storageKey, current);
+	}, [storageKey, current]);
+	useEffect(() => {
+		if (!moved.current) return;
+		heading.current?.focus();
+		if (active) announce(template(t.wizardStep, {
+			current: f.number(index + 1),
+			total: f.number(steps.length),
+			title: active.title
+		}));
+	}, [current]);
+	const go = (next) => {
+		moved.current = true;
+		setError(null);
+		setResumed(false);
+		if (step === void 0) setInternal(next);
+		onStepChange?.(next);
+	};
+	const proceed = async () => {
+		if (!active || pending) return;
+		setError(null);
+		setPending(true);
+		try {
+			const result = active.validate ? await active.validate() : true;
+			if (result !== true) {
+				if (typeof result === "string") setError(result);
+				return;
+			}
+			if (isLast) {
+				await onComplete();
+				writeStored(storageKey, null);
+			} else {
+				const next = steps[index + 1];
+				if (next) go(next.id);
+			}
+		} catch {
+			setError(t.errorGeneric);
+		} finally {
+			setPending(false);
+		}
+	};
+	if (!active) return null;
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-labelledby": titleId,
+		className: [Wizard_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				id: titleId,
+				className: Wizard_module_default.flowTitle,
+				children: title
+			}),
+			/* @__PURE__ */ jsx(Steps, {
+				steps: steps.map((s) => ({
+					id: s.id,
+					label: s.title
+				})),
+				currentStep: current,
+				onStepChange: (target) => {
+					if (!pending && target !== current) go(target);
+				},
+				className: Wizard_module_default.steps
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: Wizard_module_default.card,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: Wizard_module_default.head,
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: Wizard_module_default.counter,
+								children: template(t.stepCount, {
+									current: f.number(index + 1),
+									total: f.number(steps.length)
+								})
+							}),
+							/* @__PURE__ */ jsx("h3", {
+								ref: heading,
+								className: Wizard_module_default.title,
+								tabIndex: -1,
+								children: active.title
+							}),
+							active.description ? /* @__PURE__ */ jsx("p", {
+								className: Wizard_module_default.description,
+								children: active.description
+							}) : null
+						]
+					}),
+					resumed ? /* @__PURE__ */ jsx(InlineMessage, {
+						tone: "info",
+						size: "sm",
+						children: t.wizardResumed
+					}) : null,
+					error ? /* @__PURE__ */ jsx(InlineMessage, {
+						tone: "danger",
+						live: true,
+						children: error
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						className: Wizard_module_default.body,
+						children: active.content
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: Wizard_module_default.footer,
+						children: [onCancel ? /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							onPress: onCancel,
+							className: Wizard_module_default.cancel,
+							children: cancelLabel ?? t.wizardCancel
+						}) : null, /* @__PURE__ */ jsxs("div", {
+							className: Wizard_module_default.nav,
+							children: [index > 0 ? /* @__PURE__ */ jsx(Button, {
+								variant: "secondary",
+								isDisabled: pending,
+								onPress: () => {
+									const prev = steps[index - 1];
+									if (prev) go(prev.id);
+								},
+								children: backLabel ?? t.back
+							}) : null, /* @__PURE__ */ jsx(Button, {
+								variant: "primary",
+								isPending: pending,
+								onPress: proceed,
+								children: isLast ? finishLabel ?? t.wizardFinish : nextLabel ?? t.wizardNext
+							})]
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+export { Wizard };

package/dist/components/Wizard/Wizard.module.js

@@ -0,0 +1,16 @@
+import './Wizard.css';
+// src/components/Wizard/Wizard.module.css
+var Wizard_module_default = {
+	"root": "sti-Wizard-root-1d649",
+	"flowTitle": "sti-Wizard-flowTitle-8e5f3",
+	"steps": "sti-Wizard-steps-f8fac",
+	"card": "sti-Wizard-card-79246",
+	"head": "sti-Wizard-head-fef14",
+	"counter": "sti-Wizard-counter-4567c",
+	"title": "sti-Wizard-title-e5385",
+	"description": "sti-Wizard-description-63464",
+	"body": "sti-Wizard-body-5eec9",
+	"footer": "sti-Wizard-footer-f2458",
+	"nav": "sti-Wizard-nav-ee791"
+};
+export { Wizard_module_default as default };

package/dist/components/Wizard/index.d.ts

@@ -0,0 +1,2 @@
+import { Wizard, WizardProps, WizardStep } from "./Wizard.js";
+export { Wizard, WizardProps, WizardStep };

package/dist/components/WorkingHoursEditor/WorkingHoursEditor.css

@@ -0,0 +1,82 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-WorkingHoursEditor-root-ee1bd {
+    inline-size: 100%;
+    min-inline-size: 0;
+    container-type: inline-size;
+  }
+
+  .sti-WorkingHoursEditor-toolbar-1d9db {
+    justify-content: flex-end;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-WorkingHoursEditor-toolbar-1d9db > * {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+
+  .sti-WorkingHoursEditor-days-c24b9 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-WorkingHoursEditor-day-05e84 {
+    gap: var(--sti-space-2);
+    padding-block: var(--sti-space-3);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    grid-template-columns: minmax(0, 1fr);
+    display: grid;
+  }
+
+  .sti-WorkingHoursEditor-day-05e84:first-child {
+    border-block-start: 0;
+  }
+
+  @container (inline-size >= 34rem) {
+    .sti-WorkingHoursEditor-day-05e84 {
+      grid-template-columns: 11rem minmax(0, 1fr);
+      align-items: start;
+    }
+  }
+
+  .sti-WorkingHoursEditor-dayHead-b8abe {
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-block-size: var(--sti-control-h-sm);
+    display: flex;
+  }
+
+  .sti-WorkingHoursEditor-closed-89d73 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  .sti-WorkingHoursEditor-ranges-fc7d4 {
+    justify-items: start;
+    gap: var(--sti-space-2);
+    display: grid;
+  }
+
+  .sti-WorkingHoursEditor-range-712ee {
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-WorkingHoursEditor-time-a0b61 {
+    inline-size: auto;
+  }
+
+  .sti-WorkingHoursEditor-dash-0658d {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-WorkingHoursEditor-add-06cdf {
+    margin-inline-start: calc(var(--sti-space-3) * -1);
+  }
+}

package/dist/components/WorkingHoursEditor/WorkingHoursEditor.d.ts

@@ -0,0 +1,24 @@
+import { WorkingHours } from "./workingHours.js";
+import { ReactNode } from "react";
+export interface WorkingHoursEditorProps {
+  /** Grup başlığı; verilmezse "Çalışma saatleri". */
+  legend?: ReactNode;
+  description?: ReactNode;
+  value?: WorkingHours;
+  defaultValue?: WorkingHours;
+  onChange?: (value: WorkingHours) => void;
+  /** Bir günde en çok aralık. Varsayılan 3. */
+  maxRanges?: number;
+  /** Form alanı adı: değer JSON olarak gönderilir. */
+  name?: string;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Çalışma saatleri düzenleyici: her gün için açık/kapalı anahtarı ve bir ya da birden çok saat
+ * aralığı (öğle arası için). Aralık eklenir ve kaldırılır; pazartesinin saatleri hafta içine
+ * kopyalanabilir. Bitişin başlangıçtan önce olması ve çakışan aralıklar günün altında yazılır.
+ * Değer gün başına aralık listesidir (kapalı gün boş liste).
+ */
+export declare function WorkingHoursEditor({ legend, description, value, defaultValue, onChange, maxRanges, name, isDisabled, className, id }: WorkingHoursEditorProps): import("react").JSX.Element;

package/dist/components/WorkingHoursEditor/WorkingHoursEditor.js

@@ -0,0 +1,197 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
+import { fieldStyles } from "../Field/Field.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Fieldset } from "../Fieldset/Fieldset.js";
+import { Button as Button$1 } from "../Button/Button.js";
+import { fromValue, toTime } from "../_internal/date/iso.js";
+import { CopyIcon } from "../../icons/generated/CopyIcon.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { DateBox, Segments } from "../_internal/date/DateBox.js";
+import { TrashIcon } from "../../icons/generated/TrashIcon.js";
+import { Switch } from "../Switch/Switch.js";
+import WorkingHoursEditor_module_default from "./WorkingHoursEditor.module.js";
+import { DEFAULT_WORKING_HOURS, WEEKDAYS, dayProblem } from "./workingHours.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+import { I18nProvider, TimeField } from "react-aria-components";
+// src/components/WorkingHoursEditor/WorkingHoursEditor.tsx
+/** Pazartesi 2024-01-01'dir: gün adları dile göre buradan üretilir. */
+const MONDAY = Date.UTC(2024, 0, 1);
+/**
+* Çalışma saatleri düzenleyici: her gün için açık/kapalı anahtarı ve bir ya da birden çok saat
+* aralığı (öğle arası için). Aralık eklenir ve kaldırılır; pazartesinin saatleri hafta içine
+* kopyalanabilir. Bitişin başlangıçtan önce olması ve çakışan aralıklar günün altında yazılır.
+* Değer gün başına aralık listesidir (kapalı gün boş liste).
+*/
+function WorkingHoursEditor({ legend, description, value, defaultValue = DEFAULT_WORKING_HOURS, onChange, maxRanges = 3, name, isDisabled, className, id }) {
+	const locale = useLocale();
+	const t = useMessages();
+	const uid = useId();
+	const [inner, setInner] = useState(defaultValue);
+	const current = value ?? inner;
+	const [memory, setMemory] = useState({});
+	const dayNames = useMemo(() => {
+		const fmt = new Intl.DateTimeFormat(locale, {
+			weekday: "long",
+			timeZone: "UTC"
+		});
+		return Object.fromEntries(WEEKDAYS.map((d, i) => [d, fmt.format(new Date(MONDAY + i * 864e5))]));
+	}, [locale]);
+	const update = (next) => {
+		if (value === void 0) setInner(next);
+		onChange?.(next);
+	};
+	const setDay = (day, ranges) => update({
+		...current,
+		[day]: ranges
+	});
+	const problems = {
+		order: t.workingHoursOrder,
+		overlap: t.workingHoursOverlap,
+		invalid: t.workingHoursInvalid
+	};
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale,
+		children: /* @__PURE__ */ jsxs(Fieldset, {
+			legend: legend ?? t.workingHoursLabel,
+			description,
+			isDisabled,
+			className: [WorkingHoursEditor_module_default.root, className].filter(Boolean).join(" "),
+			id,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: WorkingHoursEditor_module_default.toolbar,
+					children: /* @__PURE__ */ jsx(Button$1, {
+						variant: "ghost",
+						size: "sm",
+						iconStart: /* @__PURE__ */ jsx(CopyIcon, {}),
+						isDisabled,
+						onPress: () => update({
+							...current,
+							tue: current.mon.map((r) => ({ ...r })),
+							wed: current.mon.map((r) => ({ ...r })),
+							thu: current.mon.map((r) => ({ ...r })),
+							fri: current.mon.map((r) => ({ ...r }))
+						}),
+						children: template(t.workingHoursCopy, { day: dayNames.mon })
+					})
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					className: WorkingHoursEditor_module_default.days,
+					children: WEEKDAYS.map((day) => {
+						const ranges = current[day] ?? [];
+						const open = ranges.length > 0;
+						const problem = dayProblem(ranges);
+						const errId = `${uid}-${day}-err`;
+						return /* @__PURE__ */ jsxs("li", {
+							className: WorkingHoursEditor_module_default.day,
+							"data-open": open || void 0,
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: WorkingHoursEditor_module_default.dayHead,
+								children: [/* @__PURE__ */ jsx(Switch, {
+									isSelected: open,
+									isDisabled,
+									onChange: (on) => {
+										if (on) setDay(day, memory[day]?.length ? memory[day] : [{
+											start: "09:00",
+											end: "18:00"
+										}]);
+										else {
+											setMemory((m) => ({
+												...m,
+												[day]: ranges
+											}));
+											setDay(day, []);
+										}
+									},
+									children: dayNames[day]
+								}), open ? null : /* @__PURE__ */ jsx("span", {
+									className: WorkingHoursEditor_module_default.closed,
+									children: t.workingHoursClosed
+								})]
+							}), open ? /* @__PURE__ */ jsxs("div", {
+								className: WorkingHoursEditor_module_default.ranges,
+								children: [
+									ranges.map((r, i) => {
+										const edit = (patch) => setDay(day, ranges.map((x, j) => j === i ? {
+											...x,
+											...patch
+										} : x));
+										const field = (key, label) => /* @__PURE__ */ jsx(TimeField, {
+											"aria-label": `${dayNames[day]} ${label} ${ranges.length > 1 ? i + 1 : ""}`.trim(),
+											"aria-describedby": problem ? errId : void 0,
+											value: toTime(r[key]),
+											onChange: (v) => {
+												if (v) edit({ [key]: fromValue(v) ?? r[key] });
+											},
+											hourCycle: 24,
+											isDisabled,
+											isInvalid: Boolean(problem),
+											className: [fieldStyles.root, WorkingHoursEditor_module_default.time].join(" "),
+											"data-size": "md",
+											children: /* @__PURE__ */ jsx(DateBox, { children: /* @__PURE__ */ jsx(Segments, {}) })
+										});
+										return /* @__PURE__ */ jsxs("div", {
+											className: WorkingHoursEditor_module_default.range,
+											children: [
+												field("start", t.workingHoursStart),
+												/* @__PURE__ */ jsx("span", {
+													className: WorkingHoursEditor_module_default.dash,
+													"aria-hidden": "true",
+													children: "–"
+												}),
+												field("end", t.workingHoursEnd),
+												/* @__PURE__ */ jsx(IconButton, {
+													label: template(t.workingHoursRemove, {
+														day: dayNames[day],
+														start: r.start,
+														end: r.end
+													}),
+													icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+													variant: "ghost",
+													size: "sm",
+													isDisabled,
+													onPress: () => setDay(day, ranges.filter((_, j) => j !== i))
+												})
+											]
+										}, i);
+									}),
+									ranges.length < maxRanges ? /* @__PURE__ */ jsx(Button$1, {
+										variant: "ghost",
+										size: "sm",
+										iconStart: /* @__PURE__ */ jsx(PlusIcon, {}),
+										isDisabled,
+										className: WorkingHoursEditor_module_default.add,
+										onPress: () => {
+											const start = ranges[ranges.length - 1]?.end ?? "09:00";
+											const h = Math.min(23, Number(start.slice(0, 2)) + 1);
+											setDay(day, [...ranges, {
+												start,
+												end: `${String(h).padStart(2, "0")}:${start.slice(3)}`
+											}]);
+										},
+										children: template(t.workingHoursAdd, { day: dayNames[day] })
+									}) : null,
+									problem ? /* @__PURE__ */ jsxs("span", {
+										id: errId,
+										className: fieldStyles.error,
+										children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: fieldStyles.errorIcon }), /* @__PURE__ */ jsx("span", { children: problems[problem] })]
+									}) : null
+								]
+							}) : null]
+						}, day);
+					})
+				}),
+				name ? /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value: JSON.stringify(current)
+				}) : null
+			]
+		})
+	});
+}
+export { WorkingHoursEditor };

package/dist/components/WorkingHoursEditor/WorkingHoursEditor.module.js

@@ -0,0 +1,16 @@
+import './WorkingHoursEditor.css';
+// src/components/WorkingHoursEditor/WorkingHoursEditor.module.css
+var WorkingHoursEditor_module_default = {
+	"root": "sti-WorkingHoursEditor-root-ee1bd",
+	"toolbar": "sti-WorkingHoursEditor-toolbar-1d9db",
+	"days": "sti-WorkingHoursEditor-days-c24b9",
+	"day": "sti-WorkingHoursEditor-day-05e84",
+	"dayHead": "sti-WorkingHoursEditor-dayHead-b8abe",
+	"closed": "sti-WorkingHoursEditor-closed-89d73",
+	"ranges": "sti-WorkingHoursEditor-ranges-fc7d4",
+	"range": "sti-WorkingHoursEditor-range-712ee",
+	"time": "sti-WorkingHoursEditor-time-a0b61",
+	"dash": "sti-WorkingHoursEditor-dash-0658d",
+	"add": "sti-WorkingHoursEditor-add-06cdf"
+};
+export { WorkingHoursEditor_module_default as default };