@emara/ui 1.1.0

package/components/ui/tooltip.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { forwardRef } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Per docs/emara-ui-phase-3-components.md §4. Brought forward into v0.1 per
+// docs/emara-ui-implementation-plan.md §5.
+
+// ----------------------------------------------------------------------------
+// TooltipProvider — typically wraps the app once. Re-export so consumers
+// don't have to import from Radix directly.
+// ----------------------------------------------------------------------------
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+// ----------------------------------------------------------------------------
+// Tooltip root — Radix props passthrough.
+// ----------------------------------------------------------------------------
+
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+// ----------------------------------------------------------------------------
+// TooltipContent
+// ----------------------------------------------------------------------------
+
+const tooltipContentVariants = cva(
+  [
+    "z-tooltip select-none px-2 py-1 text-xs leading-snug rounded-md shadow-md",
+    // Animations driven by Radix data-state. Side-specific slide-in.
+    "data-[state=delayed-open]:animate-[scale-in_var(--duration-fast)_var(--ease-out)]",
+    "data-[state=closed]:animate-[scale-out_var(--duration-fast)_var(--ease-in)]",
+    "data-[side=top]:data-[state=delayed-open]:animate-[slide-in-from-bottom_var(--duration-fast)_var(--ease-out)]",
+    "data-[side=bottom]:data-[state=delayed-open]:animate-[slide-in-from-top_var(--duration-fast)_var(--ease-out)]",
+    "data-[side=left]:data-[state=delayed-open]:animate-[slide-in-from-end_var(--duration-fast)_var(--ease-out)]",
+    "data-[side=right]:data-[state=delayed-open]:animate-[slide-in-from-start_var(--duration-fast)_var(--ease-out)]",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        // Dark bubble against any surface — classic tooltip.
+        default: "bg-foreground text-background",
+        // Inverse — light bubble for dark contexts (e.g. dark sidebar).
+        inverse: "bg-background text-foreground border border-border",
+        // Keyboard-shortcut style — uses kbd key caps inside.
+        kbd: "bg-foreground text-background font-mono",
+      },
+      multiline: {
+        // Single-line tooltip truncates; multi-line wraps within maxWidth.
+        true: "whitespace-normal",
+        false: "whitespace-nowrap",
+      },
+    },
+    defaultVariants: { variant: "default", multiline: false },
+  },
+);
+
+const arrowFillClass: Record<"default" | "inverse" | "kbd", string> = {
+  default: "fill-foreground",
+  inverse: "fill-background",
+  kbd: "fill-foreground",
+};
+
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+  VariantProps<typeof tooltipContentVariants> & {
+    /** Cap width when `multiline` is true (or just for sizing in general). */
+    maxWidth?: number | string;
+    /** When set, renders the children as keyboard-shortcut key caps. Wraps each token in a `<kbd>` element with a styled appearance. */
+    kbd?: string[];
+    /** Default `true`. Set to `false` to hide the arrow. */
+    arrow?: boolean;
+  };
+
+function Kbd({ k }: { k: string }) {
+  // `min-w-[1.25em]` is intentionally em-relative (not a Tailwind spacing
+  // token): kbd keys scale with the surrounding text size, and the visual
+  // contract is "always at least one character wide" — that's an em-bound
+  // measurement, not a px one. Per design-tokens §4.2 sub-canonical note.
+  return (
+    <kbd className="border-background/30 bg-background/10 inline-block min-w-[1.25em] rounded border px-1 text-center font-mono text-[10px] leading-tight">
+      {k}
+    </kbd>
+  );
+}
+
+const TooltipContent = forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipContentProps
+>(function TooltipContent(
+  {
+    className,
+    variant,
+    multiline,
+    maxWidth,
+    kbd,
+    arrow = true,
+    sideOffset = 6,
+    style,
+    children,
+    ...props
+  },
+  ref,
+) {
+  const resolvedVariant = variant ?? (kbd ? "kbd" : "default");
+  const widthStyle: React.CSSProperties | undefined =
+    maxWidth !== undefined
+      ? { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth }
+      : undefined;
+
+  const body = kbd ? (
+    <span className="inline-flex items-center gap-1">
+      {children ? (
+        <>
+          <span>{children}</span>
+          <span className="opacity-70">·</span>
+        </>
+      ) : null}
+      {kbd.map((k, i) => (
+        <span key={`${k}-${i}`} className="inline-flex items-center gap-0.5">
+          {i > 0 ? <span className="opacity-70">+</span> : null}
+          <Kbd k={k} />
+        </span>
+      ))}
+    </span>
+  ) : (
+    children
+  );
+
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        style={{ ...widthStyle, ...style }}
+        className={cn(tooltipContentVariants({ variant: resolvedVariant, multiline }), className)}
+        {...props}
+      >
+        {body}
+        {arrow ? (
+          <TooltipPrimitive.Arrow
+            width={10}
+            height={5}
+            className={cn(arrowFillClass[resolvedVariant])}
+          />
+        ) : null}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+});
+TooltipContent.displayName = "TooltipContent";
+
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, tooltipContentVariants };
+export type { TooltipContentProps };

package/components/ui/top-bar.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  RiMenuLine,
+  RiNotification3Line,
+  RiSearchLine,
+  RiSettings4Line,
+  RiUser3Line,
+} from "@remixicon/react";
+
+import { Avatar, AvatarFallback } from "./avatar";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Input } from "./input";
+import { TopBar, TopBarBrand, TopBarCenter, TopBarEnd, TopBarStart } from "./top-bar";
+
+const meta: Meta<typeof TopBar> = {
+  title: "Layout/TopBar",
+  component: TopBar,
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    variant: { control: "select", options: ["default", "elevated", "transparent"] },
+    size: { control: "select", options: ["sm", "md", "lg"] },
+    sticky: { control: "boolean" },
+    bordered: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TopBar>;
+
+function BrandMark() {
+  return (
+    <TopBarBrand>
+      <span className="bg-primary text-primary-foreground inline-flex size-6 items-center justify-center rounded text-xs font-bold">
+        E
+      </span>
+      <span>Emara</span>
+    </TopBarBrand>
+  );
+}
+
+function UserMenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label="User menu"
+        className="focus-visible:ring-ring inline-flex items-center rounded-full focus-visible:ring-2 focus-visible:outline-none"
+      >
+        <Avatar size="sm">
+          <AvatarFallback>AZ</AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Abdelkader</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem icon={<RiUser3Line />}>Profile</DropdownMenuItem>
+        <DropdownMenuItem icon={<RiSettings4Line />}>Settings</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">Sign out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const Default: Story = {
+  render: (args) => (
+    <TopBar {...args}>
+      <TopBarStart>
+        <BrandMark />
+      </TopBarStart>
+      <TopBarEnd>
+        <Button variant="ghost" size="icon-sm" aria-label="Notifications">
+          <RiNotification3Line />
+        </Button>
+        <UserMenu />
+      </TopBarEnd>
+    </TopBar>
+  ),
+};
+
+export const WithSearch: Story = {
+  render: (args) => (
+    <TopBar {...args}>
+      <TopBarStart>
+        <Button variant="ghost" size="icon-sm" aria-label="Toggle navigation">
+          <RiMenuLine />
+        </Button>
+        <BrandMark />
+      </TopBarStart>
+      <TopBarCenter role="search">
+        <div className="w-full max-w-md">
+          <Input type="search" placeholder="Search…" startAdornment={<RiSearchLine />} clearable />
+        </div>
+      </TopBarCenter>
+      <TopBarEnd>
+        <Button variant="ghost" size="icon-sm" aria-label="Notifications">
+          <RiNotification3Line />
+        </Button>
+        <UserMenu />
+      </TopBarEnd>
+    </TopBar>
+  ),
+};
+
+export const Elevated: Story = {
+  args: { variant: "elevated" },
+  render: Default.render!,
+};
+
+export const Transparent: Story = {
+  args: { variant: "transparent" },
+  render: (args) => (
+    <div className="from-primary/20 via-info/10 to-success/20 bg-gradient-to-r p-2">
+      <TopBar {...args}>
+        <TopBarStart>
+          <BrandMark />
+        </TopBarStart>
+        <TopBarEnd>
+          <Button variant="ghost" size="icon-sm" aria-label="Notifications">
+            <RiNotification3Line />
+          </Button>
+          <UserMenu />
+        </TopBarEnd>
+      </TopBar>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-3">
+      {(["sm", "md", "lg"] as const).map((size) => (
+        <TopBar key={size} size={size}>
+          <TopBarStart>
+            <BrandMark />
+            <Badge size="xs" variant="info">
+              {size}
+            </Badge>
+          </TopBarStart>
+          <TopBarEnd>
+            <UserMenu />
+          </TopBarEnd>
+        </TopBar>
+      ))}
+    </div>
+  ),
+};
+
+export const Marketing: Story = {
+  render: (args) => (
+    <TopBar {...args}>
+      <TopBarStart>
+        <BrandMark />
+        <nav className="ms-4 hidden gap-1 md:flex">
+          <Button asChild variant="ghost" size="sm">
+            <a href="/product">Product</a>
+          </Button>
+          <Button asChild variant="ghost" size="sm">
+            <a href="/pricing">Pricing</a>
+          </Button>
+          <Button asChild variant="ghost" size="sm">
+            <a href="/docs">Docs</a>
+          </Button>
+        </nav>
+      </TopBarStart>
+      <TopBarEnd>
+        <Button variant="ghost" size="sm">
+          Sign in
+        </Button>
+        <Button size="sm">Sign up</Button>
+      </TopBarEnd>
+    </TopBar>
+  ),
+};

package/components/ui/top-bar.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Per docs/emara-ui-phase-5-components.md §3.
+
+// --- Root -------------------------------------------------------------------
+
+const topBarVariants = cva("flex w-full items-center bg-background text-foreground", {
+  variants: {
+    variant: {
+      default: "border-b border-border",
+      elevated: "shadow-sm",
+      transparent: "bg-transparent",
+    },
+    size: {
+      // Heights match the AppShell `header-sm|md|lg` tokens.
+      sm: "h-12 px-3",
+      md: "h-14 px-4",
+      lg: "h-16 px-5",
+    },
+    sticky: {
+      true: "sticky top-0 z-sticky",
+      false: "",
+    },
+    bordered: {
+      true: "border-b border-border",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    sticky: false,
+    bordered: false,
+  },
+});
+
+type TopBarVariants = VariantProps<typeof topBarVariants>;
+
+type TopBarProps = Omit<React.HTMLAttributes<HTMLElement>, "size"> &
+  TopBarVariants & {
+    asChild?: boolean;
+    /** Override the rendered element. Default `<header>`. */
+    as?: "header" | "div";
+  };
+
+const TopBar = forwardRef<HTMLElement, TopBarProps>(function TopBar(
+  {
+    className,
+    variant = "default",
+    size = "md",
+    sticky = false,
+    bordered = false,
+    asChild = false,
+    as = "header",
+    ...props
+  },
+  ref,
+) {
+  const Comp = (asChild ? Slot : as) as React.ElementType;
+  return (
+    <Comp
+      ref={ref}
+      data-slot="top-bar"
+      role={as === "header" && !asChild ? "banner" : undefined}
+      className={cn(topBarVariants({ variant, size, sticky, bordered }), className)}
+      {...props}
+    />
+  );
+});
+TopBar.displayName = "TopBar";
+
+// --- Slots ------------------------------------------------------------------
+
+const TopBarStart = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function TopBarStart({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-slot="top-bar-start"
+        className={cn("me-auto flex min-w-0 items-center gap-2", className)}
+        {...props}
+      />
+    );
+  },
+);
+TopBarStart.displayName = "TopBarStart";
+
+const TopBarCenter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function TopBarCenter({ className, role, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-slot="top-bar-center"
+        // Hides on narrow viewports — consumers can override.
+        className={cn(
+          "hidden min-w-0 flex-1 items-center justify-center gap-2 px-3 md:flex",
+          className,
+        )}
+        // Honor consumer `role` (e.g. role="search" when this slot wraps a search input).
+        {...(role ? { role } : {})}
+        {...props}
+      />
+    );
+  },
+);
+TopBarCenter.displayName = "TopBarCenter";
+
+const TopBarEnd = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function TopBarEnd({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-slot="top-bar-end"
+        className={cn("ms-auto flex items-center gap-2", className)}
+        {...props}
+      />
+    );
+  },
+);
+TopBarEnd.displayName = "TopBarEnd";
+
+// --- TopBar.Brand (convenience) --------------------------------------------
+
+type TopBarBrandProps = React.HTMLAttributes<HTMLDivElement> & {
+  asChild?: boolean;
+};
+
+const TopBarBrand = forwardRef<HTMLDivElement, TopBarBrandProps>(function TopBarBrand(
+  { className, asChild = false, ...props },
+  ref,
+) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      ref={ref}
+      data-slot="top-bar-brand"
+      className={cn(
+        "text-foreground inline-flex items-center gap-2 font-semibold",
+        "[&_svg]:size-5 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+TopBarBrand.displayName = "TopBarBrand";
+
+export { TopBar, TopBarStart, TopBarCenter, TopBarEnd, TopBarBrand, topBarVariants };
+export type { TopBarProps, TopBarBrandProps };

package/dist/components/ui/accordion.d.ts

@@ -0,0 +1,45 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+type AccordionVariant = "default" | "bordered" | "separated" | "filled";
+type AccordionSize = "sm" | "md" | "lg";
+type IconPosition = "start" | "end";
+interface UseAccordionAPI {
+    value: string[];
+    setValue: (next: string[]) => void;
+    openAll: (allValues: string[]) => void;
+    closeAll: () => void;
+    toggle: (value: string) => void;
+    isOpen: (value: string) => boolean;
+}
+declare function useAccordion(initial?: string[]): UseAccordionAPI;
+declare const accordionVariants: (props?: ({
+    variant?: "default" | "bordered" | "separated" | "filled" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AccordionRootProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    variant?: AccordionVariant;
+    size?: AccordionSize;
+    iconPosition?: IconPosition;
+};
+declare const Accordion: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const accordionItemVariants: (props?: ({
+    variant?: "default" | "bordered" | "separated" | "filled" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const accordionTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    description?: React.ReactNode;
+};
+declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    description?: React.ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
+declare const AccordionContent: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, useAccordion, accordionVariants, accordionItemVariants, accordionTriggerVariants, };
+export type { AccordionRootProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps, UseAccordionAPI, };
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/ui/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../components/ui/accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAQhE,KAAK,gBAAgB,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;AACxE,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACxC,KAAK,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAkBpC,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACpC;AAED,iBAAS,YAAY,CAAC,OAAO,GAAE,MAAM,EAAO,GAAG,eAAe,CAW7D;AAID,QAAA,MAAM,iBAAiB;;8EAUrB,CAAC;AAEH,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;IACzF,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,SAAS,+GAgBd,CAAC;AAKF,QAAA,MAAM,qBAAqB;;8EAUzB,CAAC;AAEH,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;AAEzF,QAAA,MAAM,aAAa,+LAYjB,CAAC;AAKH,QAAA,MAAM,wBAAwB;;8EAmB7B,CAAC;AAEF,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,GAAG;IAC/F,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,gBAAgB;WALb,KAAK,CAAC,SAAS;YACd,KAAK,CAAC,SAAS;kBACT,KAAK,CAAC,SAAS;qDA2C7B,CAAC;AAgBH,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAE/F,QAAA,MAAM,gBAAgB,kMAoBpB,CAAC;AAGH,OAAO,EACL,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,qBAAqB,EACrB,wBAAwB,GACzB,CAAC;AACF,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,GAChB,CAAC"}

package/dist/components/ui/accordion.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { RiArrowDownSLine } from "@remixicon/react";
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+const AccordionContext = createContext(null);
+function useAccordionContext() {
+    const ctx = useContext(AccordionContext);
+    if (!ctx)
+        throw new Error("Accordion subcomponents must be used inside <Accordion>");
+    return ctx;
+}
+function useAccordion(initial = []) {
+    const [value, setValue] = useState(initial);
+    const openAll = useCallback((all) => setValue([...new Set(all)]), []);
+    const closeAll = useCallback(() => setValue([]), []);
+    const toggle = useCallback((v) => setValue((prev) => (prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v])), []);
+    const isOpen = useCallback((v) => value.includes(v), [value]);
+    return { value, setValue, openAll, closeAll, toggle, isOpen };
+}
+// --- Accordion (root) -------------------------------------------------------
+const accordionVariants = cva("", {
+    variants: {
+        variant: {
+            default: "",
+            bordered: "rounded-md border border-border overflow-hidden",
+            separated: "space-y-2",
+            filled: "",
+        },
+    },
+    defaultVariants: { variant: "default" },
+});
+const Accordion = forwardRef(function Accordion({ className, variant = "default", size = "md", iconPosition = "end", ...props }, ref) {
+    const ctx = useMemo(() => ({ variant, size, iconPosition }), [variant, size, iconPosition]);
+    return (_jsx(AccordionContext.Provider, { value: ctx, children: _jsx(AccordionPrimitive.Root, { ref: ref, className: cn(accordionVariants({ variant }), className), ...props }) }));
+});
+Accordion.displayName = "Accordion";
+// --- AccordionItem ----------------------------------------------------------
+const accordionItemVariants = cva("", {
+    variants: {
+        variant: {
+            default: "border-b border-border last:border-b-0",
+            bordered: "border-b border-border last:border-b-0",
+            separated: "rounded-md border border-border overflow-hidden",
+            filled: ["rounded-md", "data-[state=open]:bg-muted"].join(" "),
+        },
+    },
+    defaultVariants: { variant: "default" },
+});
+const AccordionItem = forwardRef(function AccordionItem({ className, ...props }, ref) {
+    const { variant } = useAccordionContext();
+    return (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn(accordionItemVariants({ variant }), className), ...props }));
+});
+AccordionItem.displayName = "AccordionItem";
+// --- AccordionTrigger -------------------------------------------------------
+const accordionTriggerVariants = cva([
+    "flex w-full items-center gap-3 font-medium text-foreground select-none cursor-pointer",
+    "transition-colors",
+    "hover:bg-accent/50",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "[&_svg]:size-4 [&_svg]:shrink-0",
+].join(" "), {
+    variants: {
+        size: {
+            sm: "px-3 py-2 text-xs",
+            md: "px-4 py-3 text-sm",
+            lg: "px-5 py-4 text-base",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+const AccordionTrigger = forwardRef(function AccordionTrigger({ className, icon, badge, description, children, ...props }, ref) {
+    const { size, iconPosition } = useAccordionContext();
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn(accordionTriggerVariants({ size }), "group", "data-[state=open]:[&_[data-chevron]]:rotate-180", className), ...props, children: [iconPosition === "start" ? (_jsx("span", { "data-chevron": true, className: "duration-normal shrink-0 transition-transform", children: _jsx(RiArrowDownSLine, {}) })) : null, icon ? _jsx("span", { className: "shrink-0", children: icon }) : null, _jsxs("span", { className: "flex-1 text-start", children: [_jsx("span", { className: "block", children: children }), description ? (_jsx("span", { className: "text-muted-foreground mt-0.5 block text-xs font-normal", children: description })) : null] }), badge ? _jsx("span", { className: "shrink-0", children: badge }) : null, iconPosition === "end" ? (_jsx("span", { "data-chevron": true, className: "duration-normal shrink-0 transition-transform", children: _jsx(RiArrowDownSLine, {}) })) : null] }) }));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+// --- AccordionContent -------------------------------------------------------
+const accordionContentSizeVariants = cva("text-foreground", {
+    variants: {
+        size: {
+            sm: "px-3 pb-2 text-xs",
+            md: "px-4 pb-3 text-sm",
+            lg: "px-5 pb-4 text-base",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+const AccordionContent = forwardRef(function AccordionContent({ className, children, ...props }, ref) {
+    const { size } = useAccordionContext();
+    return (_jsx(AccordionPrimitive.Content, { ref: ref, className: cn("overflow-hidden", "data-[state=open]:animate-[collapse-down_var(--duration-normal,200ms)_var(--ease-out,ease-out)]", "data-[state=closed]:animate-[collapse-up_var(--duration-normal,200ms)_var(--ease-in,ease-in)]", 
+        // Expose the natural height to the keyframe via the variable set by Radix.
+        "[--collapsible-content-height:var(--radix-accordion-content-height)]"), ...props, children: _jsx("div", { className: cn(accordionContentSizeVariants({ size }), className), children: children }) }));
+});
+AccordionContent.displayName = "AccordionContent";
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, useAccordion, accordionVariants, accordionItemVariants, accordionTriggerVariants, };
+//# sourceMappingURL=accordion.js.map

package/dist/components/ui/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../components/ui/accordion.tsx"],"names":[],"mappings":"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"}