tamga-ui 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -5,6 +5,64 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
 
 > 🇹🇷 Türkçe için [tamga.org.tr/tr](https://tamga.org.tr/tr).
 
+## 0.9.0
+
+> An equal grid for the filter row, and a box-shaped panel for the searchable field. Both opt-in; a bar that gives neither renders as before, locked by test.
+
+### Added
+
+- **`FilterBar` `grid`** (`look="fields"`) · a CSS grid decided by the bar's own width, not the
+  screen's. Wide: one line, a fixed 16rem search box and equal columns for the top fields,
+  chosen when every field can have about 9rem (the threshold per field count is written as
+  `@container` rules for 1 to 8 fields, a date range counting as two; a drawer button or
+  `extra` adds a tail column). Narrower: two equal lines, the search spanning two columns,
+  `ceil((fields + 2) / 2)` columns. Below the narrow threshold the 0.8.1 behaviour. No field
+  grows past the others any more (six fields had one stretching alone to 320px on the second
+  line). A long value is clipped in its box and kept whole in `title`; `Select` gains a
+  `title` prop for it.
+- **`FilterBar` `searchableAs="panel"`** · a `searchable` field is drawn as a `SelectPanel` in
+  the new `look="field"`: a box-shaped button the size and edge of the inputs beside it,
+  showing the value or `labels.all` with a caret; the panel is titled `panelTitle ?? label`,
+  starts with a search box (`searchPlaceholder ?? labels.searchIn(label) ?? label`) and
+  `labels.all` as the first option; keyboard as in `SelectPanel`. The default, `combobox`, is
+  today's text box. Applies on top, in the drawer and in the narrow sheet.
+- **`SelectPanel` `look="field"`** · the trigger as a form box (`.tamga-select`), full width,
+  `title` carrying the whole value when set; the same caret glyph and text colour as `Select`
+  (an empty "All" reads as a value, not a faint placeholder), the same strong edge when set.
+- **`FilterBar` `look="fields"` on a narrow bar** · the sheet is titled
+  `labels.filter ?? labels.allFilters` in both layouts; the search box's visible label stays for
+  screen readers only; the search box keeps at least 7.5rem and the "Filter · N" button drops
+  under it when the bar is too narrow for both; an applied chip is one line, a long value
+  clipped with its whole text in `title`.
+
+## 0.8.1
+
+> Five things the chip layout showed on a real page.
+
+### Fixed
+
+- **`FilterBar` `look="chips"`** · the search box's visible label is gone (it stays for screen
+  readers), the box is the chips' size and sits on their line, centred with them. "Clear all"
+  is a plain link at the end of the chip row, on the same line. A set chip is one object: the
+  edge and shadow belong to the chip, the trigger inside and the remove square carry none, the
+  remove stays a separate button named `labels.remove(label)`. In the narrow-screen sheet the
+  panels show only the value; the field's name is already above each. On a narrow screen the
+  scrolling row of set chips and "Clear all" stay inside the card. All of it in kit classes;
+  `pnpm olc:filtre` measures each point at 1280 and 390.
+- **The narrow layout keys off the bar's own width, not the screen's.** With the app's sidebar
+  open on a phone the card is 210px wide while the viewport is 390; a viewport media query
+  could not see that, so the fixed search box and the "Filter · N" button overflowed the card.
+  `.tamga-filter-bar` is now an inline-size container and the narrow/wide rules are
+  `@container` queries; every flex ancestor down to the chip has `min-width: 0`, the search
+  shrinks (`flex: 1 1 0`), the button never does (`flex-shrink: 0`), the set-chip row scrolls
+  inside the card, and the chips in it never shrink (`flex-shrink: 0`, one line of text): with
+  three filters set they were squashed to 24px and the row did not scroll. `pnpm olc:filtre`
+  also measures a 210px card on a 1280px screen, with three set chips. Applies to
+  `look="fields"` too.
+- **A chip panel's search box showed the bar's own search text** ("Search by name or
+  address" inside the Tags panel). It now reads the field's `searchPlaceholder`, else
+  `labels.searchIn(label)`, else the field's label.
+
 ## 0.8.0
 
 > A choice panel opened from a button, and a filter bar made of chips.

package/dist/blocks/filter-bar.d.ts

@@ -59,6 +59,13 @@ export type FilterField = {
      * the label. TR: Yalnız `look="chips"`: çipin panelinin başlığı, "Müşteri seçin"; yoksa ad.
      */
     panelTitle?: string;
+    /**
+     * `look="chips"`, `searchable` only: the panel's search box text, "Search tags". Absent,
+     * `labels.searchIn(label)`, else the label itself; never the bar's own search text. TR: Yalnız
+     * `look="chips"` ve `searchable`: panelin arama kutusunun metni, "Etiket ara". Yoksa
+     * `labels.searchIn(label)`, o da yoksa alanın adı; asla çubuğun kendi arama metni.
+     */
+    searchPlaceholder?: string;
     /**
      * A glyph before the value, naming what this filter is about. TR: Değerin
      * önünde, bu filtrenin neyle ilgili olduğunu söyleyen glif.
@@ -115,6 +122,12 @@ export type FilterBarLabels = {
     open: (label: string) => string;
     /** Like "Remove the <filter> filter". TR: "<filtre> filtresini kaldır". */
     remove: (label: string) => string;
+    /**
+     * Like "Search in <field>"; the chip panel's search box when the field gives no
+     * `searchPlaceholder`. TR: "<alan> içinde ara" gibi; alan `searchPlaceholder` vermezse çip
+     * panelinin arama kutusu.
+     */
+    searchIn?: (label: string) => string;
     rangeStart: string;
     rangeEnd: string;
     calendar: {
@@ -190,7 +203,33 @@ export type FilterBarProps = {
      * uygulanan-filtreler satırı yok: çip özetin kendisi. Metin ve tarih aralığı kutu kalır.
      */
     look?: "fields" | "chips";
+    /**
+     * `fields` only. Off (default), the flex row of today: a field that does not fit drops to the
+     * next line and stretches. On, a grid decided by the bar's own width: one line with a fixed
+     * 16rem search and equal columns when every field can have ~9rem, else two equal lines with
+     * the search spanning two columns (columns = ceil((fields + 2) / 2)); below the narrow
+     * threshold the 0.8.1 behaviour. No field ever grows past the others. A long value is
+     * clipped in its box and kept whole in `title`. TR: Yalnız `fields`. Kapalıyken (varsayılan)
+     * bugünkü esnek satır: sığmayan alan alt satıra düşüp uzuyor. Açıkken kabın genişliğine göre
+     * bir ızgara: her alana ~9rem düşüyorsa sabit 16rem arama + eşit sütunlu tek satır, yoksa
+     * aramanın iki sütun kapladığı eşit iki satır (sütun = ceil((alan + 2) / 2)); dar eşiğin
+     * altında 0.8.1 davranışı. Hiçbir alan öbürlerinden uzamıyor. Uzun değer kutuda kesilir, tamamı
+     * `title`da.
+     */
+    grid?: boolean;
+    /**
+     * What a `searchable` field is drawn as. `combobox` (default) the text box with a magnifier.
+     * `panel` a `SelectPanel` in the `field` look: an ordinary box-shaped button that shows the
+     * value or `labels.all`, a panel titled `panelTitle ?? label` with a search box
+     * (`searchPlaceholder ?? labels.searchIn(label) ?? label`) and `labels.all` first; on top, in
+     * the drawer and in the narrow sheet alike. TR: `searchable` alanın çizimi. `combobox`
+     * (varsayılan) büyüteçli metin kutusu. `panel` `field` görünümünde bir `SelectPanel`: değeri ya
+     * da `labels.all`ı gösteren kutu biçimli sıradan bir düğme, başlığı `panelTitle ?? label`,
+     * arama kutulu (`searchPlaceholder ?? labels.searchIn(label) ?? label`), ilk seçeneği
+     * `labels.all`; üstte, çekmecede ve dar ekran panelinde aynı.
+     */
+    searchableAs?: "combobox" | "panel";
     labels: FilterBarLabels;
 };
-export declare function FilterBar({ values, onChange, top, drawer, optionSource, searchKey, fileSearchKey, onFile, fileAccept, extra, locale, look, labels, }: FilterBarProps): import("react").JSX.Element;
+export declare function FilterBar({ values, onChange, top, drawer, optionSource, searchKey, fileSearchKey, onFile, fileAccept, extra, locale, look, grid, searchableAs, labels, }: FilterBarProps): import("react").JSX.Element;
 //# sourceMappingURL=filter-bar.d.ts.map

package/dist/blocks/filter-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/filter-bar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/filter-bar.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/filter-bar.js

@@ -14,11 +14,14 @@ import { SelectPanel } from "../components/select-panel.js";
    ayrı parametre giderken burada tekrar ayrıştırmak demekti. */
 export const rangeStart = (key) => `${key}Start`;
 export const rangeEnd = (key) => `${key}End`;
-function FieldControl({ field, values, write, optionSource, locale, labels, panel = false, }) {
+function FieldControl({ field, values, write, optionSource, locale, labels, panel = false, kutuPanel = false, baslik = false, }) {
     const options = secenekler(field, optionSource);
     if (panel && (field.kind === "select" || field.kind === "searchable" || field.kind === "multi")) {
         return _jsx(PanelAlani, { field: field, values: values, write: write, optionSource: optionSource, labels: labels });
     }
+    if (kutuPanel && field.kind === "searchable") {
+        return _jsx(PanelAlani, { field: field, values: values, write: write, optionSource: optionSource, labels: labels, kutu: true });
+    }
     /* HER KONTROLÜN ADI VAR: alanın adı bir <span>, kontrole bağlı değil; ekran
        okuyucu beş kutuyu da "Tümü" diye okuyordu. */
     if (field.kind === "dateRange") {
@@ -39,7 +42,8 @@ function FieldControl({ field, values, write, optionSource, locale, labels, pane
         return (_jsx(Combobox, { className: "w-full", "aria-label": field.label, options: options, value: values[field.key] || undefined, onChange: (v) => write(field.key, v ?? ""), placeholder: labels.all, labels: { empty: labels.noMatch, clear: labels.clear, open: labels.open(field.label) } }));
     }
     if (field.kind === "select") {
-        return (_jsx(Select, { className: "w-full", "aria-label": field.label, icon: field.icon, options: [
+        const gorunen = values[field.key] ? secenekler(field, optionSource).find((o) => o.value === values[field.key])?.label ?? values[field.key] : undefined;
+        return (_jsx(Select, { className: "w-full", "aria-label": field.label, title: baslik ? gorunen : undefined, icon: field.icon, options: [
                 labels.all,
                 ...options.map((o) => ({ value: o.value, label: o.label, tone: field.tones?.[o.value] })),
             ], 
@@ -57,17 +61,20 @@ function FieldControl({ field, values, write, optionSource, locale, labels, pane
  * `SelectPanel`, ilk seçeneği "Tümü" (geri dönüş yolu gidiş yoluyla aynı yerde).
  * Çipte boşken kenarlı küçük, doluyken yumuşak ve oksuz; ✕ ayrı düğme.
  */
-function PanelAlani({ field, values, write, optionSource, labels, cip = false, }) {
+function PanelAlani({ field, values, write, optionSource, labels, cip = false, kutu = false, }) {
     const options = secenekler(field, optionSource).map((o) => ({ ...o, tone: field.tones?.[o.value] }));
     const ortak = {
         title: field.panelTitle ?? field.label,
         "aria-label": field.label,
-        prefix: `${field.label}:`,
+        /* Çipte ad önek ("Durum:"); çekmece panelinde ad zaten üstte, önek yok. */
+        prefix: cip ? `${field.label}:` : undefined,
         placeholder: labels.all,
         searchable: field.kind === "searchable",
-        labels: { noMatch: labels.noMatch, search: labels.search, clear: labels.clear },
+        /* Panelin araması kendi metnini taşır; çubuğun arama metni ("Ad ya da adres ara") değil. */
+        labels: { noMatch: labels.noMatch, search: field.searchPlaceholder ?? labels.searchIn?.(field.label) ?? field.label, clear: labels.clear },
         size: cip ? "sm" : "base",
-        className: cip ? undefined : "tamga-select-panel-tam",
+        look: kutu ? "field" : "button",
+        className: cip || kutu ? undefined : "tamga-select-panel-tam",
     };
     if (field.kind === "multi") {
         const selected = (values[field.key] ?? "").split(",").filter(Boolean);
@@ -82,8 +89,13 @@ function secenekler(field, optionSource) {
     const ham = field.options?.length ? field.options : (optionSource[field.key] ?? []);
     return ham.map((o) => (typeof o === "string" ? { value: o, label: o } : o));
 }
-export function FilterBar({ values, onChange, top, drawer, optionSource = {}, searchKey = "q", fileSearchKey, onFile, fileAccept, extra, locale = "en-GB", look = "fields", labels, }) {
+export function FilterBar({ values, onChange, top, drawer, optionSource = {}, searchKey = "q", fileSearchKey, onFile, fileAccept, extra, locale = "en-GB", look = "fields", grid = false, searchableAs = "combobox", labels, }) {
     const cipler = look === "chips";
+    const panelli = searchableAs === "panel";
+    /* Izgara: tarih aralığı iki birim; iki satırlık düzende sütun = ceil((birim + 2) / 2);
+       çekmece düğmesi ya da ek kontrol varsa sondaki "kuyruk" sütunu. */
+    const birim = top.reduce((n, f) => n + (f.kind === "dateRange" ? 2 : 1), 0);
+    const sutun = Math.ceil((birim + 2) / 2);
     const [drawerOpen, setDrawerOpen] = useState(false);
     const formId = useId();
     const active = Object.entries(values).filter(([, v]) => v);
@@ -124,13 +136,13 @@ export function FilterBar({ values, onChange, top, drawer, optionSource = {}, se
         const adlar = new Map(secenekler(field, optionSource).map((o) => [o.value, o.label]));
         return value.split(",").map((v) => adlar.get(v) ?? v).join(field.kind === "multi" ? ", " : ",");
     };
-    const ustAlanlar = (sinif) => top.map((field) => (_jsxs("div", { className: `tamga-filter-alan ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: sinif, children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels, panel: cipler })] }, field.key)));
-    const aramaKutusu = (_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-2.5 text-ink-faint" }), _jsx(Input, { type: "search", full: true, leading: true, placeholder: labels.search, value: values[searchKey] ?? "", onChange: (e) => write(searchKey, e.target.value) })] }));
+    const ustAlanlar = (sinif) => top.map((field) => (_jsxs("div", { className: `tamga-filter-alan ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: sinif, children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels, panel: cipler, kutuPanel: panelli })] }, field.key)));
+    const aramaKutusu = (_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-2.5 text-ink-faint" }), _jsx(Input, { type: "search", full: true, leading: true, size: cipler ? "sm" : "md", placeholder: labels.search, value: values[searchKey] ?? "", onChange: (e) => write(searchKey, e.target.value) })] }));
     const cekmeceDugmesi = (drawer.length > 0 || top.length > 0) && (_jsxs(Button, { className: drawer.length > 0 ? "ml-auto" : "tamga-filter-dar ml-auto", onClick: () => setDrawerOpen(true), children: [_jsx(Icon, { icon: Customize, size: "xs" }), _jsxs("span", { className: "tamga-filter-genis", children: [labels.allFilters, hiddenActive > 0 && _jsx("span", { className: "tamga-count ml-1 tabular-nums", children: hiddenActive })] }), _jsx("span", { className: "tamga-filter-dar", children: darMetin })] }));
-    return (_jsxs("div", { className: "tamga-card tamga-card-open tamga-filter-bar", children: [cipler ? (_jsxs("div", { className: "tamga-filter-cips", children: [_jsxs("label", { className: "tamga-filter-ara-sabit", children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: labels.search }), aramaKutusu] }), _jsxs("span", { className: "tamga-filter-cip-sira", children: [top.map((field) => field.kind === "select" || field.kind === "searchable" || field.kind === "multi" ? (_jsxs("span", { className: "tamga-filter-cip", "data-set": values[field.key] ? "true" : undefined, children: [_jsx(PanelAlani, { field: field, values: values, write: write, optionSource: optionSource, labels: labels, cip: true }), values[field.key] ? (_jsx("button", { type: "button", className: "tamga-filter-cip-x", "aria-label": labels.remove(field.label), onClick: () => write(field.key, ""), children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null] }, field.key)) : (_jsxs("div", { className: "tamga-filter-genis tamga-filter-alan", "data-range": field.kind === "dateRange" || undefined, children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key))), darAktif > 0 ? (_jsx(Button, { variant: "link", size: "sm", onClick: () => onChange({}), children: labels.clearAll })) : null] }), cekmeceDugmesi, extra] })) : (_jsxs("div", { className: "tamga-filter-row", children: [_jsxs("label", { className: "tamga-filter-ara", children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: labels.search }), aramaKutusu] }), top.map((field) => (_jsxs(Fragment, { children: [field.break ? _jsx("span", { "aria-hidden": true, className: "tamga-filter-genis tamga-filter-kir" }) : null, _jsxs("div", { className: `tamga-filter-genis tamga-filter-alan ${field.kind === "dateRange" ? "" : "tamga-filter-cap"}`, "data-range": field.kind === "dateRange" || undefined, children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] })] }, field.key))), cekmeceDugmesi, extra] })), !cipler && active.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [active.map(([key, value]) => (_jsxs("span", { className: "tamga-token", children: [_jsxs("span", { className: "font-normal text-ink-faint", children: [labelFor(key), ":"] }), valueText(key, value), _jsx("button", { type: "button", className: "tamga-token-x", "aria-label": labels.remove(labelFor(key)), onClick: () => write(key, ""), children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, key))), _jsx(Button, { variant: "link", size: "sm", onClick: () => onChange({}), children: labels.clearAll })] })), _jsx(Sheet, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: cipler ? (labels.filter ?? labels.allFilters) : labels.allFilters, closeLabel: labels.calendar.clear, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: () => onChange({}), children: labels.clear }), _jsx(Button, { type: "submit", form: formId, variant: "primary", children: labels.apply })] }), children: _jsxs("form", { id: formId, onSubmit: (e) => {
+    return (_jsxs("div", { className: "tamga-card tamga-card-open tamga-filter-bar", children: [cipler ? (_jsxs("div", { className: "tamga-filter-cips", children: [_jsxs("label", { className: "tamga-filter-ara-sabit", children: [_jsx("span", { className: "tamga-filter-ara-etiket", children: labels.search }), aramaKutusu] }), _jsxs("span", { className: "tamga-filter-cip-sira", children: [top.map((field) => field.kind === "select" || field.kind === "searchable" || field.kind === "multi" ? (_jsxs("span", { className: "tamga-filter-cip", "data-set": values[field.key] ? "true" : undefined, children: [_jsx(PanelAlani, { field: field, values: values, write: write, optionSource: optionSource, labels: labels, cip: true }), values[field.key] ? (_jsx("button", { type: "button", className: "tamga-filter-cip-x", "aria-label": labels.remove(field.label), onClick: () => write(field.key, ""), children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null] }, field.key)) : (_jsxs("div", { className: "tamga-filter-genis tamga-filter-alan", "data-range": field.kind === "dateRange" || undefined, children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key))), darAktif > 0 ? (_jsx("button", { type: "button", className: "tamga-link tamga-filter-cip-temizle", onClick: () => onChange({}), children: labels.clearAll })) : null] }), cekmeceDugmesi, extra] })) : (_jsxs("div", { className: grid ? "tamga-filter-row tamga-filter-izgara" : "tamga-filter-row", "data-alan": grid ? birim : undefined, "data-kuyruk": grid && (drawer.length > 0 || extra) ? "true" : undefined, style: grid ? { "--filter-sutun": sutun } : undefined, children: [_jsxs("label", { className: "tamga-filter-ara", children: [_jsx("span", { className: "tamga-filter-ara-ad text-small font-bold text-ink-faint", children: labels.search }), aramaKutusu] }), top.map((field) => (_jsxs(Fragment, { children: [field.break ? _jsx("span", { "aria-hidden": true, className: "tamga-filter-genis tamga-filter-kir" }) : null, _jsxs("div", { className: `tamga-filter-genis tamga-filter-alan ${field.kind === "dateRange" ? "" : "tamga-filter-cap"}`, "data-range": field.kind === "dateRange" || undefined, children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels, kutuPanel: panelli, baslik: grid })] })] }, field.key))), cekmeceDugmesi, extra] })), !cipler && active.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [active.map(([key, value]) => (_jsxs("span", { className: "tamga-token", children: [_jsxs("span", { className: "font-normal text-ink-faint", children: [labelFor(key), ":"] }), _jsx("span", { className: "tamga-token-deger", title: valueText(key, value), children: valueText(key, value) }), _jsx("button", { type: "button", className: "tamga-token-x", "aria-label": labels.remove(labelFor(key)), onClick: () => write(key, ""), children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, key))), _jsx(Button, { variant: "link", size: "sm", onClick: () => onChange({}), children: labels.clearAll })] })), _jsx(Sheet, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: labels.filter ?? labels.allFilters, closeLabel: labels.calendar.clear, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: () => onChange({}), children: labels.clear }), _jsx(Button, { type: "submit", form: formId, variant: "primary", children: labels.apply })] }), children: _jsxs("form", { id: formId, onSubmit: (e) => {
                         e.preventDefault();
                         setDrawerOpen(false);
-                    }, className: "flex flex-col", children: [top.length > 0 && (_jsx("div", { className: "tamga-filter-dar tamga-filter-grup border-b border-dashed border-line py-4.5 last:border-b-0", children: _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: ustAlanlar("text-small text-ink-soft") }) })), drawer.map((group) => (_jsxs("div", { className: "flex flex-col gap-3.5 border-b border-dashed border-line py-4.5 last:border-b-0", children: [_jsx("p", { className: "text-caption font-extrabold uppercase tracking-label text-ink-faint", children: group.title }), _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: group.fields.map((field) => (_jsxs("div", { className: `flex flex-col gap-1.5 ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: "text-small text-ink-soft", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels, panel: cipler })] }, field.key))) })] }, group.title))), fileSearchKey && labels.fileSearch && (_jsxs("div", { children: [_jsx("p", { className: "mb-3 text-micro font-semibold uppercase tracking-wide text-ink-faint", children: labels.fileSearch.title }), _jsx("p", { className: "mb-3 text-small leading-relaxed text-ink-soft", children: labels.fileSearch.help }), values[fileSearchKey] ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-small text-ink", children: values[fileSearchKey] }), _jsx(Button, { type: "button", size: "sm", onClick: () => {
+                    }, className: "flex flex-col", children: [top.length > 0 && (_jsx("div", { className: "tamga-filter-dar tamga-filter-grup border-b border-dashed border-line py-4.5 last:border-b-0", children: _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: ustAlanlar("text-small text-ink-soft") }) })), drawer.map((group) => (_jsxs("div", { className: "flex flex-col gap-3.5 border-b border-dashed border-line py-4.5 last:border-b-0", children: [_jsx("p", { className: "text-caption font-extrabold uppercase tracking-label text-ink-faint", children: group.title }), _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: group.fields.map((field) => (_jsxs("div", { className: `flex flex-col gap-1.5 ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: "text-small text-ink-soft", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels, panel: cipler, kutuPanel: panelli })] }, field.key))) })] }, group.title))), fileSearchKey && labels.fileSearch && (_jsxs("div", { children: [_jsx("p", { className: "mb-3 text-micro font-semibold uppercase tracking-wide text-ink-faint", children: labels.fileSearch.title }), _jsx("p", { className: "mb-3 text-small leading-relaxed text-ink-soft", children: labels.fileSearch.help }), values[fileSearchKey] ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-small text-ink", children: values[fileSearchKey] }), _jsx(Button, { type: "button", size: "sm", onClick: () => {
                                                 write(fileSearchKey, "");
                                                 onFile?.(null);
                                             }, children: labels.fileSearch.remove })] })) : (_jsxs("label", { className: `${buttonVariants({})} cursor-pointer`, children: [_jsx(Icon, { icon: Upload, size: "xs" }), labels.fileSearch.choose, _jsx("input", { type: "file", accept: fileAccept, className: "sr-only", onChange: (e) => {

package/dist/components/primitives.d.ts

@@ -133,7 +133,7 @@ export declare function Field({ label, description, error, required, note, info,
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /** A plain select: the same overlay as the searchable one, without the search. */
-export declare function Select({ options, icon, set, value, onChange, placeholder, loading, loadingRows, disabled, "aria-label": ariaLabel, className, ...rest }: {
+export declare function Select({ options, icon, set, value, onChange, placeholder, loading, loadingRows, disabled, "aria-label": ariaLabel, title, className, ...rest }: {
     /**
      * Plain strings, or options that carry a tone. TR: Düz dizgiler, ya da ton
      * taşıyan seçenekler.
@@ -219,6 +219,8 @@ export declare function Select({ options, icon, set, value, onChange, placeholde
     "aria-label"?: string;
     /** Locks the trigger; the list cannot open. TR: Tetiği kilitler; liste açılmaz. */
     disabled?: boolean;
+    /** The trigger's tooltip: the full text when the shown value is clipped. TR: Tetiğin ipucu: görünen değer kesildiğinde tam metin. */
+    title?: string;
     /** Genişlik ve konum çağıranın. Varsayılan `w-56`; `w-full` verildiğinde
      *  tailwind-merge onu ezer, yani kontrol kabına uyar. */
     className?: string;

package/dist/components/primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/components/primitives.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/components/primitives.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAY5C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAQvC,wBAAgB,SAAS,CAAC,EACxB,QAAgB,EAChB,IAAc,EACd,KAAK,EACL,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAoBA;AAED,yFAAyF;AACzF,wBAAgB,MAAM,CAAC,EACrB,IAAW,EACX,KAAK,EACL,IAAc,EACd,KAAiB,EACjB,KAAa,EACb,QAAa,EACb,GAAG,IAAI,EACR,EAAE;IACD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;IACb;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAiBA;AAcD,wBAAgB,KAAK,CAAC,EACpB,KAAiB,EACjB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,EACZ,GAAG,IAAI,EACR,EAAE;IACD,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yIAAyI;IACzI,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAgDA;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA6BA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA+DA;AAED,kFAAkF;AAClF,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,GAAG,EACH,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAe,EACf,WAAe,EACf,QAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;;;;;;;;;;OAYG;IACH,OAAO,EAAE,SAAS,CACd,MAAM,GACN,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAC5F,EAAE,CAAC;IACJ;;;;;OAKG;IACH;;;;;;;;;;;;;OAaG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qIAAqI;IACrI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;6DACyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAyHA;AAED,2EAA2E;AAC3E,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAe,EACf,UAAU,EACV,IAAY,EACZ,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACvB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,sCAoEA"}

package/dist/components/primitives.js

@@ -79,7 +79,7 @@ export function Field({ label, description, error, required = false, note, info,
     return (_jsxs("div", { ...dataProps(rest), className: "flex flex-col gap-1.5", children: [_jsxs("span", { className: "flex items-baseline gap-2", children: [_jsxs("label", { htmlFor: htmlFor, className: "text-small font-bold text-ink", children: [label, required ? (_jsx("span", { "aria-hidden": true, className: "ml-1", style: { color: toneOf("danger").fg }, children: "*" })) : null] }), info ? _jsx("span", { className: "flex items-center text-ink-faint", children: info }) : null, _jsx("span", { className: "flex-1" }), note ? _jsx("span", { className: "text-caption text-ink-faint", children: note }) : null] }), kontrol, count ? (_jsxs("span", { className: "self-end font-mono text-small font-bold tabular-nums", style: count.value > count.max ? { color: toneOf("danger").fg } : { color: "var(--color-ink-faint)" }, children: [count.value, " / ", count.max] })) : null, error ? (_jsxs("p", { id: notId, className: "flex items-center gap-1.5 text-small font-medium", style: { color: toneOf("danger").fg }, children: [_jsx(Icon, { icon: Warning, size: "xs", weight: "fill" }), error] })) : description ? (_jsx("p", { id: notId, className: "text-small text-ink-faint", children: description })) : null] }));
 }
 /** A plain select: the same overlay as the searchable one, without the search. */
-export function Select({ options, icon, set, value, onChange, placeholder, loading = false, loadingRows = 4, disabled = false, "aria-label": ariaLabel, className, ...rest }) {
+export function Select({ options, icon, set, value, onChange, placeholder, loading = false, loadingRows = 4, disabled = false, "aria-label": ariaLabel, title, className, ...rest }) {
     const [open, setOpen] = useState(false);
     const [inner, setInner] = useState(value ?? "");
     const box = useRef(null);
@@ -102,7 +102,7 @@ export function Select({ options, icon, set, value, onChange, placeholder, loadi
         document.addEventListener("mousedown", away);
         return () => document.removeEventListener("mousedown", away);
     }, [open]);
-    return (_jsxs("div", { ...dataProps(rest), ref: box, className: cn("relative w-56", className), children: [_jsxs("button", { type: "button", className: "tamga-select justify-between", "data-set": (set ?? Boolean(current)) ? "true" : undefined, "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled || undefined, onClick: () => setOpen((o) => !o), children: [icon ? _jsx(Icon, { icon: icon, size: "sm", className: "shrink-0 text-ink-faint" }) : null, _jsx("span", { className: cn("min-w-0 flex-1 truncate", current ? "" : "text-ink-faint"), children: gorunen || placeholder }), _jsx(Icon, { icon: CaretRight, size: "xs", className: "shrink-0 rotate-90" })] }), open && (_jsxs("div", { ref: list, role: "listbox", className: "tamga-overlay tamga-menu absolute left-0 top-[var(--overlay-below)] z-40 flex w-full flex-col gap-0.5 overflow-hidden", "aria-busy": loading || undefined, children: [loading && _jsx(SkeletonOptions, { rows: loadingRows }), !loading && options.map((ham) => {
+    return (_jsxs("div", { ...dataProps(rest), ref: box, className: cn("relative w-56", className), children: [_jsxs("button", { type: "button", className: "tamga-select justify-between", "data-set": (set ?? Boolean(current)) ? "true" : undefined, "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, title: title, disabled: disabled || undefined, onClick: () => setOpen((o) => !o), children: [icon ? _jsx(Icon, { icon: icon, size: "sm", className: "shrink-0 text-ink-faint" }) : null, _jsx("span", { className: cn("min-w-0 flex-1 truncate", current ? "" : "text-ink-faint"), children: gorunen || placeholder }), _jsx(Icon, { icon: CaretRight, size: "xs", className: "shrink-0 rotate-90" })] }), open && (_jsxs("div", { ref: list, role: "listbox", className: "tamga-overlay tamga-menu absolute left-0 top-[var(--overlay-below)] z-40 flex w-full flex-col gap-0.5 overflow-hidden", "aria-busy": loading || undefined, children: [loading && _jsx(SkeletonOptions, { rows: loadingRows }), !loading && options.map((ham) => {
                         const nesne = typeof ham === "string" ? { value: ham } : ham;
                         const { value: o, label: etiket, tone: ton, hint: ipucu, ...kanca } = nesne;
                         return (_createElement("button", { ...kanca, key: o, role: "option", "aria-selected": o === current, "data-tamga-option": true, className: "tamga-option", "data-selected": o === current, onClick: () => {

package/dist/components/select-panel.d.ts

@@ -42,6 +42,13 @@ type Ortak = {
     variant?: "secondary" | "soft" | "ghost";
     /** The trigger's size, from `Button`. TR: Tetiğin boyu, `Button`dan. */
     size?: "base" | "sm";
+    /**
+     * `button` an ordinary button (default). `field` a form box like `Select`: full width,
+     * the same height and edge as the inputs beside it, for a labelled filter row. TR: `button`
+     * sıradan bir düğme (varsayılan). `field` `Select` gibi bir form kutusu: tam genişlik,
+     * yanındaki kutularla aynı boy ve kenar, etiketli bir filtre satırı için.
+     */
+    look?: "button" | "field";
     disabled?: boolean;
     labels: {
         /** Shown when the search matches nothing. TR: Arama hiçbir şeyle eşleşmeyince. */
@@ -64,6 +71,6 @@ export type SelectPanelProps = Ortak & ({
     value: readonly string[];
     onChange: (next: string[]) => void;
 });
-export declare function SelectPanel({ options, title, placeholder, "aria-label": ariaLabel, searchable, allLabel, prefix, caret, variant, size, disabled, labels, className, multiple, value, onChange, ...rest }: SelectPanelProps): import("react").JSX.Element;
+export declare function SelectPanel({ options, title, placeholder, "aria-label": ariaLabel, searchable, allLabel, prefix, caret, variant, size, look, disabled, labels, className, multiple, value, onChange, ...rest }: SelectPanelProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=select-panel.d.ts.map

package/dist/components/select-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-panel.d.ts","sourceRoot":"","sources":["../../src/components/select-panel.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGtC;;;;;;GAMG;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,qHAAqH;IACrH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iHAAiH;IACjH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACtC,wGAAwG;IACxG,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,WAAW,EAAE,MAAM,CAAC;IACpB,+IAA+I;IAC/I,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qGAAqG;IACrG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iKAAiK;IACjK,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;IACzC,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QACN,kFAAkF;QAClF,OAAO,EAAE,MAAM,CAAC;QAChB,4HAA4H;QAC5H,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,kIAAkI;QAClI,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAClC,CACI;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,GAEtE;IAAE,QAAQ,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAAE,CACnF,CAAC;AAEJ,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,UAAkB,EAClB,QAAQ,EACR,MAAM,EACN,KAAY,EACZ,OAAqB,EACrB,IAAa,EACb,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAoIlB"}
+{"version":3,"file":"select-panel.d.ts","sourceRoot":"","sources":["../../src/components/select-panel.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGtC;;;;;;GAMG;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,qHAAqH;IACrH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iHAAiH;IACjH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACtC,wGAAwG;IACxG,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,WAAW,EAAE,MAAM,CAAC;IACpB,+IAA+I;IAC/I,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qGAAqG;IACrG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iKAAiK;IACjK,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;IACzC,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QACN,kFAAkF;QAClF,OAAO,EAAE,MAAM,CAAC;QAChB,4HAA4H;QAC5H,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,kIAAkI;QAClI,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAClC,CACI;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,GAEtE;IAAE,QAAQ,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAAE,CACnF,CAAC;AAEJ,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,UAAkB,EAClB,QAAQ,EACR,MAAM,EACN,KAAY,EACZ,OAAqB,EACrB,IAAa,EACb,IAAe,EACf,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAmJlB"}

package/dist/components/select-panel.js

@@ -7,10 +7,10 @@ import { buttonVariants } from "./button.js";
 import { cn } from "../lib/cn.js";
 import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
-import { CaretDown, Check, Search } from "./icons.js";
+import { CaretDown, CaretRight, Check, Search } from "./icons.js";
 import { Input } from "./input.js";
 import { toneOf } from "./tone.js";
-export function SelectPanel({ options, title, placeholder, "aria-label": ariaLabel, searchable = false, allLabel, prefix, caret = true, variant = "secondary", size = "base", disabled = false, labels, className, multiple, value, onChange, ...rest }) {
+export function SelectPanel({ options, title, placeholder, "aria-label": ariaLabel, searchable = false, allLabel, prefix, caret = true, variant = "secondary", size = "base", look = "button", disabled = false, labels, className, multiple, value, onChange, ...rest }) {
     const id = useId();
     const [open, setOpen] = useState(false);
     const [sorgu, setSorgu] = useState("");
@@ -64,5 +64,5 @@ export function SelectPanel({ options, title, placeholder, "aria-label": ariaLab
             o.hint ? _jsx("span", { className: "shrink-0 text-small text-ink-faint", children: o.hint }) : null,
             isaretli ? _jsx(Icon, { icon: Check, size: "xs", weight: "bold", className: "shrink-0 text-[var(--color-accent-line)]" }) : null));
     };
-    return (_jsxs("div", { ...dataProps(rest), ref: kutu, className: cn("tamga-select-panel", className), children: [_jsxs("button", { ref: tetik, type: "button", className: cn(buttonVariants({ variant, size }), "tamga-select-panel-tetik"), "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? `${id}-liste` : undefined, "aria-label": ariaLabel, "data-set": ozet ? "true" : undefined, disabled: disabled || undefined, onClick: () => setOpen((o) => !o), children: [prefix ? _jsx("span", { className: "tamga-select-panel-onek", children: prefix }) : null, _jsx("span", { className: cn("min-w-0 truncate", ozet ? "" : "tamga-select-panel-bos"), children: ozet ?? placeholder }), caret ? _jsx(Icon, { icon: CaretDown, size: "xs", weight: "bold", className: "shrink-0" }) : null] }), open ? (_jsxs("div", { className: "tamga-overlay tamga-menu tamga-select-panel-kutu", children: [_jsx("span", { className: "tamga-menu-baslik", children: title }), searchable ? (_jsxs("span", { className: "tamga-select-panel-arama", children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-2.5 text-ink-faint" }), _jsx(Input, { ref: arama, type: "search", full: true, leading: true, size: "sm", "aria-label": labels.search ?? title, placeholder: labels.search ?? title, value: sorgu, onChange: (e) => setSorgu(e.target.value) })] })) : null, _jsxs("div", { ref: liste, id: `${id}-liste`, role: "listbox", "aria-label": title, "aria-multiselectable": multiple || undefined, className: "tamga-select-panel-liste", children: [allLabel && !multiple ? secenek({ value: "", label: allLabel }) : null, gorunen.map(({ value: v, label, tone, hint, ...kanca }) => secenek({ value: v, label, tone, hint }, kanca)), gorunen.length === 0 ? _jsx("span", { className: "tamga-select-panel-yok", children: labels.noMatch }) : null] }), multiple && labels.clear ? (_jsx("span", { className: "tamga-select-panel-alt", children: _jsx("button", { type: "button", className: "tamga-link", onClick: () => onChange([]), children: labels.clear }) })) : null] })) : null] }));
+    return (_jsxs("div", { ...dataProps(rest), ref: kutu, className: cn("tamga-select-panel", look === "field" && "tamga-select-panel-alan", className), children: [_jsxs("button", { ref: tetik, type: "button", className: cn(look === "field" ? "tamga-select" : buttonVariants({ variant, size }), "tamga-select-panel-tetik"), title: look === "field" && ozet ? ozet : undefined, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? `${id}-liste` : undefined, "aria-label": ariaLabel, "data-set": ozet ? "true" : undefined, disabled: disabled || undefined, onClick: () => setOpen((o) => !o), children: [prefix ? _jsx("span", { className: "tamga-select-panel-onek", children: prefix }) : null, look === "field" ? (_jsx("span", { className: "min-w-0 flex-1 truncate", children: ozet ?? placeholder })) : (_jsx("span", { className: cn("min-w-0 truncate", ozet ? "" : "tamga-select-panel-bos"), children: ozet ?? placeholder })), caret ? (look === "field" ? (_jsx(Icon, { icon: CaretRight, size: "xs", className: "shrink-0 rotate-90" })) : (_jsx(Icon, { icon: CaretDown, size: "xs", weight: "bold", className: "shrink-0" }))) : null] }), open ? (_jsxs("div", { className: "tamga-overlay tamga-menu tamga-select-panel-kutu", children: [_jsx("span", { className: "tamga-menu-baslik", children: title }), searchable ? (_jsxs("span", { className: "tamga-select-panel-arama", children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-2.5 text-ink-faint" }), _jsx(Input, { ref: arama, type: "search", full: true, leading: true, size: "sm", "aria-label": labels.search ?? title, placeholder: labels.search ?? title, value: sorgu, onChange: (e) => setSorgu(e.target.value) })] })) : null, _jsxs("div", { ref: liste, id: `${id}-liste`, role: "listbox", "aria-label": title, "aria-multiselectable": multiple || undefined, className: "tamga-select-panel-liste", children: [allLabel && !multiple ? secenek({ value: "", label: allLabel }) : null, gorunen.map(({ value: v, label, tone, hint, ...kanca }) => secenek({ value: v, label, tone, hint }, kanca)), gorunen.length === 0 ? _jsx("span", { className: "tamga-select-panel-yok", children: labels.noMatch }) : null] }), multiple && labels.clear ? (_jsx("span", { className: "tamga-select-panel-alt", children: _jsx("button", { type: "button", className: "tamga-link", onClick: () => onChange([]), children: labels.clear }) })) : null] })) : null] }));
 }

package/dist/fonts.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.8.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.9.0 · MIT · https://tamga.org.tr */
 @font-face {
   font-family: "Red Hat Display";
   font-style: normal;

package/dist/kit.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.8.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.9.0 · MIT · https://tamga.org.tr */
 :root {
 
   --overlay-gap: 8px;
@@ -1106,6 +1106,9 @@
     flex-direction: column;
     gap: 14px;
     padding: 16px;
+
+    container-type: inline-size;
+    min-width: 0;
   }
 
   [data-filters] > .tamga-filter-bar {
@@ -1148,46 +1151,103 @@
   .tamga-filter-cips {
     display: flex;
     flex-wrap: wrap;
-    align-items: flex-end;
+    align-items: center;
     gap: 8px;
+    min-width: 0;
   }
   .tamga-filter-ara-sabit {
     display: flex;
     flex-direction: column;
-    gap: 6px;
     min-width: 0;
     max-width: 100%;
     flex: 0 0 17.5rem;
   }
+
+  .tamga-filter-ara-etiket {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
   .tamga-filter-cip-sira {
     display: contents;
   }
+
+  .tamga-filter-bar .tamga-token {
+    white-space: nowrap;
+    max-width: 100%;
+  }
+  .tamga-token-deger {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .tamga-filter-cip-temizle {
+    white-space: nowrap;
+    font-size: var(--text-small);
+  }
+
   .tamga-filter-cip {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
+    flex-shrink: 0;
     max-width: 100%;
+    white-space: nowrap;
   }
-  .tamga-filter-cip-x {
-    display: grid;
-    place-items: center;
-    width: calc(var(--control) - 8px);
-    height: calc(var(--control) - 8px);
-    flex-shrink: 0;
+
+  .tamga-filter-cip[data-set] {
+    gap: 2px;
+    padding-right: 6px;
     border: 1.5px solid var(--color-edge-strong);
     border-radius: var(--radius-ctl);
     background: var(--color-accent-soft);
     color: var(--color-accent-soft-ink);
     box-shadow: 3px 3px 0 var(--color-edge-strong);
+  }
+  .tamga-filter-cip[data-set] > .tamga-select-panel > .tamga-select-panel-tetik {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+    padding-right: 4px;
+  }
+  .tamga-filter-cip[data-set] > .tamga-select-panel > .tamga-select-panel-tetik:not(:disabled):hover,
+  .tamga-filter-cip[data-set] > .tamga-select-panel > .tamga-select-panel-tetik:not(:disabled):active {
+    transform: none;
+    box-shadow: none;
+    background: transparent;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  .tamga-filter-cip-x {
+    display: grid;
+    place-items: center;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    border: 0;
+    border-radius: var(--mark-dot-radius);
+    background: transparent;
+    color: var(--color-accent-soft-ink);
+    box-shadow: none;
     cursor: pointer;
   }
   .tamga-filter-cip-x:hover {
-    transform: translate(-1px, -1px);
-    box-shadow: 4px 4px 0 var(--color-edge-strong);
+    background: var(--color-shell);
   }
-  .tamga-filter-cip-x:active {
-    transform: translate(3px, 3px);
-    box-shadow: 0 0 0 var(--color-edge-strong);
+
+  .tamga-select-panel-alan {
+    display: flex;
+    width: 100%;
+  }
+  .tamga-select-panel-alan > .tamga-select-panel-tetik {
+    width: 100%;
+    justify-content: space-between;
+  }
+  .tamga-select-panel-alan > .tamga-select-panel-tetik > span:not(.tamga-select-panel-onek) {
+    flex: 1;
+    text-align: start;
   }
 
   .tamga-select-panel-tam,
@@ -1204,16 +1264,32 @@
     text-align: start;
   }
 
-  @media (max-width: 39.9375rem) {
+  @container (max-width: 39.9375rem) {
     .tamga-filter-genis {
       display: none;
     }
+
     .tamga-filter-row > .tamga-filter-ara {
-      flex-basis: 0;
+      flex: 1 1 7.5rem;
     }
 
     .tamga-filter-cips > .tamga-filter-ara-sabit {
       flex: 1 1 0;
+      min-width: 0;
+    }
+
+    .tamga-filter-ara-ad {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
+
+    .tamga-filter-cips > .tamga-btn,
+    .tamga-filter-row > .tamga-btn {
+      flex-shrink: 0;
     }
     .tamga-filter-cips .tamga-filter-cip:not([data-set]) {
       display: none;
@@ -1222,6 +1298,9 @@
       display: flex;
       order: 2;
       flex: 1 1 100%;
+      min-width: 0;
+      max-width: 100%;
+      align-items: center;
       flex-wrap: nowrap;
       gap: 8px;
       overflow-x: auto;
@@ -1230,13 +1309,179 @@
     .tamga-filter-cip-sira:empty {
       display: none;
     }
+    .tamga-filter-cip-sira > .tamga-filter-cip,
+    .tamga-filter-cip-sira > .tamga-filter-cip-temizle {
+      flex: 0 0 auto;
+    }
   }
-  @media (min-width: 40rem) {
+  @container (min-width: 40rem) {
     .tamga-filter-dar {
       display: none;
     }
   }
 
+  @container (min-width: 40rem) {
+
+    .tamga-filter-row.tamga-filter-izgara {
+      display: grid;
+      align-items: end;
+      grid-template-columns: repeat(var(--filter-sutun), minmax(0, 1fr));
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-kuyruk] {
+      grid-template-columns: repeat(var(--filter-sutun), minmax(0, 1fr)) auto;
+    }
+    .tamga-filter-izgara > .tamga-filter-ara {
+      grid-column: span 2;
+      flex: none;
+    }
+    .tamga-filter-izgara > .tamga-filter-alan {
+      flex: none;
+    }
+    .tamga-filter-izgara > .tamga-filter-alan[data-range] {
+      grid-column: span 2;
+    }
+
+    .tamga-filter-row.tamga-filter-izgara > .tamga-filter-cap {
+      max-width: none;
+    }
+    .tamga-filter-izgara > .tamga-filter-kir {
+      display: none;
+    }
+    .tamga-filter-izgara > .tamga-btn {
+      grid-column: -2 / -1;
+      grid-row: 1;
+      justify-self: end;
+    }
+  }
+  @container (min-width: 424px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="1"]:not([data-kuyruk]) {
+      grid-template-columns: 16rem repeat(1, minmax(0, 1fr));
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="1"]:not([data-kuyruk]) > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 580px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="1"][data-kuyruk] {
+      grid-template-columns: 16rem repeat(1, minmax(0, 1fr)) auto;
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="1"][data-kuyruk] > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 580px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="2"]:not([data-kuyruk]) {
+      grid-template-columns: 16rem repeat(2, minmax(0, 1fr));
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="2"]:not([data-kuyruk]) > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 736px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="2"][data-kuyruk] {
+      grid-template-columns: 16rem repeat(2, minmax(0, 1fr)) auto;
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="2"][data-kuyruk] > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 736px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="3"]:not([data-kuyruk]) {
+      grid-template-columns: 16rem repeat(3, minmax(0, 1fr));
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="3"]:not([data-kuyruk]) > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 892px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="3"][data-kuyruk] {
+      grid-template-columns: 16rem repeat(3, minmax(0, 1fr)) auto;
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="3"][data-kuyruk] > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 892px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="4"]:not([data-kuyruk]) {
+      grid-template-columns: 16rem repeat(4, minmax(0, 1fr));
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="4"]:not([data-kuyruk]) > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 1048px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="4"][data-kuyruk] {
+      grid-template-columns: 16rem repeat(4, minmax(0, 1fr)) auto;
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="4"][data-kuyruk] > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 1048px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="5"]:not([data-kuyruk]) {
+      grid-template-columns: 16rem repeat(5, minmax(0, 1fr));
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="5"]:not([data-kuyruk]) > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 1204px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="5"][data-kuyruk] {
+      grid-template-columns: 16rem repeat(5, minmax(0, 1fr)) auto;
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="5"][data-kuyruk] > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 1204px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="6"]:not([data-kuyruk]) {
+      grid-template-columns: 16rem repeat(6, minmax(0, 1fr));
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="6"]:not([data-kuyruk]) > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 1360px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="6"][data-kuyruk] {
+      grid-template-columns: 16rem repeat(6, minmax(0, 1fr)) auto;
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="6"][data-kuyruk] > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 1360px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="7"]:not([data-kuyruk]) {
+      grid-template-columns: 16rem repeat(7, minmax(0, 1fr));
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="7"]:not([data-kuyruk]) > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 1516px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="7"][data-kuyruk] {
+      grid-template-columns: 16rem repeat(7, minmax(0, 1fr)) auto;
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="7"][data-kuyruk] > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 1516px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="8"]:not([data-kuyruk]) {
+      grid-template-columns: 16rem repeat(8, minmax(0, 1fr));
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="8"]:not([data-kuyruk]) > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+  @container (min-width: 1672px) {
+    .tamga-filter-row.tamga-filter-izgara[data-alan="8"][data-kuyruk] {
+      grid-template-columns: 16rem repeat(8, minmax(0, 1fr)) auto;
+    }
+    .tamga-filter-row.tamga-filter-izgara[data-alan="8"][data-kuyruk] > .tamga-filter-ara {
+      grid-column: auto;
+    }
+  }
+
   .tamga-filter-row {
     --filter-gap: 12px;
     display: flex;
@@ -3226,9 +3471,11 @@
   .tamga-select-panel {
     position: relative;
     display: inline-flex;
+    min-width: 0;
     max-width: 100%;
   }
   .tamga-select-panel-tetik {
+    min-width: 0;
     max-width: 100%;
   }
   .tamga-select-panel-onek {

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.8.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.9.0 · MIT · https://tamga.org.tr */
 @import "./fonts.css";
 @import "./theme.css";
 @import "./kit.css";

package/dist/theme.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.8.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.9.0 · MIT · https://tamga.org.tr */
 @custom-variant dark (&:is(.dark *));
 
 @theme static {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamga-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Mantıksal's shared interface library: tokens, physics and components.",
   "license": "MIT",
   "type": "module",