starkon
Version:
Complete Next.js boilerplate with authentication, i18n & CLI - Create production-ready apps instantly
1,145 lines (1,143 loc) • 670 kB
JavaScript
import * as React13 from 'react';
import React13__default, { createContext, forwardRef, useRef, useState, useEffect, useMemo, useCallback, useContext } from 'react';
import { twMerge } from 'tailwind-merge';
import { clsx } from 'clsx';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import * as LabelPrimitive from '@radix-ui/react-label';
import { cva } from 'class-variance-authority';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import { Check, ChevronDown, ChevronUp, X, ChevronRight, Circle, Minus, Plus, EyeOff, Eye, ExternalLink, Code, Settings, Copy, SortDesc, SortAsc, ChevronsUpDown, ChevronsLeft, ChevronLeft, ChevronsRight, Image, Film, FileText, FileArchive, File, Upload, AlertCircle, Edit, Trash2, Info, AlertTriangle, Search, Heart, Star, Target, RefreshCw, Filter, Download, Calendar, Sun, Moon, Languages, Globe, CheckCircle, Bold, Italic, Underline, Strikethrough, Palette, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Link, Video, Table, Undo, Redo, Type, Save, Clock } from 'lucide-react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import * as SelectPrimitive from '@radix-ui/react-select';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import * as TabsPrimitive from '@radix-ui/react-tabs';
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { AnimatePresence, motion } from 'framer-motion';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import * as SliderPrimitive from '@radix-ui/react-slider';
import { createPortal } from 'react-dom';
import { create } from 'zustand';
import { devtools, persist, createJSONStorage } from 'zustand/middleware';
import { ErrorBoundary } from 'react-error-boundary';
import { useReactTable, getFacetedUniqueValues, getFacetedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
import axios from 'axios';
import { useSearchParams } from 'next/navigation';
import { initReactI18next, useTranslation } from 'react-i18next';
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import CryptoJS from 'crypto-js';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
import * as ProgressPrimitive from '@radix-ui/react-progress';
import { addDays, endOfMonth, startOfMonth, getMinutes, getHours, format, isSameDay, getDay, startOfWeek, endOfWeek, isWithinInterval, setMinutes, setHours, subMonths, addMonths, subYears, addYears, isSameMonth, isToday } from 'date-fns';
import { tr } from 'date-fns/locale/tr';
import { enUS } from 'date-fns/locale/en-US';
/**
* Starkon - Custom Radix UI Components
* @license MIT
*/
function cn(...inputs) {
return twMerge(clsx(inputs));
}
function debounce(fn, ms = 300) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), ms);
};
}
function isDarkMode() {
if (typeof window === "undefined") return false;
return localStorage.getItem("theme") === "dark" || !localStorage.getItem("theme") && window.matchMedia("(prefers-color-scheme: dark)").matches;
}
function get(obj, path, defaultValue = void 0) {
const travel = (regexp) => String.prototype.split.call(path, regexp).filter(Boolean).reduce((res, key) => res !== null && res !== void 0 ? res[key] : res, obj);
const result = travel(/[,[\]]+?/) || travel(/[,.[\]]+?/);
return result === void 0 || result === obj ? defaultValue : result;
}
function sanitizeHtml(html) {
return html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
}
function formatDate(date, locale = "en-US") {
const d = typeof date === "string" ? new Date(date) : date;
return d.toLocaleDateString(locale, {
year: "numeric",
month: "long",
day: "numeric"
});
}
var storage = {
get: (key, defaultValue) => {
if (typeof window === "undefined") return defaultValue;
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : defaultValue;
} catch (error) {
console.error("Error getting item from localStorage", error);
return defaultValue;
}
},
set: (key, value) => {
if (typeof window === "undefined") return;
try {
window.localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error("Error setting item in localStorage", error);
}
},
remove: (key) => {
if (typeof window === "undefined") return;
try {
window.localStorage.removeItem(key);
} catch (error) {
console.error("Error removing item from localStorage", error);
}
}
};
var Input = React13.forwardRef(({ className, type, error, ...props }, ref) => {
return /* @__PURE__ */ jsx(
"input",
{
type,
className: cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
error && "border-destructive",
className
),
ref,
...props
}
);
});
Input.displayName = "Input";
var labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
var Label = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
Label.displayName = LabelPrimitive.Root.displayName;
var Switch = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
SwitchPrimitives.Root,
{
className: cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-500 data-[state=unchecked]:bg-neutral-200 dark:data-[state=checked]:bg-primary-600 dark:data-[state=unchecked]:bg-neutral-800",
className
),
...props,
ref,
children: /* @__PURE__ */ jsx(
SwitchPrimitives.Thumb,
{
className: cn(
"pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950"
)
}
)
}
));
Switch.displayName = SwitchPrimitives.Root.displayName;
var Textarea = React13.forwardRef(
({ className, ...props }, ref) => {
return /* @__PURE__ */ jsx(
"textarea",
{
className: cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
className
),
ref,
...props
}
);
}
);
Textarea.displayName = "Textarea";
var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
CheckboxPrimitive.Root,
{
ref,
className: cn(
"peer h-4 w-4 shrink-0 rounded-sm border shadow transition-all",
"focus-visible:outline-none",
"disabled:cursor-not-allowed disabled:opacity-50",
// Light mode styles
"border-neutral-300 bg-white text-white",
"hover:border-neutral-400 hover:bg-neutral-50",
"data-[state=checked]:bg-primary-500 data-[state=checked]:border-primary-500",
"data-[state=checked]:text-white",
// Dark mode styles
"dark:border-neutral-600 dark:bg-neutral-900 dark:text-white",
"dark:hover:border-neutral-500 dark:hover:bg-neutral-800",
"dark:focus-visible:outline-none",
"dark:data-[state=checked]:bg-primary-600 dark:data-[state=checked]:border-primary-600",
"dark:data-[state=checked]:text-white",
className
),
...props,
children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) })
}
));
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
var buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
var Button = React13.forwardRef(({ className, variant, size, ...props }, ref) => {
return /* @__PURE__ */ jsx("button", { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
});
Button.displayName = "Button";
var Select = SelectPrimitive.Root;
var SelectGroup = SelectPrimitive.Group;
var SelectValue = SelectPrimitive.Value;
var SelectTrigger = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
SelectPrimitive.Trigger,
{
ref,
className: cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
),
...props,
children: [
children,
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
]
}
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
var SelectScrollUpButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
SelectPrimitive.ScrollUpButton,
{
ref,
className: cn("flex cursor-default items-center justify-center py-1", className),
...props,
children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
}
));
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
var SelectScrollDownButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
SelectPrimitive.ScrollDownButton,
{
ref,
className: cn("flex cursor-default items-center justify-center py-1", className),
...props,
children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
}
));
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
var SelectContent = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
SelectPrimitive.Content,
{
ref,
className: cn(
"relative z-[10000] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
),
position,
...props,
children: [
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
/* @__PURE__ */ jsx(
SelectPrimitive.Viewport,
{
className: cn(
"p-1",
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
),
children
}
),
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
]
}
) }));
SelectContent.displayName = SelectPrimitive.Content.displayName;
var SelectLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Label, { ref, className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props }));
SelectLabel.displayName = SelectPrimitive.Label.displayName;
var SelectItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
SelectPrimitive.Item,
{
ref,
className: cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
),
...props,
children: [
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
]
}
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
var SelectSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props }));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
var Dialog = DialogPrimitive.Root;
var DialogTrigger = DialogPrimitive.Trigger;
var DialogPortal = DialogPrimitive.Portal;
var DialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
DialogPrimitive.Overlay,
{
ref,
className: cn(
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
),
...props
}
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
var DialogContent = React13.forwardRef(
({ className, children, showCloseButton = true, hideCloseButton = false, ...props }, ref) => {
const shouldShowCloseButton = hideCloseButton ? false : showCloseButton;
return /* @__PURE__ */ jsxs(DialogPortal, { children: [
/* @__PURE__ */ jsx(DialogOverlay, {}),
/* @__PURE__ */ jsxs(
DialogPrimitive.Content,
{
ref,
className: cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
),
...props,
children: [
children,
shouldShowCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Kapat" })
] })
]
}
)
] });
}
);
DialogContent.displayName = DialogPrimitive.Content.displayName;
var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
DialogHeader.displayName = "DialogHeader";
var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
DialogFooter.displayName = "DialogFooter";
var DialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
DialogPrimitive.Title,
{
ref,
className: cn("text-lg font-semibold leading-none tracking-tight", className),
...props
}
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
var DialogDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
var Tabs = TabsPrimitive.Root;
var TabsList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
TabsPrimitive.List,
{
ref,
className: cn(
"inline-flex h-9 items-center justify-center rounded-lg bg-neutral-100 p-1 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400",
className
),
...props
}
));
TabsList.displayName = TabsPrimitive.List.displayName;
var TabsTrigger = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
TabsPrimitive.Trigger,
{
ref,
className: cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:data-[state=active]:bg-neutral-950 dark:data-[state=active]:text-neutral-50",
className
),
...props
}
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
var TabsContent = React13.forwardRef(
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
TabsPrimitive.Content,
{
ref,
className: cn(
"mt-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:data-[state=active]:bg-neutral-950 dark:data-[state=active]:text-neutral-50",
className
),
...props
}
)
);
TabsContent.displayName = TabsPrimitive.Content.displayName;
var Card = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props }));
Card.displayName = "Card";
var CardHeader = React13.forwardRef(
({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
);
CardHeader.displayName = "CardHeader";
var CardTitle = React13.forwardRef(
({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
);
CardTitle.displayName = "CardTitle";
var CardDescription = React13.forwardRef(
({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
);
CardDescription.displayName = "CardDescription";
var CardContent = React13.forwardRef(
({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
);
CardContent.displayName = "CardContent";
var CardFooter = React13.forwardRef(
({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
);
CardFooter.displayName = "CardFooter";
var AlertDialog = AlertDialogPrimitive.Root;
var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
var AlertDialogPortal = AlertDialogPrimitive.Portal;
var AlertDialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
AlertDialogPrimitive.Overlay,
{
className: cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
),
...props,
ref
}
));
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
var AlertDialogContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
/* @__PURE__ */ jsx(AlertDialogOverlay, {}),
/* @__PURE__ */ jsx(
AlertDialogPrimitive.Content,
{
ref,
className: cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",
className
),
...props
}
)
] }));
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
AlertDialogHeader.displayName = "AlertDialogHeader";
var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
AlertDialogFooter.displayName = "AlertDialogFooter";
var AlertDialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
var AlertDialogDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
AlertDialogPrimitive.Description,
{
ref,
className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
...props
}
));
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
var AlertDialogAction = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
var AlertDialogCancel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
AlertDialogPrimitive.Cancel,
{
ref,
className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
...props
}
));
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
var Avatar = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
AvatarPrimitive.Root,
{
ref,
className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
...props
}
));
Avatar.displayName = AvatarPrimitive.Root.displayName;
var AvatarImage = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, { ref, className: cn("aspect-square h-full w-full", className), ...props }));
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
var AvatarFallback = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
AvatarPrimitive.Fallback,
{
ref,
className: cn(
"flex h-full w-full items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-800",
className
),
...props
}
));
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
var DropdownMenu = DropdownMenuPrimitive.Root;
var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
var DropdownMenuGroup = DropdownMenuPrimitive.Group;
var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
var DropdownMenuSub = DropdownMenuPrimitive.Sub;
var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
var DropdownMenuSubTrigger = React13.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
DropdownMenuPrimitive.SubTrigger,
{
ref,
className: cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8",
className
),
...props,
children: [
children,
/* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
]
}
));
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
var DropdownMenuSubContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
DropdownMenuPrimitive.SubContent,
{
ref,
className: cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
),
...props
}
));
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
DropdownMenuPrimitive.Content,
{
ref,
sideOffset,
className: cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
),
...props
}
) }));
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
var DropdownMenuItem = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
DropdownMenuPrimitive.Item,
{
ref,
className: cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
),
...props
}
));
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
var DropdownMenuCheckboxItem = React13.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
DropdownMenuPrimitive.CheckboxItem,
{
ref,
className: cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
),
checked,
...props,
children: [
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
children
]
}
));
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
var DropdownMenuRadioItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
DropdownMenuPrimitive.RadioItem,
{
ref,
className: cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
),
...props,
children: [
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
children
]
}
));
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
var DropdownMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
DropdownMenuPrimitive.Label,
{
ref,
className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
...props
}
));
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props }));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
var DropdownMenuShortcut = ({ className, ...props }) => {
return /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
};
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
var spinnerVariants = cva("", {
variants: {
size: {
xs: "h-3 w-3",
sm: "h-4 w-4",
md: "h-6 w-6",
lg: "h-8 w-8",
xl: "h-12 w-12",
"2xl": "h-16 w-16"
},
variant: {
default: "text-primary-500 dark:text-primary-400",
secondary: "text-neutral-500 dark:text-neutral-400",
white: "text-white",
accent: "text-accent-500 dark:text-accent-400"
}
},
defaultVariants: {
size: "md",
variant: "default"
}
});
var LoadingSpinner = React13.forwardRef(
({ className, size, variant, text, centered = false, ...props }, ref) => /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
"inline-flex items-center gap-3",
{
"w-full justify-center": centered
},
className
),
...props,
children: [
/* @__PURE__ */ jsxs("div", { className: cn("relative", spinnerVariants({ size, variant })), children: [
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-gradient-to-r from-current via-transparent to-current opacity-20 animate-spin" }),
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full", children: /* @__PURE__ */ jsx(
"div",
{
className: "h-full w-full rounded-full border-2 border-transparent bg-gradient-to-r from-current to-transparent animate-spin",
style: {
mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
maskComposite: "xor"
}
}
) }),
/* @__PURE__ */ jsxs(
"svg",
{
className: "relative animate-spin",
style: { animationDuration: "1.5s", animationTimingFunction: "cubic-bezier(0.4, 0, 0.6, 1)" },
viewBox: "0 0 24 24",
fill: "none",
children: [
/* @__PURE__ */ jsx(
"circle",
{
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeDasharray: "31.416",
strokeDashoffset: "31.416",
className: "opacity-25"
}
),
/* @__PURE__ */ jsx(
"circle",
{
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeDasharray: "31.416",
strokeDashoffset: "23.562",
className: "opacity-75",
style: {
filter: "drop-shadow(0 0 6px currentColor)"
}
}
)
]
}
)
] }),
text && /* @__PURE__ */ jsx("span", { className: "text-sm text-neutral-600 dark:text-neutral-400 animate-pulse", children: text })
]
}
)
);
LoadingSpinner.displayName = "LoadingSpinner";
var LoadingDots = React13.forwardRef(
({ className, size = "md", variant = "default", text, ...props }, ref) => {
const dotSizeMap = {
xs: "h-1 w-1",
sm: "h-1.5 w-1.5",
md: "h-2 w-2",
lg: "h-2.5 w-2.5",
xl: "h-3 w-3",
"2xl": "h-4 w-4"
};
const colorMap = {
default: "bg-gradient-to-r from-primary-400 to-primary-600 dark:from-primary-300 dark:to-primary-500",
secondary: "bg-gradient-to-r from-neutral-400 to-neutral-600 dark:from-neutral-300 dark:to-neutral-500",
white: "bg-white shadow-lg",
accent: "bg-gradient-to-r from-accent-400 to-accent-600 dark:from-accent-300 dark:to-accent-500"
};
const safeSize = size || "md";
const safeVariant = variant || "default";
return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-3", className), ...props, children: [
/* @__PURE__ */ jsx("div", { className: "flex space-x-1.5", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
"div",
{
className: cn("rounded-full transform-gpu", dotSizeMap[safeSize], colorMap[safeVariant]),
style: {
animation: `modernBounce 1.4s ease-in-out ${index * 0.2}s infinite`,
filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
}
},
index
)) }),
text && /* @__PURE__ */ jsx("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: text })
] });
}
);
LoadingDots.displayName = "LoadingDots";
var LoadingPulse = React13.forwardRef(
({ className, size = "md", variant = "default", text, ...props }, ref) => {
const pulseSizeMap = {
xs: "h-6 w-6",
sm: "h-8 w-8",
md: "h-12 w-12",
lg: "h-16 w-16",
xl: "h-20 w-20",
"2xl": "h-24 w-24"
};
const pulseColorMap = {
default: "bg-gradient-to-br from-primary-200 via-primary-300 to-primary-400 dark:from-primary-700 dark:via-primary-800 dark:to-primary-900",
secondary: "bg-gradient-to-br from-neutral-200 via-neutral-300 to-neutral-400 dark:from-neutral-700 dark:via-neutral-800 dark:to-neutral-900",
white: "bg-gradient-to-br from-white via-gray-50 to-gray-100",
accent: "bg-gradient-to-br from-accent-200 via-accent-300 to-accent-400 dark:from-accent-700 dark:via-accent-800 dark:to-accent-900"
};
const safeSize = size || "md";
const safeVariant = variant || "default";
return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-3", className), ...props, children: [
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsx(
"div",
{
className: cn(
"absolute inset-0 rounded-full opacity-30 blur-sm",
pulseSizeMap[safeSize],
pulseColorMap[safeVariant]
),
style: {
animation: "modernPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
}
}
),
/* @__PURE__ */ jsx(
"div",
{
className: cn("relative rounded-full shadow-lg", pulseSizeMap[safeSize], pulseColorMap[safeVariant]),
style: {
animation: "modernPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
animationDelay: "0.3s",
boxShadow: "inset 2px 2px 4px rgba(255,255,255,0.3), inset -2px -2px 4px rgba(0,0,0,0.1)"
}
}
),
/* @__PURE__ */ jsx(
"div",
{
className: cn("absolute top-1/4 left-1/4 rounded-full bg-white opacity-40", {
"h-1.5 w-1.5": safeSize === "xs",
"h-2 w-2": safeSize === "sm",
"h-3 w-3": safeSize === "md",
"h-4 w-4": safeSize === "lg",
"h-5 w-5": safeSize === "xl",
"h-6 w-6": safeSize === "2xl"
}),
style: {
animation: "modernPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
animationDelay: "0.1s"
}
}
)
] }),
text && /* @__PURE__ */ jsx("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: text })
] });
}
);
LoadingPulse.displayName = "LoadingPulse";
var variantStyles = {
default: {
backgroundColor: "hsl(var(--primary))",
color: "hsl(var(--primary-foreground))",
borderWidth: "0"
},
secondary: {
backgroundColor: "hsl(var(--secondary))",
color: "hsl(var(--secondary-foreground))",
borderWidth: "0"
},
destructive: {
backgroundColor: "hsl(var(--destructive))",
color: "hsl(var(--destructive-foreground))",
borderWidth: "0"
},
warning: {
backgroundColor: "rgb(251 146 60)",
// orange-400
color: "rgb(255 255 255)",
// white
borderWidth: "0"
},
outline: {
backgroundColor: "transparent",
color: "hsl(var(--foreground))",
borderColor: "hsl(var(--border))",
borderWidth: "1px",
borderStyle: "solid"
}
};
var sizeStyles = {
default: "px-2.5 py-0.5 text-xs",
sm: "px-2 py-0.5 text-xs",
lg: "px-3 py-1 text-sm"
};
function Badge({
className,
variant = "default",
size = "default",
borderColor,
backgroundColor,
textColor,
style,
...props
}) {
const combinedStyle = {
// Base variant styles
...variantStyles[variant],
// Custom overrides
...backgroundColor && { backgroundColor },
...textColor && { color: textColor },
...borderColor && {
borderColor,
borderWidth: "1px",
borderStyle: "solid"
},
// Merge any additional styles
...style
};
return /* @__PURE__ */ jsx(
"span",
{
className: cn(
// Base classes without any border, background, or color classes
"inline-flex items-center font-semibold transition-colors focus:outline-none rounded-full",
// Size classes
sizeStyles[size],
// Hover effects without color specifications
"hover:opacity-80",
className
),
style: combinedStyle,
...props
}
);
}
var skeletonVariants = cva("animate-pulse bg-neutral-200 dark:bg-neutral-800", {
variants: {
variant: {
default: "rounded-md",
circular: "rounded-full",
rectangular: "rounded-none",
text: "rounded-sm h-4"
},
animation: {
pulse: "animate-pulse",
shimmer: "animate-shimmer bg-gradient-to-r from-neutral-200 via-neutral-300 to-neutral-200 dark:from-neutral-800 dark:via-neutral-700 dark:to-neutral-800",
wave: "animate-wave",
none: ""
}
},
defaultVariants: {
variant: "default",
animation: "pulse"
}
});
var Skeleton = React13__default.forwardRef(
({ className, variant, animation, width, height, lines, style, ...props }, ref) => {
const baseStyle = {
width: typeof width === "number" ? `${width}px` : width,
height: typeof height === "number" ? `${height}px` : height,
...style
};
if (variant === "text" && lines && lines > 1) {
return /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props, children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx(
"div",
{
className: cn(skeletonVariants({ variant, animation })),
style: {
...baseStyle,
width: index === lines - 1 && lines > 1 ? "75%" : baseStyle.width
}
},
index
)) });
}
return /* @__PURE__ */ jsx("div", { ref, className: cn(skeletonVariants({ variant, animation }), className), style: baseStyle, ...props });
}
);
Skeleton.displayName = "Skeleton";
var SkeletonText = React13__default.forwardRef(
({ lines = 1, ...props }, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "text", lines, ...props })
);
SkeletonText.displayName = "SkeletonText";
var SkeletonAvatar = React13__default.forwardRef(({ size = 40, className, ...props }, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "circular", width: size, height: size, className, ...props }));
SkeletonAvatar.displayName = "SkeletonAvatar";
var SkeletonButton = React13__default.forwardRef(
({ className, ...props }, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "default", width: 80, height: 36, className, ...props })
);
SkeletonButton.displayName = "SkeletonButton";
var SkeletonCard = React13__default.forwardRef(
({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("p-6 space-y-4", className), ...props, children: [
/* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60%", height: 20 }),
/* @__PURE__ */ jsx(Skeleton, { variant: "text", lines: 2, height: 16 })
] }),
/* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: 200 }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
/* @__PURE__ */ jsx(SkeletonAvatar, { size: 32 }),
/* @__PURE__ */ jsxs("div", { className: "space-y-1 flex-1", children: [
/* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40%", height: 14 }),
/* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60%", height: 12 })
] })
] }),
children
] })
);
SkeletonCard.displayName = "SkeletonCard";
var TooltipProvider = TooltipPrimitive.Provider;
var Tooltip = TooltipPrimitive.Root;
var TooltipTrigger = TooltipPrimitive.Trigger;
var TooltipContent = React13.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
TooltipPrimitive.Content,
{
ref,
sideOffset,
className: cn(
"z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
className
),
...props
}
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
function TooltipComponent({
children,
content,
delayDuration = 300,
side = "top",
align = "center",
disabled = false,
className,
contentClassName,
...props
}) {
if (disabled) {
return /* @__PURE__ */ jsx(Fragment, { children });
}
return /* @__PURE__ */ jsxs(Tooltip, { delayDuration, ...props, children: [
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, className, children }),
/* @__PURE__ */ jsx(TooltipContent, { side, align, className: contentClassName, children: content })
] });
}
var Popover = PopoverPrimitive.Root;
var PopoverTrigger = PopoverPrimitive.Trigger;
var PopoverContent = React13.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
PopoverPrimitive.Content,
{
ref,
align,
sideOffset,
className: cn(
"z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
className
),
...props
}
) }));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
var AccordionContext = createContext(null);
var useAccordionContext = () => {
const context = useContext(AccordionContext);
if (!context) {
throw new Error("Accordion bile\u015Fenleri bir AccordionRoot i\xE7inde kullan\u0131lmal\u0131d\u0131r");
}
return context;
};
function AccordionRoot({
children,
defaultValue = [],
value,
onValueChange,
allowMultiple = false,
className,
type = "single",
collapsible = true
}) {
const isMultiple = useMemo(() => type === "multiple" || allowMultiple, [type, allowMultiple]);
const [internalExpanded, setInternalExpanded] = useState(defaultValue || []);
const isControlled = value !== void 0;
const expandedItems = isControlled ? value : internalExpanded;
const toggleItem = useCallback(
(itemValue) => {
const newValue = (() => {
if (expandedItems.includes(itemValue)) {
if (!collapsible && !isMultiple && expandedItems.length === 1) {
return expandedItems;
}
return expandedItems.filter((item) => item !== itemValue);
}
if (isMultiple) {
return [...expandedItems, itemValue];
}
return [itemValue];
})();
if (!isControlled) {
setInternalExpanded(newValue);
}
if (onValueChange) {
onValueChange(newValue);
}
},
[expandedItems, isMultiple, collapsible, isControlled, onValueChange]
);
const isExpanded = useCallback((itemValue) => expandedItems.includes(itemValue), [expandedItems]);
const contextValue = useMemo(
() => ({
expandedItems,
toggleItem,
isExpanded,
allowMultiple: isMultiple
}),
[expandedItems, toggleItem, isExpanded, isMultiple]
);
return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("divide-y divide-neutral-200 dark:divide-neutral-700", className), children }) });
}
function AccordionItem({ children, value, disabled = false, className }) {
const { isExpanded } = useAccordionContext();
const expanded = isExpanded(value);
return /* @__PURE__ */ jsx(
"div",
{
"data-state": expanded ? "open" : "closed",
"data-disabled": disabled ? "true" : void 0,
className: cn("overflow-hidden transition-all w-full", disabled && "opacity-50 cursor-not-allowed", className),
children
}
);
}
function AccordionTrigger({ children, className, hideIcon = false }) {
const { toggleItem, isExpanded } = useAccordionContext();
const item = React13__default.useContext(AccordionItemContext);
if (!item) {
throw new Error("AccordionTrigger bir AccordionItem i\xE7inde kullan\u0131lmal\u0131d\u0131r");
}
const { value, disabled } = item;
const expanded = isExpanded(value);
const handleClick = useCallback(() => {
if (!disabled) {
toggleItem(value);
}
}, [disabled, toggleItem, value]);
return /* @__PURE__ */ jsxs(
"button",
{
type: "button",
onClick: handleClick,
disabled,
"aria-expanded": expanded,
className: cn(
"flex items-center justify-between w-full py-4 px-4 text-left text-base font-medium transition-colors",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 focus-visible:ring-inset",
"hover:bg-neutral-50 dark:hover:bg-neutral-800/50",
expanded && "bg-neutral-50 dark:bg-neutral-800/50",
disabled && "cursor-not-allowed",
className
),
children: [
children,
!hideIcon && /* @__PURE__ */ jsx(
ChevronDown,
{
className: cn(
"h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200",
expanded && "rotate-180"
)
}
)
]
}
);
}
function AccordionContent({ children, className, forceMount = false }) {
const { isExpanded } = useAccordionContext();
const item = React13__default.useContext(AccordionItemContext);
if (!item) {
throw new Error("AccordionContent bir AccordionItem i\xE7inde kullan\u0131lmal\u0131d\u0131r");
}
const { value } = item;
const expanded = isExpanded(value);
return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: (expanded || forceMount) && /* @__PURE__ */ jsx(
motion.div,
{
initial: { height: 0, opacity: 0 },
animate: { height: "auto", opacity: 1 },
exit: { height: 0, opacity: 0 },
transition: { duration: 0.2, ease: "easeInOut" },
className: "overflow-hidden",
children: /* @__PURE__ */ jsx("div", { className: cn("px-4 pb-4 pt-4", className), children })
}
) });
}
var AccordionItemContext = createContext(null);
var Accordion = {
Root: AccordionRoot,
Item: ({ children, ...props }) => {
const contextValue = {
valu