@astryxdesign/core 0.0.0-bootstrap.0 → 0.0.15

package/dist/Layout/LayoutHeader.js

@@ -0,0 +1,119 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file LayoutHeader.tsx
+ * @input Uses React StyleX
+ * @output Exports LayoutHeader component and LayoutHeaderProps
+ * @position Top bar / header area for Layout. Use for page titles, app bars,
+ *   toolbar areas, or any fixed-height content at the top of a layout.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Layout/Layout.doc.mjs
+ * - /apps/storybook/stories/Layout.stories.tsx
+ * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ */
+import { use } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { LayoutDividerContext } from "./LayoutDividerContext.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
+import { mergeProps } from "../utils/index.js";
+import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  header: {
+    kmuXW: "x2lah0s",
+    $$css: true
+  },
+  inner: {
+    kB7OPa: "x9f619",
+    ks0D6T: "xjl2t3p",
+    kUOVxO: "xvueqy4",
+    kZCmMZ: "x139j0dd",
+    kwRFfy: "xpc6k2p",
+    kLKAdn: "x81pis9",
+    kGO01o: "xg476vw",
+    "--container-padding-inline-start": "xdvaxxn",
+    "--container-padding-inline-end": "xqpvj4r",
+    "--container-padding-block-start": "xzz8v79",
+    "--container-padding-block-end": "xi9ns85",
+    $$css: true
+  },
+  fullBleed: {
+    kZCmMZ: "x1c1uobl",
+    kwRFfy: "xyri2b",
+    kLKAdn: "xexx8yu",
+    kGO01o: "x18d9i69",
+    "--container-padding-inline-start": "xrhngw9",
+    "--container-padding-inline-end": "xjsfl84",
+    "--container-padding-block-start": "x1047aw6",
+    "--container-padding-block-end": "xax9j7h",
+    $$css: true
+  },
+  divider: {
+    kt9PQ7: "xso031l",
+    kfdmCh: "x1q0q8m5",
+    kL6WhQ: "xw8gpjh",
+    $$css: true
+  }
+};
+
+// Dynamic styles for sizing props
+const dynamicStyles = {
+  sizing: height => [{
+    kZKoxP: height != null ? "x16ye13r" : height,
+    $$css: true
+  }, {
+    "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(height)
+  }]
+};
+/**
+ * Top bar / header for Layout. Use for page titles, app bars, or toolbars.
+ * Renders in the header slot with optional divider and padding control.
+ *
+ * Already provides its own padding — don't add padding to children.
+ * Use `padding={0}` if your content manages its own padding (e.g. TopNav).
+ *
+ * @example
+ * ```
+ * <LayoutContainer variant="card">
+ *   <Layout
+ *     header={<LayoutHeader hasDivider>Page Title</LayoutHeader>}
+ *     content={<LayoutContent>...</LayoutContent>}
+ *   />
+ * </LayoutContainer>
+ * ```
+ */
+export function LayoutHeader({
+  children,
+  hasDivider,
+  height,
+  label,
+  padding,
+  role,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...props
+}) {
+  const dividerCtx = use(LayoutDividerContext);
+  const resolvedHasDivider = hasDivider ?? dividerCtx?.defaultHasDividers ?? false;
+  const isZeroPadding = padding === 0;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    role: role,
+    "aria-label": label,
+    "data-divider": resolvedHasDivider || undefined,
+    ...mergeProps(xdsThemeProps('layout-header'), stylex.props(styles.header, dynamicStyles.sizing(height ?? null), resolvedHasDivider && styles.divider, xstyle), className, style),
+    ...props,
+    children: /*#__PURE__*/_jsx("div", {
+      ...stylex.props(styles.inner, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding]),
+      children: children
+    })
+  });
+}
+LayoutHeader.displayName = 'LayoutHeader';

