@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/components/MonthPicker/MonthPicker.js

@@ -0,0 +1,73 @@
+"use client";
+import { useFormatter, useLocale, useMessages } from "../../provider/UIProvider.js";
+import { todayIn } from "../_internal/date/iso.js";
+import { PeriodGrid } from "../_internal/period/PeriodGrid.js";
+import { PeriodShell } from "../_internal/period/PeriodShell.js";
+import { formatMonth, monthIndex, parseMonth } from "../_internal/period/periods.js";
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+// src/components/MonthPicker/MonthPicker.tsx
+/**
+* Ay seçici: düğme seçili ayı yazar ("Kasım 2026"); katmanda yıl ve on iki ay ızgarası. Oklar
+* iki yönde gezer, önceki/sonraki yıl düğmeleri yıl değiştirir, Enter seçer ve kapatır. Bu ay
+* turkuaz yazılıdır. Değer ISO ayıdır ("2026-11").
+*/
+function MonthPicker({ value, defaultValue, onChange, minValue, maxValue, ...rest }) {
+	const locale = useLocale();
+	const t = useMessages();
+	const timeZone = useFormatter().context.timeZone;
+	const today = todayIn(timeZone);
+	const [inner, setInner] = useState(defaultValue ?? null);
+	const current = parseMonth(value === void 0 ? inner : value);
+	const [year, setYear] = useState(current?.year ?? today.year);
+	const min = parseMonth(minValue);
+	const max = parseMonth(maxValue);
+	const names = useMemo(() => ({
+		short: new Intl.DateTimeFormat(locale, {
+			month: "long",
+			timeZone: "UTC"
+		}),
+		long: new Intl.DateTimeFormat(locale, {
+			month: "long",
+			year: "numeric",
+			timeZone: "UTC"
+		})
+	}), [locale]);
+	const nameOf = (y, m) => names.long.format(new Date(Date.UTC(y, m - 1, 1)));
+	const items = Array.from({ length: 12 }, (_, i) => {
+		const p = {
+			year,
+			month: i + 1
+		};
+		const idx = monthIndex(p);
+		return {
+			id: formatMonth(p),
+			label: names.short.format(new Date(Date.UTC(year, i, 1))),
+			fullLabel: nameOf(year, i + 1),
+			isDisabled: Boolean(min && idx < monthIndex(min) || max && idx > monthIndex(max)),
+			isCurrent: year === today.year && i + 1 === today.month
+		};
+	});
+	return /* @__PURE__ */ jsx(PeriodShell, {
+		...rest,
+		value: current ? formatMonth(current) : null,
+		text: current ? nameOf(current.year, current.month) : null,
+		children: (close) => /* @__PURE__ */ jsx(PeriodGrid, {
+			heading: String(year),
+			previousLabel: t.previousYear,
+			nextLabel: t.nextYear,
+			onPrevious: () => setYear((y) => y - 1),
+			onNext: () => setYear((y) => y + 1),
+			canPrevious: !min || year > min.year,
+			canNext: !max || year < max.year,
+			items,
+			selected: current ? formatMonth(current) : null,
+			onSelect: (id) => {
+				if (value === void 0) setInner(id);
+				onChange?.(id);
+				close();
+			}
+		})
+	});
+}
+export { MonthPicker };

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

@@ -0,0 +1,2 @@
+import { MonthPicker, MonthPickerProps } from "./MonthPicker.js";
+export { MonthPicker, MonthPickerProps };

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,13 @@
+import { SelectBaseProps } from "../_internal/listbox/SelectShell.js";
+export interface MultiSelectProps extends SelectBaseProps {
+  value?: readonly string[];
+  defaultValue?: readonly string[];
+  onChange?: (value: string[]) => void;
+  validate?: (value: string[]) => string | string[] | true | null | undefined;
+}
+/**
+ * Çoklu seçim listesi: Select gibi açılır; seçenekler onay kutulu, liste seçimde kapanmaz. Düğme
+ * seçilenleri dile göre birleştirerek yazar ("Ankara, İzmir ve Bursa"); sığmazsa üç nokta.
+ * Form her seçili anahtarı aynı adla gönderir.
+ */
+export declare function MultiSelect({ value, defaultValue, onChange, validate, name, autoComplete, isRequired, isDisabled, isInvalid, isOpen, defaultOpen, onOpenChange, autoFocus, id, ...rest }: MultiSelectProps): import("react").JSX.Element;

