@tribepad/themis 1.0.0

package/dist/elements/OTPInput/OTPInput.types.d.ts

@@ -0,0 +1,189 @@
+import { z } from 'zod';
+import type { FocusEvent } from 'react';
+/**
+ * Zod schema for OTPInput props validation
+ *
+ * Ensures type safety and runtime validation of component props.
+ * All props are validated against this schema before being used.
+ */
+export declare const OTPInputPropsSchema: z.ZodObject<{
+    label: z.ZodString;
+    value: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    length: z.ZodDefault<z.ZodNumber>;
+    inputMode: z.ZodDefault<z.ZodEnum<{
+        text: "text";
+        tel: "tel";
+        numeric: "numeric";
+    }>>;
+    type: z.ZodDefault<z.ZodEnum<{
+        custom: "custom";
+        numeric: "numeric";
+        alphanumeric: "alphanumeric";
+    }>>;
+    pattern: z.ZodOptional<z.ZodCustom<RegExp, RegExp>>;
+    description: z.ZodOptional<z.ZodString>;
+    error: z.ZodOptional<z.ZodString>;
+    disabled: z.ZodDefault<z.ZodBoolean>;
+    readOnly: z.ZodDefault<z.ZodBoolean>;
+    size: z.ZodDefault<z.ZodEnum<{
+        sm: "sm";
+        lg: "lg";
+        md: "md";
+    }>>;
+    showSuccess: z.ZodDefault<z.ZodBoolean>;
+    mask: z.ZodDefault<z.ZodBoolean>;
+    className: z.ZodOptional<z.ZodString>;
+    digitClassName: z.ZodOptional<z.ZodString>;
+    onChange: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+    onComplete: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+    onPaste: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+    validate: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+    onFocus: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+    onBlur: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+}, z.core.$strip>;
+/**
+ * TypeScript type for OTPInput props
+ * Extends Zod inference with proper function types
+ * Makes properties with defaults optional
+ */
+export type OTPInputProps = Omit<z.infer<typeof OTPInputPropsSchema>, 'onChange' | 'onComplete' | 'onPaste' | 'validate' | 'onFocus' | 'onBlur' | 'length' | 'inputMode' | 'type' | 'disabled' | 'readOnly' | 'size' | 'showSuccess' | 'mask'> & {
+    /**
+     * Number of digits in the OTP code
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Input mode for mobile keyboards
+     * @default 'numeric'
+     */
+    inputMode?: 'numeric' | 'text' | 'tel';
+    /**
+     * Input type (affects validation pattern)
+     * @default 'numeric'
+     */
+    type?: 'numeric' | 'alphanumeric' | 'custom';
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Read-only state
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Visual size variant
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Show success state when complete and valid
+     * @default false
+     */
+    showSuccess?: boolean;
+    /**
+     * Mask digits (show as dots/asterisks)
+     * @default false
+     */
+    mask?: boolean;
+    /**
+     * Callback fired when value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback fired when all digits are entered
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Callback fired on paste operation
+     * Return false to prevent default paste behavior
+     */
+    onPaste?: (value: string) => boolean | Promise<boolean>;
+    /**
+     * Custom validation function
+     * Return error message string or null if valid
+     */
+    validate?: (value: string) => string | null;
+    /**
+     * Callback fired when input is focused
+     */
+    onFocus?: (e: FocusEvent) => void;
+    /**
+     * Callback fired when input is blurred
+     */
+    onBlur?: (e: FocusEvent) => void;
+};
+/**
+ * Imperative ref API for OTPInput
+ *
+ * Provides programmatic control over the component:
+ * - Focus/blur management
+ * - Value manipulation
+ * - Validation
+ * - State queries
+ *
+ * @example
+ * ```tsx
+ * const otpRef = useRef<OTPInputRef>(null);
+ *
+ * // Programmatic control
+ * otpRef.current?.focus();
+ * otpRef.current?.clear();
+ * otpRef.current?.setValue('123456');
+ *
+ * // State queries
+ * const isComplete = otpRef.current?.isComplete();
+ * const validationError = otpRef.current?.validate();
+ * ```
+ */
+export interface OTPInputRef {
+    /**
+     * Programmatically focus the OTP input
+     */
+    focus(): void;
+    /**
+     * Blur the OTP input
+     */
+    blur(): void;
+    /**
+     * Clear all digits
+     * Resets value to empty state
+     */
+    clear(): void;
+    /**
+     * Set value programmatically
+     * Useful for prefilling or testing
+     *
+     * @param value New OTP value (must match length)
+     */
+    setValue(value: string): void;
+    /**
+     * Get current value
+     *
+     * @returns Current OTP value
+     */
+    getValue(): string;
+    /**
+     * Check if OTP is complete (all digits filled)
+     *
+     * @returns true if all digits are filled
+     */
+    isComplete(): boolean;
+    /**
+     * Validate current value
+     * Runs custom validation if provided
+     *
+     * @returns Error message or null if valid
+     */
+    validate(): string | null;
+    /**
+     * Get the underlying DOM element
+     * Access to native input element for advanced use cases
+     *
+     * @returns HTMLInputElement or null
+     */
+    getElement(): HTMLInputElement | null;
+}
+//# sourceMappingURL=OTPInput.types.d.ts.map

package/dist/elements/OTPInput/OTPInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.types.d.ts","sourceRoot":"","sources":["../../../src/elements/OTPInput/OTPInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAmK9B,CAAC;AAEH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,EACnC,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,MAAM,CACxK,GAAG;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;IAEvC;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAE7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAExD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAE5C;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,IAAI,IAAI,CAAC;IAEd;;OAEG;IACH,IAAI,IAAI,IAAI,CAAC;IAEb;;;OAGG;IACH,KAAK,IAAI,IAAI,CAAC;IAEd;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAE9B;;;;OAIG;IACH,QAAQ,IAAI,MAAM,CAAC;IAEnB;;;;OAIG;IACH,UAAU,IAAI,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,QAAQ,IAAI,MAAM,GAAG,IAAI,CAAC;IAE1B;;;;;OAKG;IACH,UAAU,IAAI,gBAAgB,GAAG,IAAI,CAAC;CACvC"}

package/dist/elements/OTPInput/components/OTPDigit.d.ts

@@ -0,0 +1,51 @@
+import { type ReactElement } from 'react';
+import { type OTPDigitVariantProps } from '../OTPInput.styles';
+/**
+ * Props for the OTPDigit component
+ */
+export interface OTPDigitProps {
+    /**
+     * Single character value or underscore for empty
+     * @example "1" | "A" | "_"
+     */
+    value: string;
+    /**
+     * Whether this digit is currently focused
+     * Determines visual focus indicator display
+     */
+    focused: boolean;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: OTPDigitVariantProps['size'];
+    /**
+     * State variant
+     * Determines visual styling (default, focus, error, success, disabled)
+     */
+    state?: OTPDigitVariantProps['state'];
+    /**
+     * Mask the digit (show as bullet point)
+     * Useful for sensitive codes
+     * @default false
+     */
+    masked?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Index of this digit (for debugging)
+     */
+    index?: number;
+}
+/**
+ * Memoized OTPDigit Component
+ *
+ * Prevents re-renders when other digits change.
+ * Only re-renders when its own props change.
+ *
+ * Performance optimization for components with 6-10 digits.
+ */
+export declare const OTPDigit: import("react").MemoExoticComponent<({ value, focused, size, state, masked, className, index, }: OTPDigitProps) => ReactElement>;
+//# sourceMappingURL=OTPDigit.d.ts.map

package/dist/elements/OTPInput/components/OTPDigit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPDigit.d.ts","sourceRoot":"","sources":["../../../../src/elements/OTPInput/components/OTPDigit.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAEjF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAEpC;;;OAGG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAEtC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,mGAvClB,aAAa,KAAG,YAAY,CAuCgB,CAAC"}

package/dist/elements/OTPInput/hooks/useOTPInput.d.ts

@@ -0,0 +1,36 @@
+import { type ChangeEvent, type KeyboardEvent, type ClipboardEvent } from 'react';
+import type { OTPInputProps } from '../OTPInput.types';
+/**
+ * Return type for useOTPInput hook
+ */
+export interface UseOTPInputReturn {
+    value: string;
+    focusedIndex: number;
+    error: string | null;
+    isComplete: boolean;
+    handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+    setFocusedIndex: (index: number) => void;
+    clear: () => void;
+    setValue: (value: string) => void;
+    validate: () => string | null;
+}
+/**
+ * useOTPInput Hook
+ *
+ * Core logic hook for OTP input management.
+ * Handles state, validation, and user interactions.
+ *
+ * Features:
+ * - Controlled and uncontrolled modes
+ * - Auto-advance on digit entry
+ * - Custom validation support
+ * - Error state management
+ * - Focus management
+ *
+ * @param props OTPInput component props
+ * @returns State and handlers for OTP input
+ */
+export declare function useOTPInput(props: OTPInputProps): UseOTPInputReturn;
+//# sourceMappingURL=useOTPInput.d.ts.map

package/dist/elements/OTPInput/hooks/useOTPInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOTPInput.d.ts","sourceRoot":"","sources":["../../../../src/elements/OTPInput/hooks/useOTPInput.ts"],"names":[],"mappings":"AAEA,OAAO,EAA4C,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5H,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,WAAW,EAAE,CAAC,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,iBAAiB,CAgSnE"}

package/dist/elements/OTPInput/hooks/useOTPKeyboard.d.ts

@@ -0,0 +1,59 @@
+import { type KeyboardEvent } from 'react';
+/**
+ * Options for useOTPKeyboard hook
+ */
+export interface UseOTPKeyboardOptions {
+    /**
+     * Current OTP value (string with underscores for empty)
+     */
+    value: string;
+    /**
+     * Total number of digits
+     */
+    length: number;
+    /**
+     * Currently focused digit index
+     */
+    focusedIndex: number;
+    /**
+     * Callback to update OTP value
+     */
+    onChange: (value: string) => void;
+    /**
+     * Callback to update focused index
+     */
+    setFocusedIndex: (index: number) => void;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    readOnly?: boolean;
+}
+/**
+ * Return type for useOTPKeyboard hook
+ */
+export interface UseOTPKeyboardReturn {
+    /**
+     * Keyboard event handler
+     */
+    handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * useOTPKeyboard Hook
+ *
+ * Handles keyboard navigation for OTP input:
+ * - Arrow Left/Right: Navigate between digits
+ * - Backspace: Delete current digit and move left
+ * - Delete: Clear current digit
+ * - Home: Move to first digit
+ * - End: Move to last digit
+ * - Ctrl/Cmd+A: Select all (native browser behavior)
+ *
+ * @param options Configuration options
+ * @returns Keyboard event handler
+ */
+export declare function useOTPKeyboard(options: UseOTPKeyboardOptions): UseOTPKeyboardReturn;
+//# sourceMappingURL=useOTPKeyboard.d.ts.map

package/dist/elements/OTPInput/hooks/useOTPKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOTPKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/elements/OTPInput/hooks/useOTPKeyboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,oBAAoB,CAgKnF"}

package/dist/elements/OTPInput/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * OTPInput Component
+ *
+ * A fully accessible, WCAG 2.2 AAA-compliant OTP (One-Time Password) input component.
+ * Uses a single hidden input for accessibility with visual digit boxes for optimal UX.
+ *
+ * @example
+ * ```tsx
+ * import { OTPInput } from '@tribepad/themis/elements/OTPInput';
+ *
+ * function VerificationForm() {
+ *   const [otp, setOtp] = useState('');
+ *
+ *   return (
+ *     <OTPInput
+ *       label="Enter verification code"
+ *       value={otp}
+ *       onChange={setOtp}
+ *       onComplete={(code) => console.log('Complete:', code)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export { OTPInput } from './OTPInput';
+export type { OTPInputProps, OTPInputRef } from './OTPInput.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/OTPInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/OTPInput/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/elements/OTPInput/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var chunkA77RUEWL_js = require('../../chunk-A77RUEWL.js');
+require('../../chunk-VIREG536.js');
+
+
+
+Object.defineProperty(exports, "OTPInput", {
+  enumerable: true,
+  get: function () { return chunkA77RUEWL_js.OTPInput; }
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/elements/OTPInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/elements/OTPInput/index.mjs

@@ -0,0 +1,4 @@
+export { OTPInput } from '../../chunk-NSQ6MZJ6.mjs';
+import '../../chunk-E2KQFV3O.mjs';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/elements/OTPInput/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}

package/dist/elements/Panel/Panel.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Panel Component - Accessible Non-Modal Sidebar
+ * Disclosure pattern + Complementary region for WCAG 2.2 AAA
+ *
+ * @see plan.md for architecture details
+ * @see panel-prd.md for requirements
+ * @see ADR 0007 for accessibility decisions
+ */
+import { type ReactElement } from "react";
+import { type VariantProps } from "class-variance-authority";
+import type { PanelProps, PanelTriggerProps, PanelContentProps, PanelHeaderProps, PanelTitleProps, PanelDescriptionProps, PanelBodyProps, PanelFooterProps, PanelCloseProps } from "./Panel.types";
+/**
+ * Panel content variants
+ * Controls position-based styling and width
+ */
+export declare const panelContentVariants: (props?: ({
+    position?: "left" | "right" | null | undefined;
+    width?: "sm" | "lg" | "auto" | "md" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Panel header variants
+ */
+export declare const panelHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Panel body variants
+ */
+export declare const panelBodyVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Panel footer variants
+ */
+export declare const panelFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Close button variants
+ */
+export declare const panelCloseButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare function PanelRoot({ children, isOpen: controlledIsOpen, defaultOpen, onOpenChange, onClose, position, width, mobileBreakpoint, }: PanelProps): ReactElement;
+declare namespace PanelRoot {
+    var displayName: string;
+}
+declare function PanelTrigger({ children, asChild, }: PanelTriggerProps): ReactElement | null;
+declare namespace PanelTrigger {
+    var displayName: string;
+}
+declare function PanelContent({ children, showClose, className, }: PanelContentProps): ReactElement | null;
+declare namespace PanelContent {
+    var displayName: string;
+}
+declare function PanelHeader({ children, className, }: PanelHeaderProps): ReactElement | null;
+declare namespace PanelHeader {
+    var displayName: string;
+}
+declare function PanelTitle({ children, as: Tag, className, }: PanelTitleProps): ReactElement | null;
+declare namespace PanelTitle {
+    var displayName: string;
+}
+declare function PanelDescription({ children, className, }: PanelDescriptionProps): ReactElement | null;
+declare namespace PanelDescription {
+    var displayName: string;
+}
+declare function PanelBody({ children, className }: PanelBodyProps): ReactElement | null;
+declare namespace PanelBody {
+    var displayName: string;
+}
+declare function PanelFooter({ children, className, }: PanelFooterProps): ReactElement | null;
+declare namespace PanelFooter {
+    var displayName: string;
+}
+declare function PanelClose({ children }: PanelCloseProps): ReactElement | null;
+declare namespace PanelClose {
+    var displayName: string;
+}
+/**
+ * Panel Component
+ *
+ * Accessible non-modal sidebar panel using the disclosure pattern with
+ * a complementary region for WCAG 2.2 AAA compliance.
+ *
+ * @example
+ * ```tsx
+ * <Panel>
+ *   <Panel.Trigger>
+ *     <Button>Open Panel</Button>
+ *   </Panel.Trigger>
+ *   <Panel.Content>
+ *     <Panel.Header>
+ *       <Panel.Title>Panel Title</Panel.Title>
+ *       <Panel.Description>Optional description</Panel.Description>
+ *     </Panel.Header>
+ *     <Panel.Body>
+ *       Panel content here
+ *     </Panel.Body>
+ *     <Panel.Footer>
+ *       <Button>Action</Button>
+ *     </Panel.Footer>
+ *   </Panel.Content>
+ * </Panel>
+ * ```
+ */
+export declare const Panel: typeof PanelRoot & {
+    Trigger: typeof PanelTrigger;
+    Content: typeof PanelContent;
+    Header: typeof PanelHeader;
+    Title: typeof PanelTitle;
+    Description: typeof PanelDescription;
+    Body: typeof PanelBody;
+    Footer: typeof PanelFooter;
+    Close: typeof PanelClose;
+};
+export { PanelRoot, PanelTrigger, PanelContent, PanelHeader, PanelTitle, PanelDescription, PanelBody, PanelFooter, PanelClose, };
+export type PanelContentVariants = VariantProps<typeof panelContentVariants>;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/elements/Panel/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/elements/Panel/Panel.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,YAAY,EAWlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,eAAe,EAGhB,MAAM,eAAe,CAAC;AAMvB;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;8EAyBhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,oFAI9B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,oFAA+C,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,mBAAmB,oFAI9B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,wBAAwB,oFAQnC,CAAC;AA+DH,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,MAAM,EAAE,gBAAgB,EACxB,WAAmB,EACnB,YAAY,EACZ,OAAO,EACP,QAAkB,EAClB,KAAY,EACZ,gBAAsB,GACvB,EAAE,UAAU,GAAG,YAAY,CAwE3B;kBAjFQ,SAAS;;;AAwFlB,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,OAAc,GACf,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI,CAgDzC;kBAnDQ,YAAY;;;AA6ErB,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,SAAgB,EAChB,SAAS,GACV,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI,CAoDzC;kBAxDQ,YAAY;;;AA+DrB,iBAAS,WAAW,CAAC,EACnB,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CASxC;kBAZQ,WAAW;;;AAmBpB,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,EAAE,EAAE,GAAU,EACd,SAAS,GACV,EAAE,eAAe,GAAG,YAAY,GAAG,IAAI,CAkBvC;kBAtBQ,UAAU;;;AA6BnB,iBAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CAM7C;kBATQ,gBAAgB;;;AAgBzB,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,GAAG,YAAY,GAAG,IAAI,CAE/E;kBAFQ,SAAS;;;AASlB,iBAAS,WAAW,CAAC,EACnB,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CASxC;kBAZQ,WAAW;;;AAmBpB,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,YAAY,GAAG,IAAI,CAuBtE;kBAvBQ,UAAU;;;AA8BnB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,KAAK;;;;;;;;;CAShB,CAAC;AAGH,OAAO,EACL,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,UAAU,GACX,CAAC;AAGF,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}