@mieweb/ui 0.8.0-dev.13 → 0.8.0-dev.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-Y6YSJPVC.js → chunk-KRU6IGV7.js} +11 -3
- package/dist/chunk-KRU6IGV7.js.map +1 -0
- package/dist/{chunk-HK3AMH3Q.cjs → chunk-VROIMIHB.cjs} +11 -3
- package/dist/chunk-VROIMIHB.cjs.map +1 -0
- package/dist/components/Accordion/index.cjs +2 -2
- package/dist/components/Accordion/index.js +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/chunk-HK3AMH3Q.cjs.map +0 -1
- package/dist/chunk-Y6YSJPVC.js.map +0 -1
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/Accordion.tsx"],"names":["cva","React","Accordion","jsx","cn","jsxs","ChevronDown"],"mappings":"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","file":"chunk-HK3AMH3Q.cjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst accordionVariants = cva('', {\n variants: {\n variant: {\n // Each item is its own card with spacing between\n separated: 'flex flex-col gap-3',\n // One bordered list with dividers\n joined: 'border-border divide-border divide-y rounded-lg border',\n },\n },\n defaultVariants: {\n variant: 'separated',\n },\n});\n\nconst itemVariants = cva('overflow-hidden', {\n variants: {\n variant: {\n separated: 'border-border bg-card rounded-lg border',\n joined: 'bg-card first:rounded-t-lg last:rounded-b-lg',\n },\n },\n defaultVariants: {\n variant: 'separated',\n },\n});\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface AccordionItem {\n /** Stable id used for open state and aria wiring. */\n id: string;\n /** Header label (e.g. an FAQ question). */\n title: React.ReactNode;\n /** Panel content (e.g. the answer). */\n content: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface AccordionProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n VariantProps<typeof accordionVariants> {\n items: AccordionItem[];\n /** `single` keeps at most one panel open; `multiple` allows any number. */\n type?: 'single' | 'multiple';\n /** Ids open initially (uncontrolled). */\n defaultOpenIds?: string[];\n /** Controlled open ids. Changes reported via `onOpenChange`. */\n openIds?: string[];\n onOpenChange?: (openIds: string[]) => void;\n /** In `single` mode, allow closing the open panel (default true). */\n collapsible?: boolean;\n /** Heading level wrapping each trigger for document outline (default h3). */\n headingLevel?: 'h2' | 'h3' | 'h4';\n}\n\n// =============================================================================\n// Accordion\n// =============================================================================\n\n/**\n * A vertically stacked set of expandable panels — FAQ lists, settings\n * groups, progressive disclosure. Panels animate open to their natural\n * height (CSS grid rows, no max-height clipping), and headers are real\n * buttons inside headings with full `aria-expanded`/`aria-controls` wiring.\n *\n * @example\n * ```tsx\n * <Accordion\n * type=\"single\"\n * items={[\n * { id: 'pricing', title: 'How is pricing calculated?', content: <p>…</p> },\n * { id: 'billing', title: 'When am I billed?', content: <p>…</p> },\n * ]}\n * />\n * ```\n */\nexport const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(\n {\n items,\n type = 'single',\n defaultOpenIds,\n openIds: controlledOpen,\n onOpenChange,\n collapsible = true,\n headingLevel: Heading = 'h3',\n variant,\n className,\n ...props\n },\n ref\n ) {\n const baseId = React.useId();\n const [internalOpen, setInternalOpen] = React.useState<string[]>(\n () => defaultOpenIds ?? []\n );\n const rawOpen = controlledOpen ?? internalOpen;\n // Single mode keeps at most one panel open, even if defaultOpenIds or a\n // controlled openIds array hands us several.\n const open = React.useMemo(\n () => (type === 'single' ? rawOpen.slice(0, 1) : rawOpen),\n [type, rawOpen]\n );\n const openSet = React.useMemo(() => new Set(open), [open]);\n\n const toggle = (id: string) => {\n let next: string[];\n if (openSet.has(id)) {\n if (type === 'single' && !collapsible) return;\n next = open.filter((o) => o !== id);\n } else {\n next = type === 'single' ? [id] : [...open, id];\n }\n if (controlledOpen === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n };\n\n return (\n <div\n ref={ref}\n className={cn(accordionVariants({ variant }), className)}\n {...props}\n >\n {items.map((item) => {\n const isOpen = openSet.has(item.id);\n const triggerId = `${baseId}-${item.id}-trigger`;\n const panelId = `${baseId}-${item.id}-panel`;\n return (\n <div key={item.id} className={cn(itemVariants({ variant }))}>\n <Heading className=\"m-0\">\n <button\n type=\"button\"\n id={triggerId}\n aria-expanded={isOpen}\n aria-controls={panelId}\n disabled={item.disabled}\n onClick={() => toggle(item.id)}\n className={cn(\n 'hover:bg-muted/60 flex w-full items-center justify-between gap-4 px-5 py-4 text-start transition-colors',\n 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',\n 'disabled:pointer-events-none disabled:opacity-50'\n )}\n >\n <span className=\"text-foreground min-w-0 text-sm font-semibold\">\n {item.title}\n </span>\n <ChevronDown\n aria-hidden=\"true\"\n className={cn(\n 'text-muted-foreground h-5 w-5 shrink-0 transition-transform duration-200',\n isOpen && 'rotate-180'\n )}\n />\n </button>\n </Heading>\n {/* grid-rows 0fr→1fr animates to natural height without a max-height clip;\n collapsed panels are hidden from AT and unfocusable via aria-hidden + inert */}\n <div\n id={panelId}\n role=\"region\"\n aria-labelledby={triggerId}\n aria-hidden={!isOpen}\n inert={!isOpen || undefined}\n className={cn(\n 'grid transition-[grid-template-rows] duration-200 ease-out',\n isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'\n )}\n >\n <div className=\"overflow-hidden\">\n <div className=\"text-muted-foreground px-5 pb-4 text-sm leading-relaxed\">\n {item.content}\n </div>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n);\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/Accordion.tsx"],"names":["Accordion"],"mappings":"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","file":"chunk-Y6YSJPVC.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst accordionVariants = cva('', {\n variants: {\n variant: {\n // Each item is its own card with spacing between\n separated: 'flex flex-col gap-3',\n // One bordered list with dividers\n joined: 'border-border divide-border divide-y rounded-lg border',\n },\n },\n defaultVariants: {\n variant: 'separated',\n },\n});\n\nconst itemVariants = cva('overflow-hidden', {\n variants: {\n variant: {\n separated: 'border-border bg-card rounded-lg border',\n joined: 'bg-card first:rounded-t-lg last:rounded-b-lg',\n },\n },\n defaultVariants: {\n variant: 'separated',\n },\n});\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface AccordionItem {\n /** Stable id used for open state and aria wiring. */\n id: string;\n /** Header label (e.g. an FAQ question). */\n title: React.ReactNode;\n /** Panel content (e.g. the answer). */\n content: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface AccordionProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n VariantProps<typeof accordionVariants> {\n items: AccordionItem[];\n /** `single` keeps at most one panel open; `multiple` allows any number. */\n type?: 'single' | 'multiple';\n /** Ids open initially (uncontrolled). */\n defaultOpenIds?: string[];\n /** Controlled open ids. Changes reported via `onOpenChange`. */\n openIds?: string[];\n onOpenChange?: (openIds: string[]) => void;\n /** In `single` mode, allow closing the open panel (default true). */\n collapsible?: boolean;\n /** Heading level wrapping each trigger for document outline (default h3). */\n headingLevel?: 'h2' | 'h3' | 'h4';\n}\n\n// =============================================================================\n// Accordion\n// =============================================================================\n\n/**\n * A vertically stacked set of expandable panels — FAQ lists, settings\n * groups, progressive disclosure. Panels animate open to their natural\n * height (CSS grid rows, no max-height clipping), and headers are real\n * buttons inside headings with full `aria-expanded`/`aria-controls` wiring.\n *\n * @example\n * ```tsx\n * <Accordion\n * type=\"single\"\n * items={[\n * { id: 'pricing', title: 'How is pricing calculated?', content: <p>…</p> },\n * { id: 'billing', title: 'When am I billed?', content: <p>…</p> },\n * ]}\n * />\n * ```\n */\nexport const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(\n {\n items,\n type = 'single',\n defaultOpenIds,\n openIds: controlledOpen,\n onOpenChange,\n collapsible = true,\n headingLevel: Heading = 'h3',\n variant,\n className,\n ...props\n },\n ref\n ) {\n const baseId = React.useId();\n const [internalOpen, setInternalOpen] = React.useState<string[]>(\n () => defaultOpenIds ?? []\n );\n const rawOpen = controlledOpen ?? internalOpen;\n // Single mode keeps at most one panel open, even if defaultOpenIds or a\n // controlled openIds array hands us several.\n const open = React.useMemo(\n () => (type === 'single' ? rawOpen.slice(0, 1) : rawOpen),\n [type, rawOpen]\n );\n const openSet = React.useMemo(() => new Set(open), [open]);\n\n const toggle = (id: string) => {\n let next: string[];\n if (openSet.has(id)) {\n if (type === 'single' && !collapsible) return;\n next = open.filter((o) => o !== id);\n } else {\n next = type === 'single' ? [id] : [...open, id];\n }\n if (controlledOpen === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n };\n\n return (\n <div\n ref={ref}\n className={cn(accordionVariants({ variant }), className)}\n {...props}\n >\n {items.map((item) => {\n const isOpen = openSet.has(item.id);\n const triggerId = `${baseId}-${item.id}-trigger`;\n const panelId = `${baseId}-${item.id}-panel`;\n return (\n <div key={item.id} className={cn(itemVariants({ variant }))}>\n <Heading className=\"m-0\">\n <button\n type=\"button\"\n id={triggerId}\n aria-expanded={isOpen}\n aria-controls={panelId}\n disabled={item.disabled}\n onClick={() => toggle(item.id)}\n className={cn(\n 'hover:bg-muted/60 flex w-full items-center justify-between gap-4 px-5 py-4 text-start transition-colors',\n 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',\n 'disabled:pointer-events-none disabled:opacity-50'\n )}\n >\n <span className=\"text-foreground min-w-0 text-sm font-semibold\">\n {item.title}\n </span>\n <ChevronDown\n aria-hidden=\"true\"\n className={cn(\n 'text-muted-foreground h-5 w-5 shrink-0 transition-transform duration-200',\n isOpen && 'rotate-180'\n )}\n />\n </button>\n </Heading>\n {/* grid-rows 0fr→1fr animates to natural height without a max-height clip;\n collapsed panels are hidden from AT and unfocusable via aria-hidden + inert */}\n <div\n id={panelId}\n role=\"region\"\n aria-labelledby={triggerId}\n aria-hidden={!isOpen}\n inert={!isOpen || undefined}\n className={cn(\n 'grid transition-[grid-template-rows] duration-200 ease-out',\n isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'\n )}\n >\n <div className=\"overflow-hidden\">\n <div className=\"text-muted-foreground px-5 pb-4 text-sm leading-relaxed\">\n {item.content}\n </div>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n);\n"]}
|