@enmera/panel-kit 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## 0.2.0
+
+- `Button` `variant="destructive-ghost"`: row delete/remove icons; red text, background only on hover.
+- `TextButton` / `TextLink` `tone="danger"`.
+- `Heading` `size="xs"` for dense tool panels.
+- `Input` `size="xs"` and `mono`; `Textarea` `size="sm"` and `mono` (codes, keys, JSON).
+
+## 0.1.0
+
+- First release: the shared components of the Searvia panel, with `configurePanelKit` for translation, locale and
+  number/date formatting, `theme.css` for Tailwind CSS v4 and Turkish texts in `lang/tr.json`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Enmera
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,99 @@
-# Temporary Holding Version
+# @enmera/panel-kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Shared components for admin panels built with React 19, [react-aria](https://react-spectrum.adobe.com/react-aria/) and
+Tailwind CSS v4. One look for every button, input, badge, box and heading, so the same thing looks the same on every
+screen and in every product that uses the kit.
+
+[Türkçe](README.tr.md)
+
+It grew out of two production panels ([Searvia](https://searvia.com) and Enmera Commerce). Its rules are checked by
+[@enmera/ai-design-check](https://github.com/enmerasoftware/ai-design-check): pages pick a component, a tone and a size;
+they do not write the look themselves.
+
+## Install
+
+```bash
+npm install @enmera/panel-kit react-aria-components class-variance-authority cn lucide-react
+# optional, for charts, toasts and themed toasts:
+npm install recharts sonner next-themes
+```
+
+In your main CSS file, after Tailwind:
+
+```css
+@import "tailwindcss";
+@import "@enmera/panel-kit/theme.css";
+```
+
+`theme.css` makes Tailwind scan the kit's classes and gives defaults to the few tokens it uses beyond the usual shadcn
+ones (`--color-ink`, `--color-brand-link`, `--color-on-brand`, `--color-on-brand-ink`, `--text-2xs`, `--font-display`).
+Your own values win. Colours come from your theme (`--primary`, `--muted`, `--card`, `--sidebar` …), so each product
+keeps its own palette.
+
+Once at start-up, connect your translation, locale and number/date formatting:
+
+```ts
+import { configurePanelKit } from '@enmera/panel-kit/config';
+
+configurePanelKit({ t, locale: () => 'tr-TR', formatNumber, formatDate });
+```
+
+Without it the kit uses its English text and the browser's locale. Keys are the English text itself; Turkish is in
+`@enmera/panel-kit/lang/tr.json` — merge it into your dictionary.
+
+## Use
+
+```tsx
+import { Button, LinkButton } from '@enmera/panel-kit/ui/button';
+import { StatusBadge } from '@enmera/panel-kit/status-badge';
+import { Tile } from '@enmera/panel-kit/ui/tile';
+import { Heading } from '@enmera/panel-kit/ui/heading';
+
+<Tile tone="warning" className="flex items-center gap-3">
+    <StatusBadge tone="warning">Pending</StatusBadge>
+    <Heading as="h3" size="sm">Payment method needs attention</Heading>
+    <LinkButton href="/billing" size="sm" variant="outline">Open billing</LinkButton>
+</Tile>
+```
+
+The rule: **look from props, placement from `className`.** Colour, radius, border, ring and shadow belong to the
+component; pages add width, margin and grid position. Boxes and rows (Tile, SectionCard, RowButton, ListRow …) also
+take their padding, gap and inner layout from the caller. If a tone or size is missing, add it to the component, not a
+class at the call site.
+
+| What | Component | Options |
+|---|---|---|
+| Button, link button | `ui/button`: `Button`, `LinkButton` | default, outline, secondary, ghost, inverse, light, on-brand, on-brand-soft, floating, warning, caution, destructive, destructive-ghost, link · xs, sm, default, lg, icon sizes |
+| Text button and link | `ui/text-button`: `TextButton`, `TextLink` | primary, muted, brand, warning, danger · xs, sm |
+| Clickable row | `ui/row-button`: `RowButton` (`isSelected`), `RowLink` | padding from the caller |
+| Selectable card | `ui/option-card`: `OptionCard` (`isSelected`) | |
+| Main choice, filter pill | `ui/segmented`: `Segmented`; `ui/chip`: `Chip` | |
+| Badge | `status-badge`: `StatusBadge` | success, danger, warning, info, purple, neutral, primary, accent, overlay · sm, default |
+| Box, section | `ui/tile`: `Tile`, `TooltipBox`; `section-card`: `SectionCard` | default, primary, muted, success, warning, danger, info · sm, default, lg, flush · `interactive`; SectionCard `highlighted`, `flush` |
+| Heading | `ui/heading`: `Heading` | mega, hero, display, section, title, subtitle, card, small, base, sm, xs |
+| Icon background | `ui/icon-tile`: `IconTile` | beside text, not above a heading |
+| Small parts | `ui/code`: `Code`; `ui/meta`: `MetaRow`, `List`, `ListRow` | |
+| Forms and overlays | `ui/input`, `ui/input-group`, `ui/select`, `ui/combobox`, `ui/textarea`, `ui/checkbox`, `ui/radio-group`, `ui/switch`, `ui/slider`, `ui/field`, `ui/dialog`, `ui/alert-dialog`, `ui/sheet`, `ui/popover`, `ui/dropdown-menu`, `ui/tooltip`, `ui/command` | |
+| Layout and data | `ui/sidebar`, `ui/tabs`, `ui/table`, `ui/pagination`, `ui/breadcrumb`, `ui/card`, `ui/chart`, `ui/calendar`, `stat-cards`, `summary-strip`, `empty-state` | |
+| Case | `text`: `lowerText`, `upperText` (locale rules), `upperCode`, `lowerCode` (codes) | never `toUpperCase()` |
+
+## With ai-design-check
+
+```json
+{
+    "looks": { "badge": "StatusBadge", "card": "Tile or SectionCard", "heading": "Heading", "link": "LinkButton" },
+    "sharedComponents": ["Button", "LinkButton", "StatusBadge", "Input", "Select", "Textarea", "Tile", "SectionCard", "Chip", "Segmented", "TextButton", "TextLink", "RowButton", "RowLink", "Code", "MetaRow", "List"]
+}
+```
+
+`npx @enmera/ai-design-check inventory` counts how many looks each kind of element has; the kit is how that number
+goes down.
+
+## Versions
+
+Semantic versioning. A change to a component's look is a minor version and is listed in [CHANGELOG.md](CHANGELOG.md);
+removing a prop or variant is a major version.
+
+## License
+
+MIT

package/README.tr.md

@@ -0,0 +1,59 @@
+# @enmera/panel-kit
+
+React 19, [react-aria](https://react-spectrum.adobe.com/react-aria/) ve Tailwind CSS v4 ile yapılan yönetim panelleri
+için ortak bileşenler. Her düğme, giriş alanı, rozet, kutu ve başlık için tek görünüm: aynı şey her ekranda ve kiti
+kullanan her üründe aynı görünür.
+
+[English](README.md)
+
+İki canlı panelden ([Searvia](https://searvia.com) ve Enmera Commerce) çıktı. Kuralları
+[@enmera/ai-design-check](https://github.com/enmerasoftware/ai-design-check) denetler: sayfa bileşen, ton ve boyut
+seçer; görünümü kendisi yazmaz.
+
+## Kurulum
+
+```bash
+npm install @enmera/panel-kit react-aria-components class-variance-authority cn lucide-react
+# isteğe bağlı (grafik, bildirim, temalı bildirim):
+npm install recharts sonner next-themes
+```
+
+Ana CSS dosyasında, Tailwind'den sonra:
+
+```css
+@import "tailwindcss";
+@import "@enmera/panel-kit/theme.css";
+```
+
+`theme.css` Tailwind'e kitin sınıflarını taratır ve shadcn belirteçleri dışında kullandığı birkaç belirtece varsayılan
+verir (`--color-ink`, `--color-brand-link`, `--color-on-brand`, `--color-on-brand-ink`, `--text-2xs`, `--font-display`).
+Projenin kendi değeri geçerlidir. Renkler projenin temasından gelir (`--primary`, `--muted`, `--card`, `--sidebar` …);
+her ürün kendi paletini korur.
+
+Açılışta bir kez çeviri, dil ve sayı/tarih biçimi bağlanır:
+
+```ts
+import { configurePanelKit } from '@enmera/panel-kit/config';
+
+configurePanelKit({ t, locale: () => 'tr-TR', formatNumber, formatDate });
+```
+
+Bağlanmazsa İngilizce metin ve tarayıcının dili kullanılır. Anahtarlar İngilizce metnin kendisidir; Türkçesi
+`@enmera/panel-kit/lang/tr.json` dosyasında, projenin sözlüğüne eklenir.
+
+## Kullanım
+
+Kural: **görünüm prop'tan, yerleşim `className`'den.** Renk, köşe, çerçeve, halka ve gölge bileşenindir; sayfa genişlik,
+boşluk ve ızgara konumu ekler. Kutular ve satırlar (Tile, SectionCard, RowButton, ListRow …) iç boşluğu ve iç yerleşimi
+de çağırandan alır. Uygun ton ya da boyut yoksa çağrı yerine sınıf değil, bileşene ton ya da boyut eklenir.
+
+Bileşen listesi ve seçenekler için [README.md](README.md#use).
+
+## Sürümler
+
+Anlamsal sürümleme. Bir bileşenin görünümünü değiştiren değişiklik ara sürümdür ve [CHANGELOG.md](CHANGELOG.md)'de
+yazılır; prop ya da görünüm kaldırmak ana sürümdür.
+
+## Lisans
+
+MIT

package/dist/config.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Paketin projeye bağlandığı tek yer: çeviri, dil ve biçimlendirme projeden gelir.
+ * Proje açılışta bir kez `configurePanelKit({ t, locale, formatNumber, formatDate })` çağırır; çağırmazsa İngilizce metin
+ * ve tarayıcı dili kullanılır. Bileşenlerdeki metin anahtarları İngilizce kaynak metnin kendisidir (`lang/tr.json`).
+ */
+export type Translate = (key: string, replacements?: Record<string, string | number>) => string;
+type Config = {
+    t: Translate;
+    locale: () => string;
+    formatNumber: (value: number) => string;
+    formatDate: (value: string) => string;
+};
+export declare function configurePanelKit(options: Partial<Config>): void;
+export declare const t: Translate;
+export declare const intlLocale: () => string;
+export declare const formatNumber: (value: number) => string;
+export declare const formatDate: (value: string) => string;
+export {};

package/dist/config.js

@@ -0,0 +1,14 @@
+const fill = (key, replacements = {}) => key.replace(/:([A-Za-z_]\w*)/g, (match, name) => (name in replacements ? String(replacements[name]) : match));
+let config = {
+    t: fill,
+    locale: () => 'en-US',
+    formatNumber: (value) => new Intl.NumberFormat(config.locale()).format(value),
+    formatDate: (value) => new Date(value).toLocaleDateString(config.locale()),
+};
+export function configurePanelKit(options) {
+    config = { ...config, ...options };
+}
+export const t = (key, replacements) => config.t(key, replacements);
+export const intlLocale = () => config.locale();
+export const formatNumber = (value) => config.formatNumber(value);
+export const formatDate = (value) => config.formatDate(value);

package/dist/empty-state.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+/** Boş durum: ikon, başlık, açıklama ve isteğe bağlı eylem. */
+export declare function EmptyState({ title, description, action }: {
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+}): import("react").JSX.Element;

package/dist/empty-state.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Boş durum: ikon, başlık, açıklama ve isteğe bağlı eylem. */
+export function EmptyState({ title, description, action }) {
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center", children: [_jsx("p", { className: "text-sm font-semibold", children: title }), description && _jsx("p", { className: "max-w-md text-xs text-muted-foreground", children: description }), action && _jsx("div", { className: "mt-3", children: action })] }));
+}

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+    return !!isMobile;
+}

package/dist/section-card.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+/**
+ * Bölüm kartı: başlık, açıklama, sağda seçenekler.
+ * `flush` gövdeyi kenar boşluksuz bırakır (liste, ızgara, tablo için).
+ */
+export declare function SectionCard({ title, description, actions, flush, highlighted, className, contentClassName, children, }: {
+    title?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    flush?: boolean;
+    /** Öne çıkan kart (önerilen plan): marka halkası. */
+    highlighted?: boolean;
+    className?: string;
+    contentClassName?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/section-card.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from 'react';
+import { cn } from './utils.js';
+/**
+ * Bölüm kartı: başlık, açıklama, sağda seçenekler.
+ * `flush` gövdeyi kenar boşluksuz bırakır (liste, ızgara, tablo için).
+ */
+export function SectionCard({ title, description, actions, flush = false, highlighted = false, className, contentClassName, children, }) {
+    return (_jsxs("section", { className: cn('flex flex-col overflow-hidden rounded-3xl bg-card text-card-foreground shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10', highlighted && 'ring-2 ring-primary/40 dark:ring-primary/40', className), children: [(title || actions) && (_jsxs("header", { className: cn('flex items-start gap-3 px-4 py-3 sm:px-6 sm:py-4', hasContent(children) && 'border-b'), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [title && _jsx("h2", { className: "text-sm font-semibold sm:text-base", children: title }), description && _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground sm:text-sm", children: description })] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] })), hasContent(children) && _jsx("div", { className: cn('flex-1', !flush && 'p-4 sm:p-6', contentClassName), children: children })] }));
+}
+function hasContent(children) {
+    return Children.toArray(children).length > 0;
+}

package/dist/stat-cards.d.ts

@@ -0,0 +1,15 @@
+import { type LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+/** İstatistik kartları (controller'lar aynı diziyi gönderir). */
+export type StatCard = {
+    label: string;
+    value: ReactNode;
+    hint?: ReactNode;
+    color?: 'indigo' | 'green' | 'amber' | 'purple' | 'red' | 'blue' | 'gray';
+    /** Kayıtlı ad (bag, check…) ya da doğrudan bir Lucide ikonu. */
+    icon?: 'bag' | 'check' | 'clock' | 'calendar' | 'x' | 'users' | LucideIcon;
+};
+/** Liste ekranlarının üstündeki özet kartları. */
+export declare function StatCards({ items }: {
+    items: StatCard[];
+}): import("react").JSX.Element | null;

package/dist/stat-cards.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarIcon, CircleCheckIcon, CircleXIcon, ClockIcon, ShoppingBagIcon, UsersIcon } from 'lucide-react';
+import { cn } from './utils.js';
+const tones = {
+    indigo: 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400',
+    green: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+    amber: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
+    purple: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',
+    red: 'bg-red-500/10 text-red-600 dark:text-red-400',
+    blue: 'bg-sky-500/10 text-sky-600 dark:text-sky-400',
+    gray: 'bg-muted text-muted-foreground',
+};
+const icons = {
+    bag: ShoppingBagIcon,
+    check: CircleCheckIcon,
+    clock: ClockIcon,
+    calendar: CalendarIcon,
+    x: CircleXIcon,
+    users: UsersIcon,
+};
+// Sınıf adı birleştirilerek üretilmez — Tailwind taraması tam adı görmeli.
+const grid = { 1: 'xl:grid-cols-1', 2: 'xl:grid-cols-2', 3: 'xl:grid-cols-3', 4: 'xl:grid-cols-4', 5: 'xl:grid-cols-5', 6: 'xl:grid-cols-6' };
+/** Liste ekranlarının üstündeki özet kartları. */
+export function StatCards({ items }) {
+    if (items.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('grid grid-cols-1 gap-4 sm:grid-cols-2', grid[Math.min(items.length, 6)] ?? 'xl:grid-cols-5'), children: items.map((card) => {
+            const Icon = card.icon === undefined || typeof card.icon === 'string' ? icons[card.icon ?? 'bag'] : card.icon;
+            return (_jsxs("div", { className: "flex items-center gap-4 rounded-3xl bg-card p-4 shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10", children: [_jsx("span", { className: cn('flex size-11 shrink-0 items-center justify-center rounded-full', tones[card.color ?? 'gray']), children: _jsx(Icon, { className: "size-5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-xs text-muted-foreground", children: card.label }), _jsx("p", { className: "text-2xl font-semibold tabular-nums", children: card.value }), card.hint && _jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: card.hint })] })] }, card.label));
+        }) }));
+}

package/dist/status-badge.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+declare const tones: {
+    readonly success: 'bg-emerald-500/10 text-emerald-700 ring-emerald-600/20 dark:text-emerald-400';
+    readonly danger: 'bg-red-500/10 text-red-700 ring-red-600/20 dark:text-red-400';
+    readonly warning: 'bg-amber-500/10 text-amber-700 ring-amber-600/20 dark:text-amber-400';
+    readonly info: 'bg-sky-500/10 text-sky-700 ring-sky-600/20 dark:text-sky-400';
+    readonly purple: 'bg-purple-500/10 text-purple-700 ring-purple-600/20 dark:text-purple-400';
+    readonly neutral: 'bg-muted text-muted-foreground ring-foreground/10';
+    readonly primary: 'bg-primary/10 text-brand-link ring-primary/20 dark:text-primary';
+    readonly accent: 'bg-primary text-primary-foreground ring-transparent';
+    readonly overlay: 'bg-black/60 text-white ring-transparent';
+};
+declare const sizes: {
+    readonly sm: 'h-5 px-2 text-2xs';
+    readonly default: 'h-6 px-2.5 text-xs';
+};
+export type StatusTone = keyof typeof tones;
+/**
+ * Ürünün tek rozeti — panelde ve tanıtım sitesinde aynı renk dili (yeşil iyi, kırmızı sorun, marka yeni…).
+ * `sm` sayaç ve tablo içi etiketler içindir; renk ve boyut dışarıdan verilmez.
+ */
+export declare function StatusBadge({ tone, size, children, className, title }: {
+    tone?: StatusTone;
+    size?: keyof typeof sizes;
+    children: ReactNode;
+    className?: string;
+    title?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/status-badge.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from './utils.js';
+const tones = {
+    success: 'bg-emerald-500/10 text-emerald-700 ring-emerald-600/20 dark:text-emerald-400',
+    danger: 'bg-red-500/10 text-red-700 ring-red-600/20 dark:text-red-400',
+    warning: 'bg-amber-500/10 text-amber-700 ring-amber-600/20 dark:text-amber-400',
+    info: 'bg-sky-500/10 text-sky-700 ring-sky-600/20 dark:text-sky-400',
+    purple: 'bg-purple-500/10 text-purple-700 ring-purple-600/20 dark:text-purple-400',
+    neutral: 'bg-muted text-muted-foreground ring-foreground/10',
+    // Marka vurgusu: "Yeni", "Önerilen", seçili sayısı.
+    primary: 'bg-primary/10 text-brand-link ring-primary/20 dark:text-primary',
+    // Dolu sayaç (okunmamış, menü rozeti).
+    accent: 'bg-primary text-primary-foreground ring-transparent',
+    // Görselin üstündeki etiket (süre, sıra).
+    overlay: 'bg-black/60 text-white ring-transparent',
+};
+const sizes = {
+    sm: 'h-5 px-2 text-2xs',
+    default: 'h-6 px-2.5 text-xs',
+};
+/**
+ * Ürünün tek rozeti — panelde ve tanıtım sitesinde aynı renk dili (yeşil iyi, kırmızı sorun, marka yeni…).
+ * `sm` sayaç ve tablo içi etiketler içindir; renk ve boyut dışarıdan verilmez.
+ */
+export function StatusBadge({ tone = 'neutral', size = 'default', children, className, title }) {
+    return (_jsx("span", { title: title, className: cn('inline-flex shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap tabular-nums ring-1 ring-inset [&_svg]:size-3 [&_svg]:shrink-0', sizes[size], tones[tone], className), children: children }));
+}

package/dist/summary-strip.d.ts

@@ -0,0 +1,18 @@
+/** Para birimi başına tutarlar (controller `money()` ile biçimlenmiş metin gönderir). */
+export type CurrencyAmounts = Array<{
+    currency: string;
+    label: string;
+}>;
+/**
+ * Liste üstü özet şeridi: her kutuda etiket, bir ya da
+ * daha çok değer (ilk değer büyük, diğer para birimleri küçük) ve isteğe bağlı not.
+ */
+export type SummaryItem = {
+    label: string;
+    values: string[];
+    hint?: string | null;
+    tone?: 'default' | 'danger' | 'success' | 'warning' | 'muted';
+};
+export declare function SummaryStrip({ items }: {
+    items: SummaryItem[];
+}): import("react").JSX.Element | null;

package/dist/summary-strip.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './utils.js';
+const summaryTones = {
+    default: 'text-foreground',
+    danger: 'text-red-600 dark:text-red-400',
+    success: 'text-emerald-600 dark:text-emerald-400',
+    warning: 'text-amber-600 dark:text-amber-400',
+    muted: 'text-muted-foreground',
+};
+const summaryGrid = { 1: 'lg:grid-cols-1', 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4', 5: 'lg:grid-cols-5', 6: 'lg:grid-cols-6' };
+export function SummaryStrip({ items }) {
+    if (items.length === 0)
+        return null;
+    return (_jsx("div", { className: cn('grid grid-cols-2 gap-4', summaryGrid[Math.min(items.length, 6)]), children: items.map((item) => (_jsxs("div", { className: "flex min-w-0 flex-col gap-1 rounded-3xl bg-card p-4 shadow-sm ring-1 ring-foreground/5 sm:p-5 dark:ring-foreground/10", children: [_jsx("p", { className: "truncate text-xs text-muted-foreground", children: item.label }), item.values.length === 0 ? (_jsx("p", { className: "text-2xl font-semibold text-muted-foreground/50", children: "\u2014" })) : (item.values.map((value, index) => (_jsx("p", { className: cn('font-semibold tabular-nums', index === 0 ? 'text-2xl' : 'text-sm', summaryTones[item.tone ?? 'default']), children: value }, index)))), item.hint && _jsx("p", { className: "text-2xs text-muted-foreground", children: item.hint })] }, item.label))) }));
+}

package/dist/text.d.ts

@@ -0,0 +1,7 @@
+/** Arama ve karşılaştırma için küçük harf, arayüz dilinin kuralıyla (Türkçede "I" → "ı", "İ" → "i"). */
+export declare const lowerText: (text: string) => string;
+/** Görünen metnin büyük harfi (baş harf, kısaltma), arayüz dilinin kuralıyla. */
+export declare const upperText: (text: string) => string;
+/** Ülke, dil, para ve kupon kodu gibi Latin harfli kodlar: dilden bağımsız ("id" Türkçede "İD" olmasın). */
+export declare const upperCode: (code: string) => string;
+export declare const lowerCode: (code: string) => string;

package/dist/text.js

@@ -0,0 +1,8 @@
+import { intlLocale } from './config.js';
+/** Arama ve karşılaştırma için küçük harf, arayüz dilinin kuralıyla (Türkçede "I" → "ı", "İ" → "i"). */
+export const lowerText = (text) => text.toLocaleLowerCase(intlLocale());
+/** Görünen metnin büyük harfi (baş harf, kısaltma), arayüz dilinin kuralıyla. */
+export const upperText = (text) => text.toLocaleUpperCase(intlLocale());
+/** Ülke, dil, para ve kupon kodu gibi Latin harfli kodlar: dilden bağımsız ("id" Türkçede "İD" olmasın). */
+export const upperCode = (code) => code.toLocaleUpperCase('en-US');
+export const lowerCode = (code) => code.toLocaleLowerCase('en-US');

package/dist/ui/alert-dialog.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Heading, Modal as ModalPrimitive, type DialogTriggerProps as AlertDialogTriggerPrimitiveProps, type ModalOverlayProps as ModalOverlayPrimitiveProps } from "react-aria-components";
+import { Button } from "./button.js";
+declare function AlertDialogTrigger({ ...props }: AlertDialogTriggerPrimitiveProps): React.JSX.Element;
+declare function AlertDialogOverlay({ className, children, ...props }: Omit<ModalOverlayPrimitiveProps, "className" | "children"> & {
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function AlertDialog({ className, size, children, ...props }: Omit<ModalOverlayPrimitiveProps, "className" | "children"> & Pick<React.ComponentProps<typeof ModalPrimitive>, "isDismissable"> & {
+    className?: string;
+    size?: "default" | "sm";
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function AlertDialogContent({ className, size, children, ...props }: React.ComponentProps<typeof AlertDialog>): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: Omit<React.ComponentProps<typeof Heading>, "slot">): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: Omit<React.ComponentProps<"div">, "slot">): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, };

package/dist/ui/alert-dialog.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+import { Dialog as AlertDialogPrimitive, DialogTrigger as AlertDialogTriggerPrimitive, Heading, ModalOverlay as ModalOverlayPrimitive, Modal as ModalPrimitive, } from "react-aria-components";
+import { Button } from "./button.js";
+function AlertDialogTrigger({ ...props }) {
+    return (_jsx(AlertDialogTriggerPrimitive, { "data-slot": "alert-dialog-trigger", ...props }));
+}
+function AlertDialogOverlay({ className, children, ...props }) {
+    return (_jsx(ModalOverlayPrimitive, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/30 duration-100 data-entering:animate-in data-entering:fade-in-0 data-exiting:animate-out data-exiting:fade-out-0 supports-backdrop-filter:backdrop-blur-sm", className), ...props, children: children }));
+}
+function AlertDialog({ className, size = "default", children, ...props }) {
+    return (_jsx(AlertDialogOverlay, { ...props, children: _jsx(ModalPrimitive, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-popover p-6 text-popover-foreground shadow-xl ring-1 ring-foreground/5 duration-100 outline-none data-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md dark:ring-foreground/10", className), children: _jsx(AlertDialogPrimitive, { "data-slot": "alert-dialog", role: "alertdialog", className: "[display:inherit] [gap:inherit] outline-none", children: children }) }) }));
+}
+function AlertDialogContent({ className, size = "default", children, ...props }) {
+    return (_jsx(AlertDialog, { className: className, size: size, ...props, children: children }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className), ...props }));
+}
+function AlertDialogMedia({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("mb-2 inline-flex size-16 items-center justify-center rounded-full bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(Heading, { slot: "title", "data-slot": "alert-dialog-title", className: cn("font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+}
+function AlertDialogAction({ className, ...props }) {
+    return (_jsx(Button, { slot: "close", "data-slot": "alert-dialog-action", className: cn(className), ...props }));
+}
+function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+    return (_jsx(Button, { slot: "close", "data-slot": "alert-dialog-cancel", className: cn(className), variant: variant, size: size, ...props }));
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, };

package/dist/ui/avatar.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Avatar({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<"img">): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/ui/avatar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils.js";
+function Avatar({ className, size = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    const [state, setState] = React.useState(props.src ? "loading" : "error");
+    return (_jsx("img", { "data-slot": "avatar-image", alt: props.alt || "", "data-state": state, onLoad: () => setState("loaded"), onError: () => setState("error"), className: cn("peer aspect-square size-full rounded-full object-cover data-[state=error]:hidden", className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs peer-data-[state=error]:flex peer-[*]:hidden", className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/ui/badge.d.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, render, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    render?: (props: React.HTMLAttributes<HTMLElement>) => React.ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export { Badge, badgeVariants };

package/dist/ui/badge.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils.js";
+const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,opacity,transform,translate] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+            destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+            outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+            ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant = "default", render, ...props }) {
+    if (render) {
+        const renderProps = {
+            "data-slot": "badge",
+            "data-variant": variant,
+            className: cn(badgeVariants({ variant }), className),
+            ...props,
+        };
+        return render(renderProps);
+    }
+    return (_jsx("span", { "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };