@handijit/ui 0.0.0-stage → 2.0.0

package/build/components/Switch/style.css

@@ -0,0 +1 @@
+@layer ui{.ui-switch-KLH29{display:flex;align-items:flex-start;gap:var(--hd-space-3);cursor:pointer;padding:var(--hd-space-2);margin-inline:calc(-1 * var(--hd-space-2));border-radius:var(--hd-radius-xs);transition:background-color var(--hd-duration-fast) var(--hd-ease-standard)}.ui-switch-KLH29:hover{background-color:var(--hd-bg-raised)}.ui-switch-KLH29:has(.ui-switch__input-Q2UQ4:focus-visible){outline:var(--ui-ring-width, 2px) solid var(--hd-focus);outline-offset:var(--ui-ring-offset, 2px)}@media (prefers-reduced-motion: reduce){.ui-switch-KLH29{transition:none}}.ui-switch--labelFirst-Grirk{flex-direction:row-reverse;justify-content:space-between}.ui-switch-KLH29:has(.ui-switch__input-Q2UQ4:disabled){cursor:not-allowed}.ui-switch-KLH29:has(.ui-switch__input-Q2UQ4:disabled) .ui-switch__label-gPZuO,.ui-switch-KLH29:has(.ui-switch__input-Q2UQ4:disabled) .ui-switch__hint-NRuzC{color:var(--hd-text-3)}@media (forced-colors: active){.ui-switch-KLH29:has(.ui-switch__input-Q2UQ4:disabled) .ui-switch__label-gPZuO,.ui-switch-KLH29:has(.ui-switch__input-Q2UQ4:disabled) .ui-switch__hint-NRuzC{color:GrayText}}.ui-switch-KLH29:has(.ui-switch__input-Q2UQ4:disabled):hover{background-color:transparent}.ui-switch__input-Q2UQ4{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.ui-switch__track-3417m{flex-shrink:0;width:40px;height:24px;border-radius:var(--hd-radius-pill);background-color:var(--hd-text-3);border:1px solid transparent;transition:background-color var(--hd-duration-fast) var(--hd-ease-standard),border-color var(--hd-duration-fast) var(--hd-ease-standard);position:relative}.ui-switch__track-3417m:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}@media (prefers-reduced-motion: reduce){.ui-switch__track-3417m{transition:none}}.ui-switch__thumb-1LHta{position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:var(--hd-radius-pill);background-color:var(--hd-bg-surface);box-shadow:var(--hd-shadow-1);transition:translate var(--hd-duration-fast) var(--hd-ease-standard),background-color var(--hd-duration-fast) var(--hd-ease-standard)}@media (prefers-reduced-motion: reduce){.ui-switch__thumb-1LHta{transition:none}}.ui-switch__input-Q2UQ4:checked+.ui-switch__track-3417m{background-color:var(--hd-primary)}.ui-switch__input-Q2UQ4:checked+.ui-switch__track-3417m .ui-switch__thumb-1LHta{background-color:var(--hd-on-primary);translate:16px 0}[dir=rtl] .ui-switch__input-Q2UQ4:checked+.ui-switch__track-3417m .ui-switch__thumb-1LHta{translate:-16px 0}.ui-switch__input-Q2UQ4:disabled+.ui-switch__track-3417m{background-color:var(--hd-bg-disabled);border-color:var(--hd-border-strong)}.ui-switch__input-Q2UQ4:disabled+.ui-switch__track-3417m .ui-switch__thumb-1LHta{background-color:var(--hd-text-disabled);box-shadow:none}.ui-switch__input-Q2UQ4:checked:disabled+.ui-switch__track-3417m{background-color:var(--hd-text-disabled);border-color:transparent}.ui-switch__input-Q2UQ4:checked:disabled+.ui-switch__track-3417m .ui-switch__thumb-1LHta{background-color:var(--hd-bg-surface)}@media (forced-colors: active){.ui-switch__track-3417m{border-color:ButtonBorder}.ui-switch__thumb-1LHta{background-color:ButtonText}.ui-switch__input-Q2UQ4:checked+.ui-switch__track-3417m{border-color:Highlight}.ui-switch__input-Q2UQ4:checked+.ui-switch__track-3417m .ui-switch__thumb-1LHta{background-color:Highlight}.ui-switch__input-Q2UQ4:disabled+.ui-switch__track-3417m{border-color:GrayText}.ui-switch__input-Q2UQ4:disabled+.ui-switch__track-3417m .ui-switch__thumb-1LHta{background-color:GrayText}}.ui-switch__text-32uMY{display:flex;flex-direction:column;gap:2px;min-width:0}.ui-switch__label-gPZuO{font-size:var(--hd-type-small-size);color:var(--hd-text)}.ui-switch__hint-NRuzC{font-size:var(--hd-type-caption-size);color:var(--hd-text-2)}}

package/build/components/Table/index.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),l=require("react"),f=require("../../helpers/class-name.helper.cjs"),x=require("../../helpers/component.helper.cjs"),e={default:{"scroller":"ui-scroller-EtDmS","scroller--frame":"ui-scroller--frame-84zz6","table":"ui-table-uCv4q","table--compact":"ui-table--compact-4KCVl","table--regular":"ui-table--regular-hsA3-","table--spacious":"ui-table--spacious-BBUX-","table--sticky-head":"ui-table--sticky-head-FO2L4","table--row-hover":"ui-table--row-hover--MAoe"}},S=x.named(l.memo(({hasFrame:o=!0,label:a,className:c,children:t,...n})=>{const s=l.useRef(null),[u,m]=l.useState(!1);return l.useEffect(()=>{const r=s.current;if(!r||typeof ResizeObserver>"u")return;const d=()=>m(r.scrollWidth>r.clientWidth+1);d();const i=new ResizeObserver(d);i.observe(r);for(const v of r.children)i.observe(v);return()=>i.disconnect()},[t]),b.jsx("div",{ref:s,tabIndex:u?0:void 0,role:u?"region":void 0,"aria-label":u?a:void 0,className:f.cx(e.default.scroller,o&&e.default["scroller--frame"],c),...n,children:t})}),"TableScroller"),h=({density:o="regular",hasStickyHead:a,hasRowHover:c,className:t,children:n,...s})=>b.jsx("table",{className:f.cx(e.default.table,e.default[`table--${o}`],a&&e.default["table--sticky-head"],c&&e.default["table--row-hover"],t),...s,children:n}),p=l.memo(h);exports.TableScroller=S;exports.default=p;
+//# sourceMappingURL=index.cjs.map

