{"version":3,"sources":["../src/Accordion/Accordion.tsx"],"sourcesContent":["import { cx } from \"cva\";\nimport { createContext, forwardRef, useCallback, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ForwardedRef, PropsWithChildren } from \"react\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { AddIcon, MinimizeIcon } from \"@knitto-ui/react-icons\";\nimport Collapsible, { type CollapsibleProps } from \"../Collapsible\";\nimport Typography from \"../Typography\";\n\ntype AccordionValue<TIsMultiple extends boolean> = TIsMultiple extends true ? string[] : string;\ntype AccordionCollapsible<TIsMultiple extends boolean> = TIsMultiple extends true\n  ? undefined\n  : boolean;\n\ntype AccordionValueContextValue = {\n  value: string[];\n  select(value: string): void;\n  hideExpandIcon?: boolean;\n};\n\nexport const AccordionContext = createContext(null as AccordionValueContextValue | null);\n\nexport type AccordionProps<TIsMultiple extends boolean = false> =\n  ComponentPropsWithoutRef<\"div\"> & {\n    className?: string;\n    collapsible?: AccordionCollapsible<TIsMultiple>;\n    defaultValue?: AccordionValue<TIsMultiple>;\n    multiple?: TIsMultiple;\n    value?: AccordionValue<TIsMultiple>;\n    onValueChange?(value?: AccordionValue<TIsMultiple>): void;\n    hideExpandIcon?: boolean;\n  };\n\nconst parseValue = (value?: AccordionValue<boolean>) => {\n  if (typeof value === \"string\") return [value];\n  if (Array.isArray(value)) return value;\n  return;\n};\n\n// TODO: implement keyboard navigation\n// TODO: implement dark mode\n// TODO: implement icon customization\nexport const Accordion = forwardRef(\n  <TIsMultiple extends boolean = false>(\n    {\n      children,\n      className,\n      collapsible,\n      multiple = false as TIsMultiple,\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      hideExpandIcon,\n      ...props\n    }: PropsWithChildren<AccordionProps<TIsMultiple>>,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) => {\n    const [value = [], setValue] = useControllableState({\n      prop: parseValue(valueProp),\n      defaultProp: parseValue(defaultValue),\n      onChange: (value) => {\n        return onValueChange?.(multiple ? value : (value?.[0] as any));\n      },\n    });\n\n    const toggleValue = useCallback((prevValue: string[] = [], newValue: string) => {\n      if (prevValue?.includes(newValue)) {\n        return prevValue.filter((v) => v !== newValue);\n      }\n      return [...prevValue, newValue];\n    }, []);\n\n    const collapseValue = useCallback((prevValue: string[] | undefined, newValue: string) => {\n      if (prevValue?.includes(newValue)) {\n        return [];\n      }\n      return [newValue];\n    }, []);\n\n    return (\n      <AccordionContext.Provider\n        value={{\n          value,\n          select: (newValue: string) => {\n            if (multiple) {\n              setValue((prevValue) => toggleValue(prevValue, newValue));\n            } else if (collapsible) {\n              setValue((prevValue) => collapseValue(prevValue, newValue));\n            } else {\n              setValue([newValue]);\n            }\n          },\n          hideExpandIcon,\n        }}\n      >\n        <div {...props} ref={ref} className={cx(\"kn-accordion\", className)}>\n          {children}\n        </div>\n      </AccordionContext.Provider>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport type AccordionItemProps = ComponentPropsWithoutRef<\"div\"> & {\n  value: string;\n};\n\ntype AccordionItemContextValue = {\n  value: string;\n  open: boolean;\n};\n\nconst AccordionItemContext = createContext(null as AccordionItemContextValue | null);\n\nexport const AccordionItem = forwardRef<HTMLDivElement, PropsWithChildren<AccordionItemProps>>(\n  ({ children, className, value, ...props }, ref) => {\n    const accordionContext = useContext(AccordionContext);\n\n    return (\n      <AccordionItemContext.Provider\n        value={{\n          open: !!accordionContext?.value.includes(value),\n          value,\n        }}\n      >\n        <div {...props} ref={ref} className={cx(\"kn-accordion-item\", className)}>\n          {children}\n        </div>\n      </AccordionItemContext.Provider>\n    );\n  },\n);\n\nAccordionItem.displayName = \"AccordionItem\";\n\nexport type AccordionTriggerProps = ComponentPropsWithoutRef<\"button\"> & {\n  wrapperClassName?: string;\n  expandIconClassName?: string;\n  hideExpandIcon?: boolean;\n};\n\nexport const AccordionTrigger = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<AccordionTriggerProps>\n>(\n  (\n    {\n      children,\n      className,\n      wrapperClassName,\n      expandIconClassName,\n      hideExpandIcon: hideExpandIconProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const accordionContext = useContext(AccordionContext);\n    const accordionItemContext = useContext(AccordionItemContext);\n    const value = accordionItemContext?.value;\n    const isOpen = !!accordionItemContext?.open;\n    const hideExpandIcon = hideExpandIconProp ?? accordionContext?.hideExpandIcon;\n    return (\n      <div className={cx(\"kn-accordion-header\", wrapperClassName)}>\n        <button\n          {...props}\n          ref={ref}\n          className={cx(\"kn-accordion-trigger\", isOpen && \"kn-accordion-trigger-active\", className)}\n          onClick={() => {\n            value && accordionContext?.select?.(value);\n          }}\n        >\n          <Typography as=\"span\" variant=\"paragraphBold\">\n            {children}\n          </Typography>\n          {hideExpandIcon ? null : (\n            <div className={cx(\"kn-accordion-expand-icon-container\", expandIconClassName)}>\n              <AddIcon\n                className={cx(\"kn-accordion-expand-icon\", isOpen ? \"opacity-0\" : \"opacity-100\")}\n                width={22}\n                height={22}\n                aria-hidden\n              />\n              <MinimizeIcon\n                className={cx(\"kn-accordion-expand-icon\", isOpen ? \"opacity-100\" : \"opacity-0\")}\n                width={22}\n                height={22}\n                aria-hidden\n              />\n            </div>\n          )}\n        </button>\n      </div>\n    );\n  },\n);\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n\nexport type AccordionContentProps = Omit<CollapsibleProps, \"expanded\"> & {\n  textClassName?: string;\n};\n\nexport const AccordionContent = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AccordionContentProps>\n>(({ children, className, innerClassName, textClassName, ...props }, ref) => {\n  const accordionItemContext = useContext(AccordionItemContext);\n  const expanded = !!accordionItemContext?.open;\n  return (\n    <Collapsible\n      {...props}\n      ref={ref}\n      className={cx(\"kn-accordion-content\", className)}\n      innerClassName={cx(\"kn-accordion-content-inner\", innerClassName)}\n      expanded={expanded}\n    >\n      <Typography as=\"span\" variant=\"paragraph\" className={textClassName}>\n        {children}\n      </Typography>\n    </Collapsible>\n  );\n});\n"],"mappings":"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","names":["value","_a"]}