package/dist/Layout/LayoutPanel.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @file LayoutPanel.tsx
+ * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext
+ * @output Exports LayoutPanel component and LayoutPanelProps
+ * @position Sidebar panel for Layout start/end slots. Use for navigation panels,
+ *   settings sidebars, detail panels, or any fixed-width side content.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Layout/Layout.doc.mjs
+ * - /apps/storybook/stories/Layout.stories.tsx
+ * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ */
+import type { AriaRole, ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+import type { SpacingStep } from '../utils/types';
+import type { ResizableProps } from '../Resizable/useResizable';
+export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Content to render inside the panel.
+     */
+    children?: ReactNode;
+    /**
+     * Adds a themed border on the appropriate edge.
+     * - Start panel: border on end edge (right in LTR)
+     * - End panel: border on start edge (left in LTR)
+     * When false, spacing collapse is applied automatically for seamless visual flow.
+     *
+     * Note: When using `resizable` with an adjacent `ResizeHandle hasDivider`,
+     * set this to `false` to avoid a double-line artifact.
+     * @default false
+     */
+    hasDivider?: boolean;
+    /**
+     * Internal padding of the panel using the spacing scale.
+     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+     * Overrides the default padding from the layout container.
+     */
+    padding?: SpacingStep;
+    /**
+     * Enables scrollable overflow for the panel.
+     * Set to false for auto-height layouts where sticky positioning
+     * needs to work with parent containers.
+     * @default true
+     */
+    isScrollable?: boolean;
+    /**
+     * Accessible label for the landmark.
+     * Required when role is set and multiple landmarks of the same type exist.
+     */
+    label?: string;
+    /**
+     * ARIA landmark role for accessibility.
+     * Use 'navigation' or 'complementary' only for top-level layouts (not nested).
+     */
+    role?: AriaRole;
+    /**
+     * Width of the panel.
+     * Numbers are treated as pixels, strings are used as-is.
+     * When `resizable` is provided, this is ignored — the hook controls width.
+     */
+    width?: number | string;
+    /**
+     * Resize props from `useResizable()`. When provided, the panel width
+     * is driven by the hook and a resize handle should be placed adjacent
+     * to this panel.
+     *
+     * @example
+     * ```
+     * const sidebar = useResizable({ defaultSize: 250, minSizePx: 200 });
+     * <LayoutPanel resizable={sidebar.props}>
+     *   <Navigation />
+     * </LayoutPanel>
+     * <ResizeHandle resizable={sidebar.props} />
+     * ```
+     */
+    resizable?: ResizableProps;
+}
+/**
+ * Sidebar or side panel for Layout. Use in the `start` slot for left navigation
+ * or in the `end` slot for detail/inspector panels.
+ * Renders with optional divider and context-aware padding.
+ * Divider position is auto-detected based on which slot the panel is in.
+ *
+ * Already provides its own padding and scroll — don't add padding or
+ * overflow to children. Use `padding={0}` if you need edge-to-edge content.
+ *
+ * @example
+ * ```
+ * <LayoutContainer variant="card">
+ *   <Layout
+ *     start={
+ *       <LayoutPanel hasDivider role="navigation">
+ *         <Navigation />
+ *       </LayoutPanel>
+ *     }
+ *     content={<LayoutContent>Main content</LayoutContent>}
+ *     end={
+ *       <LayoutPanel hasDivider role="complementary">
+ *         <Sidebar />
+ *       </LayoutPanel>
+ *     }
+ *   />
+ * </LayoutContainer>
+ * ```
+ */
+export declare function LayoutPanel({ children, hasDivider, isScrollable, label, padding, role, width, resizable, xstyle, className, style, ref, ...props }: LayoutPanelProps): import("react").JSX.Element;
+export declare namespace LayoutPanel {
+    var displayName: string;
+}
+//# sourceMappingURL=LayoutPanel.d.ts.map

package/dist/Layout/LayoutPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutPanel.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAmF9D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,UAAkB,EAClB,YAAmB,EACnB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAkElB;yBAhFe,WAAW"}

package/dist/Layout/LayoutPanel.js

@@ -0,0 +1,180 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file LayoutPanel.tsx
+ * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext
+ * @output Exports LayoutPanel component and LayoutPanelProps
+ * @position Sidebar panel for Layout start/end slots. Use for navigation panels,
+ *   settings sidebars, detail panels, or any fixed-width side content.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Layout/Layout.doc.mjs
+ * - /apps/storybook/stories/Layout.stories.tsx
+ * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ */
+import { use } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
+import { LayoutAreaContext } from "./LayoutAreaContext.js";
+import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
+import { mergeProps } from "../utils/index.js";
+import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  panel: {
+    kB7OPa: "x9f619",
+    kmuXW: "x2lah0s",
+    kVQacm: "x7giv3",
+    kZCmMZ: "xwjyata",
+    kwRFfy: "x1peupej",
+    kLKAdn: "xqty4a",
+    kGO01o: "xg476vw",
+    "--container-padding-inline-start": "x408pgh",
+    "--container-padding-inline-end": "xikqloz",
+    "--container-padding-block-start": "xjmgx01",
+    "--container-padding-block-end": "xi9ns85",
+    $$css: true
+  },
+  startPanel: {
+    kZCmMZ: "x139j0dd",
+    $$css: true
+  },
+  endPanel: {
+    kwRFfy: "xpc6k2p",
+    $$css: true
+  },
+  noHeader: {
+    kLKAdn: "x81pis9",
+    $$css: true
+  },
+  noFooter: {
+    kGO01o: "xon7vh3",
+    $$css: true
+  },
+  fullBleed: {
+    kZCmMZ: "x1c1uobl",
+    kwRFfy: "xyri2b",
+    kLKAdn: "xexx8yu",
+    kGO01o: "x18d9i69",
+    "--container-padding-inline-start": "xrhngw9",
+    "--container-padding-inline-end": "xjsfl84",
+    "--container-padding-block-start": "x1047aw6",
+    "--container-padding-block-end": "xax9j7h",
+    $$css: true
+  },
+  scrollable: {
+    kVQacm: "xysyzu8",
+    $$css: true
+  },
+  dividerEnd: {
+    ke9TFa: "x1lun4ml",
+    k8ry5P: "x18b5jzi",
+    kBCPoo: "x1gejf6u",
+    $$css: true
+  },
+  dividerStart: {
+    k2ei4v: "xpilrb4",
+    kVhnKS: "x1t7ytsu",
+    kGJrpR: "x1j92z86",
+    $$css: true
+  },
+  collapseStart: {
+    keTefX: "x1wim8z0",
+    $$css: true
+  },
+  collapseEnd: {
+    k71WvV: "x1kpg4um",
+    $$css: true
+  }
+};
+
+// Dynamic styles for sizing props
+const dynamicStyles = {
+  sizing: width => [{
+    kzqmXN: width != null ? "x5lhr3w" : width,
+    $$css: true
+  }, {
+    "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
+  }]
+};
+/**
+ * Sidebar or side panel for Layout. Use in the `start` slot for left navigation
+ * or in the `end` slot for detail/inspector panels.
+ * Renders with optional divider and context-aware padding.
+ * Divider position is auto-detected based on which slot the panel is in.
+ *
+ * Already provides its own padding and scroll — don't add padding or
+ * overflow to children. Use `padding={0}` if you need edge-to-edge content.
+ *
+ * @example
+ * ```
+ * <LayoutContainer variant="card">
+ *   <Layout
+ *     start={
+ *       <LayoutPanel hasDivider role="navigation">
+ *         <Navigation />
+ *       </LayoutPanel>
+ *     }
+ *     content={<LayoutContent>Main content</LayoutContent>}
+ *     end={
+ *       <LayoutPanel hasDivider role="complementary">
+ *         <Sidebar />
+ *       </LayoutPanel>
+ *     }
+ *   />
+ * </LayoutContainer>
+ * ```
+ */
+export function LayoutPanel({
+  children,
+  hasDivider = false,
+  isScrollable = true,
+  label,
+  padding,
+  role,
+  width,
+  resizable,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...props
+}) {
+  const area = use(LayoutAreaContext);
+  const {
+    hasHeader,
+    hasFooter
+  } = use(LayoutSlotsContext);
+
+  // When resizable props are provided, use the hook-driven size
+  const effectiveWidth = resizable ? resizable._size : width;
+
+  // Determine panel position
+  const isStartPanel = area === 'start';
+  const isEndPanel = area === 'end';
+  const isZeroPadding = padding === 0;
+
+  // When no divider, collapse spacing for seamless visual flow
+  const shouldCollapseSpacing = !hasDivider && !isZeroPadding && padding == null;
+
+  // Select divider style based on position
+  const dividerStyle = isStartPanel ? styles.dividerEnd : isEndPanel ? styles.dividerStart : null;
+
+  // Select collapse style based on position (collapse the side where divider would be)
+  const collapseStyle = isStartPanel ? styles.collapseEnd : isEndPanel ? styles.collapseStart : null;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    role: role,
+    "aria-label": label,
+    ...mergeProps(xdsThemeProps('layout-panel'), stylex.props(styles.panel, dynamicStyles.sizing(effectiveWidth ?? null),
+    // Outer padding on container edges (unless component is full bleed)
+    isStartPanel && !isZeroPadding && padding == null && styles.startPanel, isEndPanel && !isZeroPadding && padding == null && styles.endPanel, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], hasDivider && dividerStyle, shouldCollapseSpacing && collapseStyle, xstyle), className, style),
+    ...props,
+    children: children
+  });
+}
+LayoutPanel.displayName = 'LayoutPanel';

