@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/CodeBlock/CodeBlock.module.scss.cjs

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const container = "_container_1yo2b_1";
+const title = "_title_1yo2b_5";
+const wrapper = "_wrapper_1yo2b_14";
+const header = "_header_1yo2b_22";
+const filename = "_filename_1yo2b_32";
+const copyButton = "_copyButton_1yo2b_39";
+const copied = "_copied_1yo2b_77";
+const copyOverlay = "_copyOverlay_1yo2b_81";
+const withCopyOverlay = "_withCopyOverlay_1yo2b_92";
+const codeContainer = "_codeContainer_1yo2b_92";
+const loading = "_loading_1yo2b_93";
+const icon = "_icon_1yo2b_97";
+const persistentCopyWrapper = "_persistentCopyWrapper_1yo2b_101";
+const persistentCopy = "_persistentCopy_1yo2b_101";
+const withLineNumbers = "_withLineNumbers_1yo2b_204";
+const withDiff = "_withDiff_1yo2b_208";
+const compact = "_compact_1yo2b_232";
+const wordWrap = "_wordWrap_1yo2b_246";
+const caption = "_caption_1yo2b_256";
+const collapseButton = "_collapseButton_1yo2b_263";
+const tabbedPanel = "_tabbedPanel_1yo2b_307";
+const styles = {
+  container,
+  title,
+  wrapper,
+  header,
+  filename,
+  copyButton,
+  copied,
+  copyOverlay,
+  withCopyOverlay,
+  codeContainer,
+  loading,
+  icon,
+  persistentCopyWrapper,
+  persistentCopy,
+  withLineNumbers,
+  withDiff,
+  compact,
+  wordWrap,
+  caption,
+  collapseButton,
+  tabbedPanel
+};
+exports.caption = caption;
+exports.codeContainer = codeContainer;
+exports.collapseButton = collapseButton;
+exports.compact = compact;
+exports.container = container;
+exports.copied = copied;
+exports.copyButton = copyButton;
+exports.copyOverlay = copyOverlay;
+exports.default = styles;
+exports.filename = filename;
+exports.header = header;
+exports.icon = icon;
+exports.loading = loading;
+exports.persistentCopy = persistentCopy;
+exports.persistentCopyWrapper = persistentCopyWrapper;
+exports.tabbedPanel = tabbedPanel;
+exports.title = title;
+exports.withCopyOverlay = withCopyOverlay;
+exports.withDiff = withDiff;
+exports.withLineNumbers = withLineNumbers;
+exports.wordWrap = wordWrap;
+exports.wrapper = wrapper;
+//# sourceMappingURL=CodeBlock.module.scss.cjs.map

package/dist/components/CodeBlock/CodeBlock.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/CodeBlock/CodeBlock.module.scss.js

@@ -0,0 +1,69 @@
+const container = "_container_1yo2b_1";
+const title = "_title_1yo2b_5";
+const wrapper = "_wrapper_1yo2b_14";
+const header = "_header_1yo2b_22";
+const filename = "_filename_1yo2b_32";
+const copyButton = "_copyButton_1yo2b_39";
+const copied = "_copied_1yo2b_77";
+const copyOverlay = "_copyOverlay_1yo2b_81";
+const withCopyOverlay = "_withCopyOverlay_1yo2b_92";
+const codeContainer = "_codeContainer_1yo2b_92";
+const loading = "_loading_1yo2b_93";
+const icon = "_icon_1yo2b_97";
+const persistentCopyWrapper = "_persistentCopyWrapper_1yo2b_101";
+const persistentCopy = "_persistentCopy_1yo2b_101";
+const withLineNumbers = "_withLineNumbers_1yo2b_204";
+const withDiff = "_withDiff_1yo2b_208";
+const compact = "_compact_1yo2b_232";
+const wordWrap = "_wordWrap_1yo2b_246";
+const caption = "_caption_1yo2b_256";
+const collapseButton = "_collapseButton_1yo2b_263";
+const tabbedPanel = "_tabbedPanel_1yo2b_307";
+const styles = {
+  container,
+  title,
+  wrapper,
+  header,
+  filename,
+  copyButton,
+  copied,
+  copyOverlay,
+  withCopyOverlay,
+  codeContainer,
+  loading,
+  icon,
+  persistentCopyWrapper,
+  persistentCopy,
+  withLineNumbers,
+  withDiff,
+  compact,
+  wordWrap,
+  caption,
+  collapseButton,
+  tabbedPanel
+};
+export {
+  caption,
+  codeContainer,
+  collapseButton,
+  compact,
+  container,
+  copied,
+  copyButton,
+  copyOverlay,
+  styles as default,
+  filename,
+  header,
+  icon,
+  loading,
+  persistentCopy,
+  persistentCopyWrapper,
+  tabbedPanel,
+  title,
+  withCopyOverlay,
+  withDiff,
+  withLineNumbers,
+  wordWrap,
+  wrapper
+};
+//# sourceMappingURL=CodeBlock.module.scss.js.map

package/dist/components/CodeBlock/CodeBlock.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/CodeBlock/index.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import '../../styles/globals.scss';
+export type CodeBlockLanguage = 'tsx' | 'typescript' | 'javascript' | 'jsx' | 'bash' | 'shell' | 'css' | 'scss' | 'sass' | 'json' | 'html' | 'xml' | 'markdown' | 'md' | 'yaml' | 'yml' | 'python' | 'py' | 'ruby' | 'go' | 'rust' | 'java' | 'kotlin' | 'swift' | 'c' | 'cpp' | 'csharp' | 'php' | 'sql' | 'graphql' | 'diff' | 'plaintext';
+/** Available syntax highlighting themes */
+export type CodeBlockTheme = 'synthwave-84' | 'github-dark' | 'github-light' | 'one-dark-pro' | 'dracula' | 'nord' | 'monokai' | 'vitesse-dark' | 'vitesse-light' | 'min-dark' | 'min-light';
+export type CodeBlockCopyPlacement = 'auto' | 'header' | 'overlay';
+export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Code string to display */
+    code: string;
+    /** Programming language for syntax highlighting */
+    language?: CodeBlockLanguage;
+    /** Syntax highlighting theme */
+    theme?: CodeBlockTheme;
+    /** Show copy button */
+    showCopy?: boolean;
+    /** Optional title above code block (external label) */
+    title?: string;
+    /** Optional filename shown in header bar inside code block */
+    filename?: string;
+    /** Optional caption below code block */
+    caption?: string;
+    /** Show line numbers */
+    showLineNumbers?: boolean;
+    /** Starting line number (default: 1) */
+    startLineNumber?: number;
+    /** Highlight specific lines (e.g., [1, 3, '5-7']) */
+    highlightLines?: (number | string)[];
+    /** Lines marked as added in diff view */
+    addedLines?: (number | string)[];
+    /** Lines marked as removed in diff view */
+    removedLines?: (number | string)[];
+    /** Enable word wrapping for long lines */
+    wordWrap?: boolean;
+    /** Maximum height in pixels (enables scrolling) */
+    maxHeight?: number;
+    /** Allow collapsing/expanding the code block */
+    collapsible?: boolean;
+    /** Initial collapsed state (only applies when collapsible is true) */
+    defaultCollapsed?: boolean;
+    /** Number of lines to show when collapsed */
+    collapsedLines?: number;
+    /** Compact mode with reduced padding */
+    compact?: boolean;
+    /** Show a persistent copy button (always visible, uses Button component) */
+    persistentCopy?: boolean;
+    /** Placement of copy button when not using persistent copy */
+    copyPlacement?: CodeBlockCopyPlacement;
+}
+export interface CodeBlockTab {
+    /** Label shown in the tab */
+    label: string;
+    /** Code string to display */
+    code: string;
+    /** Programming language for syntax highlighting */
+    language?: CodeBlockLanguage;
+}
+export interface TabbedCodeBlockProps {
+    /** Array of code tabs */
+    tabs: CodeBlockTab[];
+    /** Default selected tab (by label) */
+    defaultTab?: string;
+    /** Show copy button */
+    showCopy?: boolean;
+    /** Placement of copy button when not using persistent copy */
+    copyPlacement?: CodeBlockCopyPlacement;
+    /** Show line numbers */
+    showLineNumbers?: boolean;
+    /** Syntax highlighting theme (applies to all tabs) */
+    theme?: CodeBlockTheme;
+    /** Tab list visual style */
+    tabsVariant?: 'underline' | 'pills';
+    /** Enable word wrapping for long lines */
+    wordWrap?: boolean;
+    /** Maximum height in pixels (enables scrolling) */
+    maxHeight?: number;
+    /** Additional class name */
+    className?: string;
+}
+declare function TabbedCodeBlock({ tabs, defaultTab, showCopy, copyPlacement, showLineNumbers, theme, tabsVariant, wordWrap, maxHeight, className, }: TabbedCodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>> & {
+    Tabbed: typeof TabbedCodeBlock;
+};
+export { TabbedCodeBlock };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CodeBlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Collapsible/Collapsible.module.scss.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "_root_okqbn_1";
+const trigger = "_trigger_okqbn_5";
+const triggerContent = "_triggerContent_okqbn_33";
+const chevron = "_chevron_okqbn_38";
+const chevronOpen = "_chevronOpen_okqbn_44";
+const content = "_content_okqbn_48";
+const contentOpen = "_contentOpen_okqbn_53";
+const contentClosed = "_contentClosed_okqbn_58";
+const contentInner = "_contentInner_okqbn_63";
+const disabled = "_disabled_okqbn_67";
+const styles = {
+  root,
+  trigger,
+  triggerContent,
+  chevron,
+  chevronOpen,
+  content,
+  contentOpen,
+  contentClosed,
+  contentInner,
+  disabled
+};
+exports.chevron = chevron;
+exports.chevronOpen = chevronOpen;
+exports.content = content;
+exports.contentClosed = contentClosed;
+exports.contentInner = contentInner;
+exports.contentOpen = contentOpen;
+exports.default = styles;
+exports.disabled = disabled;
+exports.root = root;
+exports.trigger = trigger;
+exports.triggerContent = triggerContent;
+//# sourceMappingURL=Collapsible.module.scss.cjs.map

package/dist/components/Collapsible/Collapsible.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Collapsible/Collapsible.module.scss.js

@@ -0,0 +1,36 @@
+const root = "_root_okqbn_1";
+const trigger = "_trigger_okqbn_5";
+const triggerContent = "_triggerContent_okqbn_33";
+const chevron = "_chevron_okqbn_38";
+const chevronOpen = "_chevronOpen_okqbn_44";
+const content = "_content_okqbn_48";
+const contentOpen = "_contentOpen_okqbn_53";
+const contentClosed = "_contentClosed_okqbn_58";
+const contentInner = "_contentInner_okqbn_63";
+const disabled = "_disabled_okqbn_67";
+const styles = {
+  root,
+  trigger,
+  triggerContent,
+  chevron,
+  chevronOpen,
+  content,
+  contentOpen,
+  contentClosed,
+  contentInner,
+  disabled
+};
+export {
+  chevron,
+  chevronOpen,
+  content,
+  contentClosed,
+  contentInner,
+  contentOpen,
+  styles as default,
+  disabled,
+  root,
+  trigger,
+  triggerContent
+};
+//# sourceMappingURL=Collapsible.module.scss.js.map

package/dist/components/Collapsible/Collapsible.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Collapsible/index.cjs

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Collapsible_module = require("./Collapsible.module.scss.cjs");
+const CollapsibleContext = React.createContext(null);
+function useCollapsibleContext() {
+  const context = React.useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error("Collapsible compound components must be used within Collapsible.Root");
+  }
+  return context;
+}
+function CollapsibleRoot({
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  disabled = false,
+  className
+}) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const uniqueId = React.useId();
+  const contentId = `collapsible-content-${uniqueId}`;
+  const triggerId = `collapsible-trigger-${uniqueId}`;
+  const toggle = React.useCallback(() => {
+    if (disabled) return;
+    if (isControlled) {
+      onOpenChange == null ? void 0 : onOpenChange(!isOpen);
+    } else {
+      setInternalOpen((prev) => {
+        const newValue = !prev;
+        onOpenChange == null ? void 0 : onOpenChange(newValue);
+        return newValue;
+      });
+    }
+  }, [disabled, isControlled, isOpen, onOpenChange]);
+  const contextValue = {
+    isOpen,
+    toggle,
+    contentId,
+    triggerId,
+    disabled
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `${Collapsible_module.default.root} ${isOpen ? Collapsible_module.default.open : ""} ${disabled ? Collapsible_module.default.disabled : ""} ${className || ""}`,
+      "data-state": isOpen ? "open" : "closed",
+      "data-disabled": disabled || void 0,
+      children
+    }
+  ) });
+}
+function CollapsibleTrigger({
+  children,
+  className,
+  showChevron = true,
+  chevronPosition = "end",
+  asChild = false
+}) {
+  const { isOpen, toggle, contentId, triggerId, disabled } = useCollapsibleContext();
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  const chevronIcon = showChevron && /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: `${Collapsible_module.default.chevron} ${isOpen ? Collapsible_module.default.chevronOpen : ""}`,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M6 4L10 8L6 12",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      id: triggerId,
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      "aria-disabled": disabled || void 0,
+      onClick: toggle,
+      onKeyDown: handleKeyDown
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      id: triggerId,
+      className: `${Collapsible_module.default.trigger} ${className || ""}`,
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      "aria-disabled": disabled || void 0,
+      onClick: toggle,
+      onKeyDown: handleKeyDown,
+      disabled,
+      children: [
+        chevronPosition === "start" && chevronIcon,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: Collapsible_module.default.triggerContent, children }),
+        chevronPosition === "end" && chevronIcon
+      ]
+    }
+  );
+}
+function CollapsibleContent({
+  children,
+  className,
+  forceMount = false
+}) {
+  const { isOpen, contentId, triggerId } = useCollapsibleContext();
+  if (!forceMount && !isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id: contentId,
+      role: "region",
+      "aria-labelledby": triggerId,
+      className: `${Collapsible_module.default.content} ${isOpen ? Collapsible_module.default.contentOpen : Collapsible_module.default.contentClosed} ${className || ""}`,
+      "data-state": isOpen ? "open" : "closed",
+      hidden: !isOpen && !forceMount,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Collapsible_module.default.contentInner, children })
+    }
+  );
+}
+const Collapsible = Object.assign(CollapsibleRoot, {
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleRoot = CollapsibleRoot;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+exports.useCollapsibleContext = useCollapsibleContext;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Collapsible/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Collapsible/index.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useId, createContext, useContext } from 'react';\nimport styles from './Collapsible.module.scss';\n\n// Context for sharing state between compound components\ninterface CollapsibleContextValue {\n  isOpen: boolean;\n  toggle: () => void;\n  contentId: string;\n  triggerId: string;\n  disabled?: boolean;\n}\n\nconst CollapsibleContext = createContext<CollapsibleContextValue | null>(null);\n\nfunction useCollapsibleContext() {\n  const context = useContext(CollapsibleContext);\n  if (!context) {\n    throw new Error('Collapsible compound components must be used within Collapsible.Root');\n  }\n  return context;\n}\n\n// Root component\nexport interface CollapsibleRootProps {\n  children: React.ReactNode;\n  /** Whether the collapsible is initially open */\n  defaultOpen?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the collapsible is disabled */\n  disabled?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction CollapsibleRoot({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  disabled = false,\n  className,\n}: CollapsibleRootProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const uniqueId = useId();\n  const contentId = `collapsible-content-${uniqueId}`;\n  const triggerId = `collapsible-trigger-${uniqueId}`;\n\n  const toggle = useCallback(() => {\n    if (disabled) return;\n\n    if (isControlled) {\n      onOpenChange?.(!isOpen);\n    } else {\n      setInternalOpen((prev) => {\n        const newValue = !prev;\n        onOpenChange?.(newValue);\n        return newValue;\n      });\n    }\n  }, [disabled, isControlled, isOpen, onOpenChange]);\n\n  const contextValue: CollapsibleContextValue = {\n    isOpen,\n    toggle,\n    contentId,\n    triggerId,\n    disabled,\n  };\n\n  return (\n    <CollapsibleContext.Provider value={contextValue}>\n      <div\n        className={`${styles.root} ${isOpen ? styles.open : ''} ${disabled ? styles.disabled : ''} ${className || ''}`}\n        data-state={isOpen ? 'open' : 'closed'}\n        data-disabled={disabled || undefined}\n      >\n        {children}\n      </div>\n    </CollapsibleContext.Provider>\n  );\n}\n\n// Trigger component\nexport interface CollapsibleTriggerProps {\n  children: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n  /** Show chevron indicator */\n  showChevron?: boolean;\n  /** Chevron position */\n  chevronPosition?: 'start' | 'end';\n  /** Render as child element (for custom triggers) */\n  asChild?: boolean;\n}\n\nfunction CollapsibleTrigger({\n  children,\n  className,\n  showChevron = true,\n  chevronPosition = 'end',\n  asChild = false,\n}: CollapsibleTriggerProps) {\n  const { isOpen, toggle, contentId, triggerId, disabled } = useCollapsibleContext();\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      toggle();\n    }\n  };\n\n  const chevronIcon = showChevron && (\n    <svg\n      className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M6 4L10 8L6 12\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n\n  if (asChild && React.isValidElement(children)) {\n    return React.cloneElement(children as React.ReactElement<any>, {\n      id: triggerId,\n      'aria-expanded': isOpen,\n      'aria-controls': contentId,\n      'aria-disabled': disabled || undefined,\n      onClick: toggle,\n      onKeyDown: handleKeyDown,\n    });\n  }\n\n  return (\n    <button\n      type=\"button\"\n      id={triggerId}\n      className={`${styles.trigger} ${className || ''}`}\n      aria-expanded={isOpen}\n      aria-controls={contentId}\n      aria-disabled={disabled || undefined}\n      onClick={toggle}\n      onKeyDown={handleKeyDown}\n      disabled={disabled}\n    >\n      {chevronPosition === 'start' && chevronIcon}\n      <span className={styles.triggerContent}>{children}</span>\n      {chevronPosition === 'end' && chevronIcon}\n    </button>\n  );\n}\n\n// Content component\nexport interface CollapsibleContentProps {\n  children: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n  /** Force mount content even when closed (useful for animations) */\n  forceMount?: boolean;\n}\n\nfunction CollapsibleContent({\n  children,\n  className,\n  forceMount = false,\n}: CollapsibleContentProps) {\n  const { isOpen, contentId, triggerId } = useCollapsibleContext();\n\n  // If not force mounted and closed, don't render\n  if (!forceMount && !isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      id={contentId}\n      role=\"region\"\n      aria-labelledby={triggerId}\n      className={`${styles.content} ${isOpen ? styles.contentOpen : styles.contentClosed} ${className || ''}`}\n      data-state={isOpen ? 'open' : 'closed'}\n      hidden={!isOpen && !forceMount}\n    >\n      <div className={styles.contentInner}>{children}</div>\n    </div>\n  );\n}\n\n// Compound component export\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n  Root: CollapsibleRoot,\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n});\n\n// Named exports for direct imports\nexport {\n  CollapsibleRoot,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  useCollapsibleContext,\n};\n\nexport type CollapsibleProps = CollapsibleRootProps;\n"],"names":["createContext","useContext","useState","useId","useCallback","jsx","styles","jsxs"],"mappings":"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"}

package/dist/components/Collapsible/index.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+interface CollapsibleContextValue {
+    isOpen: boolean;
+    toggle: () => void;
+    contentId: string;
+    triggerId: string;
+    disabled?: boolean;
+}
+declare function useCollapsibleContext(): CollapsibleContextValue;
+export interface CollapsibleRootProps {
+    children: React.ReactNode;
+    /** Whether the collapsible is initially open */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the collapsible is disabled */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+declare function CollapsibleRoot({ children, defaultOpen, open: controlledOpen, onOpenChange, disabled, className, }: CollapsibleRootProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapsibleTriggerProps {
+    children: React.ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Show chevron indicator */
+    showChevron?: boolean;
+    /** Chevron position */
+    chevronPosition?: 'start' | 'end';
+    /** Render as child element (for custom triggers) */
+    asChild?: boolean;
+}
+declare function CollapsibleTrigger({ children, className, showChevron, chevronPosition, asChild, }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapsibleContentProps {
+    children: React.ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Force mount content even when closed (useful for animations) */
+    forceMount?: boolean;
+}
+declare function CollapsibleContent({ children, className, forceMount, }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const Collapsible: typeof CollapsibleRoot & {
+    Root: typeof CollapsibleRoot;
+    Trigger: typeof CollapsibleTrigger;
+    Content: typeof CollapsibleContent;
+};
+export { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useCollapsibleContext, };
+export type CollapsibleProps = CollapsibleRootProps;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Collapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Collapsible/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAIvF,UAAU,uBAAuB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,iBAAS,qBAAqB,4BAM7B;AAGD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,WAAmB,EACnB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,QAAgB,EAChB,SAAS,GACV,EAAE,oBAAoB,2CA0CtB;AAGD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,WAAkB,EAClB,eAAuB,EACvB,OAAe,GAChB,EAAE,uBAAuB,2CAyDzB;AAGD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAkB,GACnB,EAAE,uBAAuB,kDAoBzB;AAGD,eAAO,MAAM,WAAW;;;;CAItB,CAAC;AAGH,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,GACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC"}