@enmera/panel-kit 0.0.0-stage → 0.2.0

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, };

package/dist/ui/command.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { type AutocompleteProps, type InputProps, type MenuItemProps, type MenuProps, type MenuSectionProps, type SeparatorProps } from "react-aria-components";
+import { Dialog } from "./dialog.js";
+declare function Command({ className, dir, style, ...props }: Omit<AutocompleteProps, "className" | "style"> & {
+    className?: string;
+    dir?: React.HTMLAttributes<HTMLDivElement>["dir"];
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+declare function CommandDialog({ title, description, children, open, onOpenChange, className, showCloseButton, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children" | "className" | "isOpen" | "onOpenChange"> & {
+    title?: string;
+    description?: string;
+    open?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    className?: string;
+    showCloseButton?: boolean;
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function CommandInput({ className, ...props }: InputProps): React.JSX.Element;
+declare function CommandList<T extends object>({ className, ...props }: MenuProps<T>): React.JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CommandGroup<T extends object>({ className, children, items, heading, ...props }: MenuSectionProps<T> & {
+    heading?: string;
+}): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: SeparatorProps): React.JSX.Element;
+declare function CommandItem<T extends object>({ className, children, textValue, ...props }: MenuItemProps<T>): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/ui/command.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+import { Autocomplete, Collection, composeRenderProps, Header, Input, Menu, MenuItem, MenuSection, SearchField, Separator, useFilter, } from "react-aria-components";
+import { Dialog, DialogDescription, DialogHeader, DialogTitle, } from "./dialog.js";
+import { InputGroup, InputGroupAddon, } from "./input-group.js";
+import { SearchIcon, CheckIcon } from "lucide-react";
+import { t } from '../config.js';
+function Command({ className, dir, style, ...props }) {
+    const { contains } = useFilter({ sensitivity: "base" });
+    return (_jsx("div", { "data-slot": "command", dir: dir, className: cn("flex size-full flex-col overflow-hidden rounded-4xl bg-popover p-1 text-popover-foreground", className), style: style, children: _jsx(Autocomplete, { ...props, filter: props.filter || contains, children: props.children }) }));
+}
+function CommandDialog({ title = t("Command palette"), description = t("Search for a screen or command"), children, open, onOpenChange, className, showCloseButton = false, ...props }) {
+    return (_jsxs(Dialog, { isOpen: open, onOpenChange: onOpenChange, className: cn("top-1/3 translate-y-0 overflow-hidden rounded-4xl! p-0", className), showCloseButton: showCloseButton, isDismissable: true, ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), children] }));
+}
+function CommandInput({ className, ...props }) {
+    return (_jsx(SearchField, { autoFocus: true, "aria-label": props.placeholder || t("Search"), "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-9 bg-input/50", children: [_jsx(Input, { ...props, "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-search-cancel-button]:hidden", className) }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(Menu, { ...props, "data-slot": "command-list", className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className) }));
+}
+function CommandEmpty({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "command-empty", className: cn("py-6 text-center text-sm", className), ...props }));
+}
+function CommandGroup({ className, children, items, heading, ...props }) {
+    return (_jsxs(MenuSection, { "data-slot": "command-group", className: cn("overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className), ...props, children: [heading && _jsx(Header, { "cmdk-group-heading": "", children: heading }), _jsx(Collection, { items: items, children: children })] }));
+}
+function CommandSeparator({ className, ...props }) {
+    return (_jsx(Separator, { "data-slot": "command-separator", className: cn("my-1.5 h-px bg-border/50", className), ...props }));
+}
+function CommandItem({ className, children, textValue, ...props }) {
+    return (_jsx(MenuItem, { ...props, "data-slot": "command-item", className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none in-data-[slot=dialog-content]:rounded-3xl data-focused:bg-muted data-focused:text-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-focused:*:[svg]:text-foreground data-selected:*:[svg]:text-foreground", className), textValue: textValue || (typeof children === "string" ? children : undefined), children: composeRenderProps(children, (children) => (_jsxs(_Fragment, { children: [children, _jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })] }))) }));
+}
+function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-focused/command-item:text-foreground group-data-selected/command-item:text-foreground", className), ...props }));
+}
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/ui/dialog.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Heading, Modal as ModalPrimitive, type DialogProps as DialogPrimitiveProps, type DialogTriggerProps as DialogTriggerPrimitiveProps, type ModalOverlayProps as ModalOverlayPrimitiveProps } from "react-aria-components";
+import { Button } from "./button.js";
+declare function DialogTrigger({ ...props }: DialogTriggerPrimitiveProps): React.JSX.Element;
+declare function DialogClose({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function DialogOverlay({ className, children, ...props }: Omit<ModalOverlayPrimitiveProps, "className" | "children"> & {
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function Dialog({ className, children, showCloseButton, isDismissable, ...props }: Omit<ModalOverlayPrimitiveProps, "className" | "children"> & Pick<React.ComponentProps<typeof ModalPrimitive>, "isDismissable"> & {
+    className?: string;
+    children: React.ReactNode;
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: Omit<React.ComponentProps<typeof Heading>, "slot">): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: Omit<React.ComponentProps<"div">, "slot">): React.JSX.Element;
+export { type DialogPrimitiveProps, type DialogTriggerPrimitiveProps, Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, };

package/dist/ui/dialog.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+import { Dialog as DialogPrimitive, DialogTrigger as DialogTriggerPrimitive, Heading, ModalOverlay as ModalOverlayPrimitive, Modal as ModalPrimitive, } from "react-aria-components";
+import { Button } from "./button.js";
+import { XIcon } from "lucide-react";
+import { t } from '../config.js';
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogTriggerPrimitive, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogClose({ className, variant = "outline", size = "default", ...props }) {
+    return (_jsx(Button, { slot: "close", "data-slot": "dialog-close", variant: variant, size: size, className: cn(className), ...props }));
+}
+function DialogOverlay({ className, children, ...props }) {
+    return (_jsx(ModalOverlayPrimitive, { "data-slot": "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 Dialog({ className, children, showCloseButton = true, isDismissable = true, ...props }) {
+    return (_jsx(DialogOverlay, { isDismissable: isDismissable, ...props, children: _jsx(ModalPrimitive, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] grid-cols-[minmax(0,1fr)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-popover p-6 text-sm 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 sm:max-w-md dark:ring-foreground/10", className), children: _jsxs(DialogPrimitive, { "data-slot": "dialog", className: "grid-cols-[minmax(0,1fr)] [display:inherit] [gap:inherit] min-w-0 outline-none", children: [children, showCloseButton && (_jsxs(DialogClose, { variant: "ghost", className: "absolute top-4 right-4 bg-secondary", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: t("Close") })] }))] }) }) }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-1.5", className), ...props }));
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && _jsx(DialogClose, { variant: "outline", children: t("Close") })] }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(Heading, { slot: "title", "data-slot": "dialog-title", className: cn("font-heading text-base leading-none font-medium", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+}
+export { Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, };

package/dist/ui/dropdown-menu.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Header as HeaderPrimitive, Menu as MenuPrimitive, MenuTrigger as MenuTriggerPrimitive, Popover as PopoverPrimitive, Separator as SeparatorPrimitive, SubmenuTrigger as SubmenuTriggerPrimitive, type MenuItemProps as MenuItemPrimitiveProps, type MenuSectionProps as MenuSectionPrimitiveProps } from "react-aria-components";
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof MenuTriggerPrimitive>): React.JSX.Element;
+declare function DropdownMenu({ "data-slot": dataSlot, placement, offset, crossOffset, className, children, ...props }: Omit<React.ComponentProps<typeof MenuPrimitive<object>>, "children" | "className"> & Pick<React.ComponentProps<typeof PopoverPrimitive>, "placement" | "offset" | "crossOffset"> & {
+    "data-slot"?: string;
+    className?: string;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: Omit<MenuSectionPrimitiveProps<object>, "children"> & {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof HeaderPrimitive> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, children, ...props }: MenuItemPrimitiveProps<object> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof SubmenuTriggerPrimitive>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuItemPrimitiveProps<object> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ placement, crossOffset, offset, className, ...props }: React.ComponentProps<typeof DropdownMenu>): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof SeparatorPrimitive>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { DropdownMenuTrigger, DropdownMenu, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/ui/dropdown-menu.js

@@ -0,0 +1,48 @@
+"use client";
+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 { composeRenderProps, Header as HeaderPrimitive, MenuItem as MenuItemPrimitive, Menu as MenuPrimitive, MenuSection as MenuSectionPrimitive, MenuTrigger as MenuTriggerPrimitive, Popover as PopoverPrimitive, Separator as SeparatorPrimitive, SubmenuTrigger as SubmenuTriggerPrimitive, } from "react-aria-components";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(MenuTriggerPrimitive, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenu({ "data-slot": dataSlot = "dropdown-menu-content", placement = "bottom start", offset = 4, crossOffset = 0, className, children, ...props }) {
+    return (_jsx(PopoverPrimitive, { "data-slot": dataSlot, placement: placement, offset: offset, crossOffset: crossOffset, className: cn("z-50 w-(--trigger-width) min-w-48 origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-3xl bg-popover p-1.5 text-popover-foreground shadow-lg 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:overflow-hidden 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 dark:ring-foreground/10", className), children: _jsx(MenuPrimitive, { className: "max-h-[inherit] overflow-x-hidden overflow-y-auto outline-hidden", ...props, children: children }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(MenuSectionPrimitive, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(HeaderPrimitive, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5", className), ...props }));
+}
+const dropdownMenuItemVariants = cva("group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        selectionMode: {
+            none: "gap-2.5 rounded-2xl px-3 py-2 text-sm font-medium focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+            single: "gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4",
+            multiple: "gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4",
+        },
+    },
+});
+function DropdownMenuItem({ className, inset, variant = "default", children, ...props }) {
+    return (_jsx(MenuItemPrimitive, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, textValue: typeof children === "string" ? children : props.textValue, className: composeRenderProps(className, (className, { selectionMode }) => cn(dropdownMenuItemVariants({ selectionMode }), className)), ...props, children: composeRenderProps(children, (children, { isSelected, selectionMode }) => (_jsxs(_Fragment, { children: [selectionMode !== "none" ? (_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": selectionMode === "single"
+                        ? "dropdown-menu-radio-item-indicator"
+                        : "dropdown-menu-checkbox-item-indicator", children: isSelected ? (_jsx(CheckIcon, {})) : null })) : null, children] }))) }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(SubmenuTriggerPrimitive, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsx(MenuItemPrimitive, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, textValue: typeof children === "string" ? children : props.textValue, className: cn("flex cursor-default items-center gap-2 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: composeRenderProps(children, (children) => (_jsxs(_Fragment, { children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }))) }));
+}
+function DropdownMenuSubContent({ placement = "end top", crossOffset = -3, offset = 0, className, ...props }) {
+    return (_jsx(DropdownMenu, { "data-slot": "dropdown-menu-sub-content", className: cn("w-auto min-w-36 rounded-3xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 dark:ring-foreground/10", className), placement: placement, crossOffset: crossOffset, offset: offset, ...props }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(SeparatorPrimitive, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1.5 my-1.5 h-px bg-border/50", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className), ...props }));
+}
+export { DropdownMenuTrigger, DropdownMenu, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/ui/field.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from "class-variance-authority";
+import { Label } from "./label.js";
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): import("react").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "responsive" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): import("react").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): import("react").JSX.Element | null;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/dist/ui/field.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils.js";
+import { Label } from "./label.js";
+import { Separator } from "./separator.js";
+function FieldSet({ className, ...props }) {
+    return (_jsx("fieldset", { "data-slot": "field-set", className: cn("flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+    return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className), ...props }));
+}
+function FieldGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className), ...props }));
+}
+const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+    variants: {
+        orientation: {
+            vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+            horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+function Field({ className, orientation = "vertical", ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className), ...props }));
+}
+function FieldContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-1 leading-snug", className), ...props }));
+}
+function FieldLabel({ className, ...props }) {
+    return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-input/30 has-data-selected:bg-input/30 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-input/40 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-4", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
+}
+function FieldTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className), ...props }));
+}
+function FieldDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "field-description", className: cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function FieldSeparator({ children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
+}
+function FieldError({ className, children, errors, ...props }) {
+    const content = useMemo(() => {
+        if (children) {
+            return children;
+        }
+        if (!errors?.length) {
+            return null;
+        }
+        const uniqueErrors = [
+            ...new Map(errors.map((error) => [error?.message, error])).values(),
+        ];
+        if (uniqueErrors?.length == 1) {
+            return uniqueErrors[0]?.message;
+        }
+        return (_jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && _jsx("li", { children: error.message }, index)) }));
+    }, [children, errors]);
+    if (!content) {
+        return null;
+    }
+    return (_jsx("div", { role: "alert", "data-slot": "field-error", className: cn("text-sm font-normal text-destructive", className), ...props, children: content }));
+}
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/dist/ui/heading.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Ürünün tek başlık ölçeği (panel ve tanıtım sitesi): yazı tipi, kalınlık, satır ve harf aralığı burada; sayfa yalnız
+ * boyutu seçer (renk ve yerleşim className'den). Büyük boyutlar görüntü yazı tipiyle, `base` ve `sm` metin yazı tipiyle.
+ * Ölçek dışı boyut eklenmez.
+ */
+declare const sizes: {
+    readonly mega: 'font-display text-5xl leading-[1.02] tracking-[-0.035em] sm:text-7xl';
+    readonly hero: 'font-display text-4xl leading-[1.05] tracking-[-0.03em] sm:text-6xl';
+    readonly display: 'font-display text-4xl leading-tight tracking-tight sm:text-5xl';
+    readonly section: 'font-display text-3xl tracking-tight sm:text-4xl';
+    readonly title: 'font-display text-2xl tracking-tight sm:text-3xl';
+    readonly subtitle: 'font-display text-2xl tracking-tight';
+    readonly card: 'font-display text-xl tracking-tight';
+    readonly small: 'font-display text-lg tracking-tight';
+    readonly base: 'text-base';
+    readonly sm: 'text-sm';
+    readonly xs: 'text-xs';
+};
+export type HeadingSize = keyof typeof sizes;
+export declare function Heading({ as: Tag, size, className, ...props }: React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: 'h1' | 'h2' | 'h3' | 'h4';
+    size: HeadingSize;
+}): import("react").JSX.Element;
+export {};

package/dist/ui/heading.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../utils.js';
+/**
+ * Ürünün tek başlık ölçeği (panel ve tanıtım sitesi): yazı tipi, kalınlık, satır ve harf aralığı burada; sayfa yalnız
+ * boyutu seçer (renk ve yerleşim className'den). Büyük boyutlar görüntü yazı tipiyle, `base` ve `sm` metin yazı tipiyle.
+ * Ölçek dışı boyut eklenmez.
+ */
+const sizes = {
+    mega: 'font-display text-5xl leading-[1.02] tracking-[-0.035em] sm:text-7xl',
+    hero: 'font-display text-4xl leading-[1.05] tracking-[-0.03em] sm:text-6xl',
+    display: 'font-display text-4xl leading-tight tracking-tight sm:text-5xl',
+    section: 'font-display text-3xl tracking-tight sm:text-4xl',
+    title: 'font-display text-2xl tracking-tight sm:text-3xl',
+    subtitle: 'font-display text-2xl tracking-tight',
+    card: 'font-display text-xl tracking-tight',
+    small: 'font-display text-lg tracking-tight',
+    base: 'text-base',
+    sm: 'text-sm',
+    // Yoğun araç panellerindeki küçük bölüm başlığı.
+    xs: 'text-xs',
+};
+export function Heading({ as: Tag = 'h2', size, className, ...props }) {
+    return _jsx(Tag, { className: cn('font-semibold text-balance', sizes[size], className), ...props });
+}

package/dist/ui/icon-tile.d.ts

@@ -0,0 +1,17 @@
+declare const tones: {
+    readonly primary: 'bg-primary/10 text-primary';
+    readonly neutral: 'bg-muted text-muted-foreground';
+    readonly success: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400';
+    readonly warning: 'bg-amber-500/10 text-amber-700 dark:text-amber-400';
+    readonly danger: 'bg-red-500/10 text-red-700 dark:text-red-400';
+};
+declare const sizes: {
+    readonly sm: 'size-8 rounded-xl [&_svg]:size-4';
+    readonly default: 'size-10 rounded-2xl [&_svg]:size-5';
+};
+/** Kartın başındaki kare ikon zemini (özellik, öneri, adım). */
+export declare function IconTile({ tone, size, className, ...props }: React.ComponentProps<'span'> & {
+    tone?: keyof typeof tones;
+    size?: keyof typeof sizes;
+}): import("react").JSX.Element;
+export {};

package/dist/ui/icon-tile.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../utils.js';
+const tones = {
+    primary: 'bg-primary/10 text-primary',
+    neutral: 'bg-muted text-muted-foreground',
+    success: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
+    warning: 'bg-amber-500/10 text-amber-700 dark:text-amber-400',
+    danger: 'bg-red-500/10 text-red-700 dark:text-red-400',
+};
+const sizes = {
+    sm: 'size-8 rounded-xl [&_svg]:size-4',
+    default: 'size-10 rounded-2xl [&_svg]:size-5',
+};
+/** Kartın başındaki kare ikon zemini (özellik, öneri, adım). */
+export function IconTile({ tone = 'primary', size = 'default', className, ...props }) {
+    return _jsx("span", { className: cn('flex shrink-0 items-center justify-center [&_svg]:shrink-0', sizes[size], tones[tone], className), ...props });
+}

package/dist/ui/input-group.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { type GroupProps } from "react-aria-components";
+import { Button } from "./button.js";
+declare function InputGroup({ className, ...props }: GroupProps): React.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "icon-sm" | "icon-xs" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset";
+}): React.JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: Omit<React.ComponentProps<"input">, "size">): React.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/dist/ui/input-group.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils.js";
+import { Group } from "react-aria-components";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+function InputGroup({ className, ...props }) {
+    return (_jsx(Group, { "data-slot": "input-group", className: cn("group/input-group relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-transparent bg-input/50 transition-[color,box-shadow,background-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-3xl has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-2xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className), ...props }));
+}
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-3xl **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4", {
+    variants: {
+        align: {
+            "inline-start": "order-first pl-3 has-[>button]:-ml-1 has-[>kbd]:-ml-1",
+            "inline-end": "order-last pr-3 has-[>button]:-mr-1 has-[>kbd]:-mr-1",
+            "block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
+            "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5",
+        },
+    },
+    defaultVariants: {
+        align: "inline-start",
+    },
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target.closest("button")) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector("input")?.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva("flex items-center gap-2 rounded-4xl text-sm shadow-none", {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-xl px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: "",
+            "icon-xs": "size-6 rounded-xl p-0 has-[>svg]:p-0",
+            "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+        },
+    },
+    defaultVariants: {
+        size: "xs",
+    },
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupText({ className, ...props }) {
+    return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className), ...props }));
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2.5 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className), ...props }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/dist/ui/input.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Input as InputPrimitive } from "react-aria-components";
+declare function Input({ className, type, size, mono, ...props }: Omit<React.ComponentProps<typeof InputPrimitive>, "size"> & {
+    size?: "default" | "sm" | "xs";
+    /** Kod, anahtar, adres gibi eş aralıklı yazılması gereken değerler. */
+    mono?: boolean;
+}): React.JSX.Element;
+export { Input };

package/dist/ui/input.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+import { composeRenderProps, Input as InputPrimitive, } from "react-aria-components";
+function Input({ className, type, size = "default", mono = false, ...props }) {
+    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", "data-size": size, "data-mono": mono || undefined, className: composeRenderProps(className, (className) => cn("h-9 data-[size=sm]:h-8 data-[size=sm]:text-sm data-[size=xs]:h-7 data-[size=xs]:px-2.5 data-[size=xs]:text-xs data-mono:font-mono w-full min-w-0 rounded-3xl border border-transparent bg-input/50 px-3 py-1 text-base transition-[color,box-shadow,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className)), ...props }));
+}
+export { Input };

package/dist/ui/label.d.ts

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

package/dist/ui/label.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+import { LabelContext, Label as LabelPrimitive, } from "react-aria-components";
+function Label({ className, htmlFor, slot, ...props }) {
+    const label = (_jsx(LabelPrimitive, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:opacity-50", className), ...props, htmlFor: htmlFor, slot: slot }));
+    if (htmlFor && slot === undefined) {
+        return _jsx(LabelContext.Provider, { value: null, children: label });
+    }
+    return label;
+}
+export { Label };