package/dist/Layout/LayoutSlotsContext.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Information about which layout slots are filled.
+ * Used by content area components to determine their edge positions
+ * and apply appropriate outer padding.
+ */
+export interface LayoutSlots {
+    /** Whether a header is rendered */
+    hasHeader: boolean;
+    /** Whether a footer is rendered */
+    hasFooter: boolean;
+    /** Whether a start panel is rendered */
+    hasStart: boolean;
+    /** Whether an end panel is rendered */
+    hasEnd: boolean;
+}
+/**
+ * Context for layout slot information.
+ * Content area components use this to determine if they are at an edge
+ * (for applying outer padding).
+ */
+export declare const LayoutSlotsContext: import("react").Context<LayoutSlots>;
+//# sourceMappingURL=LayoutSlotsContext.d.ts.map

package/dist/Layout/LayoutSlotsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutSlotsContext.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutSlotsContext.ts"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,MAAM,EAAE,OAAO,CAAC;CACjB;AAYD;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,sCAA2C,CAAC"}

package/dist/Layout/LayoutSlotsContext.js

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file LayoutSlotsContext.ts
+ * @input Uses React createContext
+ * @output Exports LayoutSlotsContext and LayoutSlots type
+ * @position Context for layout slot information
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Layout/Layout.doc.mjs
+ * - /packages/core/src/Layout/Layout/index.ts
+ */
+import { createContext } from 'react';
+
+/**
+ * Information about which layout slots are filled.
+ * Used by content area components to determine their edge positions
+ * and apply appropriate outer padding.
+ */
+
+/**
+ * Default slot state - no slots filled.
+ */
+const defaultSlots = {
+  hasHeader: false,
+  hasFooter: false,
+  hasStart: false,
+  hasEnd: false
+};
+
+/**
+ * Context for layout slot information.
+ * Content area components use this to determine if they are at an edge
+ * (for applying outer padding).
+ */
+export const LayoutSlotsContext = /*#__PURE__*/createContext(defaultSlots);
+LayoutSlotsContext.displayName = 'LayoutSlotsContext';