@enmera/panel-kit 0.0.0-stage → 0.1.0

package/dist/ui/breadcrumb.js

@@ -0,0 +1,25 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+import { Breadcrumb as BreadcrumbPrimitive, Breadcrumbs as BreadcrumbsPrimitive, composeRenderProps, Link as LinkPrimitive, } from "react-aria-components";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { t } from '../config.js';
+function Breadcrumb({ className, ...props }) {
+    return (_jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props }));
+}
+function BreadcrumbList({ className, ...props }) {
+    return (_jsx(BreadcrumbsPrimitive, { "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5", className), ...props }));
+}
+function BreadcrumbItem({ className, children, separatorClassName, ...props }) {
+    return (_jsx(BreadcrumbPrimitive, { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1.5", className), ...props, children: composeRenderProps(children, (children, { isCurrent }) => (_jsxs(_Fragment, { children: [children, !isCurrent && (_jsx("span", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", separatorClassName), children: _jsx(ChevronRightIcon, {}) }))] }))) }));
+}
+function BreadcrumbLink({ className, render, ...props }) {
+    return (_jsx(LinkPrimitive, { "data-slot": "breadcrumb-link", className: cn("transition-colors hover:text-foreground", className), render: render, ...props }));
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props }));
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className), ...props, children: [_jsx(MoreHorizontalIcon, {}), _jsx("span", { className: "sr-only", children: t("More") })] }));
+}
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbEllipsis, };

package/dist/ui/button.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { type ButtonProps as ButtonPrimitiveProps, type LinkProps as LinkPrimitiveProps } from "react-aria-components";
+declare const buttonVariants: (props?: ({
+    variant?: "caution" | "default" | "destructive" | "floating" | "ghost" | "inverse" | "light" | "link" | "on-brand" | "on-brand-soft" | "outline" | "secondary" | "warning" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, children, ...props }: Omit<ButtonPrimitiveProps, "className"> & React.RefAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
+    className?: string;
+}): React.JSX.Element;
+declare function LinkButton({ className, variant, size, ...props }: Omit<LinkPrimitiveProps, "className"> & VariantProps<typeof buttonVariants> & {
+    className?: string;
+}): React.JSX.Element;
+export { Button, LinkButton, buttonVariants };

package/dist/ui/button.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { LoaderCircleIcon, LoaderIcon, RefreshCcwIcon, RefreshCwIcon, RotateCcwIcon, RotateCwIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils.js";
+import { Button as ButtonPrimitive, Link as LinkPrimitive, } from "react-aria-components";
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,opacity,transform,translate] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 data-pending:cursor-progress data-pending:opacity-70 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/80",
+            outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent dark:hover:bg-input/30",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+            // Taslak gibi "henüz yayında değil" eylemleri.
+            warning: "bg-orange-500 text-white hover:bg-orange-500/85 focus-visible:ring-orange-500/30",
+            // Zamanlama gibi "sonra olacak" eylemleri.
+            caution: "bg-yellow-400 text-yellow-950 hover:bg-yellow-400/85 focus-visible:ring-yellow-400/40",
+            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+            link: "text-primary underline-offset-4 hover:underline",
+            // Açık zeminde koyu düğme (sitede ikinci çağrı, yüzen "Searvia'ya sor"); koyu temada marka rengi.
+            inverse: "bg-ink text-white hover:bg-ink/85 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/85",
+            // Sayfanın üstünde yüzen koyu düğme ("Searvia'ya sor").
+            floating: "bg-ink text-white shadow-lg hover:bg-ink/85 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/85",
+            // Marka renkli zeminin üstündeki düğmeler (ana sayfa, blog çağrısı): dolu ve saydam.
+            "on-brand": "bg-on-brand text-on-brand-ink hover:bg-on-brand/90",
+            "on-brand-soft": "bg-on-brand/10 text-on-brand ring-1 ring-on-brand/30 hover:bg-on-brand/20",
+            // Koyu kutunun üstündeki açık düğme.
+            light: "bg-white text-ink hover:bg-white/90",
+        },
+        size: {
+            default: "h-9 gap-1.5 px-3 has-[>svg:first-child]:pr-[13px] has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+            xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-8 gap-1 px-3 has-[>svg:first-child]:pr-[13px] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            lg: "h-10 gap-1.5 px-4 has-[>svg:first-child]:pr-[17px] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-4",
+            icon: "size-9",
+            "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-8",
+            "icon-lg": "size-10",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+// Bekleyen düğmede bu ikonlar yerinde döner; diğer baş ikonların yerine dönen halka gelir.
+const spinInPlaceIcons = new Set([RefreshCwIcon, RefreshCcwIcon, RotateCwIcon, RotateCcwIcon, LoaderIcon, LoaderCircleIcon]);
+function withPendingIcon(children) {
+    const items = React.Children.toArray(children);
+    const first = items[0];
+    if (React.isValidElement(first) && typeof first.type !== "string") {
+        const icon = spinInPlaceIcons.has(first.type)
+            ? React.cloneElement(first, { className: cn(first.props.className, "animate-spin") })
+            : _jsx(LoaderCircleIcon, { className: "animate-spin" }, "pending");
+        return [icon, ...items.slice(1)];
+    }
+    return [_jsx(LoaderCircleIcon, { className: "animate-spin" }, "pending"), ...items];
+}
+function Button({ className, variant = "default", size = "default", children, ...props }) {
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props, children: props.isPending && typeof children !== "function" ? withPendingIcon(children) : children }));
+}
+function LinkButton({ className, variant = "default", size = "default", ...props }) {
+    return (_jsx(LinkPrimitive, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, LinkButton, buttonVariants };

package/dist/ui/calendar.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { type CalendarCellRenderProps, type CalendarProps, type DateValue, type RangeCalendarProps } from "react-aria-components";
+import { Button } from "./button.js";
+declare function Calendar<T extends DateValue, M extends "single" | "multiple" = "single">(props: Omit<CalendarProps<T, M>, "visibleDuration"> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+    captionLayout?: "label" | "dropdown";
+    numberOfMonths?: number;
+    showWeekNumber?: boolean;
+    headerFormat?: Intl.DateTimeFormatOptions;
+    renderCell?: (renderProps: CalendarCellRenderProps & {
+        defaultChildren: React.ReactNode;
+    }) => React.ReactNode;
+}): React.JSX.Element;
+declare function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+    captionLayout?: "label" | "dropdown";
+    headerFormat?: Intl.DateTimeFormatOptions;
+    numberOfMonths?: number;
+    showWeekNumber?: boolean;
+    renderCell?: (renderProps: CalendarCellRenderProps & {
+        defaultChildren: React.ReactNode;
+    }) => React.ReactNode;
+}): React.JSX.Element;
+export { Calendar, RangeCalendar };

package/dist/ui/calendar.js

@@ -0,0 +1,54 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils.js";
+import { Calendar as AriaCalendar, CalendarGridHeader as AriaCalendarGridHeader, RangeCalendar as AriaRangeCalendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarHeaderCell, CalendarHeading, CalendarMonthPicker, CalendarYearPicker, } from "react-aria-components";
+import { Button, buttonVariants } from "./button.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "./select.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+const cellVariants = cva("group/day relative mt-2 aspect-square h-full w-full cursor-default rounded-(--cell-radius) p-0 text-center select-none [&:is(:last-child>[data-selected=true])>div]:rounded-r-(--cell-radius)", {
+    variants: {
+        showWeekNumber: {
+            false: "[&:is(:first-child>[data-selected=true])>div]:rounded-l-(--cell-radius)",
+            true: "[&:is(:nth-child(2)>[data-selected=true])>div]:rounded-l-(--cell-radius)",
+        },
+        isToday: {
+            true: "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+        },
+        isSelectionStart: {
+            true: "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+        },
+        isSelectionEnd: {
+            true: "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+        },
+        isUnavailable: {
+            true: "text-muted-foreground opacity-50 [&>div]:line-through",
+        },
+        isDisabled: {
+            true: "text-muted-foreground opacity-50",
+        },
+        isOutsideMonth: {
+            true: "text-muted-foreground aria-selected:text-muted-foreground",
+        },
+    },
+});
+function Calendar(props) {
+    return (_jsx(AriaCalendar, { ...props, "data-slot": "calendar", visibleDuration: { months: props.numberOfMonths || 1 }, className: cn("group/calendar w-fit bg-background p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", props.className), children: _jsx(CalendarInner, { ...props }) }));
+}
+function RangeCalendar(props) {
+    return (_jsx(AriaRangeCalendar, { ...props, "data-slot": "calendar", visibleDuration: { months: props.numberOfMonths || 1 }, className: cn("group/calendar w-fit bg-background p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", props.className), children: _jsx(CalendarInner, { ...props, isRange: true }) }));
+}
+function CalendarInner({ captionLayout = "label", buttonVariant = "ghost", numberOfMonths = 1, showWeekNumber = false, headerFormat, renderCell, isRange, }) {
+    return (_jsxs("div", { className: "relative flex flex-col gap-4 md:flex-row", children: [_jsxs("header", { className: "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", children: [_jsx(Button, { variant: buttonVariant, slot: "previous", className: "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", children: _jsx(ChevronLeftIcon, { className: "size-4" }) }), _jsx(Button, { variant: buttonVariant, slot: "next", className: "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", children: _jsx(ChevronRightIcon, { className: "size-4" }) })] }), Array.from({ length: numberOfMonths }, (_, i) => (_jsxs("div", { className: "flex w-full flex-col gap-4", children: [_jsx("div", { className: "flex h-(--cell-size) w-full items-center justify-center gap-1 px-(--cell-size)", children: captionLayout === "dropdown" ? (_jsxs(_Fragment, { children: [_jsx(MonthDropdown, { format: headerFormat }), _jsx(YearDropdown, { format: headerFormat })] })) : (_jsx(CalendarHeading, { offset: { months: i }, format: headerFormat, className: "text-sm font-medium select-none" })) }), _jsxs(CalendarGrid, { className: "w-full border-collapse", offset: { months: i }, children: [_jsx(AriaCalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "rounded-(--cell-radius) text-xs font-normal text-muted-foreground select-none", children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, className: (renderProps) => cellVariants({ ...renderProps, showWeekNumber }), children: (renderProps) => (_jsx("div", { "data-selected-single": renderProps.isSelected && !isRange, "data-range-start": renderProps.isSelectionStart && isRange, "data-range-end": renderProps.isSelectionEnd && isRange, "data-range-middle": renderProps.isSelected &&
+                                            !renderProps.isSelectionStart &&
+                                            !renderProps.isSelectionEnd &&
+                                            isRange, className: cn(buttonVariants({ variant: "ghost", size: "icon" }), "relative isolate z-10 flex aspect-square h-full w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70"), children: renderCell
+                                            ? renderCell(renderProps)
+                                            : renderProps.defaultChildren })) })) })] })] }, i)))] }));
+}
+function MonthDropdown({ format }) {
+    return (_jsx(CalendarMonthPicker, { format: format?.month, children: (props) => (_jsxs(Select, { ...props, className: "relative", children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { className: "min-w-0", children: _jsx(SelectGroup, { children: props.items.map((item) => (_jsx(SelectItem, { id: item.id, children: item.formatted }, item.id))) }) })] })) }));
+}
+function YearDropdown({ format }) {
+    return (_jsx(CalendarYearPicker, { format: format, children: (props) => (_jsxs(Select, { ...props, className: "relative", children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { className: "min-w-0", children: props.items.map((item) => (_jsx(SelectItem, { id: item.id, children: item.formatted }, item.id))) })] })) }));
+}
+export { Calendar, RangeCalendar };

