@pharos-ds/core 0.1.9

package/dist/Collapsible/Collapsible.d.ts

@@ -0,0 +1,113 @@
+/**
+ * @file Collapsible.tsx
+ * @input Uses React, StyleX, useCollapsible hook, CollapsibleGroupPresentationContext, getIcon, theme tokens
+ * @output Exports Collapsible component and CollapsibleProps
+ * @position Collapsible content primitive — trigger toggles visibility of children
+ *
+ * Collapsible is a standalone primitive that makes any content collapsible.
+ * It renders a trigger area (always visible) and a content area that toggles.
+ * Handles state management, accessibility (aria-expanded + aria-controls linking
+ * the trigger to its content region), and chevron indicator.
+ *
+ * Works standalone or coordinated by CollapsibleGroup via the `value` prop.
+ * When the surrounding CollapsibleGroup sets `hasDividers`, each Collapsible
+ * draws its own row chrome (borderBlockStart suppressed on :first-child, plus
+ * density padding) from CollapsibleGroupPresentationContext — StyleX has no
+ * child selectors, so the group cannot draw it from outside. The presentation
+ * context is reset around children so nested collapsibles stay chrome-free.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Collapsible/index.ts (exports)
+ * - /packages/core/src/Collapsible/Collapsible.doc.mjs
+ * - /apps/storybook/stories/Collapsible.stories.tsx
+ * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+export interface CollapsibleProps extends BaseProps {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Content shown in the trigger area (always visible).
+     * Rendered inside a button with aria-expanded and a chevron indicator.
+     */
+    trigger: ReactNode;
+    /**
+     * Content that collapses/expands when the trigger is clicked.
+     */
+    children?: ReactNode;
+    /**
+     * Default open state for uncontrolled usage.
+     * @default true
+     */
+    defaultIsOpen?: boolean;
+    /**
+     * Controlled open state. When provided, the component is fully controlled.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the collapsible is disabled. A disabled item can't be toggled —
+     * its trigger is non-interactive and dimmed. Following the system-wide
+     * disabled convention, the trigger uses `aria-disabled` (not the native
+     * `disabled` attribute) and drops out of the tab order, staying perceivable
+     * to assistive tech. The content stays in whatever open state it was;
+     * disabling doesn't collapse an already-open item.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Callback when the open state changes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Unique identifier for this collapsible within an CollapsibleGroup.
+     * Required when using inside a group for coordination.
+     */
+    value?: string;
+    /**
+     * Test ID for the collapsible element.
+     */
+    'data-testid'?: string;
+}
+/**
+ * A primitive that makes any content collapsible.
+ *
+ * Renders a trigger area (always visible) with a chevron indicator,
+ * and a content area that toggles visibility on click.
+ * Handles its own state by default, or defers to CollapsibleGroup
+ * when a `value` prop is provided and a group is present.
+ *
+ * Use inside Card for elevated collapsible sections.
+ * Wrap multiple instances in CollapsibleGroup for accordion behavior.
+ *
+ * @example
+ * ```
+ * <Collapsible trigger="Details">
+ *   <Text type="body">Collapsible content</Text>
+ * </Collapsible>
+ * <Card>
+ *   <Collapsible trigger="Settings">
+ *     <SettingsForm />
+ *   </Collapsible>
+ * </Card>
+ * <CollapsibleGroup type="single" defaultValue="general">
+ *   <VStack gap={2}>
+ *     <Card>
+ *       <Collapsible trigger="General" value="general">
+ *         <GeneralSettings />
+ *       </Collapsible>
+ *     </Card>
+ *     <Card>
+ *       <Collapsible trigger="Advanced" value="advanced">
+ *         <AdvancedSettings />
+ *       </Collapsible>
+ *     </Card>
+ *   </VStack>
+ * </CollapsibleGroup>
+ * ```
+ */
+export declare function Collapsible({ trigger, children, defaultIsOpen, isOpen: controlledIsOpen, isDisabled, onOpenChange, value, ref, xstyle, className, style, ...props }: CollapsibleProps): import("react").JSX.Element;
+export declare namespace Collapsible {
+    var displayName: string;
+}
+//# sourceMappingURL=Collapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuH5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,aAAa,EACb,MAAM,EAAE,gBAAgB,EACxB,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAkGlB;yBA/Ge,WAAW"}

package/dist/Collapsible/Collapsible.js

@@ -0,0 +1,261 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Collapsible.tsx
+ * @input Uses React, StyleX, useCollapsible hook, CollapsibleGroupPresentationContext, getIcon, theme tokens
+ * @output Exports Collapsible component and CollapsibleProps
+ * @position Collapsible content primitive — trigger toggles visibility of children
+ *
+ * Collapsible is a standalone primitive that makes any content collapsible.
+ * It renders a trigger area (always visible) and a content area that toggles.
+ * Handles state management, accessibility (aria-expanded + aria-controls linking
+ * the trigger to its content region), and chevron indicator.
+ *
+ * Works standalone or coordinated by CollapsibleGroup via the `value` prop.
+ * When the surrounding CollapsibleGroup sets `hasDividers`, each Collapsible
+ * draws its own row chrome (borderBlockStart suppressed on :first-child, plus
+ * density padding) from CollapsibleGroupPresentationContext — StyleX has no
+ * child selectors, so the group cannot draw it from outside. The presentation
+ * context is reset around children so nested collapsibles stay chrome-free.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Collapsible/index.ts (exports)
+ * - /packages/core/src/Collapsible/Collapsible.doc.mjs
+ * - /apps/storybook/stories/Collapsible.stories.tsx
+ * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
+ */
+import { use, useId } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { borderVars, colorVars, typographyVars, fontWeightVars, spacingVars, typeScaleVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import { useCollapsible } from "./useCollapsible.js";
+import { CollapsibleGroupPresentationContext } from "./CollapsibleGroupContext.js";
+import { getIcon } from "../Icon/globalIconRegistry.js";
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  root: {
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
+  trigger: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "x1qughib",
+    kzqmXN: "xh8yej3",
+    kkrTdU: "x1ypdohk",
+    kMv6JI: "x9ynric",
+    kGuDYH: "x18juvz8",
+    k63SB2: "x2mo6ok",
+    kMwMTN: "x1tgivj0",
+    k9WMMc: "x1yc453h",
+    k8WAf4: "xt970qd",
+    kI3sdo: "x17nn4n9",
+    kInvED: "x1wfwxd8 x7s97pk",
+    $$css: true
+  },
+  triggerDisabled: {
+    kkrTdU: "x1h6gzvc",
+    kSiTet: "xbyyjgo",
+    $$css: true
+  },
+  contentHidden: {
+    k1xSpc: "x1s85apg",
+    $$css: true
+  },
+  content: {
+    kLKAdn: "xfsso4q",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xjm74w1",
+    k63SB2: "xxovm9e",
+    kLWn49: "xw6l6zx",
+    kMwMTN: "x1tgivj0",
+    $$css: true
+  },
+  divided: {
+    kEafiO: "x11xkdxz x1g31smg",
+    kPef9Z: "x13fuv20",
+    kLZC3w: "x1pc3f07",
+    $$css: true
+  }
+};
+
+// Density padding for divided/padded accordion rows. paddingBlock mapping
+// follows Table's density scale (spacing-1/2/3); content only pads its end
+// so text doesn't sit on the divider below (block-start stays spacing-1).
+const densityStyles = {
+  triggerCompact: {
+    k8WAf4: "xu0wf1k",
+    $$css: true
+  },
+  triggerBalanced: {
+    k8WAf4: "xce4md1",
+    $$css: true
+  },
+  triggerSpacious: {
+    k8WAf4: "x8o8v82",
+    $$css: true
+  },
+  contentCompact: {
+    kGO01o: "xy143xn",
+    $$css: true
+  },
+  contentBalanced: {
+    kGO01o: "x1wesfrj",
+    $$css: true
+  },
+  contentSpacious: {
+    kGO01o: "xvmdzux",
+    $$css: true
+  }
+};
+const triggerDensity = {
+  compact: densityStyles.triggerCompact,
+  balanced: densityStyles.triggerBalanced,
+  spacious: densityStyles.triggerSpacious
+};
+const contentDensity = {
+  compact: densityStyles.contentCompact,
+  balanced: densityStyles.contentBalanced,
+  spacious: densityStyles.contentSpacious
+};
+/**
+ * A primitive that makes any content collapsible.
+ *
+ * Renders a trigger area (always visible) with a chevron indicator,
+ * and a content area that toggles visibility on click.
+ * Handles its own state by default, or defers to CollapsibleGroup
+ * when a `value` prop is provided and a group is present.
+ *
+ * Use inside Card for elevated collapsible sections.
+ * Wrap multiple instances in CollapsibleGroup for accordion behavior.
+ *
+ * @example
+ * ```
+ * <Collapsible trigger="Details">
+ *   <Text type="body">Collapsible content</Text>
+ * </Collapsible>
+ * <Card>
+ *   <Collapsible trigger="Settings">
+ *     <SettingsForm />
+ *   </Collapsible>
+ * </Card>
+ * <CollapsibleGroup type="single" defaultValue="general">
+ *   <VStack gap={2}>
+ *     <Card>
+ *       <Collapsible trigger="General" value="general">
+ *         <GeneralSettings />
+ *       </Collapsible>
+ *     </Card>
+ *     <Card>
+ *       <Collapsible trigger="Advanced" value="advanced">
+ *         <AdvancedSettings />
+ *       </Collapsible>
+ *     </Card>
+ *   </VStack>
+ * </CollapsibleGroup>
+ * ```
+ */
+export function Collapsible({
+  trigger,
+  children,
+  defaultIsOpen,
+  isOpen: controlledIsOpen,
+  isDisabled = false,
+  onOpenChange,
+  value,
+  ref,
+  xstyle,
+  className,
+  style,
+  ...props
+}) {
+  // Build the config for the hook
+  const collapsibleConfig = controlledIsOpen !== undefined ? {
+    isOpen: controlledIsOpen,
+    onOpenChange
+  } : {
+    defaultIsOpen: defaultIsOpen ?? true,
+    onOpenChange
+  };
+  const {
+    isOpen,
+    toggle
+  } = useCollapsible({
+    isCollapsible: collapsibleConfig,
+    value
+  });
+
+  // Activation is blocked by this guard rather than the native `disabled`
+  // attribute, so the trigger keeps `aria-disabled` semantics and stays
+  // discoverable. A native `disabled` button would silently swallow events
+  // (e.g. a wrapping tooltip's hover) — the system-wide disabled convention.
+  const handleToggle = () => {
+    if (isDisabled) {
+      return;
+    }
+    toggle();
+  };
+  const presentation = use(CollapsibleGroupPresentationContext);
+  const isDivided = presentation?.hasDividers ?? false;
+  const density = presentation?.density ?? null;
+  const chevronIcon = getIcon('chevronDown');
+
+  // Links the trigger to the region it shows/hides so assistive tech can move
+  // from the button to its controlled content (disclosure pattern).
+  const contentId = useId();
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
+    ...mergeProps(themeProps('collapsible', {
+      density: density ?? undefined
+    }), stylex.props(styles.root, isDivided && styles.divided, xstyle), className, style),
+    ...props,
+    children: [/*#__PURE__*/_jsxs("button", {
+      type: "button",
+      onClick: handleToggle,
+      "aria-disabled": isDisabled || undefined,
+      "aria-expanded": isOpen,
+      "aria-controls": contentId
+      // A disabled trigger drops out of the tab order so it isn't a silently
+      // dead tab stop; activation stays blocked by the handleToggle guard,
+      // and aria-disabled keeps the state perceivable to assistive tech —
+      // the system-wide disabled convention (never native `disabled`, which
+      // would swallow events like a wrapping tooltip's hover).
+      ,
+      tabIndex: isDisabled ? -1 : undefined,
+      ...mergeProps(themeProps('collapsible-trigger', {
+        density: density ?? undefined
+      }), stylex.props(styles.trigger, density != null && triggerDensity[density], isDisabled && styles.triggerDisabled)),
+      children: [/*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x1b2iylo xwgcxoh"
+        },
+        children: trigger
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x11xpdln xuedmi6 xlr8y92 xv9yike x7p49u4"
+          },
+          1: {
+            className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x11xpdln xuedmi6 xlr8y92 xv9yike x19jd1h0"
+          }
+        }[!!isOpen << 0],
+        children: chevronIcon
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      id: contentId,
+      ...mergeProps(themeProps('collapsible-content', {
+        density: density ?? undefined
+      }), stylex.props(styles.content, density != null && contentDensity[density], !isOpen && styles.contentHidden)),
+      children: presentation != null ? /*#__PURE__*/_jsx(CollapsibleGroupPresentationContext, {
+        value: null,
+        children: children
+      }) : children
+    })]
+  });
+}
+Collapsible.displayName = 'Collapsible';

package/dist/Collapsible/CollapsibleGroup.d.ts

@@ -0,0 +1,132 @@
+/**
+ * @file CollapsibleGroup.tsx
+ * @input Uses React useState, useCallback, CollapsibleGroupContext, StyleX, theme tokens
+ * @output Exports CollapsibleGroup component and CollapsibleGroupProps
+ * @position Core collapsible group coordination provider — renders no wrapper
+ *   DOM unless `hasDividers` is set
+ *
+ * CollapsibleGroup groups collapsible components (Card, etc.) with
+ * coordinated open/close behavior. By default it renders only `{children}` —
+ * no wrapper DOM element. When `hasDividers` is set it renders a wrapper div
+ * that anchors reliable :first-child divider suppression and provides
+ * hasDividers/density to items via CollapsibleGroupPresentationContext — each
+ * Collapsible draws its own borders since StyleX has no child selectors.
+ *
+ * In "single" mode (default), only one item can be open at a time.
+ * In "multiple" mode, any number of items can be open simultaneously.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Collapsible/CollapsibleGroupContext.tsx (context type)
+ * - /packages/core/src/Collapsible/Collapsible.doc.mjs
+ * - /packages/core/src/Collapsible/index.ts (exports)
+ * - /apps/storybook/stories/Collapsible.stories.tsx
+ * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
+ */
+import React, { type ReactNode } from 'react';
+import type { CollapsibleGroupDensity } from './CollapsibleGroupContext';
+import type { BaseProps } from '../BaseProps';
+export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
+    ref?: React.Ref<HTMLElement>;
+    /**
+     * Whether only one item can be open at a time, or multiple.
+     * @default "single"
+     */
+    type?: 'single' | 'multiple';
+    /**
+     * Default open item(s) — uncontrolled mode.
+     * Use a string for single mode, string[] for multiple mode.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Controlled open item(s).
+     * When provided, the group is fully controlled externally.
+     */
+    value?: string | string[];
+    /**
+     * Callback when the open item(s) change.
+     */
+    onChange?: (value: string | string[]) => void;
+    /**
+     * Whether to draw hairline dividers between the group's items — the
+     * accordion row chrome. When set, the group renders a wrapper div (it
+     * otherwise renders no DOM) and items get 'balanced' density unless
+     * `density` says otherwise. Pair with bare Collapsible children; Card-wrapped
+     * items provide their own separation.
+     * @default false
+     */
+    hasDividers?: boolean;
+    /**
+     * Row density controlling trigger and content block padding on the group's
+     * items. Defaults to 'balanced' when dividers are shown; otherwise items
+     * keep their default unpadded look.
+     */
+    density?: CollapsibleGroupDensity;
+    /**
+     * Children — any components that support isCollapsible + value.
+     *
+     * @compositionHint Wrap Collapsible instances (typically inside Card).
+     * Each Collapsible needs a `value` prop to participate in the group.
+     *
+     * @example
+     * ```
+     * <CollapsibleGroup type="single" defaultValue="general">
+     *   <VStack gap={2}>
+     *     <Card>
+     *       <Collapsible trigger="General" value="general">
+     *         <p>General settings content</p>
+     *       </Collapsible>
+     *     </Card>
+     *     <Card>
+     *       <Collapsible trigger="Advanced" value="advanced">
+     *         <p>Advanced settings content</p>
+     *       </Collapsible>
+     *     </Card>
+     *   </VStack>
+     * </CollapsibleGroup>
+     * ```
+     */
+    children: ReactNode;
+}
+/**
+ * Groups collapsible components with coordinated open/close behavior.
+ * Renders no wrapper DOM unless `hasDividers` is set.
+ *
+ * In "single" mode (default), opening one item closes the others.
+ * In "multiple" mode, items toggle independently.
+ *
+ * @compositionHint Wrap Collapsible instances to coordinate their open/close state.
+ * Each Collapsible needs a `value` prop to participate. For FAQ-style lists,
+ * use `hasDividers` with bare Collapsible children instead of wrapping each
+ * item in Card.
+ *
+ * @example
+ * ```
+ * <CollapsibleGroup type="single" hasDividers defaultValue="faq1">
+ *   <Collapsible trigger="What is Pharos?" value="faq1">
+ *     Pharos is a design system for building internal tools.
+ *   </Collapsible>
+ *   <Collapsible trigger="How do I start?" value="faq2">
+ *     Install the package and import components.
+ *   </Collapsible>
+ * </CollapsibleGroup>
+ * <CollapsibleGroup type="single" defaultValue="faq1">
+ *   <VStack gap={2}>
+ *     <Card>
+ *       <Collapsible trigger="What is Pharos?" value="faq1">
+ *         Pharos is a design system for building internal tools.
+ *       </Collapsible>
+ *     </Card>
+ *     <Card>
+ *       <Collapsible trigger="How do I start?" value="faq2">
+ *         Install the package and import components.
+ *       </Collapsible>
+ *     </Card>
+ *   </VStack>
+ * </CollapsibleGroup>
+ * ```
+ */
+export declare function CollapsibleGroup({ type, defaultValue, value: controlledValue, onChange, hasDividers, density, children, ref, xstyle, className, style, ...props }: CollapsibleGroupProps): React.JSX.Element;
+export declare namespace CollapsibleGroup {
+    var displayName: string;
+}
+//# sourceMappingURL=CollapsibleGroup.d.ts.map

package/dist/Collapsible/CollapsibleGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleGroup.d.ts","sourceRoot":"","sources":["../../src/Collapsible/CollapsibleGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5E,OAAO,KAAK,EAEV,uBAAuB,EAExB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAE9C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAElC;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAe,EACf,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,WAAmB,EACnB,OAAO,EACP,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAsFvB;yBAnGe,gBAAgB"}

package/dist/Collapsible/CollapsibleGroup.js

@@ -0,0 +1,156 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file CollapsibleGroup.tsx
+ * @input Uses React useState, useCallback, CollapsibleGroupContext, StyleX, theme tokens
+ * @output Exports CollapsibleGroup component and CollapsibleGroupProps
+ * @position Core collapsible group coordination provider — renders no wrapper
+ *   DOM unless `hasDividers` is set
+ *
+ * CollapsibleGroup groups collapsible components (Card, etc.) with
+ * coordinated open/close behavior. By default it renders only `{children}` —
+ * no wrapper DOM element. When `hasDividers` is set it renders a wrapper div
+ * that anchors reliable :first-child divider suppression and provides
+ * hasDividers/density to items via CollapsibleGroupPresentationContext — each
+ * Collapsible draws its own borders since StyleX has no child selectors.
+ *
+ * In "single" mode (default), only one item can be open at a time.
+ * In "multiple" mode, any number of items can be open simultaneously.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Collapsible/CollapsibleGroupContext.tsx (context type)
+ * - /packages/core/src/Collapsible/Collapsible.doc.mjs
+ * - /packages/core/src/Collapsible/index.ts (exports)
+ * - /apps/storybook/stories/Collapsible.stories.tsx
+ * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
+ */
+import React, { useCallback, useMemo, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { CollapsibleGroupContext, CollapsibleGroupPresentationContext } from "./CollapsibleGroupContext.js";
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  wrapper: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    $$css: true
+  }
+};
+function normalizeToArray(value) {
+  if (value == null) {
+    return [];
+  }
+  return Array.isArray(value) ? value : [value];
+}
+
+/**
+ * Groups collapsible components with coordinated open/close behavior.
+ * Renders no wrapper DOM unless `hasDividers` is set.
+ *
+ * In "single" mode (default), opening one item closes the others.
+ * In "multiple" mode, items toggle independently.
+ *
+ * @compositionHint Wrap Collapsible instances to coordinate their open/close state.
+ * Each Collapsible needs a `value` prop to participate. For FAQ-style lists,
+ * use `hasDividers` with bare Collapsible children instead of wrapping each
+ * item in Card.
+ *
+ * @example
+ * ```
+ * <CollapsibleGroup type="single" hasDividers defaultValue="faq1">
+ *   <Collapsible trigger="What is Pharos?" value="faq1">
+ *     Pharos is a design system for building internal tools.
+ *   </Collapsible>
+ *   <Collapsible trigger="How do I start?" value="faq2">
+ *     Install the package and import components.
+ *   </Collapsible>
+ * </CollapsibleGroup>
+ * <CollapsibleGroup type="single" defaultValue="faq1">
+ *   <VStack gap={2}>
+ *     <Card>
+ *       <Collapsible trigger="What is Pharos?" value="faq1">
+ *         Pharos is a design system for building internal tools.
+ *       </Collapsible>
+ *     </Card>
+ *     <Card>
+ *       <Collapsible trigger="How do I start?" value="faq2">
+ *         Install the package and import components.
+ *       </Collapsible>
+ *     </Card>
+ *   </VStack>
+ * </CollapsibleGroup>
+ * ```
+ */
+export function CollapsibleGroup({
+  type = 'single',
+  defaultValue,
+  value: controlledValue,
+  onChange,
+  hasDividers = false,
+  density,
+  children,
+  ref,
+  xstyle,
+  className,
+  style,
+  ...props
+}) {
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = useState(() => normalizeToArray(defaultValue));
+  const openValues = isControlled ? normalizeToArray(controlledValue) : internalValue;
+  const isOpen = useCallback(itemValue => openValues.includes(itemValue), [openValues]);
+  const toggle = useCallback(itemValue => {
+    let nextValues;
+    if (type === 'single') {
+      // In single mode, toggling an open item closes it; toggling a closed item opens it (and closes others)
+      nextValues = openValues.includes(itemValue) ? [] : [itemValue];
+    } else {
+      // In multiple mode, toggle the item independently
+      nextValues = openValues.includes(itemValue) ? openValues.filter(v => v !== itemValue) : [...openValues, itemValue];
+    }
+    if (!isControlled) {
+      setInternalValue(nextValues);
+    }
+    if (onChange) {
+      // Return the value in the same shape as the type suggests
+      if (type === 'single') {
+        onChange(nextValues[0] ?? '');
+      } else {
+        onChange(nextValues);
+      }
+    }
+  }, [type, openValues, isControlled, onChange]);
+  const contextValue = useMemo(() => ({
+    isOpen,
+    toggle
+  }), [isOpen, toggle]);
+  const resolvedDensity = density ?? (hasDividers ? 'balanced' : null);
+  const presentationValue = useMemo(() => ({
+    hasDividers,
+    density: resolvedDensity
+  }), [hasDividers, resolvedDensity]);
+
+  // The wrapper anchors divider chrome: it makes the items' :first-child
+  // suppression independent of surrounding siblings. Without dividers the
+  // group stays DOM-less (documented contract), so ref/xstyle/className/style
+  // only take effect in wrapper mode.
+  const content = hasDividers ? /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    ...mergeProps(themeProps('collapsible-group', {
+      density: resolvedDensity ?? undefined
+    }), stylex.props(styles.wrapper, xstyle), className, style),
+    ...props,
+    children: children
+  }) : children;
+  return /*#__PURE__*/_jsx(CollapsibleGroupContext, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(CollapsibleGroupPresentationContext, {
+      value: presentationValue,
+      children: content
+    })
+  });
+}
+CollapsibleGroup.displayName = 'CollapsibleGroup';