package/dist/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,33 @@
+"use client";
+import { SelectShell } from "../_internal/listbox/SelectShell.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/MultiSelect/MultiSelect.tsx
+/**
+* Çoklu seçim listesi: Select gibi açılır; seçenekler onay kutulu, liste seçimde kapanmaz. Düğme
+* seçilenleri dile göre birleştirerek yazar ("Ankara, İzmir ve Bursa"); sığmazsa üç nokta.
+* Form her seçili anahtarı aynı adla gönderir.
+*/
+function MultiSelect({ value, defaultValue, onChange, validate, name, autoComplete, isRequired, isDisabled, isInvalid, isOpen, defaultOpen, onOpenChange, autoFocus, id, ...rest }) {
+	return /* @__PURE__ */ jsx(SelectShell, {
+		...rest,
+		multiple: true,
+		ariaProps: {
+			value,
+			defaultValue,
+			onChange: onChange ? (keys) => onChange(keys.map(String)) : void 0,
+			validate: validate ? (keys) => validate(keys.map(String)) : void 0,
+			name,
+			autoComplete,
+			isRequired,
+			isDisabled,
+			isInvalid,
+			isOpen,
+			defaultOpen,
+			onOpenChange,
+			autoFocus,
+			id,
+			validationBehavior: "native"
+		}
+	});
+}
+export { MultiSelect };

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

@@ -0,0 +1,2 @@
+import { MultiSelect, MultiSelectProps } from "./MultiSelect.js";
+export { MultiSelect, MultiSelectProps };

package/dist/components/NaceCodeSelect/NaceCodeSelect.d.ts

@@ -0,0 +1,23 @@
+import { ListOption } from "../_internal/listbox/options.js";
+import { OptionSearch, RemoteComboboxProps } from "../_internal/remote/RemoteCombobox.js";
+import { ReactNode } from "react";
+export interface NaceCodeSelectProps extends Omit<RemoteComboboxProps, "label" | "load" | "parent" | "waitingText" | "search"> {
+  /** Görünür etiket; verilmezse "Faaliyet kodu (NACE)". */
+  label?: ReactNode;
+  /**
+   * Kod ya da ada göre arar: `(sorgu, signal) => Promise<{ id: "62.01.01", label, description? }[]>`.
+   * NACE Rev.2 Türkiye listesi binlerce kayıttır ve güncellenir; sunucuda aranır.
+   */
+  searchNace: OptionSearch;
+  /** Başlangıçtaki seçili faaliyet (adının yazılabilmesi için). */
+  selectedOption?: ListOption;
+}
+/** "620101", "62.01.01" ve "62 01 01" aynı koddur: aramada noktalı biçime çevrilir. */
+export declare function normalizeNaceQuery(query: string): string;
+/**
+ * NACE faaliyet kodu seçimi: kod ("62.01", "620101") ya da faaliyet adıyla ("yazılım") sunucuda
+ * aranır; en az 2 karakterden sonra istek atılır, yazarken istekler seyreltilir ve eskisi iptal
+ * edilir. Seçenek faaliyet adı ve koduyla yazar. Değer koddur.
+ */
+export declare function NaceCodeSelect({ label, searchNace, ...rest }: NaceCodeSelectProps): import("react").JSX.Element;
+export type { OptionSearch };

package/dist/components/NaceCodeSelect/NaceCodeSelect.js

