@vvedantb/ui 0.1.1 → 0.1.3

package/src/motion/presets.vibot.ts

@@ -1,105 +1,105 @@
-"use client";
-
-import type { Transition, Variants } from "motion/react";
-
-export const motionEase: [number, number, number, number] = [0.22, 1, 0.36, 1];
-
-export const motionDuration = {
-  fast: 0.22,
-  base: 0.3,
-  slow: 0.36,
-} as const;
-
-export const motionTiming = {
-  route: 0.3,
-  sidebar: 0.28,
-  stagger: 0.03,
-} as const;
-
-export const motionDistance = {
-  routeX: 12,
-  pageY: 8,
-} as const;
-
-/** Critically damped default — Apple damping 1.0 / response ~0.35s */
-export const defaultTransition: Transition = {
-  type: "spring",
-  bounce: 0,
-  duration: 0.35,
-};
-
-export const fastTransition: Transition = {
-  type: "spring",
-  bounce: 0,
-  duration: 0.25,
-};
-
-export const fade: Variants = {
-  hidden: { opacity: 0 },
-  show: { opacity: 1, transition: defaultTransition },
-  exit: {
-    opacity: 0,
-    transition: fastTransition,
-  },
-};
-
-export const fadeUp: Variants = {
-  hidden: { opacity: 0, y: motionDistance.pageY },
-  show: { opacity: 1, y: 0, transition: defaultTransition },
-  exit: {
-    opacity: 0,
-    y: 6,
-    transition: fastTransition,
-  },
-};
-
-export const routeSlideFade: Variants = {
-  hidden: { opacity: 0, x: -motionDistance.routeX },
-  show: {
-    opacity: 1,
-    x: 0,
-    transition: { type: "spring", bounce: 0, duration: motionTiming.route },
-  },
-  exit: {
-    opacity: 0,
-    x: -6,
-    transition: fastTransition,
-  },
-};
-
-export const scaleIn: Variants = {
-  hidden: { opacity: 0, scale: 0.98 },
-  show: { opacity: 1, scale: 1, transition: defaultTransition },
-  exit: {
-    opacity: 0,
-    scale: 0.98,
-    transition: fastTransition,
-  },
-};
-
-export function staggerContainer(
-  stagger = motionTiming.stagger,
-  delayChildren = 0,
-): Variants {
-  return {
-    hidden: { opacity: 0 },
-    show: {
-      opacity: 1,
-      transition: {
-        when: "beforeChildren",
-        delayChildren,
-        staggerChildren: stagger,
-      },
-    },
-    exit: {
-      opacity: 0,
-      transition: {
-        when: "afterChildren",
-        staggerChildren: Math.max(0.01, stagger / 2),
-        staggerDirection: -1,
-      },
-    },
-  };
-}
-
-export const staggerItem: Variants = fadeUp;
+"use client";
+
+import type { Transition, Variants } from "motion/react";
+
+export const motionEase: [number, number, number, number] = [0.22, 1, 0.36, 1];
+
+export const motionDuration = {
+  fast: 0.22,
+  base: 0.3,
+  slow: 0.36,
+} as const;
+
+export const motionTiming = {
+  route: 0.3,
+  sidebar: 0.28,
+  stagger: 0.03,
+} as const;
+
+export const motionDistance = {
+  routeX: 12,
+  pageY: 8,
+} as const;
+
+/** Critically damped default — Apple damping 1.0 / response ~0.35s */
+export const defaultTransition: Transition = {
+  type: "spring",
+  bounce: 0,
+  duration: 0.35,
+};
+
+export const fastTransition: Transition = {
+  type: "spring",
+  bounce: 0,
+  duration: 0.25,
+};
+
+export const fade: Variants = {
+  hidden: { opacity: 0 },
+  show: { opacity: 1, transition: defaultTransition },
+  exit: {
+    opacity: 0,
+    transition: fastTransition,
+  },
+};
+
+export const fadeUp: Variants = {
+  hidden: { opacity: 0, y: motionDistance.pageY },
+  show: { opacity: 1, y: 0, transition: defaultTransition },
+  exit: {
+    opacity: 0,
+    y: 6,
+    transition: fastTransition,
+  },
+};
+
+export const routeSlideFade: Variants = {
+  hidden: { opacity: 0, x: -motionDistance.routeX },
+  show: {
+    opacity: 1,
+    x: 0,
+    transition: { type: "spring", bounce: 0, duration: motionTiming.route },
+  },
+  exit: {
+    opacity: 0,
+    x: -6,
+    transition: fastTransition,
+  },
+};
+
+export const scaleIn: Variants = {
+  hidden: { opacity: 0, scale: 0.98 },
+  show: { opacity: 1, scale: 1, transition: defaultTransition },
+  exit: {
+    opacity: 0,
+    scale: 0.98,
+    transition: fastTransition,
+  },
+};
+
+export function staggerContainer(
+  stagger = motionTiming.stagger,
+  delayChildren = 0,
+): Variants {
+  return {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        when: "beforeChildren",
+        delayChildren,
+        staggerChildren: stagger,
+      },
+    },
+    exit: {
+      opacity: 0,
+      transition: {
+        when: "afterChildren",
+        staggerChildren: Math.max(0.01, stagger / 2),
+        staggerDirection: -1,
+      },
+    },
+  };
+}
+
+export const staggerItem: Variants = fadeUp;

