51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2fb4,"use client" import * as React from "react" import { ChevronDown } from "lucide-react" import { MotionConfig, motion, useReducedMotion, type Transition } from "motion/react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion" import { cn } from "@/lib/utils" /* * Product details — materials, care, shipping, the maker — as an accordion. * * one tag * * or composed * * * * * * Built on your shadcn/ui Accordion — its triggers, ids and keyboard model — * with Motion driving the open and close: the panel grows to its real height * and settles, rather than snapping at the end of a CSS keyframe. Works on * either base, Radix or Base UI. */ export interface ProductDetailsSectionData { /** Stable id: the accordion value, and what `open` / `defaultOpen` refer to. */ id: string title: string /** * One line shown on the closed row — "Organic cotton", "Free over $300". * The shopper gets the answer without opening the section, and the line * is always in the page for search engines and find-in-page. */ summary?: React.ReactNode content: React.ReactNode } type AccordionContentProps = React.ComponentProps type AccordionRootProps = React.ComponentProps /** The same settle curve as product-quick-view: no bounce, an editorial ease. */ const MORPH: Transition = { duration: 0.45, ease: [0.2, 0, 0, 1] } /* ─── context ──────────────────────────────────────────────────────────── */ export interface ProductDetailsAccordionContextValue { /** Ids of the open sections. */ open: string[] setOpen: (open: string[]) => void /** Opens or closes one section, leaving the others as they are. */ toggle: (id: string) => void isOpen: (id: string) => boolean contentProps?: Omit } interface InternalContextValue extends ProductDetailsAccordionContextValue { /** A closing panel reports in once it has animated shut. */ settle: (id: string) => void } const ProductDetailsAccordionContext = React.createContext(null) function useInternalContext(): InternalContextValue { const context = React.useContext(ProductDetailsAccordionContext) if (!context) { throw new Error( "useProductDetailsAccordion must be used within ." ) } return context } /** For your own parts inside a — an "Expand all", say. */ export function useProductDetailsAccordion(): ProductDetailsAccordionContextValue { const { open, setOpen, toggle, isOpen, contentProps } = useInternalContext() return { open, setOpen, toggle, isOpen, contentProps } } const subscribe = () => () => {} /** * False while hydrating server HTML, true for anything rendered after. A panel * that was open in the server's HTML is already at full height, so it must * not animate in; one opened later must. */ function useHydrated() { return React.useSyncExternalStore( subscribe, () => true, () => false ) } function useControllableState( value: T | undefined, defaultValue: T, onChange?: (next: T) => void ) { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const controlled = value !== undefined const set = React.useCallback( (next: T) => { if (!controlled) setUncontrolled(next) onChange?.(next) }, [controlled, onChange] ) return [controlled ? value : uncontrolled, set] as const } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface ProductDetailsAccordionProps extends Omit< React.HTMLAttributes, "defaultValue" | "dir" | "onChange" > { /** Renders one section each when there are no children. */ sections?: ProductDetailsSectionData[] /** Open on first render. Defaults to the first section. */ defaultOpen?: string[] open?: string[] onOpenChange?: (open: string[]) => void /** * Passed to every AccordionContent. To keep closed panels in the page — * collapsed, inert, still readable by crawlers — pass `{ forceMount: true }` * on Radix or `{ keepMounted: true }` on Base UI. */ contentProps?: Omit } export function ProductDetailsAccordion({ sections, defaultOpen, open: openProp, onOpenChange, contentProps, className, children, ...props }: ProductDetailsAccordionProps) { const [open, setOpen] = useControllableState( openProp, defaultOpen ?? (sections?.[0] ? [sections[0].id] : []), onOpenChange ) // A section that closes stays in the accordion's value until its panel has // animated shut — otherwise the primitive unmounts it mid-animation. Derived // during render, so it also catches `open` changing from outside. const [closing, setClosing] = React.useState([]) const [previous, setPrevious] = React.useState(open) if (previous !== open) { const removed = previous.filter((id) => !open.includes(id)) setPrevious(open) setClosing((current) => [ ...current.filter((id) => !open.includes(id)), ...removed.filter((id) => !current.includes(id)), ]) } const settle = React.useCallback( (id: string) => setClosing((current) => current.filter((c) => c !== id)), [] ) const context = React.useMemo( () => ({ open, setOpen, toggle: (id) => setOpen(open.includes(id) ? open.filter((o) => o !== id) : [...open, id]), isOpen: (id) => open.includes(id), contentProps, settle, }), [open, setOpen, contentProps, settle] ) // The primitive only ever sees a controlled value — the open sections, plus // any still animating shut — and each section's trigger does the toggling. // That keeps one source file correct on both bases with no base-specific // prop: Radix needs `type="multiple"` (on Base UI it is an inert // attribute), while Base UI's own `multiple` would reach Radix's DOM as a // stray attribute and break hydration. And no `onValueChange`: Base UI, // left in single mode, would report every click as "only this one open". const rootProps = { type: "multiple", value: [...open, ...closing.filter((id) => !open.includes(id))], } as unknown as AccordionRootProps if (!children && !sections?.length) return null return ( {children ?? sections?.map((section) => ( {section.content} ))} ) } /* ─── parts ────────────────────────────────────────────────────────────── */ export interface ProductDetailsSectionProps extends Omit, "title" | "defaultValue" | "dir"> { id: string title: React.ReactNode summary?: React.ReactNode } /** One ruled row: a tracked-out title, its summary, and the panel. */ export function ProductDetailsSection({ id, title, summary, className, children, ...props }: ProductDetailsSectionProps) { const { isOpen, toggle, contentProps, settle } = useInternalContext() const hydrated = useHydrated() const reduce = useReducedMotion() const expanded = isOpen(id) const transition = reduce ? { duration: 0 } : MORPH return ( toggle(id)} // Our chevron turns with the section; the stock icon is hidden. className="items-center gap-4 py-4 hover:no-underline [&_[data-slot=accordion-trigger-icon]]:hidden [&>svg]:hidden" > {title} {summary ? ( {summary} ) : null} { if (!expanded) settle(id) }} inert={!expanded} > {children} ) } export interface ProductDetailsSpecsProps extends React.HTMLAttributes { /** Label and value pairs: `[["Dimensions", "38 × 42 × 14 cm"], …]`. */ items: [label: string, value: React.ReactNode][] } /** Key facts as a definition list — labels muted, values in ink, aligned. */ export function ProductDetailsSpecs({ items, className, ...props }: ProductDetailsSpecsProps) { if (items.length === 0) return null return (

{label}: {value}

) } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@ecomcn","registryDependencies":["accordion"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/ecomcn/product-details-accordion/product-details-accordion.tsx","content":"$53","type":"registry:component","target":"components/ecomcn/product-details-accordion.tsx"}],"className":"h-[70svh] min-h-80"}]]}]