@@ -0,0 +1,26 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { RemoteCombobox } from "../_internal/remote/RemoteCombobox.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/NaceCodeSelect/NaceCodeSelect.tsx
+/** "620101", "62.01.01" ve "62 01 01" aynı koddur: aramada noktalı biçime çevrilir. */
+function normalizeNaceQuery(query) {
+	const q = query.trim();
+	const digits = q.replace(/[\s.]/g, "");
+	if (/^\d{2,6}$/.test(digits)) return digits.replace(/(\d{2})(?=\d)/g, "$1.");
+	return q;
+}
+/**
+* NACE faaliyet kodu seçimi: kod ("62.01", "620101") ya da faaliyet adıyla ("yazılım") sunucuda
+* aranır; en az 2 karakterden sonra istek atılır, yazarken istekler seyreltilir ve eskisi iptal
+* edilir. Seçenek faaliyet adı ve koduyla yazar. Değer koddur.
+*/
+function NaceCodeSelect({ label, searchNace, ...rest }) {
+	const t = useMessages();
+	return /* @__PURE__ */ jsx(RemoteCombobox, {
+		...rest,
+		label: label ?? t.naceLabel,
+		search: (q, signal) => searchNace(normalizeNaceQuery(q), signal)
+	});
+}
+export { NaceCodeSelect, normalizeNaceQuery };

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

@@ -0,0 +1,3 @@
+import { OptionSearch } from "../_internal/remote/RemoteCombobox.js";
+import { NaceCodeSelect, NaceCodeSelectProps, normalizeNaceQuery } from "./NaceCodeSelect.js";
+export { NaceCodeSelect, NaceCodeSelectProps, type OptionSearch, normalizeNaceQuery };

package/dist/components/NavRail/NavRail.css

@@ -0,0 +1,116 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-NavRail-root-ad81b {
+    align-items: stretch;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    max-block-size: 100%;
+    inline-size: 5rem;
+    padding-block: var(--sti-space-3);
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-NavRail-header-c4b4e, .sti-NavRail-footer-5f64e {
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-direction: column;
+    flex: none;
+    display: flex;
+  }
+
+  .sti-NavRail-footer-5f64e {
+    margin-block-start: auto;
+  }
+
+  .sti-NavRail-list-16c12 {
+    gap: var(--sti-space-2);
+    min-block-size: 0;
+    padding: 0 var(--sti-space-1);
+    scrollbar-width: none;
+    flex: 0 auto;
+    margin: 0;
+    list-style: none;
+    display: grid;
+    overflow-y: auto;
+  }
+
+  .sti-NavRail-item-67243 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    padding-block: var(--sti-space-1);
+    border-radius: var(--sti-radius-md);
+    color: var(--sti-fg-muted);
+    cursor: pointer;
+    outline: none;
+    flex-direction: column;
+    text-decoration: none;
+    display: flex;
+  }
+
+  .sti-NavRail-indicator-b9127 {
+    border-radius: var(--sti-radius-pill);
+    block-size: 2rem;
+    inline-size: 3.5rem;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap);
+    place-items: center;
+    display: grid;
+    position: relative;
+  }
+
+  .sti-NavRail-icon-4a02e {
+    font-size: var(--sti-icon-md);
+    display: inline-flex;
+    position: relative;
+  }
+
+  .sti-NavRail-label-f0088 {
+    max-inline-size: 100%;
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-xs);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  @media (hover: hover) {
+    .sti-NavRail-item-67243[data-hovered]:not([data-current], [data-disabled]) {
+      color: var(--sti-fg);
+    }
+
+    .sti-NavRail-item-67243[data-hovered]:not([data-current], [data-disabled]) .sti-NavRail-indicator-b9127 {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-NavRail-item-67243[data-current] {
+    color: var(--sti-fg-accent-strong);
+  }
+
+  .sti-NavRail-item-67243[data-current] .sti-NavRail-indicator-b9127 {
+    background: var(--sti-bg-accent-subtle);
+  }
+
+  .sti-NavRail-item-67243[data-current] .sti-NavRail-label-f0088 {
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-NavRail-item-67243[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-NavRail-item-67243[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    .sti-NavRail-item-67243[data-current] .sti-NavRail-indicator-b9127 {
+      outline: var(--sti-border-width) solid Highlight;
+    }
+  }
+}

package/dist/components/NavRail/NavRail.d.ts

@@ -0,0 +1,24 @@
+import { NavItem } from "../_internal/nav/NavBadge.js";
+import { ReactNode } from "react";
+export interface NavRailItem extends NavItem {
+  icon: ReactNode;
+}
+export interface NavRailProps {
+  /** 3–7 ana bölüm; her birinin ikonu zorunludur. */
+  items: readonly NavRailItem[];
+  currentId?: string;
+  /** Bölgenin adı; verilmezse "Ana gezinme". */
+  label?: string;
+  /** Üstte logo ya da birincil eylem (ör. "Yeni"). */
+  header?: ReactNode;
+  /** Altta hesap ya da ayarlar. */
+  footer?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * Dar yan çubuk (orta genişlikte ekranlar, araç uygulamaları): her bölüm üstte ikon, altında kısa
+ * ad. Ad her zaman görünür (yalnız ikonlu gezinme tahmin gerektirir). Bulunulan bölüm ikonun
+ * arkasında turkuaz hap ve `aria-current="page"` taşır.
+ */
+export declare function NavRail({ items, currentId, label, header, footer, className, id }: NavRailProps): import("react").JSX.Element;

package/dist/components/NavRail/NavRail.js

@@ -0,0 +1,63 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { NavBadge, NavBadgeText } from "../_internal/nav/NavBadge.js";
+import NavRail_module_default from "./NavRail.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-aria-components";
+// src/components/NavRail/NavRail.tsx
+/**
+* Dar yan çubuk (orta genişlikte ekranlar, araç uygulamaları): her bölüm üstte ikon, altında kısa
+* ad. Ad her zaman görünür (yalnız ikonlu gezinme tahmin gerektirir). Bulunulan bölüm ikonun
+* arkasında turkuaz hap ve `aria-current="page"` taşır.
+*/
+function NavRail({ items, currentId, label, header, footer, className, id }) {
+	const t = useMessages();
+	return /* @__PURE__ */ jsxs("nav", {
+		id,
+		"aria-label": label ?? t.navMain,
+		className: [NavRail_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			header ? /* @__PURE__ */ jsx("div", {
+				className: NavRail_module_default.header,
+				children: header
+			}) : null,
+			/* @__PURE__ */ jsx("ul", {
+				className: NavRail_module_default.list,
+				children: items.map((item) => {
+					const current = item.id === currentId;
+					return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, {
+						href: item.isDisabled ? void 0 : item.href,
+						isDisabled: item.isDisabled,
+						"aria-current": current ? "page" : void 0,
+						"data-current": current || void 0,
+						className: NavRail_module_default.item,
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: NavRail_module_default.indicator,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: NavRail_module_default.icon,
+									"aria-hidden": "true",
+									children: item.icon
+								}), /* @__PURE__ */ jsx(NavBadge, {
+									badge: item.badge,
+									variant: "corner",
+									announce: false
+								})]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: NavRail_module_default.label,
+								children: item.label
+							}),
+							/* @__PURE__ */ jsx(NavBadgeText, { badge: item.badge })
+						]
+					}) }, item.id);
+				})
+			}),
+			footer ? /* @__PURE__ */ jsx("div", {
+				className: NavRail_module_default.footer,
+				children: footer
+			}) : null
+		]
+	});
+}
+export { NavRail };

package/dist/components/NavRail/NavRail.module.js

@@ -0,0 +1,13 @@
+import './NavRail.css';
+// src/components/NavRail/NavRail.module.css
+var NavRail_module_default = {
+	"root": "sti-NavRail-root-ad81b",
+	"header": "sti-NavRail-header-c4b4e",
+	"footer": "sti-NavRail-footer-5f64e",
+	"list": "sti-NavRail-list-16c12",
+	"item": "sti-NavRail-item-67243",
+	"indicator": "sti-NavRail-indicator-b9127",
+	"icon": "sti-NavRail-icon-4a02e",
+	"label": "sti-NavRail-label-f0088"
+};
+export { NavRail_module_default as default };

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

@@ -0,0 +1,3 @@
+import { NavItem } from "../_internal/nav/NavBadge.js";
+import { NavRail, NavRailItem, NavRailProps } from "./NavRail.js";
+export { NavRail, NavRailItem, NavRailProps };

package/dist/components/NeighborhoodSelect/NeighborhoodSelect.d.ts

@@ -0,0 +1,17 @@
+import { OptionLoader } from "../_internal/remote/RemoteCombobox.js";
+import { DependentSelectProps } from "../_internal/remote/DependentSelect.js";
+export interface NeighborhoodSelectProps extends DependentSelectProps {
+  /** Seçili ilçenin anahtarı; yokken alan kapalıdır ve "Önce ilçe seçin." yazar. */
+  district: string | null | undefined;
+  /**
+   * İlçenin mahallelerini (ve köylerini) getirir. Seçeneğin `description` alanı posta kodu
+   * olarak verilirse adın yanında yazılır ve `AddressFields` posta kodunu bununla doldurur.
+   */
+  loadNeighborhoods?: OptionLoader;
+}
+/**
+ * Mahalle seçimi: seçili ilçeye bağlıdır; ilçe değişince seçim sıfırlanır. Mahalleler ilçe başına
+ * yüzlerce olabildiği için Türkçe harf duyarsız aramayla seçilir. Değer uygulamanın mahalle
+ * anahtarıdır.
+ */
+export declare function NeighborhoodSelect({ district, loadNeighborhoods, ...rest }: NeighborhoodSelectProps): import("react").JSX.Element;

package/dist/components/NeighborhoodSelect/NeighborhoodSelect.js

@@ -0,0 +1,21 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { DependentSelect } from "../_internal/remote/DependentSelect.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/NeighborhoodSelect/NeighborhoodSelect.tsx
+/**
+* Mahalle seçimi: seçili ilçeye bağlıdır; ilçe değişince seçim sıfırlanır. Mahalleler ilçe başına
+* yüzlerce olabildiği için Türkçe harf duyarsız aramayla seçilir. Değer uygulamanın mahalle
+* anahtarıdır.
+*/
+function NeighborhoodSelect({ district, loadNeighborhoods, ...rest }) {
+	const t = useMessages();
+	return /* @__PURE__ */ jsx(DependentSelect, {
+		...rest,
+		parent: district,
+		load: loadNeighborhoods,
+		defaultLabel: t.neighborhoodLabel,
+		waitingText: t.selectDistrictFirst
+	});
+}
+export { NeighborhoodSelect };

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

@@ -0,0 +1,2 @@
+import { NeighborhoodSelect, NeighborhoodSelectProps } from "./NeighborhoodSelect.js";
+export { NeighborhoodSelect, NeighborhoodSelectProps };

package/dist/components/NewPasswordField/NewPasswordField.css