package/src/ui/_menu-classes.ts

@@ -1,30 +1,30 @@
-// eva-aligned floating overlay: tone + smooth-shadow-ring, never border+shadow
-export const floatingSurfaceClass =
-  "rounded-lg bg-overlay text-overlay-foreground smooth-shadow-ring-lg max-sm:max-w-[calc(100vw-2rem)]";
-
-export const floatingSurfaceAnimateClass = [
-  "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",
-].join(" ");
-
-// shared floating menu surfaces, matches eva popover + smooth-shadow-ring-lg
-export const menuContentClass = [
-  "z-50 min-w-[12rem] overflow-hidden p-1.5 outline-none max-sm:max-h-[85dvh] max-sm:overflow-y-auto",
-  floatingSurfaceClass,
-  floatingSurfaceAnimateClass,
-].join(" ");
-
-export const menuSubTriggerClass =
-  "flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 max-sm:min-h-10 text-sm text-foreground outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[state=open]:bg-default data-[disabled]:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
-
-export const menuItemClass =
-  "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 max-sm:min-h-10 text-sm outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&_svg]:pointer-events-none";
-
-export const menuCheckboxRadioItemClass =
-  "relative flex cursor-pointer select-none items-center rounded-md py-2 max-sm:min-h-10 pl-8 pr-2.5 text-sm outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50";
-
-export const menuLabelClass =
-  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted";
-
-export const menuSeparatorClass = "-mx-1.5 my-1 h-px bg-separator";
-
-export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted/90";
+// eva-aligned floating overlay: tone + smooth-shadow-ring, never border+shadow
+export const floatingSurfaceClass =
+  "rounded-lg bg-overlay text-overlay-foreground smooth-shadow-ring-lg max-sm:max-w-[calc(100vw-2rem)]";
+
+export const floatingSurfaceAnimateClass = [
+  "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",
+].join(" ");
+
+// shared floating menu surfaces, matches eva popover + smooth-shadow-ring-lg
+export const menuContentClass = [
+  "z-50 min-w-[12rem] overflow-hidden p-1.5 outline-none max-sm:max-h-[85dvh] max-sm:overflow-y-auto",
+  floatingSurfaceClass,
+  floatingSurfaceAnimateClass,
+].join(" ");
+
+export const menuSubTriggerClass =
+  "flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 max-sm:min-h-10 text-sm text-foreground outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[state=open]:bg-default data-[disabled]:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
+
+export const menuItemClass =
+  "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 max-sm:min-h-10 text-sm outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&_svg]:pointer-events-none";
+
+export const menuCheckboxRadioItemClass =
+  "relative flex cursor-pointer select-none items-center rounded-md py-2 max-sm:min-h-10 pl-8 pr-2.5 text-sm outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50";
+
+export const menuLabelClass =
+  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted";
+
+export const menuSeparatorClass = "-mx-1.5 my-1 h-px bg-separator";
+
+export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted/90";

package/src/ui/_menu-classes.vibot.ts

