@mks2508/mks-ui 0.2.0 → 0.3.1

package/src/react/ui/Accordion/index.tsx

@@ -1,362 +0,0 @@
-'use client';
-
-/**
- * Accordion component with animated expand/collapse panels.
- *
- * Built on top of Base UI's Accordion primitive with Motion (Framer Motion)
- * animations. Supports controlled and uncontrolled modes, multiple expanded
- * items, and the StyleSlots pattern for granular style overrides.
- *
- * @module @mks2508/mks-ui/react/ui/Accordion
- *
- * @example
- * ```tsx
- * import {
- *   Accordion,
- *   AccordionItem,
- *   AccordionHeader,
- *   AccordionTrigger,
- *   AccordionPanel,
- * } from '@mks2508/mks-ui';
- *
- * function FAQ() {
- *   return (
- *     <Accordion variant="bordered" defaultValue={['q1']}>
- *       <AccordionItem value="q1">
- *         <AccordionHeader>
- *           <AccordionTrigger>What is mks-ui?</AccordionTrigger>
- *         </AccordionHeader>
- *         <AccordionPanel>
- *           A modern React component library with animations.
- *         </AccordionPanel>
- *       </AccordionItem>
- *     </Accordion>
- *   );
- * }
- * ```
- */
-
-import * as React from 'react';
-import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
-import { AnimatePresence, motion } from 'motion/react';
-
-import { cn } from '@/react/lib/utils';
-import { getStrictContext } from '@/react/lib/get-strict-context';
-import { useControlledState } from '@/react/hooks/State/UseControlledState';
-
-import { AccordionStyles, accordionVariants } from './Accordion.styles';
-import type {
-  AccordionContextType,
-  AccordionItemContextType,
-  IAccordionProps,
-  IAccordionItemProps,
-  IAccordionHeaderProps,
-  IAccordionTriggerProps,
-  IAccordionPanelProps,
-} from './Accordion.types';
-
-// ---------------------------------------------------------------------------
-// Context
-// ---------------------------------------------------------------------------
-
-const [AccordionProvider, useAccordion] =
-  getStrictContext<AccordionContextType>('AccordionContext');
-
-const [AccordionItemProvider, useAccordionItem] =
-  getStrictContext<AccordionItemContextType>('AccordionItemContext');
-
-// ---------------------------------------------------------------------------
-// Accordion (root)
-// ---------------------------------------------------------------------------
-
-/**
- * Root Accordion container. Manages which items are expanded and
- * provides context to child components.
- *
- * Supports both controlled (`value` + `onValueChange`) and uncontrolled
- * (`defaultValue`) usage patterns.
- *
- * @param props - {@link IAccordionProps}
- * @returns The rendered accordion container
- *
- * @example
- * ```tsx
- * // Uncontrolled with default expansion
- * <Accordion defaultValue={['item-1']}>
- *   <AccordionItem value="item-1">...</AccordionItem>
- *   <AccordionItem value="item-2">...</AccordionItem>
- * </Accordion>
- *
- * // Controlled
- * const [value, setValue] = useState<string[]>(['item-1']);
- * <Accordion value={value} onValueChange={setValue} variant="bordered">
- *   ...
- * </Accordion>
- * ```
- */
-function Accordion({
-  variant,
-  className,
-  slots,
-  config: _config,
-  ...props
-}: IAccordionProps) {
-  const [value, setValue] = useControlledState<string | string[] | undefined>({
-    value: props?.value,
-    defaultValue: props?.defaultValue,
-    onChange: props?.onValueChange as (
-      value: string | string[] | undefined,
-    ) => void,
-  });
-
-  return (
-    <AccordionProvider value={{ value, setValue }}>
-      <AccordionPrimitive.Root
-        data-slot="accordion"
-        className={cn(accordionVariants({ variant }), slots?.root, className)}
-        {...props}
-        onValueChange={setValue}
-      />
-    </AccordionProvider>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// AccordionItem
-// ---------------------------------------------------------------------------
-
-/**
- * Individual collapsible section within an Accordion.
- * Tracks its own open/closed state derived from the parent context.
- *
- * @param props - {@link IAccordionItemProps}
- * @returns The rendered accordion item
- *
- * @example
- * ```tsx
- * <AccordionItem value="section-1" className="border-primary/20">
- *   <AccordionHeader>
- *     <AccordionTrigger>Section Title</AccordionTrigger>
- *   </AccordionHeader>
- *   <AccordionPanel>Section content</AccordionPanel>
- * </AccordionItem>
- * ```
- */
-function AccordionItem({ slots, className, ...props }: IAccordionItemProps) {
-  const { value } = useAccordion();
-  const [isOpen, setIsOpen] = React.useState(
-    value?.includes(props?.value) ?? false,
-  );
-
-  React.useEffect(() => {
-    setIsOpen(value?.includes(props?.value) ?? false);
-  }, [value, props?.value]);
-
-  return (
-    <AccordionItemProvider value={{ isOpen, setIsOpen }}>
-      <AccordionPrimitive.Item
-        data-slot="accordion-item"
-        className={cn(AccordionStyles.item, slots?.item, className)}
-        {...props}
-      />
-    </AccordionItemProvider>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// AccordionHeader
-// ---------------------------------------------------------------------------
-
-/**
- * Header wrapper for an accordion trigger. Provides semantic structure
- * and consistent spacing around the trigger element.
- *
- * @param props - {@link IAccordionHeaderProps}
- * @returns The rendered accordion header
- *
- * @example
- * ```tsx
- * <AccordionHeader className="bg-muted/10">
- *   <AccordionTrigger>Section Title</AccordionTrigger>
- * </AccordionHeader>
- * ```
- */
-function AccordionHeader({
-  slots,
-  className,
-  ...props
-}: IAccordionHeaderProps) {
-  return (
-    <AccordionPrimitive.Header
-      data-slot="accordion-header"
-      className={cn(AccordionStyles.header, slots?.header, className)}
-      {...props}
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// AccordionTrigger
-// ---------------------------------------------------------------------------
-
-/**
- * Clickable trigger that toggles the associated AccordionPanel.
- * Rendered as a button for accessibility.
- *
- * @param props - {@link IAccordionTriggerProps}
- * @returns The rendered accordion trigger
- *
- * @example
- * ```tsx
- * <AccordionTrigger className="text-foreground hover:text-primary">
- *   Click to expand
- * </AccordionTrigger>
- * ```
- */
-function AccordionTrigger({
-  slots,
-  className,
-  ...props
-}: IAccordionTriggerProps) {
-  return (
-    <AccordionPrimitive.Trigger
-      data-slot="accordion-trigger"
-      className={cn(AccordionStyles.trigger, slots?.trigger, className)}
-      {...props}
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// AccordionPanel
-// ---------------------------------------------------------------------------
-
-/**
- * Animated collapsible panel that shows/hides content with a smooth
- * height transition powered by Motion (Framer Motion).
- *
- * Uses a mask-image technique for a polished reveal/hide effect.
- * When `keepRendered` is `true`, the panel stays in the DOM even when
- * collapsed (useful for preserving form state).
- *
- * @param props - {@link IAccordionPanelProps}
- * @returns The rendered animated accordion panel
- *
- * @example
- * ```tsx
- * // Standard panel (unmounts on collapse)
- * <AccordionPanel>
- *   <p>Content revealed on expand</p>
- * </AccordionPanel>
- *
- * // Persistent panel (stays mounted)
- * <AccordionPanel keepRendered transition={{ duration: 0.5 }}>
- *   <form>...</form>
- * </AccordionPanel>
- * ```
- */
-function AccordionPanel({
-  transition = { duration: 0.35, ease: 'easeInOut' },
-  hiddenUntilFound,
-  keepRendered = false,
-  slots,
-  className,
-  ...props
-}: IAccordionPanelProps) {
-  const { isOpen } = useAccordionItem();
-
-  const maskStyle: React.CSSProperties = {
-    maskImage:
-      'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
-    WebkitMaskImage:
-      'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
-    overflow: 'hidden',
-  };
-
-  return (
-    <AnimatePresence>
-      {keepRendered ? (
-        <AccordionPrimitive.Panel
-          hidden={false}
-          hiddenUntilFound={hiddenUntilFound}
-          keepMounted
-          render={
-            <motion.div
-              key="accordion-panel"
-              data-slot="accordion-panel"
-              className={cn(AccordionStyles.panel, slots?.panel, className)}
-              initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}
-              animate={
-                isOpen
-                  ? { height: 'auto', opacity: 1, '--mask-stop': '100%', y: 0 }
-                  : { height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }
-              }
-              transition={transition}
-              style={maskStyle}
-              {...(props as any)}
-            />
-          }
-        />
-      ) : (
-        isOpen && (
-          <AccordionPrimitive.Panel
-            hidden={false}
-            hiddenUntilFound={hiddenUntilFound}
-            keepMounted
-            render={
-              <motion.div
-                key="accordion-panel"
-                data-slot="accordion-panel"
-                className={cn(AccordionStyles.panel, slots?.panel, className)}
-                initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}
-                animate={{
-                  height: 'auto',
-                  opacity: 1,
-                  '--mask-stop': '100%',
-                  y: 0,
-                }}
-                exit={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}
-                transition={transition}
-                style={maskStyle}
-                {...props}
-              />
-            }
-          />
-        )
-      )}
-    </AnimatePresence>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Exports
-// ---------------------------------------------------------------------------
-
-export {
-  Accordion,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionPanel,
-  useAccordionItem,
-};
-
-// Re-export types
-export type {
-  IAccordionProps,
-  IAccordionItemProps,
-  IAccordionHeaderProps,
-  IAccordionTriggerProps,
-  IAccordionPanelProps,
-  IAccordionConfig,
-  AccordionSlot,
-  AccordionContextType,
-  AccordionItemContextType,
-} from './Accordion.types';
-
-// Re-export styles and variants
-export {
-  AccordionStyles,
-  accordionVariants,
-  type AccordionVariantProps,
-} from './Accordion.styles';