@@ -0,0 +1,55 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-NewPasswordField-root-24279 {
+    gap: var(--sti-space-5);
+    grid-template-columns: minmax(0, 1fr);
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-NewPasswordField-details-4a020 {
+    gap: var(--sti-space-2);
+    display: grid;
+  }
+
+  .sti-NewPasswordField-rules-a497d {
+    gap: var(--sti-space-1);
+    display: grid;
+  }
+
+  .sti-NewPasswordField-rule-3d554 {
+    align-items: flex-start;
+    gap: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    transition: color var(--sti-duration-fast) var(--sti-ease-snap);
+    display: flex;
+  }
+
+  .sti-NewPasswordField-rule-3d554[data-met] {
+    color: var(--sti-fg-success-strong);
+  }
+
+  .sti-NewPasswordField-ruleIcon-e6cf1 {
+    font-size: var(--sti-icon-sm);
+    flex: none;
+    margin-block-start: .125em;
+  }
+
+  .sti-NewPasswordField-ruleDot-180b8 {
+    box-sizing: border-box;
+    inline-size: var(--sti-icon-sm);
+    block-size: var(--sti-icon-sm);
+    border-radius: var(--sti-radius-pill);
+    opacity: .6;
+    background: currentColor content-box content-box;
+    flex: none;
+    margin-block-start: .125em;
+    padding: .3em;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-NewPasswordField-rule-3d554 {
+      transition: none;
+    }
+  }
+}

package/dist/components/NewPasswordField/NewPasswordField.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+export interface NewPasswordFieldProps {
+  label: ReactNode;
+  description?: ReactNode;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** En az uzunluk. Varsayılan 10 (STI ID ile aynı). */
+  minLength?: number;
+  /** En çok uzunluk. Varsayılan 128. Yerel `maxlength` kullanılmaz: yapıştırılan şifre kesilmez. */
+  maxLength?: number;
+  /** Kişinin adı, e-postası: şifre bunları içeremez ve güç hesabında kullanılır. */
+  userInputs?: readonly string[];
+  /** Yaygın şifreleri reddeder. Varsayılan açık. */
+  rejectCommon?: boolean;
+  /** Kişisel bilgi içeren şifreleri reddeder (yalnız `userInputs` verilince). Varsayılan açık. */
+  rejectPersonal?: boolean;
+  /** Güç göstergesi. Varsayılan açık. */
+  showStrength?: boolean;
+  /** Tekrar alanı. Varsayılan açık. */
+  confirm?: boolean;
+  confirmLabel?: ReactNode;
+  /** Tekrar alanının form adı (verilmezse gönderilmez). */
+  confirmName?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  /** Sunucu hatası gibi dış hata. */
+  isInvalid?: boolean;
+  errorMessage?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  id?: string;
+}
+/**
+ * Yeni şifre: kurallar listesi (anlık karşılanma durumu), güç göstergesi ve tekrar alanı.
+ * Kurallar NIST SP 800-63B'ye göredir: uzunluk, yaygın şifre ve kişisel bilgi denetimi; karakter
+ * türü zorlaması yoktur. Şifre hiçbir yere gönderilmez; denetim tarayıcıda yapılır.
+ */
+export declare function NewPasswordField({ label, description, name, value, defaultValue, onChange, minLength, maxLength, userInputs, rejectCommon, rejectPersonal, showStrength, confirm, confirmLabel, confirmName, isRequired, isDisabled, isInvalid, errorMessage, size, className, id }: NewPasswordFieldProps): import("react").JSX.Element;

package/dist/components/NewPasswordField/NewPasswordField.js

@@ -0,0 +1,111 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { PasswordField } from "../PasswordField/PasswordField.js";
+import { containsPersonalInfo, isCommonPassword } from "../PasswordStrength/estimate.js";
+import { PasswordStrength } from "../PasswordStrength/PasswordStrength.js";
+import NewPasswordField_module_default from "./NewPasswordField.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+// src/components/NewPasswordField/NewPasswordField.tsx
+/**
+* Yeni şifre: kurallar listesi (anlık karşılanma durumu), güç göstergesi ve tekrar alanı.
+* Kurallar NIST SP 800-63B'ye göredir: uzunluk, yaygın şifre ve kişisel bilgi denetimi; karakter
+* türü zorlaması yoktur. Şifre hiçbir yere gönderilmez; denetim tarayıcıda yapılır.
+*/
+function NewPasswordField({ label, description, name, value, defaultValue, onChange, minLength = 10, maxLength = 128, userInputs = [], rejectCommon = true, rejectPersonal = true, showStrength = true, confirm = true, confirmLabel, confirmName, isRequired, isDisabled, isInvalid, errorMessage, size, className, id }) {
+	const t = useMessages();
+	const [inner, setInner] = useState(defaultValue ?? "");
+	const password = value ?? inner;
+	const input = useRef(null);
+	const setRef = useCallback((el) => {
+		input.current = el;
+	}, []);
+	useEffect(() => {
+		input.current?.setAttribute("passwordrules", `minlength: ${minLength}; maxlength: ${maxLength};`);
+	}, [minLength, maxLength]);
+	const change = (next) => {
+		if (value === void 0) setInner(next);
+		onChange?.(next);
+	};
+	const personalCheck = rejectPersonal && userInputs.length > 0;
+	const length = password.length;
+	const rules = [
+		{
+			key: "length",
+			text: template(t.passwordRuleLength, { min: minLength }),
+			met: length >= minLength
+		},
+		...rejectCommon ? [{
+			key: "common",
+			text: t.passwordRuleCommon,
+			met: length > 0 && !isCommonPassword(password)
+		}] : [],
+		...personalCheck ? [{
+			key: "personal",
+			text: t.passwordRulePersonal,
+			met: length > 0 && !containsPersonalInfo(password, userInputs)
+		}] : []
+	];
+	const validate = (v) => {
+		if (!v) return null;
+		if (v.length < minLength) return template(t.errorTooShort, { min: minLength });
+		if (v.length > maxLength) return template(t.errorTooLong, { max: maxLength });
+		if (rejectCommon && isCommonPassword(v)) return t.errorPasswordCommon;
+		if (personalCheck && containsPersonalInfo(v, userInputs)) return t.errorPasswordPersonal;
+		return null;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [NewPasswordField_module_default.root, className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx(PasswordField, {
+			label,
+			name,
+			value: password,
+			onChange: change,
+			autoComplete: "new-password",
+			validate,
+			isRequired,
+			isDisabled,
+			isInvalid,
+			errorMessage,
+			size,
+			inputRef: setRef,
+			description: /* @__PURE__ */ jsxs("span", {
+				className: NewPasswordField_module_default.details,
+				children: [
+					description ? /* @__PURE__ */ jsx("span", { children: description }) : null,
+					showStrength ? /* @__PURE__ */ jsx(PasswordStrength, {
+						password,
+						userInputs
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: NewPasswordField_module_default.rules,
+						role: "list",
+						children: rules.map((r) => /* @__PURE__ */ jsxs("span", {
+							role: "listitem",
+							className: NewPasswordField_module_default.rule,
+							"data-met": r.met ? "" : void 0,
+							"data-pending": length === 0 ? "" : void 0,
+							children: [r.met ? /* @__PURE__ */ jsx(CheckIcon, { className: NewPasswordField_module_default.ruleIcon }) : /* @__PURE__ */ jsx("span", {
+								className: NewPasswordField_module_default.ruleDot,
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ jsxs("span", { children: [r.text, /* @__PURE__ */ jsx(VisuallyHidden, { children: `: ${r.met ? t.passwordRuleMet : t.passwordRuleUnmet}` })] })]
+						}, r.key))
+					})
+				]
+			})
+		}), confirm ? /* @__PURE__ */ jsx(PasswordField, {
+			label: confirmLabel ?? t.passwordConfirm,
+			name: confirmName,
+			autoComplete: "new-password",
+			isRequired,
+			isDisabled,
+			size,
+			validate: (v) => v && v !== password ? t.errorPasswordMismatch : null
+		}) : null]
+	});
+}
+export { NewPasswordField };