@@ -1,33 +1,33 @@
-/** Eva-aligned floating overlay shell — tone + smooth-shadow-ring, no hairline. */
-export const floatingSurfaceClass =
-  "rounded-lg bg-overlay text-overlay-foreground smooth-shadow-ring-lg";
-
-export const floatingTooltipSurfaceClass =
-  "rounded-lg bg-overlay text-overlay-foreground smooth-shadow-ring-md";
-
-export const floatingSurfaceAnimateClass = [
-  "origin-(--radix-popper-transform-origin) 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 data-[state=open]:duration-200 data-[state=closed]:duration-150 data-[state=open]:ease-[cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:ease-[cubic-bezier(0.32,0.72,0,1)]",
-].join(" ");
-
-/** Shared floating menu surfaces — matches Eva's popover + smooth-shadow-ring-lg. */
-export const menuContentClass = [
-  "z-50 min-w-48 overflow-hidden p-1.5 outline-hidden",
-  floatingSurfaceClass,
-  floatingSurfaceAnimateClass,
-].join(" ");
-
-export const menuSubTriggerClass =
-  "flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-foreground outline-hidden transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] focus:bg-default focus:text-foreground data-highlighted:bg-default data-highlighted:text-foreground data-[state=open]:bg-default data-disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
-
-export const menuItemClass =
-  "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm outline-hidden transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] focus:bg-default focus:text-foreground data-highlighted:bg-default data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&_svg]:pointer-events-none";
-
-export const menuCheckboxRadioItemClass =
-  "relative flex cursor-pointer select-none items-center rounded-md py-2 pl-8 pr-2.5 text-sm outline-hidden transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] focus:bg-default focus:text-foreground data-highlighted:bg-default data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50";
-
-export const menuLabelClass =
-  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted";
-
-export const menuSeparatorClass = "-mx-1.5 my-1 h-px bg-separator";
-
-export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted/90";
+/** Eva-aligned floating overlay shell — tone + smooth-shadow-ring, no hairline. */
+export const floatingSurfaceClass =
+  "rounded-lg bg-overlay text-overlay-foreground smooth-shadow-ring-lg";
+
+export const floatingTooltipSurfaceClass =
+  "rounded-lg bg-overlay text-overlay-foreground smooth-shadow-ring-md";
+
+export const floatingSurfaceAnimateClass = [
+  "origin-(--radix-popper-transform-origin) 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 data-[state=open]:duration-200 data-[state=closed]:duration-150 data-[state=open]:ease-[cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:ease-[cubic-bezier(0.32,0.72,0,1)]",
+].join(" ");
+
+/** Shared floating menu surfaces — matches Eva's popover + smooth-shadow-ring-lg. */
+export const menuContentClass = [
+  "z-50 min-w-48 overflow-hidden p-1.5 outline-hidden",
+  floatingSurfaceClass,
+  floatingSurfaceAnimateClass,
+].join(" ");
+
+export const menuSubTriggerClass =
+  "flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-foreground outline-hidden transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] focus:bg-default focus:text-foreground data-highlighted:bg-default data-highlighted:text-foreground data-[state=open]:bg-default data-disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
+
+export const menuItemClass =
+  "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm outline-hidden transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] focus:bg-default focus:text-foreground data-highlighted:bg-default data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&_svg]:pointer-events-none";
+
+export const menuCheckboxRadioItemClass =
+  "relative flex cursor-pointer select-none items-center rounded-md py-2 pl-8 pr-2.5 text-sm outline-hidden transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] focus:bg-default focus:text-foreground data-highlighted:bg-default data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50";
+
+export const menuLabelClass =
+  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted";
+
+export const menuSeparatorClass = "-mx-1.5 my-1 h-px bg-separator";
+
+export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted/90";

package/src/ui/accordion.tsx

@@ -1,81 +1,81 @@
-import * as React from "react";
-import { Accordion as AccordionPrimitive } from "radix-ui";
-import { cn } from "../utils/cn";
-
-function ChevronDown({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <path d="m6 9 6 6 6-6" />
-    </svg>
-  );
-}
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("not-first:mt-6", className)}
-      {...props}
-    />
-  );
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "flex flex-1 items-center justify-between py-4 font-medium transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:underline [&[data-state=open]>svg]:rotate-180",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-150 ease-out" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="overflow-hidden text-sm transition-[height] data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-      {...props}
-    >
-      <div className={cn("pb-4 pt-0", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  );
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+import * as React from "react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import { cn } from "../utils/cn";
+
+function ChevronDown({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-first:mt-6", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-center justify-between py-4 font-medium transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:underline [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-150 ease-out" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm transition-[height] data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/ui/accordion.verve.tsx

@@ -1,56 +1,56 @@
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { IconChevronDown } from "@tabler/icons-react";
-import { cn } from "../utils/cn";
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ComponentRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("rounded-lg", className)}
-    {...props}
-  />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between rounded-lg py-4 text-sm font-medium transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.99] hover:bg-surface-tertiary/50 [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <IconChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ComponentRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0 text-muted-foreground", className)}>
-      {children}
-    </div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { IconChevronDown } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("rounded-lg", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between rounded-lg py-4 text-sm font-medium transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.99] hover:bg-surface-tertiary/50 [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconChevronDown className="h-4 w-4 shrink-0 text-muted transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0 text-muted", className)}>
+      {children}
+    </div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };