@mks2508/mks-ui 0.1.3 → 0.2.0

package/dist/react/ui/Accordion/Accordion.styles.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Style slots and CVA variants for the Accordion component.
+ *
+ * Defines the visual regions (slots) and variant-based styling
+ * using Class Variance Authority (CVA).
+ *
+ * @module @mks2508/mks-ui/react/ui/Accordion/Accordion.styles
+ */
+import { type VariantProps } from 'class-variance-authority';
+import type { StyleSlots } from '../../../core/types';
+import type { AccordionSlot } from './Accordion.types';
+/**
+ * Default Tailwind classes for each visual region of the Accordion.
+ *
+ * @example
+ * ```typescript
+ * import { AccordionStyles } from '@mks2508/mks-ui';
+ *
+ * // Access individual slot defaults
+ * console.log(AccordionStyles.root);   // base root classes
+ * console.log(AccordionStyles.trigger); // base trigger classes
+ * ```
+ */
+export declare const AccordionStyles: StyleSlots<AccordionSlot>;
+/**
+ * CVA variants for the Accordion root element.
+ *
+ * Provides `default` and `bordered` visual variants that control
+ * the overall appearance of the accordion container.
+ *
+ * @example
+ * ```typescript
+ * import { accordionVariants } from '@mks2508/mks-ui';
+ *
+ * // Get class string for bordered variant
+ * const classes = accordionVariants({ variant: 'bordered' });
+ * ```
+ */
+export declare const accordionVariants: (props?: ({
+    variant?: "default" | "bordered" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Variant props extracted from {@link accordionVariants}.
+ * Use this to type-check the `variant` prop on the Accordion root.
+ */
+export type AccordionVariantProps = VariantProps<typeof accordionVariants>;
+//# sourceMappingURL=Accordion.styles.d.ts.map

package/dist/react/ui/Accordion/Accordion.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Accordion/Accordion.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,EAAE,UAAU,CAAC,aAAa,CAOrD,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB;;8EAgB5B,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/react/ui/Accordion/Accordion.styles.js

@@ -0,0 +1,54 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react/ui/Accordion/Accordion.styles.ts
+/**
+* Style slots and CVA variants for the Accordion component.
+*
+* Defines the visual regions (slots) and variant-based styling
+* using Class Variance Authority (CVA).
+*
+* @module @mks2508/mks-ui/react/ui/Accordion/Accordion.styles
+*/
+/**
+* Default Tailwind classes for each visual region of the Accordion.
+*
+* @example
+* ```typescript
+* import { AccordionStyles } from '@mks2508/mks-ui';
+*
+* // Access individual slot defaults
+* console.log(AccordionStyles.root);   // base root classes
+* console.log(AccordionStyles.trigger); // base trigger classes
+* ```
+*/
+const AccordionStyles = {
+	root: "flex flex-col",
+	item: "border-b border-border",
+	header: "flex",
+	trigger: "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-panel-open]>svg]:rotate-180",
+	panel: "overflow-hidden text-sm"
+};
+/**
+* CVA variants for the Accordion root element.
+*
+* Provides `default` and `bordered` visual variants that control
+* the overall appearance of the accordion container.
+*
+* @example
+* ```typescript
+* import { accordionVariants } from '@mks2508/mks-ui';
+*
+* // Get class string for bordered variant
+* const classes = accordionVariants({ variant: 'bordered' });
+* ```
+*/
+const accordionVariants = cva(AccordionStyles.root, {
+	variants: { variant: {
+		default: "",
+		bordered: "rounded-lg border border-border"
+	} },
+	defaultVariants: { variant: "default" }
+});
+
+//#endregion
+export { AccordionStyles, accordionVariants };

package/dist/react/ui/Accordion/Accordion.types.d.ts

@@ -0,0 +1,160 @@
+/**
+ * Type definitions for the Accordion component.
+ *
+ * All interfaces follow the IPrefix convention. Type aliases do not.
+ * Slot types define the visual regions available for style overrides.
+ *
+ * @module @mks2508/mks-ui/react/ui/Accordion/Accordion.types
+ */
+import type { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+import type { HTMLMotionProps } from 'motion/react';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+import type { AccordionVariantProps } from './Accordion.styles';
+/**
+ * Named visual regions of the Accordion that can be styled via the `slots` prop.
+ *
+ * | Slot        | Element                                     |
+ * |-------------|---------------------------------------------|
+ * | `root`      | Outer accordion container                   |
+ * | `item`      | Individual collapsible section               |
+ * | `header`    | Header wrapper around the trigger            |
+ * | `trigger`   | Clickable element that toggles the panel     |
+ * | `panel`     | Collapsible content area with animation      |
+ *
+ * @example
+ * ```tsx
+ * <Accordion slots={{ trigger: 'text-cyan-400', panel: 'bg-zinc-900/50' }} />
+ * ```
+ */
+export type AccordionSlot = 'root' | 'item' | 'header' | 'trigger' | 'panel';
+/**
+ * Internal context for the Accordion root, tracks the current value.
+ */
+export type AccordionContextType = {
+    /** Currently expanded item value(s). */
+    value: string | string[] | undefined;
+    /** Setter to update the expanded item value(s). */
+    setValue: (value: string | string[] | undefined) => void;
+};
+/**
+ * Internal context for an individual AccordionItem, tracks open state.
+ */
+export type AccordionItemContextType = {
+    /** Whether this item's panel is currently expanded. */
+    isOpen: boolean;
+    /** Setter to toggle this item's open state. */
+    setIsOpen: (open: boolean) => void;
+};
+/**
+ * Behavioral configuration for the Accordion component.
+ * Extends {@link IBaseConfig} with accordion-specific options.
+ *
+ * @example
+ * ```tsx
+ * <Accordion config={{ keepRendered: true, animation: { duration: 0.4 } }} />
+ * ```
+ */
+export interface IAccordionConfig extends IBaseConfig {
+    /**
+     * When `true`, accordion panels remain in the DOM when collapsed
+     * (hidden visually but not unmounted). Useful for preserving
+     * form state or avoiding expensive re-renders.
+     *
+     * @default false
+     */
+    keepRendered?: boolean;
+}
+/**
+ * Props for the root Accordion component.
+ *
+ * @example
+ * ```tsx
+ * <Accordion
+ *   variant="bordered"
+ *   defaultValue={['item-1']}
+ *   slots={{ root: 'bg-muted/30', trigger: 'font-semibold' }}
+ * >
+ *   <AccordionItem value="item-1">...</AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export interface IAccordionProps extends Omit<React.ComponentProps<typeof AccordionPrimitive.Root>, 'className'>, AccordionVariantProps {
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+    /** Style overrides for individual visual regions. */
+    slots?: SlotOverrides<AccordionSlot>;
+    /** Behavioral configuration. */
+    config?: IAccordionConfig;
+}
+/**
+ * Props for an individual AccordionItem.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem value="item-1" className="border-none">
+ *   <AccordionHeader>...</AccordionHeader>
+ *   <AccordionPanel>Content</AccordionPanel>
+ * </AccordionItem>
+ * ```
+ */
+export interface IAccordionItemProps extends React.ComponentProps<typeof AccordionPrimitive.Item> {
+    /** Style overrides for individual visual regions. */
+    slots?: SlotOverrides<AccordionSlot>;
+}
+/**
+ * Props for the AccordionHeader wrapper.
+ *
+ * @example
+ * ```tsx
+ * <AccordionHeader className="bg-muted/20">
+ *   <AccordionTrigger>Section Title</AccordionTrigger>
+ * </AccordionHeader>
+ * ```
+ */
+export interface IAccordionHeaderProps extends React.ComponentProps<typeof AccordionPrimitive.Header> {
+    /** Style overrides for individual visual regions. */
+    slots?: SlotOverrides<AccordionSlot>;
+}
+/**
+ * Props for the AccordionTrigger button.
+ *
+ * @example
+ * ```tsx
+ * <AccordionTrigger className="text-foreground hover:text-primary">
+ *   Click to expand
+ * </AccordionTrigger>
+ * ```
+ */
+export interface IAccordionTriggerProps extends React.ComponentProps<typeof AccordionPrimitive.Trigger> {
+    /** Style overrides for individual visual regions. */
+    slots?: SlotOverrides<AccordionSlot>;
+}
+/**
+ * Props for the AccordionPanel collapsible content area.
+ *
+ * Extends Motion's HTMLMotionProps for full animation control.
+ * The `keepMounted` and `render` props from the base primitive are
+ * omitted because they are managed internally by the animation logic.
+ *
+ * @example
+ * ```tsx
+ * <AccordionPanel
+ *   keepRendered
+ *   transition={{ duration: 0.5, ease: 'easeOut' }}
+ * >
+ *   <p>Collapsible content here.</p>
+ * </AccordionPanel>
+ * ```
+ */
+export interface IAccordionPanelProps extends Omit<Omit<React.ComponentProps<typeof AccordionPrimitive.Panel>, 'keepMounted' | 'render'>, keyof HTMLMotionProps<'div'>>, HTMLMotionProps<'div'> {
+    /**
+     * When `true`, the panel stays mounted in the DOM even when collapsed.
+     * Useful for preserving internal state (e.g. form inputs).
+     *
+     * @default false
+     */
+    keepRendered?: boolean;
+    /** Style overrides for individual visual regions. */
+    slots?: SlotOverrides<AccordionSlot>;
+}
+//# sourceMappingURL=Accordion.types.d.ts.map

package/dist/react/ui/Accordion/Accordion.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAChF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAMhE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAM7E;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,wCAAwC;IACxC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;IACrC,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,uDAAuD;IACvD,MAAM,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAMF;;;;;;;;GAQG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,EACpD,WAAW,CACZ,EACD,qBAAqB;IACvB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACrC,gCAAgC;IAChC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;IAC5D,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,MAAM,CAAC;IAC9D,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;IAC/D,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,oBACf,SAAQ,IAAI,CACR,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAC,EACrF,MAAM,eAAe,CAAC,KAAK,CAAC,CAC7B,EACD,eAAe,CAAC,KAAK,CAAC;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC"}

package/dist/react/ui/Accordion/index.d.ts

@@ -0,0 +1,105 @@
+import type { AccordionItemContextType, IAccordionProps, IAccordionItemProps, IAccordionHeaderProps, IAccordionTriggerProps, IAccordionPanelProps } from './Accordion.types';
+declare const useAccordionItem: () => AccordionItemContextType;
+/**
+ * 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>
+ * ```
+ */
+declare function Accordion({ variant, className, slots, config: _config, ...props }: IAccordionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function AccordionItem({ slots, className, ...props }: IAccordionItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function AccordionHeader({ slots, className, ...props }: IAccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function AccordionTrigger({ slots, className, ...props }: IAccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function AccordionPanel({ transition, hiddenUntilFound, keepRendered, slots, className, ...props }: IAccordionPanelProps): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel, useAccordionItem, };
+export type { IAccordionProps, IAccordionItemProps, IAccordionHeaderProps, IAccordionTriggerProps, IAccordionPanelProps, IAccordionConfig, AccordionSlot, AccordionContextType, AccordionItemContextType, } from './Accordion.types';
+export { AccordionStyles, accordionVariants, type AccordionVariantProps, } from './Accordion.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/ui/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Accordion/index.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAEV,wBAAwB,EACxB,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAS3B,QAAA,MAA8B,gBAAgB,gCACsB,CAAC;AAMrE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EAAE,OAAO,EACf,GAAG,KAAK,EACT,EAAE,eAAe,2CAmBjB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAmBzE;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAQvB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAQxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,cAAc,CAAC,EACtB,UAAkD,EAClD,gBAAgB,EAChB,YAAoB,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAgEtB;AAMD,OAAO,EACL,SAAS,EACT,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,gBAAgB,GACjB,CAAC;AAGF,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC"}

package/dist/react/ui/Accordion/index.js

@@ -0,0 +1,266 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { AccordionStyles, accordionVariants } from "./Accordion.styles.js";
+import * as React from "../../../react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Accordion } from "@base-ui/react/accordion";
+
+//#region src/react/ui/Accordion/index.tsx
+/**
+* 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>
+*   );
+* }
+* ```
+*/
+const [AccordionProvider, useAccordion] = getStrictContext("AccordionContext");
+const [AccordionItemProvider, useAccordionItem] = getStrictContext("AccordionItemContext");
+/**
+* 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$1({ variant, className, slots, config: _config, ...props }) {
+	const [value, setValue] = useControlledState({
+		value: props?.value,
+		defaultValue: props?.defaultValue,
+		onChange: props?.onValueChange
+	});
+	return /* @__PURE__ */ jsx(AccordionProvider, {
+		value: {
+			value,
+			setValue
+		},
+		children: /* @__PURE__ */ jsx(Accordion.Root, {
+			"data-slot": "accordion",
+			className: cn(accordionVariants({ variant }), slots?.root, className),
+			...props,
+			onValueChange: setValue
+		})
+	});
+}
+/**
+* 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 }) {
+	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 /* @__PURE__ */ jsx(AccordionItemProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(Accordion.Item, {
+			"data-slot": "accordion-item",
+			className: cn(AccordionStyles.item, slots?.item, className),
+			...props
+		})
+	});
+}
+/**
+* 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 }) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		"data-slot": "accordion-header",
+		className: cn(AccordionStyles.header, slots?.header, className),
+		...props
+	});
+}
+/**
+* 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 }) {
+	return /* @__PURE__ */ jsx(Accordion.Trigger, {
+		"data-slot": "accordion-trigger",
+		className: cn(AccordionStyles.trigger, slots?.trigger, className),
+		...props
+	});
+}
+/**
+* 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: .35,
+	ease: "easeInOut"
+}, hiddenUntilFound, keepRendered = false, slots, className, ...props }) {
+	const { isOpen } = useAccordionItem();
+	const maskStyle = {
+		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 /* @__PURE__ */ jsx(AnimatePresence, { children: keepRendered ? /* @__PURE__ */ jsx(Accordion.Panel, {
+		hidden: false,
+		hiddenUntilFound,
+		keepMounted: true,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"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,
+			style: maskStyle,
+			...props
+		}, "accordion-panel")
+	}) : isOpen && /* @__PURE__ */ jsx(Accordion.Panel, {
+		hidden: false,
+		hiddenUntilFound,
+		keepMounted: true,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"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,
+			style: maskStyle,
+			...props
+		}, "accordion-panel")
+	}) });
+}
+
+//#endregion
+export { Accordion$1 as Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, useAccordionItem };

package/dist/react/ui/AlertDialog/AlertDialog.styles.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Style slots for the AlertDialog component.
+ *
+ * Defines the visual regions (slots) available for style overrides.
+ * AlertDialog does not use CVA variants since its visual appearance
+ * is primarily controlled by the `from` flip direction prop.
+ *
+ * @module @mks2508/mks-ui/react/ui/AlertDialog/AlertDialog.styles
+ */
+import type { StyleSlots } from '../../../core/types';
+import type { AlertDialogSlot } from './AlertDialog.types';
+/**
+ * Default Tailwind classes for each visual region of the AlertDialog.
+ *
+ * These classes are applied as base styles and can be overridden
+ * via the `slots` prop on individual sub-components.
+ *
+ * @example
+ * ```typescript
+ * import { AlertDialogStyles } from '@mks2508/mks-ui';
+ *
+ * // Access individual slot defaults
+ * console.log(AlertDialogStyles.backdrop); // backdrop base classes
+ * console.log(AlertDialogStyles.popup);    // popup container classes
+ * ```
+ */
+export declare const AlertDialogStyles: StyleSlots<AlertDialogSlot>;
+//# sourceMappingURL=AlertDialog.styles.d.ts.map

package/dist/react/ui/AlertDialog/AlertDialog.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/AlertDialog/AlertDialog.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAAU,CAAC,eAAe,CASzD,CAAC"}