package/build/components/Table/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  memo,\n  type TableHTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { cx } from '../../helpers/class-name.helper';\nimport { named } from '../../helpers/component.helper';\n\nimport styles from './index.module.scss';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  /** Çerçeve (hairline + yarıçap + yüzey). */\n  hasFrame?: boolean;\n  /**\n   * Kaydırma bölgesinin erişilebilir adı (\"Sipariş kalemleri\").\n   * ⚠ ZORUNLU değil ama VERİLMELİ: kutu klavyeyle odaklanabilir bir `region` ve adsız bir bölge\n   * ekran okuyucuda yalnızca \"bölge\" diye okunur\n   */\n  label?: string;\n};\n\n/**\n * Tablo kaydırma kutusu — \"tablo kendi kutusunda kayar, sayfa asla yatay kaymaz\" kuralının tek\n * uygulaması.\n */\nexport const TableScroller: FC<ScrollerProps> = /*#__PURE__*/ named(\n  /*#__PURE__*/ memo(({ hasFrame = true, label, className, children, ...rest }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const [isScrollable, setIsScrollable] = useState(false);\n\n    /*\n     * Kutu `overflow: auto` taşıyor ve klavye kullanıcısı odaklanamadığı bir kutuyu KAYDIRAMAZ\n     * (WCAG 2.1.1) — o yüzden kaydırılabilirken ikisi de ZORUNLU.\n     * ⚠ `tabIndex` + `role` YALNIZCA GERÇEKTEN KAYABİLEN kutuda.\n     */\n    useEffect(() => {\n      const node = ref.current;\n      /* `ScrollArea` ile aynı koruma: jsdom `ResizeObserver` sağlamıyor. */\n      if (!node || typeof ResizeObserver === 'undefined') return;\n\n      const measure = () => setIsScrollable(node.scrollWidth > node.clientWidth + 1);\n\n      measure();\n\n      /* İçerik DE kutu DA değişebiliyor: ikisi de izleniyor. */\n      const observer = new ResizeObserver(measure);\n      observer.observe(node);\n      for (const child of node.children) observer.observe(child);\n\n      return () => observer.disconnect();\n    }, [children]);\n\n    return (\n      <div\n        ref={ref}\n        tabIndex={isScrollable ? 0 : undefined}\n        role={isScrollable ? 'region' : undefined}\n        aria-label={isScrollable ? label : undefined}\n        className={cx(styles.scroller, hasFrame && styles['scroller--frame'], className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }),\n  'TableScroller',\n);\n\ntype Props = TableHTMLAttributes<HTMLTableElement> &\n  Partial<{\n    /** Hücre dolgusu. */\n    density: 'compact' | 'regular' | 'spacious';\n    /** Başlık satırı `$surface-2` zeminle kutunun içinde YAPIŞKAN kalır. */\n    hasStickyHead: boolean;\n    /** Satır hover zemini: çok sütunlu tabloda göz satırını kaybediyor. */\n    hasRowHover: boolean;\n  }>;\n\n/** Temel tablo — hairline satır ayrımı, `$surface-2` başlık, yoğunluk ölçeği. */\nconst Table: FC<Props> = ({\n  density = 'regular',\n  hasStickyHead,\n  hasRowHover,\n  className,\n  children,\n  ...rest\n}) => (\n  <table\n    className={cx(\n      styles.table,\n      styles[`table--${density}`],\n      hasStickyHead && styles['table--sticky-head'],\n      hasRowHover && styles['table--row-hover'],\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </table>\n);\n\nexport default /*#__PURE__*/ memo(Table) as typeof Table;\n"],"names":["TableScroller","named","memo","hasFrame","label","className","children","rest","ref","useRef","isScrollable","setIsScrollable","useState","useEffect","node","measure","observer","child","jsx","cx","styles","Table","density","hasStickyHead","hasRowHover","index"],"mappings":"uTA+BaA,EAAiDC,EAAAA,MAC9CC,OAAK,CAAC,CAAE,SAAAC,EAAW,GAAM,MAAAC,EAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,KAAW,CAC/E,MAAMC,EAAMC,EAAAA,OAAuB,IAAI,EACjC,CAACC,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EAOtDC,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAON,EAAI,QAEjB,GAAI,CAACM,GAAQ,OAAO,eAAmB,IAAa,OAEpD,MAAMC,EAAU,IAAMJ,EAAgBG,EAAK,YAAcA,EAAK,YAAc,CAAC,EAE7EC,EAAA,EAGA,MAAMC,EAAW,IAAI,eAAeD,CAAO,EAC3CC,EAAS,QAAQF,CAAI,EACrB,UAAWG,KAASH,EAAK,SAAUE,EAAS,QAAQC,CAAK,EAEzD,MAAO,IAAMD,EAAS,WAAA,CACxB,EAAG,CAACV,CAAQ,CAAC,EAGXY,EAAAA,IAAC,MAAA,CACC,IAAAV,EACA,SAAUE,EAAe,EAAI,OAC7B,KAAMA,EAAe,SAAW,OAChC,aAAYA,EAAeN,EAAQ,OACnC,UAAWe,EAAAA,GAAGC,EAAAA,QAAO,SAAUjB,GAAYiB,UAAO,iBAAiB,EAAGf,CAAS,EAC9E,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGP,CAAC,EACD,eACF,EAaMe,EAAmB,CAAC,CACxB,QAAAC,EAAU,UACV,cAAAC,EACA,YAAAC,EACA,UAAAnB,EACA,SAAAC,EACA,GAAGC,CACL,IACEW,EAAAA,IAAC,QAAA,CACC,UAAWC,EAAAA,GACTC,EAAAA,QAAO,MACPA,EAAAA,QAAO,UAAUE,CAAO,EAAE,EAC1BC,GAAiBH,EAAAA,QAAO,oBAAoB,EAC5CI,GAAeJ,EAAAA,QAAO,kBAAkB,EACxCf,CAAA,EAED,GAAGE,EAEH,SAAAD,CAAA,CACH,EAGFmB,SAAkCJ,CAAK"}

package/build/components/Table/index.d.ts

@@ -0,0 +1,28 @@
+import { FC, HTMLAttributes, TableHTMLAttributes } from 'react';
+type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
+    /** Çerçeve (hairline + yarıçap + yüzey). */
+    hasFrame?: boolean;
+    /**
+     * Kaydırma bölgesinin erişilebilir adı ("Sipariş kalemleri").
+     * ⚠ ZORUNLU değil ama VERİLMELİ: kutu klavyeyle odaklanabilir bir `region` ve adsız bir bölge
+     * ekran okuyucuda yalnızca "bölge" diye okunur
+     */
+    label?: string;
+};
+/**
+ * Tablo kaydırma kutusu — "tablo kendi kutusunda kayar, sayfa asla yatay kaymaz" kuralının tek
+ * uygulaması.
+ */
+export declare const TableScroller: FC<ScrollerProps>;
+type Props = TableHTMLAttributes<HTMLTableElement> & Partial<{
+    /** Hücre dolgusu. */
+    density: 'compact' | 'regular' | 'spacious';
+    /** Başlık satırı `$surface-2` zeminle kutunun içinde YAPIŞKAN kalır. */
+    hasStickyHead: boolean;
+    /** Satır hover zemini: çok sütunlu tabloda göz satırını kaybediyor. */
+    hasRowHover: boolean;
+}>;
+/** Temel tablo — hairline satır ayrımı, `$surface-2` başlık, yoğunluk ölçeği. */
+declare const Table: FC<Props>;
+declare const _default: typeof Table;
+export default _default;

package/build/components/Table/index.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { memo as m, useRef as p, useState as h, useEffect as x } from "react";
+import { cx as d } from "../../helpers/class-name.helper.js";
+import { named as S } from "../../helpers/component.helper.js";
+const e = {"scroller":"ui-scroller-EtDmS","scroller--frame":"ui-scroller--frame-84zz6","table":"ui-table-uCv4q","table--compact":"ui-table--compact-4KCVl","table--regular":"ui-table--regular-hsA3-","table--spacious":"ui-table--spacious-BBUX-","table--sticky-head":"ui-table--sticky-head-FO2L4","table--row-hover":"ui-table--row-hover--MAoe"};
+const I = /* @__PURE__ */ S(
+  /* @__PURE__ */ m(({ hasFrame: l = !0, label: s, className: a, children: o, ...c }) => {
+    const t = p(null), [n, u] = h(!1);
+    return x(() => {
+      const r = t.current;
+      if (!r || typeof ResizeObserver > "u") return;
+      const b = () => u(r.scrollWidth > r.clientWidth + 1);
+      b();
+      const i = new ResizeObserver(b);
+      i.observe(r);
+      for (const v of r.children) i.observe(v);
+      return () => i.disconnect();
+    }, [o]), /* @__PURE__ */ f(
+      "div",
+      {
+        ref: t,
+        tabIndex: n ? 0 : void 0,
+        role: n ? "region" : void 0,
+        "aria-label": n ? s : void 0,
+        className: d(e.scroller, l && e["scroller--frame"], a),
+        ...c,
+        children: o
+      }
+    );
+  }),
+  "TableScroller"
+), y = ({
+  density: l = "regular",
+  hasStickyHead: s,
+  hasRowHover: a,
+  className: o,
+  children: c,
+  ...t
+}) => /* @__PURE__ */ f(
+  "table",
+  {
+    className: d(
+      e.table,
+      e[`table--${l}`],
+      s && e["table--sticky-head"],
+      a && e["table--row-hover"],
+      o
+    ),
+    ...t,
+    children: c
+  }
+), N = /* @__PURE__ */ m(y);
+export {
+  I as TableScroller,
+  N as default
+};
+//# sourceMappingURL=index.js.map

package/build/components/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  memo,\n  type TableHTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { cx } from '../../helpers/class-name.helper';\nimport { named } from '../../helpers/component.helper';\n\nimport styles from './index.module.scss';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  /** Çerçeve (hairline + yarıçap + yüzey). */\n  hasFrame?: boolean;\n  /**\n   * Kaydırma bölgesinin erişilebilir adı (\"Sipariş kalemleri\").\n   * ⚠ ZORUNLU değil ama VERİLMELİ: kutu klavyeyle odaklanabilir bir `region` ve adsız bir bölge\n   * ekran okuyucuda yalnızca \"bölge\" diye okunur\n   */\n  label?: string;\n};\n\n/**\n * Tablo kaydırma kutusu — \"tablo kendi kutusunda kayar, sayfa asla yatay kaymaz\" kuralının tek\n * uygulaması.\n */\nexport const TableScroller: FC<ScrollerProps> = /*#__PURE__*/ named(\n  /*#__PURE__*/ memo(({ hasFrame = true, label, className, children, ...rest }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const [isScrollable, setIsScrollable] = useState(false);\n\n    /*\n     * Kutu `overflow: auto` taşıyor ve klavye kullanıcısı odaklanamadığı bir kutuyu KAYDIRAMAZ\n     * (WCAG 2.1.1) — o yüzden kaydırılabilirken ikisi de ZORUNLU.\n     * ⚠ `tabIndex` + `role` YALNIZCA GERÇEKTEN KAYABİLEN kutuda.\n     */\n    useEffect(() => {\n      const node = ref.current;\n      /* `ScrollArea` ile aynı koruma: jsdom `ResizeObserver` sağlamıyor. */\n      if (!node || typeof ResizeObserver === 'undefined') return;\n\n      const measure = () => setIsScrollable(node.scrollWidth > node.clientWidth + 1);\n\n      measure();\n\n      /* İçerik DE kutu DA değişebiliyor: ikisi de izleniyor. */\n      const observer = new ResizeObserver(measure);\n      observer.observe(node);\n      for (const child of node.children) observer.observe(child);\n\n      return () => observer.disconnect();\n    }, [children]);\n\n    return (\n      <div\n        ref={ref}\n        tabIndex={isScrollable ? 0 : undefined}\n        role={isScrollable ? 'region' : undefined}\n        aria-label={isScrollable ? label : undefined}\n        className={cx(styles.scroller, hasFrame && styles['scroller--frame'], className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }),\n  'TableScroller',\n);\n\ntype Props = TableHTMLAttributes<HTMLTableElement> &\n  Partial<{\n    /** Hücre dolgusu. */\n    density: 'compact' | 'regular' | 'spacious';\n    /** Başlık satırı `$surface-2` zeminle kutunun içinde YAPIŞKAN kalır. */\n    hasStickyHead: boolean;\n    /** Satır hover zemini: çok sütunlu tabloda göz satırını kaybediyor. */\n    hasRowHover: boolean;\n  }>;\n\n/** Temel tablo — hairline satır ayrımı, `$surface-2` başlık, yoğunluk ölçeği. */\nconst Table: FC<Props> = ({\n  density = 'regular',\n  hasStickyHead,\n  hasRowHover,\n  className,\n  children,\n  ...rest\n}) => (\n  <table\n    className={cx(\n      styles.table,\n      styles[`table--${density}`],\n      hasStickyHead && styles['table--sticky-head'],\n      hasRowHover && styles['table--row-hover'],\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </table>\n);\n\nexport default /*#__PURE__*/ memo(Table) as typeof Table;\n"],"names":["TableScroller","named","memo","hasFrame","label","className","children","rest","ref","useRef","isScrollable","setIsScrollable","useState","useEffect","node","measure","observer","child","jsx","cx","styles","Table","density","hasStickyHead","hasRowHover","index"],"mappings":";;;;;;AA+BO,MAAMA,IAAiD,gBAAAC;AAAA,EAC9C,gBAAAC,EAAK,CAAC,EAAE,UAAAC,IAAW,IAAM,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,QAAW;AAC/E,UAAMC,IAAMC,EAAuB,IAAI,GACjC,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAK;AAOtD,WAAAC,EAAU,MAAM;AACd,YAAMC,IAAON,EAAI;AAEjB,UAAI,CAACM,KAAQ,OAAO,iBAAmB,IAAa;AAEpD,YAAMC,IAAU,MAAMJ,EAAgBG,EAAK,cAAcA,EAAK,cAAc,CAAC;AAE7E,MAAAC,EAAA;AAGA,YAAMC,IAAW,IAAI,eAAeD,CAAO;AAC3C,MAAAC,EAAS,QAAQF,CAAI;AACrB,iBAAWG,KAASH,EAAK,SAAU,CAAAE,EAAS,QAAQC,CAAK;AAEzD,aAAO,MAAMD,EAAS,WAAA;AAAA,IACxB,GAAG,CAACV,CAAQ,CAAC,GAGX,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,UAAUE,IAAe,IAAI;AAAA,QAC7B,MAAMA,IAAe,WAAW;AAAA,QAChC,cAAYA,IAAeN,IAAQ;AAAA,QACnC,WAAWe,EAAGC,EAAO,UAAUjB,KAAYiB,EAAO,iBAAiB,GAAGf,CAAS;AAAA,QAC9E,GAAGE;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP,CAAC;AAAA,EACD;AACF,GAaMe,IAAmB,CAAC;AAAA,EACxB,SAAAC,IAAU;AAAA,EACV,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAnB;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAW;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACTC,EAAO;AAAA,MACPA,EAAO,UAAUE,CAAO,EAAE;AAAA,MAC1BC,KAAiBH,EAAO,oBAAoB;AAAA,MAC5CI,KAAeJ,EAAO,kBAAkB;AAAA,MACxCf;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AACH,GAGFmB,sBAAkCJ,CAAK;"}

package/build/components/Table/style.css

@@ -0,0 +1 @@
+@layer ui{.ui-scroller-EtDmS{position:relative;overflow:auto;min-width:0;align-self:stretch;scrollbar-width:thin;scrollbar-color:var(--hd-border-strong) transparent}.ui-scroller-EtDmS::-webkit-scrollbar{width:8px;height:8px}.ui-scroller-EtDmS::-webkit-scrollbar-track{background:transparent}.ui-scroller-EtDmS::-webkit-scrollbar-thumb{background-color:var(--hd-border-strong);border-radius:var(--hd-radius-pill);border:2px solid transparent;background-clip:content-box}.ui-scroller-EtDmS::-webkit-scrollbar-thumb:hover{background-color:var(--hd-text-3)}.ui-scroller--frame-84zz6{border:1px solid var(--hd-border);border-radius:var(--hd-radius-md);background-color:var(--hd-bg-surface)}.ui-table-uCv4q{width:100%;border-collapse:collapse;font-size:var(--hd-type-small-size)}.ui-table-uCv4q th,.ui-table-uCv4q td{text-align:start;border-bottom:1px solid var(--hd-border)}.ui-table-uCv4q tbody tr:last-child>*{border-bottom:none}.ui-table--compact-4KCVl th,.ui-table--compact-4KCVl td{padding:var(--hd-space-2) var(--hd-space-3)}.ui-table--regular-hsA3- th,.ui-table--regular-hsA3- td{padding:var(--hd-space-3)}.ui-table--spacious-BBUX- th,.ui-table--spacious-BBUX- td{padding:var(--hd-space-3) var(--hd-space-4)}.ui-table--sticky-head-FO2L4 thead th{position:sticky;top:0;z-index:var(--hd-z-raised);background-color:var(--hd-bg-raised);font-family:var(--hd-font-body);font-size:var(--hd-type-caption-size);font-weight:var(--hd-font-weight-semibold);text-transform:uppercase;letter-spacing:.045em;color:var(--hd-text-2);white-space:nowrap}.ui-table--row-hover--MAoe tbody tr:hover>td{background-color:var(--hd-bg-raised)}}

package/build/components/TableCheckbox/index.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),e=require("react"),l=require("../../helpers/class-name.helper.cjs"),i=require("../../helpers/component.helper.cjs"),d={default:{"checkbox":"ui-checkbox--dvpB"}},f=e.forwardRef(({label:c,isIndeterminate:t=!1,className:u,testId:n,...a},o)=>{const r=e.useRef(null);return e.useImperativeHandle(o,()=>r.current,[]),e.useEffect(()=>{r.current&&(r.current.indeterminate=t)},[t]),s.jsx("input",{ref:r,type:"checkbox","aria-label":c,"aria-checked":t?"mixed":void 0,className:l.cx(d.default.checkbox,u),"data-testid":n,...a})}),m=e.memo(i.named(f,"TableCheckbox"));exports.default=m;
+//# sourceMappingURL=index.cjs.map

package/build/components/TableCheckbox/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/TableCheckbox/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type InputHTMLAttributes,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { cx } from '../../helpers/class-name.helper';\nimport { named } from '../../helpers/component.helper';\n\nimport styles from './index.module.scss';\n\ntype Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'aria-label'> & {\n  /** Erişilebilir ad — ZORUNLU. */\n  label: string;\n  /**\n   * \"Bazı satırlar seçili\" — başlık kutusunun üçüncü durumu.\n   * ⚠ Bu prop OLMADAN o durum İFADE EDİLEMİYORDU. `indeterminate` bir HTML niteliği değil, yalnızca\n   * DOM ÖZELLİĞİ\n   */\n  isIndeterminate?: boolean;\n  testId?: string;\n};\n\n/** Tablo hücresindeki toplu seçim kutusu. */\nconst TableCheckbox = /*#__PURE__*/ forwardRef<HTMLInputElement, Props>(\n  ({ label, isIndeterminate = false, className, testId, ...rest }, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null);\n\n    /*\n     * Dışarıdan gelen `ref` ile içteki `ref` birleştirilir: bileşen kendi düğümüne erişmek ZORUNDA\n     * (`indeterminate` yalnızca özellik olarak yazılabiliyor)…\n     */\n    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement, []);\n\n    useEffect(() => {\n      if (innerRef.current) innerRef.current.indeterminate = isIndeterminate;\n    }, [isIndeterminate]);\n\n    return (\n      <input\n        ref={innerRef}\n        type=\"checkbox\"\n        aria-label={label}\n        /*\n         * ⚠ `aria-checked=\"mixed\"` AYRICA yazılır. `indeterminate` DOM özelliği görsel durumu\n         * değiştirir ama erişilebilirlik ağacına bazı…\n         */\n        aria-checked={isIndeterminate ? 'mixed' : undefined}\n        className={cx(styles.checkbox, className)}\n        data-testid={testId}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default /*#__PURE__*/ memo(\n  /*#__PURE__*/ named(TableCheckbox, 'TableCheckbox'),\n) as typeof TableCheckbox;\n"],"names":["TableCheckbox","forwardRef","label","isIndeterminate","className","testId","rest","ref","innerRef","useRef","useImperativeHandle","useEffect","jsx","cx","styles","index","memo","named"],"mappings":"uTA4BMA,EAA8BC,EAAAA,WAClC,CAAC,CAAE,MAAAC,EAAO,gBAAAC,EAAkB,GAAO,UAAAC,EAAW,OAAAC,EAAQ,GAAGC,CAAA,EAAQC,IAAQ,CACvE,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EAM9CC,OAAAA,EAAAA,oBAAoBH,EAAK,IAAMC,EAAS,QAA6B,CAAA,CAAE,EAEvEG,EAAAA,UAAU,IAAM,CACVH,EAAS,UAASA,EAAS,QAAQ,cAAgBL,EACzD,EAAG,CAACA,CAAe,CAAC,EAGlBS,EAAAA,IAAC,QAAA,CACC,IAAKJ,EACL,KAAK,WACL,aAAYN,EAKZ,eAAcC,EAAkB,QAAU,OAC1C,UAAWU,EAAAA,GAAGC,UAAO,SAAUV,CAAS,EACxC,cAAaC,EACZ,GAAGC,CAAA,CAAA,CAGV,CACF,EAEAS,EAA6BC,EAAAA,KACbC,EAAAA,MAAMjB,EAAe,eAAe,CACpD"}

package/build/components/TableCheckbox/index.d.ts

@@ -0,0 +1,15 @@
+import { InputHTMLAttributes } from 'react';
+/** Tablo hücresindeki toplu seçim kutusu. */
+declare const TableCheckbox: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-label"> & {
+    /** Erişilebilir ad — ZORUNLU. */
+    label: string;
+    /**
+     * "Bazı satırlar seçili" — başlık kutusunun üçüncü durumu.
+     * ⚠ Bu prop OLMADAN o durum İFADE EDİLEMİYORDU. `indeterminate` bir HTML niteliği değil, yalnızca
+     * DOM ÖZELLİĞİ
+     */
+    isIndeterminate?: boolean;
+    testId?: string;
+} & import('react').RefAttributes<HTMLInputElement>>;
+declare const _default: typeof TableCheckbox;
+export default _default;

package/build/components/TableCheckbox/index.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { memo as i, forwardRef as n, useRef as s, useImperativeHandle as l, useEffect as u } from "react";
+import { cx as d } from "../../helpers/class-name.helper.js";
+import { named as p } from "../../helpers/component.helper.js";
+const x = {"checkbox":"ui-checkbox--dvpB"};
+const b = /* @__PURE__ */ n(
+  ({ label: o, isIndeterminate: r = !1, className: t, testId: c, ...a }, f) => {
+    const e = s(null);
+    return l(f, () => e.current, []), u(() => {
+      e.current && (e.current.indeterminate = r);
+    }, [r]), /* @__PURE__ */ m(
+      "input",
+      {
+        ref: e,
+        type: "checkbox",
+        "aria-label": o,
+        "aria-checked": r ? "mixed" : void 0,
+        className: d(x.checkbox, t),
+        "data-testid": c,
+        ...a
+      }
+    );
+  }
+), C = /* @__PURE__ */ i(
+  /* @__PURE__ */ p(b, "TableCheckbox")
+);
+export {
+  C as default
+};
+//# sourceMappingURL=index.js.map

package/build/components/TableCheckbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/TableCheckbox/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type InputHTMLAttributes,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { cx } from '../../helpers/class-name.helper';\nimport { named } from '../../helpers/component.helper';\n\nimport styles from './index.module.scss';\n\ntype Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'aria-label'> & {\n  /** Erişilebilir ad — ZORUNLU. */\n  label: string;\n  /**\n   * \"Bazı satırlar seçili\" — başlık kutusunun üçüncü durumu.\n   * ⚠ Bu prop OLMADAN o durum İFADE EDİLEMİYORDU. `indeterminate` bir HTML niteliği değil, yalnızca\n   * DOM ÖZELLİĞİ\n   */\n  isIndeterminate?: boolean;\n  testId?: string;\n};\n\n/** Tablo hücresindeki toplu seçim kutusu. */\nconst TableCheckbox = /*#__PURE__*/ forwardRef<HTMLInputElement, Props>(\n  ({ label, isIndeterminate = false, className, testId, ...rest }, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null);\n\n    /*\n     * Dışarıdan gelen `ref` ile içteki `ref` birleştirilir: bileşen kendi düğümüne erişmek ZORUNDA\n     * (`indeterminate` yalnızca özellik olarak yazılabiliyor)…\n     */\n    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement, []);\n\n    useEffect(() => {\n      if (innerRef.current) innerRef.current.indeterminate = isIndeterminate;\n    }, [isIndeterminate]);\n\n    return (\n      <input\n        ref={innerRef}\n        type=\"checkbox\"\n        aria-label={label}\n        /*\n         * ⚠ `aria-checked=\"mixed\"` AYRICA yazılır. `indeterminate` DOM özelliği görsel durumu\n         * değiştirir ama erişilebilirlik ağacına bazı…\n         */\n        aria-checked={isIndeterminate ? 'mixed' : undefined}\n        className={cx(styles.checkbox, className)}\n        data-testid={testId}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default /*#__PURE__*/ memo(\n  /*#__PURE__*/ named(TableCheckbox, 'TableCheckbox'),\n) as typeof TableCheckbox;\n"],"names":["TableCheckbox","forwardRef","label","isIndeterminate","className","testId","rest","ref","innerRef","useRef","useImperativeHandle","useEffect","jsx","cx","styles","index","memo","named"],"mappings":";;;;;;AA4BA,MAAMA,IAA8B,gBAAAC;AAAA,EAClC,CAAC,EAAE,OAAAC,GAAO,iBAAAC,IAAkB,IAAO,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAAQC,MAAQ;AACvE,UAAMC,IAAWC,EAAyB,IAAI;AAM9C,WAAAC,EAAoBH,GAAK,MAAMC,EAAS,SAA6B,CAAA,CAAE,GAEvEG,EAAU,MAAM;AACd,MAAIH,EAAS,YAASA,EAAS,QAAQ,gBAAgBL;AAAA,IACzD,GAAG,CAACA,CAAe,CAAC,GAGlB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKJ;AAAA,QACL,MAAK;AAAA,QACL,cAAYN;AAAA,QAKZ,gBAAcC,IAAkB,UAAU;AAAA,QAC1C,WAAWU,EAAGC,EAAO,UAAUV,CAAS;AAAA,QACxC,eAAaC;AAAA,QACZ,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF,GAEAS,IAA6B,gBAAAC;AAAA,EACb,gBAAAC,EAAMjB,GAAe,eAAe;AACpD;"}

package/build/components/TableCheckbox/style.css

@@ -0,0 +1 @@
+@layer ui{.ui-checkbox--dvpB{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-grid;place-content:center;flex-shrink:0;width:18px;height:18px;margin:0;border:1.5px solid var(--hd-text-3);border-radius:var(--hd-radius-xs);background-color:var(--hd-bg-surface);cursor:pointer;transition:background-color var(--hd-duration-fast) var(--hd-ease-standard),border-color var(--hd-duration-fast) var(--hd-ease-standard)}.ui-checkbox--dvpB:before{content:"";width:10px;height:10px;background-color:var(--hd-on-primary);scale:0;transition:scale var(--hd-duration-fast) var(--hd-ease-standard);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.ui-checkbox--dvpB:hover:not(:disabled){border-color:var(--hd-text-2)}.ui-checkbox--dvpB:checked,.ui-checkbox--dvpB:indeterminate{background-color:var(--hd-primary);border-color:var(--hd-primary)}.ui-checkbox--dvpB:checked:before,.ui-checkbox--dvpB:indeterminate:before{scale:1}.ui-checkbox--dvpB:checked:hover:not(:disabled),.ui-checkbox--dvpB:indeterminate:hover:not(:disabled){background-color:var(--hd-primary-hover);border-color:var(--hd-primary-hover)}.ui-checkbox--dvpB:indeterminate:before{clip-path:inset(40% 5%)}.ui-checkbox--dvpB:disabled{background-color:var(--hd-bg-disabled);border-color:var(--hd-border-strong);cursor:not-allowed}.ui-checkbox--dvpB:checked:disabled,.ui-checkbox--dvpB:indeterminate:disabled{background-color:var(--hd-text-disabled);border-color:transparent}.ui-checkbox--dvpB:checked:disabled:before,.ui-checkbox--dvpB:indeterminate:disabled:before{background-color:var(--hd-bg-surface)}@media (prefers-reduced-motion: reduce){.ui-checkbox--dvpB{transition:none}.ui-checkbox--dvpB:before{transition:none}}@media (forced-colors: active){.ui-checkbox--dvpB{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.ui-checkbox--dvpB:before{display:none}}.ui-checkbox--dvpB{position:relative}.ui-checkbox--dvpB:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}.ui-checkbox--dvpB:focus-visible{outline:var(--ui-ring-width, 2px) solid var(--hd-focus);outline-offset:var(--ui-ring-offset, 2px)}}

package/build/components/Tabs/index.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),n=require("react"),I=require("@handijit/utils"),R=require("../../helpers/class-name.helper.cjs"),K=require("../../helpers/scroll.helper.cjs"),a={default:{"tabs":"ui-tabs-l4dFE","tabs__list":"ui-tabs__list-HJvR8","tabs__tab":"ui-tabs__tab-7gDW7","tabs__tab--active":"ui-tabs__tab--active-riqNp","tabs__count":"ui-tabs__count-8JX8s","tabs__panel":"ui-tabs__panel-CPklY"}},T=({items:t,defaultTabId:w,activeId:_,onChange:i,ariaLabel:S,isManualActivation:u,className:g,testId:v})=>{var D;const d=n.useId(),[E,P]=n.useState(w??((D=t[0])==null?void 0:D.id)),h=I.isDefined(_),p=h?_:E,s=t.findIndex(e=>e.id===p),[f,y]=n.useState(s<0?0:s),$=n.useRef(null),l=t[s]??t[0],b=f>=0&&f<t.length?f:Math.max(s,0);n.useEffect(()=>{y(s<0?0:s)},[s]);const j=n.useRef(!1);n.useEffect(()=>{var e;if(!j.current){j.current=!0;return}K.scrollIntoViewIfPossible((e=$.current)==null?void 0:e.querySelector('[aria-selected="true"]'),{block:"nearest",inline:"nearest"})},[p]);const x=e=>{h||P(e),i==null||i(e)},F=e=>{var k;if(u&&(e.key==="Enter"||e.key===" ")){e.preventDefault();const N=t[b];N&&x(N.id);return}const r=e.key==="ArrowRight"?1:e.key==="ArrowLeft"?-1:0;if(r===0)return;e.preventDefault();const c=((u?b:s)+r+t.length)%t.length;y(c),u||x(t[c].id),(k=document.getElementById(`${d}-tab-${t[c].id}`))==null||k.focus()};if(t.length===0)return null;const q=I.isDefined(l==null?void 0:l.content);return o.jsxs("div",{className:R.cx(a.default.tabs,g),"data-testid":v,children:[o.jsx("div",{ref:$,className:a.default.tabs__list,role:"tablist","aria-label":S,onKeyDown:F,children:t.map(e=>{var c;const r=e.id===l.id;return o.jsxs("button",{id:`${d}-tab-${e.id}`,type:"button",role:"tab","aria-selected":r,"aria-controls":r&&q?`${d}-panel-${e.id}`:void 0,tabIndex:(u?((c=t[b])==null?void 0:c.id)===e.id:r)?0:-1,className:R.cx(a.default.tabs__tab,r&&a.default["tabs__tab--active"]),onClick:()=>x(e.id),children:[e.label,I.isDefined(e.count)&&o.jsx("span",{className:a.default.tabs__count,children:e.count})]},e.id)})}),q&&o.jsx("div",{id:`${d}-panel-${l.id}`,role:"tabpanel","aria-labelledby":`${d}-tab-${l.id}`,className:a.default.tabs__panel,tabIndex:0,children:l.content})]})},B=n.memo(T);exports.default=B;
+//# sourceMappingURL=index.cjs.map

package/build/components/Tabs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type KeyboardEvent,\n  memo,\n  type ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { isDefined } from '@handijit/utils';\n\nimport { cx } from '../../helpers/class-name.helper';\nimport { scrollIntoViewIfPossible } from '../../helpers/scroll.helper';\n\nimport styles from './index.module.scss';\n\nexport type TabItem = {\n  id: string;\n  label: string;\n  /** Etiketin yanında gösterilen sayı. */\n  count?: number;\n  /** Sekmenin paneli. */\n  content?: ReactNode;\n};\n\ntype Props = {\n  items: TabItem[];\n  /** Kontrolsüz kullanımda açılışta seçili sekme. */\n  defaultTabId?: string;\n  /** Kontrollü kullanım: seçili sekme çağıranın durumunda. */\n  activeId?: string;\n  onChange?: (id: string) => void;\n  /** Sekme çubuğunun erişilebilir adı. */\n  ariaLabel?: string;\n  /** Ok tuşu yalnızca ODAĞI taşır; seçim `Enter`/`Space` ile yapılır. */\n  isManualActivation?: boolean;\n  className?: string;\n  testId?: string;\n};\n\n/** Sekmeler. */\nconst Tabs: FC<Props> = ({\n  items,\n  defaultTabId,\n  activeId: controlledId,\n  onChange,\n  ariaLabel,\n  isManualActivation,\n  className,\n  testId,\n}) => {\n  const baseId = useId();\n  const [uncontrolledId, setUncontrolledId] = useState(defaultTabId ?? items[0]?.id);\n\n  const isControlled = isDefined(controlledId);\n  const activeId = isControlled ? controlledId : uncontrolledId;\n\n  const activeIndex = items.findIndex(item => item.id === activeId);\n  /* Manuel kipte ODAKLANAN sekme ile SECILI sekme ayrisir. */\n  const [focusIndex, setFocusIndex] = useState(activeIndex < 0 ? 0 : activeIndex);\n  const listRef = useRef<HTMLDivElement>(null);\n  const active = items[activeIndex] ?? items[0];\n\n  /*\n   * 1. COKME: `items` kisaldiginda indeks kirpilmiyordu.\n   * ⚠ `focusIndex` HAM OKUNMAZ — iki ayri ariza uretiyordu.\n   */\n  const safeFocusIndex =\n    focusIndex >= 0 && focusIndex < items.length ? focusIndex : Math.max(activeIndex, 0);\n\n  useEffect(() => {\n    /* Secim degistiginde odak da ona hizalanir. */\n    setFocusIndex(activeIndex < 0 ? 0 : activeIndex);\n  }, [activeIndex]);\n\n  /*\n   * SECILI SEKME GORUNURE KAYDIRILIR — ama MOUNT'ta DEGIL.\n   * ⚠ Ilk kosu da kaydiriyordu ve `scrollIntoView` yalnizca serit kabini degil SAYFAYI da kaydirir:\n   * serit ilk boyamada ekranin altindaysa (uzun…\n   */\n  const hasMountedRef = useRef(false);\n\n  useEffect(() => {\n    if (!hasMountedRef.current) {\n      hasMountedRef.current = true;\n      return;\n    }\n\n    scrollIntoViewIfPossible(listRef.current?.querySelector(`[aria-selected=\"true\"]`), {\n      block: 'nearest',\n      inline: 'nearest',\n    });\n  }, [activeId]);\n\n  const select = (id: string) => {\n    if (!isControlled) setUncontrolledId(id);\n    onChange?.(id);\n  };\n\n  /** Ok tuşlarıyla gezinme; başta/sonda döner. */\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (isManualActivation && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      const focused = items[safeFocusIndex];\n      if (focused) select(focused.id);\n      return;\n    }\n\n    const offset = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;\n    if (offset === 0) return;\n\n    event.preventDefault();\n    const next =\n      ((isManualActivation ? safeFocusIndex : activeIndex) + offset + items.length) % items.length;\n\n    setFocusIndex(next);\n    if (!isManualActivation) select(items[next].id);\n\n    /*\n     * Odak HER IKI kipte de tasinir: manuel kipte seciliyle odaklanan sekme ayrisiyor ve `tabindex`\n     * odaklanani izlemek zorunda.\n     */\n    document.getElementById(`${baseId}-tab-${items[next].id}`)?.focus();\n  };\n\n  if (items.length === 0) return null;\n\n  /*\n   * Panelsiz kullanimda `aria-controls` VERILMEZ: var olmayan bir kimligi isaret etmek ekran\n   * okuyucuda kirik bir bag uretir.\n   */\n  const hasPanel = isDefined(active?.content);\n\n  return (\n    <div className={cx(styles.tabs, className)} data-testid={testId}>\n      <div\n        ref={listRef}\n        className={styles.tabs__list}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n      >\n        {items.map(item => {\n          const isActive = item.id === active.id;\n\n          return (\n            <button\n              key={item.id}\n              id={`${baseId}-tab-${item.id}`}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n              /* ⚠ YALNIZCA SECILI SEKMEDE. */\n              aria-controls={isActive && hasPanel ? `${baseId}-panel-${item.id}` : undefined}\n              // Yalnızca seçili sekme sekme sırasında; gezinme ok tuşlarıyla.\n              /*\n               * Donen `tabindex` ODAKLANANI izler: manuel kipte secili sekme ile odaklanan sekme\n               * ayri ve Tab'in geri donecegi yer odaklanan olmali.\n               */\n              tabIndex={\n                (isManualActivation ? items[safeFocusIndex]?.id === item.id : isActive) ? 0 : -1\n              }\n              className={cx(styles.tabs__tab, isActive && styles['tabs__tab--active'])}\n              onClick={() => select(item.id)}\n            >\n              {item.label}\n              {isDefined(item.count) && <span className={styles.tabs__count}>{item.count}</span>}\n            </button>\n          );\n        })}\n      </div>\n\n      {hasPanel && (\n        <div\n          id={`${baseId}-panel-${active.id}`}\n          role=\"tabpanel\"\n          aria-labelledby={`${baseId}-tab-${active.id}`}\n          className={styles.tabs__panel}\n          tabIndex={0}\n        >\n          {active.content}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default /*#__PURE__*/ memo(Tabs) as typeof Tabs;\n"],"names":["Tabs","items","defaultTabId","controlledId","onChange","ariaLabel","isManualActivation","className","testId","baseId","useId","uncontrolledId","setUncontrolledId","useState","_a","isControlled","isDefined","activeId","activeIndex","item","focusIndex","setFocusIndex","listRef","useRef","active","safeFocusIndex","useEffect","hasMountedRef","scrollIntoViewIfPossible","select","id","handleKeyDown","event","focused","offset","next","hasPanel","jsxs","cx","styles","jsx","isActive","index"],"mappings":"iVA4CMA,EAAkB,CAAC,CACvB,MAAAC,EACA,aAAAC,EACA,SAAUC,EACV,SAAAC,EACA,UAAAC,EACA,mBAAAC,EACA,UAAAC,EACA,OAAAC,CACF,IAAM,OACJ,MAAMC,EAASC,EAAAA,MAAA,EACT,CAACC,EAAgBC,CAAiB,EAAIC,EAAAA,SAASX,KAAgBY,EAAAb,EAAM,CAAC,IAAP,YAAAa,EAAU,GAAE,EAE3EC,EAAeC,EAAAA,UAAUb,CAAY,EACrCc,EAAWF,EAAeZ,EAAeQ,EAEzCO,EAAcjB,EAAM,UAAUkB,GAAQA,EAAK,KAAOF,CAAQ,EAE1D,CAACG,EAAYC,CAAa,EAAIR,EAAAA,SAASK,EAAc,EAAI,EAAIA,CAAW,EACxEI,EAAUC,EAAAA,OAAuB,IAAI,EACrCC,EAASvB,EAAMiB,CAAW,GAAKjB,EAAM,CAAC,EAMtCwB,EACJL,GAAc,GAAKA,EAAanB,EAAM,OAASmB,EAAa,KAAK,IAAIF,EAAa,CAAC,EAErFQ,EAAAA,UAAU,IAAM,CAEdL,EAAcH,EAAc,EAAI,EAAIA,CAAW,CACjD,EAAG,CAACA,CAAW,CAAC,EAOhB,MAAMS,EAAgBJ,EAAAA,OAAO,EAAK,EAElCG,EAAAA,UAAU,IAAM,OACd,GAAI,CAACC,EAAc,QAAS,CAC1BA,EAAc,QAAU,GACxB,MACF,CAEAC,EAAAA,0BAAyBd,EAAAQ,EAAQ,UAAR,YAAAR,EAAiB,cAAc,0BAA2B,CACjF,MAAO,UACP,OAAQ,SAAA,CACT,CACH,EAAG,CAACG,CAAQ,CAAC,EAEb,MAAMY,EAAUC,GAAe,CACxBf,GAAcH,EAAkBkB,CAAE,EACvC1B,GAAA,MAAAA,EAAW0B,EACb,EAGMC,EAAiBC,GAAyB,OAC9C,GAAI1B,IAAuB0B,EAAM,MAAQ,SAAWA,EAAM,MAAQ,KAAM,CACtEA,EAAM,eAAA,EACN,MAAMC,EAAUhC,EAAMwB,CAAc,EAChCQ,GAASJ,EAAOI,EAAQ,EAAE,EAC9B,MACF,CAEA,MAAMC,EAASF,EAAM,MAAQ,aAAe,EAAIA,EAAM,MAAQ,YAAc,GAAK,EACjF,GAAIE,IAAW,EAAG,OAElBF,EAAM,eAAA,EACN,MAAMG,IACF7B,EAAqBmB,EAAiBP,GAAegB,EAASjC,EAAM,QAAUA,EAAM,OAExFoB,EAAcc,CAAI,EACb7B,GAAoBuB,EAAO5B,EAAMkC,CAAI,EAAE,EAAE,GAM9CrB,EAAA,SAAS,eAAe,GAAGL,CAAM,QAAQR,EAAMkC,CAAI,EAAE,EAAE,EAAE,IAAzD,MAAArB,EAA4D,OAC9D,EAEA,GAAIb,EAAM,SAAW,EAAG,OAAO,KAM/B,MAAMmC,EAAWpB,EAAAA,UAAUQ,GAAA,YAAAA,EAAQ,OAAO,EAE1C,OACEa,OAAC,OAAI,UAAWC,EAAAA,GAAGC,EAAAA,QAAO,KAAMhC,CAAS,EAAG,cAAaC,EACvD,SAAA,CAAAgC,EAAAA,IAAC,MAAA,CACC,IAAKlB,EACL,UAAWiB,EAAAA,QAAO,WAClB,KAAK,UACL,aAAYlC,EACZ,UAAW0B,EAEV,SAAA9B,EAAM,IAAIkB,GAAQ,OACjB,MAAMsB,EAAWtB,EAAK,KAAOK,EAAO,GAEpC,OACEa,EAAAA,KAAC,SAAA,CAEC,GAAI,GAAG5B,CAAM,QAAQU,EAAK,EAAE,GAC5B,KAAK,SACL,KAAK,MACL,gBAAesB,EAEf,gBAAeA,GAAYL,EAAW,GAAG3B,CAAM,UAAUU,EAAK,EAAE,GAAK,OAMrE,UACGb,IAAqBQ,EAAAb,EAAMwB,CAAc,IAApB,YAAAX,EAAuB,MAAOK,EAAK,GAAKsB,GAAY,EAAI,GAEhF,UAAWH,EAAAA,GAAGC,UAAO,UAAWE,GAAYF,EAAAA,QAAO,mBAAmB,CAAC,EACvE,QAAS,IAAMV,EAAOV,EAAK,EAAE,EAE5B,SAAA,CAAAA,EAAK,MACLH,EAAAA,UAAUG,EAAK,KAAK,GAAKqB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,YAAc,SAAApB,EAAK,KAAA,CAAM,CAAA,CAAA,EAnBtEA,EAAK,EAAA,CAsBhB,CAAC,CAAA,CAAA,EAGFiB,GACCI,EAAAA,IAAC,MAAA,CACC,GAAI,GAAG/B,CAAM,UAAUe,EAAO,EAAE,GAChC,KAAK,WACL,kBAAiB,GAAGf,CAAM,QAAQe,EAAO,EAAE,GAC3C,UAAWe,EAAAA,QAAO,YAClB,SAAU,EAET,SAAAf,EAAO,OAAA,CAAA,CACV,EAEJ,CAEJ,EAEAkB,SAAkC1C,CAAI"}

package/build/components/Tabs/index.d.ts

@@ -0,0 +1,27 @@
+import { FC, ReactNode } from 'react';
+export type TabItem = {
+    id: string;
+    label: string;
+    /** Etiketin yanında gösterilen sayı. */
+    count?: number;
+    /** Sekmenin paneli. */
+    content?: ReactNode;
+};
+type Props = {
+    items: TabItem[];
+    /** Kontrolsüz kullanımda açılışta seçili sekme. */
+    defaultTabId?: string;
+    /** Kontrollü kullanım: seçili sekme çağıranın durumunda. */
+    activeId?: string;
+    onChange?: (id: string) => void;
+    /** Sekme çubuğunun erişilebilir adı. */
+    ariaLabel?: string;
+    /** Ok tuşu yalnızca ODAĞI taşır; seçim `Enter`/`Space` ile yapılır. */
+    isManualActivation?: boolean;
+    className?: string;
+    testId?: string;
+};
+/** Sekmeler. */
+declare const Tabs: FC<Props>;
+declare const _default: typeof Tabs;
+export default _default;

package/build/components/Tabs/index.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsxs as R, jsx as b } from "react/jsx-runtime";
+import { memo as L, useId as T, useState as m, useRef as E, useEffect as g } from "react";
+import { isDefined as p } from "@handijit/utils";
+import { cx as j } from "../../helpers/class-name.helper.js";
+import { scrollIntoViewIfPossible as U } from "../../helpers/scroll.helper.js";
+const c = {"tabs":"ui-tabs-l4dFE","tabs__list":"ui-tabs__list-HJvR8","tabs__tab":"ui-tabs__tab-7gDW7","tabs__tab--active":"ui-tabs__tab--active-riqNp","tabs__count":"ui-tabs__count-8JX8s","tabs__panel":"ui-tabs__panel-CPklY"};
+const V = ({
+  items: t,
+  defaultTabId: v,
+  activeId: I,
+  onChange: d,
+  ariaLabel: F,
+  isManualActivation: a,
+  className: K,
+  testId: P
+}) => {
+  var w;
+  const l = T(), [S, q] = m(v ?? ((w = t[0]) == null ? void 0 : w.id)), x = p(I), y = x ? I : S, n = t.findIndex((e) => e.id === y), [i, h] = m(n < 0 ? 0 : n), _ = E(null), o = t[n] ?? t[0], f = i >= 0 && i < t.length ? i : Math.max(n, 0);
+  g(() => {
+    h(n < 0 ? 0 : n);
+  }, [n]);
+  const $ = E(!1);
+  g(() => {
+    var e;
+    if (!$.current) {
+      $.current = !0;
+      return;
+    }
+    U((e = _.current) == null ? void 0 : e.querySelector('[aria-selected="true"]'), {
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, [y]);
+  const u = (e) => {
+    x || q(e), d == null || d(e);
+  }, B = (e) => {
+    var D;
+    if (a && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      const N = t[f];
+      N && u(N.id);
+      return;
+    }
+    const r = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    if (r === 0) return;
+    e.preventDefault();
+    const s = ((a ? f : n) + r + t.length) % t.length;
+    h(s), a || u(t[s].id), (D = document.getElementById(`${l}-tab-${t[s].id}`)) == null || D.focus();
+  };
+  if (t.length === 0) return null;
+  const k = p(o == null ? void 0 : o.content);
+  return /* @__PURE__ */ R("div", { className: j(c.tabs, K), "data-testid": P, children: [
+    /* @__PURE__ */ b(
+      "div",
+      {
+        ref: _,
+        className: c.tabs__list,
+        role: "tablist",
+        "aria-label": F,
+        onKeyDown: B,
+        children: t.map((e) => {
+          var s;
+          const r = e.id === o.id;
+          return /* @__PURE__ */ R(
+            "button",
+            {
+              id: `${l}-tab-${e.id}`,
+              type: "button",
+              role: "tab",
+              "aria-selected": r,
+              "aria-controls": r && k ? `${l}-panel-${e.id}` : void 0,
+              tabIndex: (a ? ((s = t[f]) == null ? void 0 : s.id) === e.id : r) ? 0 : -1,
+              className: j(c.tabs__tab, r && c["tabs__tab--active"]),
+              onClick: () => u(e.id),
+              children: [
+                e.label,
+                p(e.count) && /* @__PURE__ */ b("span", { className: c.tabs__count, children: e.count })
+              ]
+            },
+            e.id
+          );
+        })
+      }
+    ),
+    k && /* @__PURE__ */ b(
+      "div",
+      {
+        id: `${l}-panel-${o.id}`,
+        role: "tabpanel",
+        "aria-labelledby": `${l}-tab-${o.id}`,
+        className: c.tabs__panel,
+        tabIndex: 0,
+        children: o.content
+      }
+    )
+  ] });
+}, Q = /* @__PURE__ */ L(V);
+export {
+  Q as default
+};
+//# sourceMappingURL=index.js.map

package/build/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type KeyboardEvent,\n  memo,\n  type ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { isDefined } from '@handijit/utils';\n\nimport { cx } from '../../helpers/class-name.helper';\nimport { scrollIntoViewIfPossible } from '../../helpers/scroll.helper';\n\nimport styles from './index.module.scss';\n\nexport type TabItem = {\n  id: string;\n  label: string;\n  /** Etiketin yanında gösterilen sayı. */\n  count?: number;\n  /** Sekmenin paneli. */\n  content?: ReactNode;\n};\n\ntype Props = {\n  items: TabItem[];\n  /** Kontrolsüz kullanımda açılışta seçili sekme. */\n  defaultTabId?: string;\n  /** Kontrollü kullanım: seçili sekme çağıranın durumunda. */\n  activeId?: string;\n  onChange?: (id: string) => void;\n  /** Sekme çubuğunun erişilebilir adı. */\n  ariaLabel?: string;\n  /** Ok tuşu yalnızca ODAĞI taşır; seçim `Enter`/`Space` ile yapılır. */\n  isManualActivation?: boolean;\n  className?: string;\n  testId?: string;\n};\n\n/** Sekmeler. */\nconst Tabs: FC<Props> = ({\n  items,\n  defaultTabId,\n  activeId: controlledId,\n  onChange,\n  ariaLabel,\n  isManualActivation,\n  className,\n  testId,\n}) => {\n  const baseId = useId();\n  const [uncontrolledId, setUncontrolledId] = useState(defaultTabId ?? items[0]?.id);\n\n  const isControlled = isDefined(controlledId);\n  const activeId = isControlled ? controlledId : uncontrolledId;\n\n  const activeIndex = items.findIndex(item => item.id === activeId);\n  /* Manuel kipte ODAKLANAN sekme ile SECILI sekme ayrisir. */\n  const [focusIndex, setFocusIndex] = useState(activeIndex < 0 ? 0 : activeIndex);\n  const listRef = useRef<HTMLDivElement>(null);\n  const active = items[activeIndex] ?? items[0];\n\n  /*\n   * 1. COKME: `items` kisaldiginda indeks kirpilmiyordu.\n   * ⚠ `focusIndex` HAM OKUNMAZ — iki ayri ariza uretiyordu.\n   */\n  const safeFocusIndex =\n    focusIndex >= 0 && focusIndex < items.length ? focusIndex : Math.max(activeIndex, 0);\n\n  useEffect(() => {\n    /* Secim degistiginde odak da ona hizalanir. */\n    setFocusIndex(activeIndex < 0 ? 0 : activeIndex);\n  }, [activeIndex]);\n\n  /*\n   * SECILI SEKME GORUNURE KAYDIRILIR — ama MOUNT'ta DEGIL.\n   * ⚠ Ilk kosu da kaydiriyordu ve `scrollIntoView` yalnizca serit kabini degil SAYFAYI da kaydirir:\n   * serit ilk boyamada ekranin altindaysa (uzun…\n   */\n  const hasMountedRef = useRef(false);\n\n  useEffect(() => {\n    if (!hasMountedRef.current) {\n      hasMountedRef.current = true;\n      return;\n    }\n\n    scrollIntoViewIfPossible(listRef.current?.querySelector(`[aria-selected=\"true\"]`), {\n      block: 'nearest',\n      inline: 'nearest',\n    });\n  }, [activeId]);\n\n  const select = (id: string) => {\n    if (!isControlled) setUncontrolledId(id);\n    onChange?.(id);\n  };\n\n  /** Ok tuşlarıyla gezinme; başta/sonda döner. */\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (isManualActivation && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      const focused = items[safeFocusIndex];\n      if (focused) select(focused.id);\n      return;\n    }\n\n    const offset = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;\n    if (offset === 0) return;\n\n    event.preventDefault();\n    const next =\n      ((isManualActivation ? safeFocusIndex : activeIndex) + offset + items.length) % items.length;\n\n    setFocusIndex(next);\n    if (!isManualActivation) select(items[next].id);\n\n    /*\n     * Odak HER IKI kipte de tasinir: manuel kipte seciliyle odaklanan sekme ayrisiyor ve `tabindex`\n     * odaklanani izlemek zorunda.\n     */\n    document.getElementById(`${baseId}-tab-${items[next].id}`)?.focus();\n  };\n\n  if (items.length === 0) return null;\n\n  /*\n   * Panelsiz kullanimda `aria-controls` VERILMEZ: var olmayan bir kimligi isaret etmek ekran\n   * okuyucuda kirik bir bag uretir.\n   */\n  const hasPanel = isDefined(active?.content);\n\n  return (\n    <div className={cx(styles.tabs, className)} data-testid={testId}>\n      <div\n        ref={listRef}\n        className={styles.tabs__list}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n      >\n        {items.map(item => {\n          const isActive = item.id === active.id;\n\n          return (\n            <button\n              key={item.id}\n              id={`${baseId}-tab-${item.id}`}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n              /* ⚠ YALNIZCA SECILI SEKMEDE. */\n              aria-controls={isActive && hasPanel ? `${baseId}-panel-${item.id}` : undefined}\n              // Yalnızca seçili sekme sekme sırasında; gezinme ok tuşlarıyla.\n              /*\n               * Donen `tabindex` ODAKLANANI izler: manuel kipte secili sekme ile odaklanan sekme\n               * ayri ve Tab'in geri donecegi yer odaklanan olmali.\n               */\n              tabIndex={\n                (isManualActivation ? items[safeFocusIndex]?.id === item.id : isActive) ? 0 : -1\n              }\n              className={cx(styles.tabs__tab, isActive && styles['tabs__tab--active'])}\n              onClick={() => select(item.id)}\n            >\n              {item.label}\n              {isDefined(item.count) && <span className={styles.tabs__count}>{item.count}</span>}\n            </button>\n          );\n        })}\n      </div>\n\n      {hasPanel && (\n        <div\n          id={`${baseId}-panel-${active.id}`}\n          role=\"tabpanel\"\n          aria-labelledby={`${baseId}-tab-${active.id}`}\n          className={styles.tabs__panel}\n          tabIndex={0}\n        >\n          {active.content}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default /*#__PURE__*/ memo(Tabs) as typeof Tabs;\n"],"names":["Tabs","items","defaultTabId","controlledId","onChange","ariaLabel","isManualActivation","className","testId","baseId","useId","uncontrolledId","setUncontrolledId","useState","_a","isControlled","isDefined","activeId","activeIndex","item","focusIndex","setFocusIndex","listRef","useRef","active","safeFocusIndex","useEffect","hasMountedRef","scrollIntoViewIfPossible","select","id","handleKeyDown","event","focused","offset","next","hasPanel","jsxs","cx","styles","jsx","isActive","index"],"mappings":"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"}

package/build/components/Tabs/style.css

@@ -0,0 +1 @@
+@layer ui{.ui-tabs-l4dFE{display:flex;flex-direction:column;gap:var(--hd-space-5)}.ui-tabs__list-HJvR8{display:flex;gap:var(--hd-space-1);position:relative;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-block:var(--hd-space-1) var(--hd-space-3);scrollbar-width:none;-ms-overflow-style:none}.ui-tabs__list-HJvR8::-webkit-scrollbar{display:none}.ui-tabs__list-HJvR8>*{scroll-snap-align:start;flex-shrink:0}.ui-tabs__list-HJvR8{border-bottom:1px solid var(--hd-border)}.ui-tabs__tab-7gDW7{position:relative}.ui-tabs__tab-7gDW7:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}.ui-tabs__tab-7gDW7{display:inline-flex;align-items:center;gap:var(--hd-space-2);font-family:var(--hd-font-body);font-size:var(--hd-type-small-size);font-weight:var(--ui-tab-weight, var(--hd-font-weight-medium));color:var(--hd-text-2);background:none;border:none;padding:var(--hd-space-3) var(--hd-space-4);cursor:pointer;white-space:nowrap;position:relative;transition:color var(--hd-duration-fast) var(--hd-ease-standard)}.ui-tabs__tab-7gDW7:hover{color:var(--hd-text)}.ui-tabs__tab-7gDW7:focus-visible{outline:var(--ui-ring-width, 2px) solid var(--hd-focus);outline-offset:var(--ui-ring-offset, -2px)}.ui-tabs__tab-7gDW7:before{content:"";position:absolute;inset-inline:var(--hd-space-3);bottom:-1px;height:2px;background-color:transparent;border-radius:var(--hd-radius-xs) var(--hd-radius-xs) 0 0;transition:background-color var(--hd-duration-fast) var(--hd-ease-standard)}.ui-tabs__tab--active-riqNp{color:var(--hd-text);font-weight:var(--hd-font-weight-semibold)}.ui-tabs__tab--active-riqNp:before{background-color:var(--hd-primary)}@media (prefers-reduced-motion: reduce){.ui-tabs__tab-7gDW7{transition:none}.ui-tabs__tab-7gDW7:before{transition:none}}.ui-tabs__count-8JX8s{font-size:var(--hd-type-caption-size);font-weight:var(--hd-font-weight-semibold);color:var(--hd-text-2);background-color:var(--hd-bg-inset);border-radius:var(--hd-radius-pill);padding:1px var(--hd-space-2);font-variant-numeric:tabular-nums}.ui-tabs__panel-CPklY:focus-visible{outline:var(--ui-ring-width, 2px) solid var(--hd-focus);outline-offset:var(--ui-ring-offset, 4px);border-radius:var(--hd-radius-xs)}}

package/build/components/TagInput/index.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),a=require("react"),E=require("react-bootstrap-icons"),b=require("../../helpers/class-name.helper.cjs"),K=require("../../helpers/component.helper.cjs"),y=require("../../helpers/label.helper.cjs"),M=require("../../hooks/useAnnounce.cjs"),P=require("../../theme/context.cjs"),r={default:{"tagInput":"ui-tagInput-QraZR","tagInput__field":"ui-tagInput__field-HeWrC","tagInput--invalid":"ui-tagInput--invalid-NQogL","tagInput--disabled":"ui-tagInput--disabled--AJFF","tagInput__tag":"ui-tagInput__tag-D-ZWB","tagInput__tag--duplicate":"ui-tagInput__tag--duplicate-3-FMF","tagInput__remove":"ui-tagInput__remove-bpjGG"}},z=({values:n,onChange:f,label:w,placeholder:T,removeLabel:j,separators:v=["Enter",","],maxTags:m,isDisabled:s,id:k,required:N,className:R,testId:S,"aria-describedby":B,"aria-invalid":g})=>{const D=a.useId(),F=k??D,I=a.useRef(null),u=a.useRef(0);a.useEffect(()=>()=>{u.current&&window.clearTimeout(u.current)},[]);const{labels:i}=P.useUi(),l=M.default(),[c,p]=a.useState(""),[$,_]=a.useState(null),h=m!==void 0&&n.length>=m,x=e=>{var d;const t=e.trim();if(t!==""){if(n.includes(t)){_(t),u.current&&window.clearTimeout(u.current),u.current=window.setTimeout(()=>_(null),1e3),l(`${t} zaten ekli`,"assertive"),p("");return}h||(f([...n,t]),p(""),l(y.resolveFormatter("TagInput.added",(d=i==null?void 0:i.tagInput)==null?void 0:d.added,t)))}},q=e=>{var t;f(n.filter(d=>d!==e)),l(y.resolveFormatter("TagInput.removed",(t=i==null?void 0:i.tagInput)==null?void 0:t.removed,e))},C=e=>{if(v.includes(e.key)){e.preventDefault(),x(c);return}if(e.key==="Backspace"&&c===""){const t=n.at(-1);t!==void 0&&q(t)}};return o.jsxs("div",{className:b.cx(r.default.tagInput,s&&r.default["tagInput--disabled"],g&&r.default["tagInput--invalid"],R),"data-testid":S,onClick:()=>{var e;return(e=I.current)==null?void 0:e.focus()},children:[n.map(e=>o.jsxs("span",{className:b.cx(r.default.tagInput__tag,$===e&&r.default["tagInput__tag--duplicate"]),children:[e,o.jsx("button",{type:"button",className:r.default.tagInput__remove,"aria-label":`${e} — ${j}`,disabled:s,onClick:t=>{t.stopPropagation(),q(e)},children:o.jsx(E.XLg,{"aria-hidden":!0})})]},e)),o.jsx("input",{ref:I,id:F,type:"text",className:r.default.tagInput__field,value:c,placeholder:n.length===0?T:void 0,"aria-label":w,"aria-describedby":B,"aria-invalid":g,"aria-required":N||void 0,disabled:s||h,onChange:e=>p(e.target.value),onKeyDown:C,onBlur:()=>x(c)})]})},A=a.memo(K.named(z,"TagInput"));exports.default=A;
+//# sourceMappingURL=index.cjs.map

package/build/components/TagInput/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/TagInput/index.tsx"],"sourcesContent":["'use client';\n\nimport { type KeyboardEvent, memo, useEffect, useId, useRef, useState } from 'react';\n\nimport { XLg } from 'react-bootstrap-icons';\n\nimport { cx } from '../../helpers/class-name.helper';\nimport { named } from '../../helpers/component.helper';\nimport { resolveFormatter } from '../../helpers/label.helper';\nimport useAnnounce from '../../hooks/useAnnounce';\n\nimport { useUi } from '../../theme/context';\n\nimport styles from './index.module.scss';\n\ntype Props = {\n  values: string[];\n  onChange: (values: string[]) => void;\n  /** Alanın erişilebilir adı. */\n  label: string;\n  placeholder?: string;\n  /** Her etiketin kaldırma düğmesinin ad öneki (\"Kaldır\"). */\n  removeLabel: string;\n  /** Etiketi bitiren tuşlar. */\n  separators?: string[];\n  /** En fazla kaç etiket. */\n  maxTags?: number;\n  isDisabled?: boolean;\n  id?: string;\n  /** Zorunluluk — `Field`in `FieldChildProps` sözleşmesi. */\n  required?: boolean;\n  'aria-describedby'?: string;\n  'aria-invalid'?: boolean;\n  className?: string;\n  testId?: string;\n};\n\n/** Etiket girdisi — yazılan metni kaldırılabilir çiplere çevirir. */\nconst TagInput = ({\n  values,\n  onChange,\n  label,\n  placeholder,\n  removeLabel,\n  separators = ['Enter', ','],\n  maxTags,\n  isDisabled,\n  id,\n  required,\n  className,\n  testId,\n  'aria-describedby': describedBy,\n  'aria-invalid': isInvalid,\n}: Props) => {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  /* ⚠ Yinelenen etiket uyarısının zamanlayıcısı REF'te tutulur ve unmount'ta temizlenir. */\n  const duplicateTimerRef = useRef(0);\n\n  useEffect(\n    () => () => {\n      if (duplicateTimerRef.current) window.clearTimeout(duplicateTimerRef.current);\n    },\n    [],\n  );\n  const { labels } = useUi();\n  const announce = useAnnounce();\n\n  const [draft, setDraft] = useState('');\n  /* Yinelenen deger: var olan cip bir kare vurgulanir. */\n  const [duplicate, setDuplicate] = useState<string | null>(null);\n\n  const isFull = maxTags !== undefined && values.length >= maxTags;\n\n  const commit = (raw: string) => {\n    const value = raw.trim();\n    if (value === '') return;\n\n    if (values.includes(value)) {\n      /* Sessizce yutmak yerine GOSTER: kullanici \"yazdim, kayboldu\" diyordu. */\n      setDuplicate(value);\n      if (duplicateTimerRef.current) window.clearTimeout(duplicateTimerRef.current);\n      duplicateTimerRef.current = window.setTimeout(() => setDuplicate(null), 1_000);\n      announce(`${value} zaten ekli`, 'assertive');\n      setDraft('');\n      return;\n    }\n\n    if (isFull) return;\n\n    onChange([...values, value]);\n    setDraft('');\n    announce(resolveFormatter('TagInput.added', labels?.tagInput?.added, value));\n  };\n\n  const remove = (value: string) => {\n    onChange(values.filter(item => item !== value));\n    announce(resolveFormatter('TagInput.removed', labels?.tagInput?.removed, value));\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (separators.includes(event.key)) {\n      event.preventDefault();\n      commit(draft);\n      return;\n    }\n\n    /* BOS girdide Backspace SON etiketi kaldirir — metin varken kaldirmaz. */\n    if (event.key === 'Backspace' && draft === '') {\n      const lastValue = values.at(-1);\n      if (lastValue !== undefined) remove(lastValue);\n    }\n  };\n\n  return (\n    <div\n      className={cx(\n        styles.tagInput,\n        isDisabled && styles['tagInput--disabled'],\n        isInvalid && styles['tagInput--invalid'],\n        className,\n      )}\n      data-testid={testId}\n      /*\n       * Kutunun herhangi bir yerine tiklamak girdiyi odaklar: cipler arasindaki bosluga tiklayan\n       * kullanici hicbir sey olmadigini saniyordu.\n       */\n      onClick={() => inputRef.current?.focus()}\n    >\n      {values.map(value => (\n        <span\n          key={value}\n          className={cx(\n            styles.tagInput__tag,\n            duplicate === value && styles['tagInput__tag--duplicate'],\n          )}\n        >\n          {value}\n\n          <button\n            type=\"button\"\n            className={styles.tagInput__remove}\n            /*\n             * Ad degeri ICERIR: on bes cipin hepsi \"Kaldir\" diye okundugunda hangisi oldugu belli\n             * olmuyordu.\n             */\n            aria-label={`${value} — ${removeLabel}`}\n            disabled={isDisabled}\n            onClick={event => {\n              event.stopPropagation();\n              remove(value);\n            }}\n          >\n            <XLg aria-hidden />\n          </button>\n        </span>\n      ))}\n\n      <input\n        ref={inputRef}\n        id={inputId}\n        type=\"text\"\n        className={styles.tagInput__field}\n        value={draft}\n        placeholder={values.length === 0 ? placeholder : undefined}\n        aria-label={label}\n        aria-describedby={describedBy}\n        aria-invalid={isInvalid}\n        /*\n         * ⚠ Yerel `required` YAZILMAZ: alanin degeri etiket listesidir, girdi kutusu ise commit'ten\n         * sonra BOSALIR.\n         */\n        aria-required={required || undefined}\n        disabled={isDisabled || isFull}\n        onChange={event => setDraft(event.target.value)}\n        onKeyDown={handleKeyDown}\n        /*\n         * Alan terk edildiginde yazilan metin ETIKETE DONER: yarim kalmis bir metin kayboluyor ve\n         * kullanici bunu ancak gonderdikten sonra fark ediyordu.\n         */\n        onBlur={() => commit(draft)}\n      />\n    </div>\n  );\n};\n\nexport default /*#__PURE__*/ memo(/*#__PURE__*/ named(TagInput, 'TagInput')) as typeof TagInput;\n"],"names":["TagInput","values","onChange","label","placeholder","removeLabel","separators","maxTags","isDisabled","id","required","className","testId","describedBy","isInvalid","generatedId","useId","inputId","inputRef","useRef","duplicateTimerRef","useEffect","labels","useUi","announce","useAnnounce","draft","setDraft","useState","duplicate","setDuplicate","isFull","commit","raw","value","resolveFormatter","_a","remove","item","handleKeyDown","event","lastValue","jsxs","cx","styles","jsx","XLg","index","memo","named"],"mappings":"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"}

package/build/components/TagInput/index.d.ts

@@ -0,0 +1,25 @@
+type Props = {
+    values: string[];
+    onChange: (values: string[]) => void;
+    /** Alanın erişilebilir adı. */
+    label: string;
+    placeholder?: string;
+    /** Her etiketin kaldırma düğmesinin ad öneki ("Kaldır"). */
+    removeLabel: string;
+    /** Etiketi bitiren tuşlar. */
+    separators?: string[];
+    /** En fazla kaç etiket. */
+    maxTags?: number;
+    isDisabled?: boolean;
+    id?: string;
+    /** Zorunluluk — `Field`in `FieldChildProps` sözleşmesi. */
+    required?: boolean;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    className?: string;
+    testId?: string;
+};
+/** Etiket girdisi — yazılan metni kaldırılabilir çiplere çevirir. */
+declare const TagInput: ({ values, onChange, label, placeholder, removeLabel, separators, maxTags, isDisabled, id, required, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }: Props) => import("react").JSX.Element;
+declare const _default: typeof TagInput;
+export default _default;

package/build/components/TagInput/index.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsxs as _, jsx as p } from "react/jsx-runtime";
+import { memo as A, useId as L, useRef as T, useEffect as P, useState as b } from "react";
+import { XLg as S } from "react-bootstrap-icons";
+import { cx as k } from "../../helpers/class-name.helper.js";
+import { named as U } from "../../helpers/component.helper.js";
+import { resolveFormatter as x } from "../../helpers/label.helper.js";
+import V from "../../hooks/useAnnounce.js";
+import { useUi as X } from "../../theme/context.js";
+const r = {"tagInput":"ui-tagInput-QraZR","tagInput__field":"ui-tagInput__field-HeWrC","tagInput--invalid":"ui-tagInput--invalid-NQogL","tagInput--disabled":"ui-tagInput--disabled--AJFF","tagInput__tag":"ui-tagInput__tag-D-ZWB","tagInput__tag--duplicate":"ui-tagInput__tag--duplicate-3-FMF","tagInput__remove":"ui-tagInput__remove-bpjGG"};
+const G = ({
+  values: n,
+  onChange: m,
+  label: v,
+  placeholder: N,
+  removeLabel: D,
+  separators: R = ["Enter", ","],
+  maxTags: l,
+  isDisabled: d,
+  id: $,
+  required: j,
+  className: B,
+  testId: C,
+  "aria-describedby": E,
+  "aria-invalid": f
+}) => {
+  const F = L(), K = $ ?? F, g = T(null), o = T(0);
+  P(
+    () => () => {
+      o.current && window.clearTimeout(o.current);
+    },
+    []
+  );
+  const { labels: i } = X(), u = V(), [a, s] = b(""), [q, I] = b(null), y = l !== void 0 && n.length >= l, h = (t) => {
+    var c;
+    const e = t.trim();
+    if (e !== "") {
+      if (n.includes(e)) {
+        I(e), o.current && window.clearTimeout(o.current), o.current = window.setTimeout(() => I(null), 1e3), u(`${e} zaten ekli`, "assertive"), s("");
+        return;
+      }
+      y || (m([...n, e]), s(""), u(x("TagInput.added", (c = i == null ? void 0 : i.tagInput) == null ? void 0 : c.added, e)));
+    }
+  }, w = (t) => {
+    var e;
+    m(n.filter((c) => c !== t)), u(x("TagInput.removed", (e = i == null ? void 0 : i.tagInput) == null ? void 0 : e.removed, t));
+  }, z = (t) => {
+    if (R.includes(t.key)) {
+      t.preventDefault(), h(a);
+      return;
+    }
+    if (t.key === "Backspace" && a === "") {
+      const e = n.at(-1);
+      e !== void 0 && w(e);
+    }
+  };
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      className: k(
+        r.tagInput,
+        d && r["tagInput--disabled"],
+        f && r["tagInput--invalid"],
+        B
+      ),
+      "data-testid": C,
+      onClick: () => {
+        var t;
+        return (t = g.current) == null ? void 0 : t.focus();
+      },
+      children: [
+        n.map((t) => /* @__PURE__ */ _(
+          "span",
+          {
+            className: k(
+              r.tagInput__tag,
+              q === t && r["tagInput__tag--duplicate"]
+            ),
+            children: [
+              t,
+              /* @__PURE__ */ p(
+                "button",
+                {
+                  type: "button",
+                  className: r.tagInput__remove,
+                  "aria-label": `${t} — ${D}`,
+                  disabled: d,
+                  onClick: (e) => {
+                    e.stopPropagation(), w(t);
+                  },
+                  children: /* @__PURE__ */ p(S, { "aria-hidden": !0 })
+                }
+              )
+            ]
+          },
+          t
+        )),
+        /* @__PURE__ */ p(
+          "input",
+          {
+            ref: g,
+            id: K,
+            type: "text",
+            className: r.tagInput__field,
+            value: a,
+            placeholder: n.length === 0 ? N : void 0,
+            "aria-label": v,
+            "aria-describedby": E,
+            "aria-invalid": f,
+            "aria-required": j || void 0,
+            disabled: d || y,
+            onChange: (t) => s(t.target.value),
+            onKeyDown: z,
+            onBlur: () => h(a)
+          }
+        )
+      ]
+    }
+  );
+}, et = /* @__PURE__ */ A(/* @__PURE__ */ U(G, "TagInput"));
+export {
+  et as default
+};
+//# sourceMappingURL=index.js.map