package/dist/ui/card.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/ui/card.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+function Card({ className, size = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-4xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-md ring-1 ring-foreground/5 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] dark:ring-foreground/10 *:[img:first-child]:rounded-t-4xl *:[img:last-child]:rounded-b-4xl", className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-t-4xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn("font-heading text-base font-medium", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-4xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)", className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/ui/chart.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import type { TooltipValueType } from "recharts";
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type TooltipNameType = number | string;
+type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
+export { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/ui/chart.js

@@ -0,0 +1,137 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils.js";
+import { formatDate, formatNumber } from "../config.js";
+import * as RechartsPrimitive from "recharts";
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" };
+const INITIAL_DIMENSION = { width: 320, height: 200 };
+const ChartContext = React.createContext(null);
+function useChart() {
+    const context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />");
+    }
+    return context;
+}
+function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+    return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
+}
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                const color = itemConfig.theme?.[theme] ??
+                    itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+            })
+                .join("\n")}
+}
+`)
+                .join("\n"),
+        } }));
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+        if (hideLabel || !payload?.length) {
+            return null;
+        }
+        const [item] = payload;
+        const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof label === "string"
+            ? (config[label]?.label ?? label)
+            : itemConfig?.label;
+        if (labelFormatter) {
+            return (_jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
+        }
+        // Tarih anahtarlı serilerde başlık (2026-10-22) arayüz dilinde yazılır.
+        if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
+            return _jsx("div", { className: cn("font-medium", labelClassName), children: formatDate(value) });
+        }
+        if (!value) {
+            return null;
+        }
+        return _jsx("div", { className: cn("font-medium", labelClassName), children: value });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey,
+    ]);
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return (_jsxs("div", { className: cn("grid min-w-32 items-start gap-1.5 rounded-xl bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-lg ring-1 ring-foreground/5 dark:ring-foreground/10", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
+                    .filter((item) => item.type !== "none")
+                    .map((item, index) => {
+                    const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color ?? item.payload?.fill ?? item.color;
+                    return (_jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+                                        "h-2.5 w-2.5": indicator === "dot",
+                                        "w-1": indicator === "line",
+                                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                                        "my-0.5": nestLabel && indicator === "dashed",
+                                    }), style: {
+                                        "--color-bg": indicatorColor,
+                                        "--color-border": indicatorColor,
+                                    } }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number"
+                                                ? formatNumber(item.value)
+                                                : String(item.value) }))] })] })) }, index));
+                }) })] }));
+}
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    return (_jsx("div", { className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+            const key = `${nameKey ?? item.dataKey ?? "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: item.color,
+                        } })), itemConfig?.label] }, index));
+        }) }));
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = "payload" in payload &&
+        typeof payload.payload === "object" &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload &&
+        typeof payload[key] === "string") {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === "string") {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,3 @@
+import { type CheckboxProps } from "react-aria-components";
+declare function Checkbox({ className, children, ...props }: CheckboxProps): import("react").JSX.Element;
+export { Checkbox };

package/dist/ui/checkbox.js

@@ -0,0 +1,9 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+import { Checkbox as CheckboxPrimitive, composeRenderProps, } from "react-aria-components";
+import { CheckIcon, MinusIcon } from "lucide-react";
+function Checkbox({ className, children, ...props }) {
+    return (_jsx(CheckboxPrimitive, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[5px] border border-transparent bg-input/90 transition-shadow outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-transparent after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-focus-visible:border-ring data-focus-visible:ring-3 data-focus-visible:ring-ring/30 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary data-selected:border-primary data-selected:bg-primary data-selected:text-primary-foreground data-invalid:data-selected:border-primary dark:data-selected:bg-primary", className), ...props, children: composeRenderProps(children, (children, { isSelected, isIndeterminate }) => (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: isIndeterminate ? _jsx(MinusIcon, {}) : isSelected ? _jsx(CheckIcon, {}) : null }), children] }))) }));
+}
+export { Checkbox };

package/dist/ui/chip.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonProps } from 'react-aria-components';
+/**
+ * Süzgeç hapı: aynı listeyi daraltan seçim (durum, tür, bölge). Seçili hap koyu, diğerleri çerçeveli; sayaç isteğe
+ * bağlı. İçerik değiştiren ana seçim için Segmented kullanılır (seçici dili).
+ */
+export declare function Chip({ selected, count, className, children, ...props }: Omit<ButtonProps, 'className' | 'children'> & {
+    selected?: boolean;
+    count?: number | string | null;
+    className?: string;
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/ui/chip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from 'react-aria-components';
+import { cn } from '../utils.js';
+/**
+ * Süzgeç hapı: aynı listeyi daraltan seçim (durum, tür, bölge). Seçili hap koyu, diğerleri çerçeveli; sayaç isteğe
+ * bağlı. İçerik değiştiren ana seçim için Segmented kullanılır (seçici dili).
+ */
+export function Chip({ selected = false, count, className, children, ...props }) {
+    return (_jsxs(ButtonPrimitive, { "aria-pressed": selected, className: cn('inline-flex h-8 shrink-0 cursor-default items-center gap-1.5 rounded-full px-3 text-sm font-medium whitespace-nowrap ring-1 transition-colors outline-hidden focus-visible:ring-3 focus-visible:ring-ring/30', selected ? 'bg-foreground text-background ring-foreground' : 'text-muted-foreground ring-foreground/10 hover:bg-muted hover:text-foreground', className), ...props, children: [children, count !== undefined && count !== null && _jsx("span", { className: cn('tabular-nums', selected ? 'opacity-70' : 'text-muted-foreground'), children: count })] }));
+}

package/dist/ui/code.d.ts

@@ -0,0 +1,2 @@
+/** Satır içi kod, anahtar ya da teknik değer (alan adı kaydı, API yolu, kupon kodu). */
+export declare function Code({ className, ...props }: React.ComponentProps<'code'>): import("react").JSX.Element;

package/dist/ui/code.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../utils.js';
+/** Satır içi kod, anahtar ya da teknik değer (alan adı kaydı, API yolu, kupon kodu). */
+export function Code({ className, ...props }) {
+    return _jsx("code", { className: cn('rounded-md bg-muted px-1.5 py-0.5 font-mono text-xs break-all', className), ...props });
+}

package/dist/ui/collapsible.d.ts

@@ -0,0 +1,5 @@
+import { type ButtonProps, type DisclosurePanelProps, type DisclosureProps } from "react-aria-components";
+declare function Collapsible({ ...props }: DisclosureProps): import("react").JSX.Element;
+declare function CollapsibleTrigger({ ...props }: ButtonProps): import("react").JSX.Element;
+declare function CollapsibleContent({ ...props }: DisclosurePanelProps): import("react").JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/ui/collapsible.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DisclosurePanel as CollapsibleContentPrimitive, Disclosure as CollapsiblePrimitive, Button as CollapsibleTriggerPrimitive, } from "react-aria-components";
+function Collapsible({ ...props }) {
+    return _jsx(CollapsiblePrimitive, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({ ...props }) {
+    return (_jsx(CollapsibleTriggerPrimitive, { slot: "trigger", "data-slot": "collapsible-trigger", ...props }));
+}
+function CollapsibleContent({ ...props }) {
+    return (_jsx(CollapsibleContentPrimitive, { "data-slot": "collapsible-content", ...props }));
+}
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/ui/combobox.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Collection, ComboBox as ComboBoxPrimitive, Popover as PopoverPrimitive, type ButtonProps, type ComboBoxValueProps, type GroupProps, type HeaderProps, type InputProps, type ListBoxItemProps, type ListBoxProps, type ListBoxSectionProps, type SeparatorProps, type TagListProps, type TagProps } from "react-aria-components";
+declare function ComboboxValue<T>({ ...props }: ComboBoxValueProps<T>): React.JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: Omit<ButtonProps, "children"> & {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: React.ComponentProps<"input"> & {
+    showTrigger?: boolean;
+    showClear?: boolean;
+}): React.JSX.Element;
+declare function ComboboxContent({ className, placement, offset, crossOffset, anchor, ...props }: Omit<React.ComponentProps<typeof PopoverPrimitive>, "className" | "children"> & {
+    className?: string;
+    children?: React.ReactNode;
+    anchor?: React.RefObject<HTMLDivElement | null>;
+}): React.JSX.Element;
+declare function ComboboxList<T extends object>({ className, ...props }: ListBoxProps<T>): React.JSX.Element;
+declare function ComboboxItem<T extends object>({ className, children, ...props }: ListBoxItemProps<T>): React.JSX.Element;
+declare function ComboboxGroup<T extends object>({ className, ...props }: ListBoxSectionProps<T>): React.JSX.Element;
+declare function ComboboxLabel({ className, ...props }: HeaderProps): React.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: SeparatorProps): React.JSX.Element;
+declare function ComboboxChips({ children, className, ...props }: GroupProps): React.JSX.Element;
+declare function ComboboxChipList<T extends object>({ className, ...props }: Omit<TagListProps<T>, "className" | "items"> & {
+    className?: string;
+}): React.JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, ...props }: Omit<TagProps, "children"> & {
+    showRemove?: boolean;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: InputProps): React.JSX.Element;
+declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
+export { ComboBoxPrimitive as Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, Collection as ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipList, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };

package/dist/ui/combobox.js

@@ -0,0 +1,77 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils.js";
+import { Button as ButtonPrimitive, Collection, ComboBox as ComboBoxPrimitive, ComboBoxStateContext, ComboBoxValue as ComboBoxValuePrimitive, composeRenderProps, Group, Header as HeaderPrimitive, Input as InputPrimitive, ListBoxItem as ListBoxItemPrimitive, ListBox as ListBoxPrimitive, ListBoxSection as ListBoxSectionPrimitive, Popover as PopoverPrimitive, Separator as SeparatorPrimitive, TagGroup as TagGroupPrimitive, TagList as TagListPrimitive, Tag as TagPrimitive, } from "react-aria-components";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "./input-group.js";
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react";
+import { t } from '../config.js';
+function ComboboxValue({ ...props }) {
+    return _jsx(ComboBoxValuePrimitive, { "data-slot": "combobox-value", ...props });
+}
+function ComboboxTrigger({ className, children, ...props }) {
+    return (_jsxs(ButtonPrimitive, { "data-slot": "combobox-trigger", className: cn("[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })] }));
+}
+function ComboboxClear({ className, ...props }) {
+    const state = React.useContext(ComboBoxStateContext);
+    if (state?.inputValue === "") {
+        return null;
+    }
+    return (_jsx(InputGroupButton, { "data-slot": "combobox-clear", variant: "ghost", size: "icon-xs", "aria-label": t("Clear"), className: cn(className), onPress: () => {
+            state?.setValue(null);
+        }, slot: null, ...props, children: _jsx(XIcon, { className: "pointer-events-none" }) }));
+}
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+    return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(InputGroupInput, { disabled: disabled, ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", "data-slot": "combobox-trigger", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent [&_svg:not([class*='size-'])]:size-4", isDisabled: disabled, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })), showClear && _jsx(ComboboxClear, { isDisabled: disabled })] }), children] }));
+}
+function ComboboxContent({ className, placement = "bottom", offset = 6, crossOffset = 0, anchor, ...props }) {
+    return (_jsx(PopoverPrimitive, { "data-slot": "combobox-content", placement: placement, offset: offset, crossOffset: crossOffset, triggerRef: anchor, className: cn("relative isolate z-50 max-h-72 w-(--trigger-width) min-w-36 origin-(--trigger-anchor-point) overflow-hidden rounded-3xl bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 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-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 **:data-[slot$=-item]:data-focused:bg-foreground/10 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/50 *:data-[slot=input-group]:shadow-none dark:ring-foreground/10", className), ...props }));
+}
+function ComboboxList({ className, ...props }) {
+    return (_jsx(ListBoxPrimitive, { "data-slot": "combobox-list", className: cn("group/combobox-content no-scrollbar max-h-[inherit] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0", className), ...props }));
+}
+function ComboboxItem({ className, children, ...props }) {
+    return (_jsx(ListBoxItemPrimitive, { "data-slot": "combobox-item", textValue: typeof children === "string" ? children : undefined, className: cn("relative flex w-full cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none data-focused:bg-accent data-focused:text-accent-foreground not-data-[variant=destructive]:data-focused:**:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: composeRenderProps(children, (children, { isSelected }) => (_jsxs(_Fragment, { children: [children, _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: isSelected ? (_jsx(CheckIcon, { className: "pointer-events-none" })) : null })] }))) }));
+}
+function ComboboxGroup({ className, ...props }) {
+    return (_jsx(ListBoxSectionPrimitive, { "data-slot": "combobox-group", className: cn(className), ...props }));
+}
+function ComboboxLabel({ className, ...props }) {
+    return (_jsx(HeaderPrimitive, { "data-slot": "combobox-label", className: cn("px-3 py-2.5 text-xs text-muted-foreground", className), ...props }));
+}
+function ComboboxEmpty({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "combobox-empty", className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className), ...props }));
+}
+function ComboboxSeparator({ className, ...props }) {
+    return (_jsx(SeparatorPrimitive, { "data-slot": "combobox-separator", className: cn("-mx-1.5 my-1.5 h-px bg-border", className), ...props }));
+}
+function ComboboxChips({ children, className, ...props }) {
+    return (_jsx(Group, { "data-slot": "combobox-chips", className: cn("flex min-h-9 flex-wrap items-center gap-1.5 rounded-3xl border border-transparent bg-input/50 bg-clip-padding px-3 py-1.5 text-sm transition-[color,box-shadow,background-color] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/30 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props, children: children }));
+}
+function ComboboxChipList({ className, ...props }) {
+    return (_jsx(ComboBoxValuePrimitive, { className: "contents", children: ({ selectedItems, state }) => (_jsx(TagGroupPrimitive, { "data-slot": "combobox-chip-list", className: cn("contents", className), onRemove: (keys) => {
+                if (Array.isArray(state.value)) {
+                    state.setValue(state.value.filter((k) => !keys.has(k)));
+                }
+            }, children: _jsx(TagListPrimitive, { className: "contents", items: selectedItems.filter((item) => item != null), ...props }) })) }));
+}
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+    return (_jsxs(TagPrimitive, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-3xl bg-input px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 dark:bg-input/60", className), ...props, children: [children, showRemove && (_jsx(Button, { slot: "remove", variant: "ghost", size: "icon-xs", className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
+}
+function ComboboxChipsInput({ className, ...props }) {
+    const state = React.useContext(ComboBoxStateContext);
+    return (_jsx(InputPrimitive, { "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none", className), onKeyDown: (e) => {
+            if (e.key === "Backspace" &&
+                e.currentTarget.value === "" &&
+                Array.isArray(state?.value) &&
+                state.value.length > 0) {
+                e.preventDefault();
+                state.setValue(state.value.slice(0, -1));
+            }
+        }, ...props }));
+}
+function useComboboxAnchor() {
+    return React.useRef(null);
+}
+export { ComboBoxPrimitive as Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, Collection as ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipList, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };