@pharos-ds/core 0.1.9

package/dist/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,213 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file SegmentedControl.tsx
+ * @input Uses React, StyleX, SegmentedControlContext, useListFocus, useKeyboardHint
+ * @output Exports SegmentedControl component and SegmentedControlProps type
+ * @position Container wrapper; provides context to SegmentedControlItem children
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
+ * - /packages/core/src/SegmentedControl/index.ts
+ * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
+ * - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
+ */
+import React, { useMemo, useCallback } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars } from "../theme/tokens.stylex.js";
+import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import { useListFocus } from "../hooks/useListFocus.js";
+import { useKeyboardHint } from "../hooks/useKeyboardHint.js";
+import { useTooltip } from "../Tooltip/index.js";
+import { mergeProps, mergeRefs, composeEventHandlers } from "../utils/index.js";
+import { useSize } from "../SizeContext/SizeContext.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// Styles
+// =============================================================================
+
+const styles = {
+  container: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "x1lsbc85",
+    "--_segmented-control-padding": "x18jk3ff",
+    kmVPX3: "xpoxszi",
+    kWkggS: "x17x4s8c",
+    $$css: true
+  },
+  fill: {
+    k1xSpc: "x78zum5",
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
+  disabled: {
+    kSiTet: "xbyyjgo",
+    kfzvcC: "x47corl",
+    $$css: true
+  },
+  disabledWithMessage: {
+    kSiTet: "xbyyjgo",
+    $$css: true
+  }
+};
+const sizeStyles = {
+  sm: {
+    "--_segmented-control-radius": "x9icjy1",
+    kaIpWk: "x1hapoqb",
+    $$css: true
+  },
+  md: {
+    "--_segmented-control-radius": "x9icjy1",
+    kaIpWk: "x1hapoqb",
+    $$css: true
+  },
+  lg: {
+    "--_segmented-control-radius": "x9icjy1",
+    kaIpWk: "x1hapoqb",
+    $$css: true
+  }
+};
+
+/**
+ * Segmented button group for single selection (radio group semantics).
+ * Visually resembles a tab bar but controls a value, not a view.
+ *
+ * @example
+ * ```
+ * <SegmentedControl value={view} onChange={setView} label="View mode">
+ *   <SegmentedControlItem value="grid" label="Grid" />
+ *   <SegmentedControlItem value="list" label="List" />
+ *   <SegmentedControlItem value="table" label="Table" />
+ * </SegmentedControl>
+ * ```
+ */
+export function SegmentedControl({
+  ref,
+  value,
+  onChange,
+  label,
+  size: sizeProp,
+  layout = 'hug',
+  isDisabled = false,
+  disabledMessage,
+  children,
+  xstyle,
+  className,
+  style,
+  onKeyDown: onKeyDownProp,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  ...rest
+}) {
+  const size = useSize(sizeProp, 'md');
+
+  // Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
+  // controls swallow pointer events, so the tooltip listeners attach to the
+  // radiogroup container (and the container keeps pointer events on in this
+  // mode) while the radios stay perceivable via aria-disabled. Selection is
+  // blocked by the isDisabled guards in the click/focus handlers.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The radiogroup container is not naturally focusable; focusin bubbles up
+    // from the radios, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
+
+  // Roving tabindex + arrow/Home/End navigation is owned by the shared
+  // useListFocus primitive: it stamps a single tab stop (tabIndex 0/-1) across
+  // the radios, skips disabled ones, wraps at the ends, handles Home/End, and
+  // repairs the tab stop on mount and whenever items mount/disable — replacing
+  // the component's former inline keyboard handler and tab-stop repair effect.
+  const {
+    listRef,
+    handleKeyDown,
+    handleFocus
+  } = useListFocus({
+    itemSelector: '[role="radio"]:not([aria-disabled="true"])',
+    hasRovingTabIndex: true,
+    wrap: true,
+    orientation: 'horizontal'
+  });
+  const hint = useKeyboardHint({
+    orientation: 'horizontal',
+    isEnabled: !isDisabled
+  });
+  const handleContainerKeyDown = useCallback(e => {
+    onKeyDownProp?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    hint.onKeyDown(e);
+    handleKeyDown(e);
+  }, [onKeyDownProp, hint, handleKeyDown]);
+
+  // Selection-follows-focus (APG radiogroup): useListFocus only *moves* focus,
+  // so whenever it lands focus on a new radio (arrow/Home/End, or a click) we
+  // select that radio's value. Reading the focused element's data-value here
+  // keeps selection in lockstep with focus without duplicating the navigation
+  // logic. Disabled radios are ignored (they should never become the value),
+  // and the already-selected value is skipped so an initial Tab-in (or a click
+  // on the current segment) is a no-op, matching click behavior.
+  const handleContainerFocus = useCallback(e => {
+    onFocusProp?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    hint.onFocus(e);
+    handleFocus(e);
+    if (isDisabled) {
+      return;
+    }
+    // Only select when focus moved WITHIN the group (arrow/Home/End — APG
+    // selection-follows-focus). When focus is entering from outside, Tab
+    // must stay a pure focus move: with an unmatched or disabled-selected
+    // value the roving tab stop falls back to the first enabled radio, and
+    // selecting it here would rewrite the form value on mere traversal.
+    // Clicks are unaffected: the item's own handleClick selects.
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      return;
+    }
+    const focused = e.target?.closest('[role="radio"][data-value]');
+    if (!focused || focused.getAttribute('aria-disabled') === 'true') {
+      return;
+    }
+    const nextValue = focused.dataset.value;
+    if (nextValue != null && nextValue !== value) {
+      onChange(nextValue);
+    }
+  }, [onFocusProp, hint, handleFocus, isDisabled, onChange, value]);
+  const contextValue = useMemo(() => ({
+    value,
+    onChange,
+    size,
+    layout,
+    isDisabled,
+    hasDisabledMessage: showsDisabledMessage
+  }), [value, onChange, size, layout, isDisabled, showsDisabledMessage]);
+  return /*#__PURE__*/_jsxs(SegmentedControlContext, {
+    value: contextValue,
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: mergeRefs(ref, listRef, disabledMessageTooltip.ref),
+      ...rest,
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-disabled": isDisabled || undefined,
+      "aria-describedby": showsDisabledMessage ? disabledMessageTooltip.describedBy : undefined,
+      onKeyDown: handleContainerKeyDown,
+      onFocus: handleContainerFocus,
+      onBlur: composeEventHandlers(onBlurProp, hint.onBlur),
+      ...mergeProps(themeProps('segmented-control', {
+        size
+      }), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, isDisabled && (showsDisabledMessage ? styles.disabledWithMessage : styles.disabled), xstyle), className, style),
+      children: [children, hint.hintElement]
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+  });
+}
+SegmentedControl.displayName = 'SegmentedControl';

package/dist/SegmentedControl/SegmentedControlContext.d.ts

@@ -0,0 +1,19 @@
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
+export type SegmentedControlLayout = 'hug' | 'fill';
+export interface SegmentedControlContextValue {
+    value: string;
+    onChange: (value: string) => void;
+    size: SegmentedControlSize;
+    layout: SegmentedControlLayout;
+    isDisabled: boolean;
+    /**
+     * True when the whole control is disabled *and* a `disabledMessage` is set.
+     * In that mode the selected segment stays focusable (via `aria-disabled`
+     * rather than being dropped from the tab order) so the group's disabled-reason
+     * tooltip is keyboard-discoverable; selection is still blocked.
+     */
+    hasDisabledMessage?: boolean;
+}
+export declare const SegmentedControlContext: import("react").Context<SegmentedControlContextValue | null>;
+export declare function useSegmentedControlContext(): SegmentedControlContextValue;
+//# sourceMappingURL=SegmentedControlContext.d.ts.map

package/dist/SegmentedControl/SegmentedControlContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlContext.ts"],"names":[],"mappings":"AAeA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,uBAAuB,8DACsB,CAAC;AAG3D,wBAAgB,0BAA0B,IAAI,4BAA4B,CASzE"}

package/dist/SegmentedControl/SegmentedControlContext.js

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file SegmentedControlContext.ts
+ * @input React createContext, use
+ * @output Exports SegmentedControlContext, useSegmentedControlContext
+ * @position Context provider; consumed by SegmentedControlItem.tsx
+ *
+ * SYNC: When modified, update /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
+ */
+import { createContext, use } from 'react';
+export const SegmentedControlContext = /*#__PURE__*/createContext(null);
+SegmentedControlContext.displayName = 'SegmentedControlContext';
+export function useSegmentedControlContext() {
+  const ctx = use(SegmentedControlContext);
+  if (ctx == null) {
+    throw new Error('useSegmentedControlContext must be used within SegmentedControl. ' + 'Wrap your SegmentedControlItem in <SegmentedControl>.');
+  }
+  return ctx;
+}

package/dist/SegmentedControl/SegmentedControlItem.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @file SegmentedControlItem.tsx
+ * @input Uses React, StyleX, SegmentedControlContext
+ * @output Exports SegmentedControlItem component and SegmentedControlItemProps type
+ * @position Child item; renders as a radio button within the segmented control
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
+ * - /packages/core/src/SegmentedControl/index.ts
+ * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
+ * - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
+ */
+import React, { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+export interface SegmentedControlItemProps extends BaseProps<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+    /**
+     * Unique value for this segment. Matched against the parent's value.
+     */
+    value: string;
+    /**
+     * Accessible label for this segment (required for accessibility).
+     * Used as visible text, or as aria-label when isLabelHidden is true.
+     */
+    label: string;
+    /**
+     * Whether the label is visually hidden. When true, only the icon is
+     * displayed and the label is used as aria-label for accessibility.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /**
+     * Icon element displayed before the label.
+     */
+    icon?: ReactNode;
+    /**
+     * Whether this individual item is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+}
+/**
+ * Individual segment item within an SegmentedControl.
+ * Renders as a radio button with visual segment styling.
+ *
+ * @example
+ * ```
+ * <SegmentedControlItem value="grid" label="Grid" icon={<GridIcon />} />
+ * ```
+ */
+export declare function SegmentedControlItem({ ref, value, label, isLabelHidden, icon, isDisabled, onClick: onClickProp, xstyle, ...rest }: SegmentedControlItemProps): React.JSX.Element;
+export declare namespace SegmentedControlItem {
+    var displayName: string;
+}
+//# sourceMappingURL=SegmentedControlItem.d.ts.map

package/dist/SegmentedControl/SegmentedControlItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA6FD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,GAAG,IAAI,EACR,EAAE,yBAAyB,qBAiE3B;yBA3Ee,oBAAoB"}

package/dist/SegmentedControl/SegmentedControlItem.js

@@ -0,0 +1,191 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file SegmentedControlItem.tsx
+ * @input Uses React, StyleX, SegmentedControlContext
+ * @output Exports SegmentedControlItem component and SegmentedControlItemProps type
+ * @position Child item; renders as a radio button within the segmented control
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
+ * - /packages/core/src/SegmentedControl/index.ts
+ * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
+ * - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
+ */
+import React from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, sizeVars, durationVars, easeVars, fontWeightVars, shadowVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { useSegmentedControlContext } from "./SegmentedControlContext.js";
+import { mergeProps, composeEventHandlers } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// Styles
+// =============================================================================
+
+const styles = {
+  base: {
+    kVAEAm: "x1n2onr6",
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kOIVth: "xzye2dw",
+    kg3NbH: "xrrkdod",
+    kWkggS: "xjbqb8w",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kMv6JI: "xjb2p0i",
+    kGuDYH: "xcr08ib",
+    kLWn49: "x1kq96og",
+    k63SB2: "x1e4wzip",
+    kMwMTN: "xv1l7n4",
+    kkrTdU: "x1ypdohk",
+    k1ekBW: "x1vix5yk",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    kI3sdo: "x17nn4n9",
+    kInvED: "x1wfwxd8 x7s97pk",
+    $$css: true
+  },
+  hover: {
+    kWkggS: "xe9uy6x",
+    $$css: true
+  },
+  selected: {
+    kMwMTN: "x1tgivj0",
+    k63SB2: "x2mo6ok",
+    kWkggS: "x10xzikg",
+    kGVxlE: "x1i5ehqx",
+    $$css: true
+  },
+  disabled: {
+    kkrTdU: "xt0e3qv",
+    kMwMTN: "xnbbluu",
+    $$css: true
+  },
+  fill: {
+    kUk6DE: "x98rzlu",
+    kjj79g: "xl56j7k",
+    $$css: true
+  },
+  icon: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmuXW: "x2lah0s",
+    $$css: true
+  }
+};
+const CONCENTRIC_RADIUS = 'max(0px, calc(var(--_segmented-control-radius) - var(--_segmented-control-padding)))';
+const sizeStyles = {
+  sm: {
+    kZKoxP: "xzj98nu",
+    kaIpWk: "xc910v0",
+    kg3NbH: "xf314gf",
+    kGuDYH: "x141an7d",
+    $$css: true
+  },
+  md: {
+    kZKoxP: "x184gfjb",
+    kaIpWk: "xc910v0",
+    kg3NbH: "xrrkdod",
+    $$css: true
+  },
+  lg: {
+    kZKoxP: "x1uiybsj",
+    kaIpWk: "xc910v0",
+    kg3NbH: "xrrkdod",
+    $$css: true
+  }
+};
+const iconSizeStyles = {
+  sm: {
+    kzqmXN: "x6jxa94",
+    kZKoxP: "x1v9usgg",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "x1kky2od",
+    kZKoxP: "xlup9mm",
+    $$css: true
+  },
+  lg: {
+    kzqmXN: "x1xp8n7a",
+    kZKoxP: "xmix8c7",
+    $$css: true
+  }
+};
+
+/**
+ * Individual segment item within an SegmentedControl.
+ * Renders as a radio button with visual segment styling.
+ *
+ * @example
+ * ```
+ * <SegmentedControlItem value="grid" label="Grid" icon={<GridIcon />} />
+ * ```
+ */
+export function SegmentedControlItem({
+  ref,
+  value,
+  label,
+  isLabelHidden = false,
+  icon,
+  isDisabled = false,
+  onClick: onClickProp,
+  xstyle,
+  ...rest
+}) {
+  const ctx = useSegmentedControlContext();
+  const isSelected = ctx.value === value;
+  const isItemDisabled = isDisabled || ctx.isDisabled;
+  // When the whole group is disabled with a disabledMessage, keep the selected
+  // segment focusable so the group's reason tooltip is keyboard-discoverable.
+  // Per-item disabling (`isDisabled` on the item) always drops out of the tab
+  // order. Activation stays blocked by the isItemDisabled guard in handleClick.
+  const keepsSelectedFocusable = isSelected && (ctx.hasDisabledMessage ?? false) && !isDisabled;
+  const size = ctx.size;
+  const isFill = ctx.layout === 'fill';
+
+  // Consumer-first: a consumer onClick can call preventDefault() to opt out of
+  // selection; otherwise selection proceeds when enabled and not selected.
+  const handleClick = composeEventHandlers(onClickProp, () => {
+    if (!isItemDisabled && !isSelected) {
+      ctx.onChange(value);
+    }
+  });
+  const iconElement = icon ? /*#__PURE__*/_jsx("span", {
+    ...stylex.props(styles.icon, iconSizeStyles[size]),
+    children: icon
+  }) : null;
+  return /*#__PURE__*/_jsxs("button", {
+    ref: ref,
+    ...rest,
+    type: "button",
+    role: "radio",
+    "aria-checked": isSelected,
+    "aria-disabled": isItemDisabled || undefined,
+    "aria-label": isLabelHidden ? label : undefined,
+    "data-value": value
+    // Disabled items (including when the whole group is disabled) are not tab
+    // stops — otherwise the selected segment stays keyboard-focusable but is
+    // silently dead (arrows and activation are no-ops) (navigation-13). The
+    // exception is a whole-group disabledMessage, where the selected segment
+    // stays focusable so the reason tooltip is keyboard-discoverable.
+    ,
+    tabIndex: isSelected && !isItemDisabled || keepsSelectedFocusable ? 0 : -1,
+    onClick: handleClick,
+    ...mergeProps(themeProps('segmented-control-item', {
+      size,
+      selected: isSelected ? 'selected' : null,
+      disabled: isItemDisabled ? 'disabled' : null
+    }), stylex.props(styles.base, sizeStyles[size], isFill && styles.fill, isSelected && styles.selected, !isSelected && !isItemDisabled && styles.hover, isItemDisabled && styles.disabled, xstyle)),
+    children: [iconElement, !isLabelHidden && /*#__PURE__*/_jsx("span", {
+      children: label
+    })]
+  });
+}
+SegmentedControlItem.displayName = 'SegmentedControlItem';

package/dist/SegmentedControl/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file index.ts
+ * @input Imports from SegmentedControl component files
+ * @output Exports SegmentedControl, SegmentedControlItem and their types
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
+ */
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps } from './SegmentedControl';
+export { SegmentedControlItem } from './SegmentedControlItem';
+export type { SegmentedControlItemProps } from './SegmentedControlItem';
+export type { SegmentedControlSize, SegmentedControlLayout, } from './SegmentedControlContext';
+//# sourceMappingURL=index.d.ts.map

package/dist/SegmentedControl/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAE9D,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AAEtE,YAAY,EACV,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,2BAA2B,CAAC"}

package/dist/SegmentedControl/index.js

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports from SegmentedControl component files
+ * @output Exports SegmentedControl, SegmentedControlItem and their types
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
+ */
+export { SegmentedControl } from "./SegmentedControl.js";
+export { SegmentedControlItem } from "./SegmentedControlItem.js";

package/dist/SelectableCard/SelectableCard.d.ts

@@ -0,0 +1,108 @@
+/**
+ * @file SelectableCard.tsx
+ * @input Uses Card, useClickableContainer, StyleX
+ * @output Exports SelectableCard component and SelectableCardProps
+ * @position Interactive card for toggle selection
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/SelectableCard/SelectableCard.doc.mjs (props table, features)
+ * - /packages/core/src/SelectableCard/index.ts (exports if types change)
+ * - /apps/storybook/stories/SelectableCard.stories.tsx (storybook stories)
+ * - /packages/cli/templates/blocks/components/Card/SelectableCardShowcase.tsx (showcase block)
+ * - /packages/cli/templates/blocks/components/Card/SelectableCardMulti.tsx (block)
+ * - /packages/cli/templates/blocks/components/Card/SelectableCardElevated.tsx (block)
+ *
+ * Composes Card for all visual styling. Adds selection state with
+ * an inset box-shadow (zero layout jitter) and useClickableContainer
+ * for safe nested interactive elements.
+ *
+ * A hidden <input type="checkbox"> inside the card provides the accessible
+ * role, label, and checked state — the card surface itself has no role/tabIndex.
+ *
+ * For static display, use Card.
+ * For navigation or action cards, use ClickableCard.
+ */
+import { type ReactNode, type Ref } from 'react';
+import type { Elevation, SizeValue, SpacingStep } from '../utils/types';
+import type { CardVariant } from '../Card/Card';
+import type { BaseProps } from '../BaseProps';
+export interface SelectableCardProps extends Omit<BaseProps, 'onChange'> {
+    /** Ref forwarded to the root element. */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Accessibility label for the card.
+     * Used as `aria-label` — provides the accessible name for screen readers.
+     */
+    label: string;
+    /**
+     * Controlled selection state.
+     * When true, the card shows an inset accent border indicating selection.
+     */
+    isSelected: boolean;
+    /**
+     * Selection change handler.
+     * Called with the new selection state when the card is toggled.
+     */
+    onChange: (isSelected: boolean) => void;
+    /**
+     * Set to true to disable the card.
+     * Disabled cards remain focusable (tabIndex 0) with aria-disabled
+     * so screen reader users can discover them.
+     */
+    isDisabled?: boolean;
+    /** Content to render inside the card. */
+    children?: ReactNode;
+    /**
+     * Internal padding of the card using the spacing scale.
+     * @default 4 (16px)
+     */
+    padding?: SpacingStep;
+    /**
+     * Background color variant.
+     * @default 'default'
+     */
+    variant?: CardVariant;
+    /**
+     * Resting elevation — the shadow depth the card sits at.
+     * The selection ring composes on top, so a selected card keeps its shadow.
+     * @default 'none'
+     */
+    elevation?: Elevation;
+    /** Width of the card. */
+    width?: SizeValue;
+    /** Height of the card. */
+    height?: SizeValue;
+    /** Maximum width of the card. */
+    maxWidth?: SizeValue;
+}
+/**
+ * A card that toggles between selected and unselected states.
+ *
+ * Composes Card for visual styling and adds selection state with
+ * an inset box-shadow (zero layout jitter vs plain Card). Supports
+ * hover, pressed, focus, and disabled states.
+ *
+ * A visually-hidden <input type="checkbox"> inside the card provides
+ * the accessible role, label, and checked state. The card surface
+ * is a plain <div> — no role or tabIndex on the container.
+ *
+ * @compositionHint Use for multi-select or single-select card groups.
+ * Manage selection state externally — use a Set for multi-select
+ * or a single value for radio-style selection.
+ * For navigation/action cards, use ClickableCard instead.
+ *
+ * @example
+ * ```
+ * <SelectableCard
+ *   label="Option A"
+ *   isSelected={selected === 'a'}
+ *   onChange={() => setSelected('a')}>
+ *   <Text type="body" weight="bold">Option A</Text>
+ * </SelectableCard>
+ * ```
+ */
+export declare function SelectableCard({ label, isSelected, onChange, onClick: onClickProp, onMouseUp: onMouseUpProp, isDisabled, children, padding, variant, elevation, width, height, maxWidth, ref, xstyle: xstyleProp, className: classNameProp, style, ...props }: SelectableCardProps): import("react").JSX.Element;
+export declare namespace SelectableCard {
+    var displayName: string;
+}
+//# sourceMappingURL=SelectableCard.d.ts.map

package/dist/SelectableCard/SelectableCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableCard.d.ts","sourceRoot":"","sources":["../../src/SelectableCard/SelectableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EACL,KAAK,SAAS,EAId,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkJ5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACtE,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,+BA4ErB;yBA/Fe,cAAc"}