@brycks/core-front 0.2.7 → 0.2.9

package/dist/components/layout/Card/Card.js

@@ -0,0 +1,135 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { cx as b } from "../../../utils/styles.js";
+const k = {
+  none: 0,
+  sm: 12,
+  md: 16,
+  lg: 24,
+  xl: 32
+}, g = y(function({
+  variant: r = "elevated",
+  padding: s = "md",
+  interactive: e = !1,
+  selected: a = !1,
+  className: t,
+  style: d,
+  children: n,
+  testId: u,
+  ...p
+}, m) {
+  const f = {
+    ...(() => {
+      const o = {
+        borderRadius: "var(--brycks-radius-lg)",
+        transition: "transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out"
+      };
+      switch (r) {
+        case "elevated":
+          return {
+            ...o,
+            backgroundColor: "var(--brycks-background-elevated)",
+            boxShadow: a ? "0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)" : "var(--brycks-shadow-md)",
+            border: "1px solid var(--brycks-border-subtle)"
+          };
+        case "outline":
+          return {
+            ...o,
+            backgroundColor: "var(--brycks-background-default)",
+            border: a ? "2px solid var(--brycks-primary-default)" : "1px solid var(--brycks-border-default)"
+          };
+        case "filled":
+          return {
+            ...o,
+            backgroundColor: "var(--brycks-background-muted)",
+            border: a ? "2px solid var(--brycks-primary-default)" : "1px solid transparent"
+          };
+        case "ghost":
+          return {
+            ...o,
+            backgroundColor: "transparent",
+            border: a ? "2px solid var(--brycks-primary-default)" : "1px solid transparent"
+          };
+      }
+    })(),
+    padding: k[s],
+    display: "flex",
+    flexDirection: "column",
+    cursor: e ? "pointer" : void 0,
+    ...d
+  };
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: m,
+      className: b(
+        "brycks-card",
+        `brycks-card--${r}`,
+        e && "brycks-card--interactive",
+        a && "brycks-card--selected",
+        t
+      ),
+      style: f,
+      "data-testid": u,
+      onMouseEnter: e ? (o) => {
+        const l = o.currentTarget;
+        r === "elevated" ? (l.style.boxShadow = a ? "0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)" : "var(--brycks-shadow-lg)", l.style.transform = "translateY(-2px)") : r !== "ghost" && (l.style.borderColor = "var(--brycks-border-strong)");
+      } : void 0,
+      onMouseLeave: e ? (o) => {
+        const l = o.currentTarget;
+        r === "elevated" ? (l.style.boxShadow = a ? "0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)" : "var(--brycks-shadow-md)", l.style.transform = "translateY(0)") : r !== "ghost" && (l.style.borderColor = a ? "var(--brycks-primary-default)" : "var(--brycks-border-default)");
+      } : void 0,
+      ...p,
+      children: n
+    }
+  );
+});
+g.displayName = "Card";
+const x = y(function({ divider: r = !1, className: s, style: e, children: a, ...t }, d) {
+  const n = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    paddingBottom: r ? 16 : 0,
+    marginBottom: r ? 16 : 12,
+    borderBottom: r ? "1px solid var(--brycks-border-muted)" : void 0,
+    ...e
+  };
+  return /* @__PURE__ */ c("div", { ref: d, className: b("brycks-card-header", s), style: n, ...t, children: a });
+});
+x.displayName = "CardHeader";
+const v = y(function({ className: r, style: s, children: e, ...a }, t) {
+  const d = {
+    flex: 1,
+    ...s
+  };
+  return /* @__PURE__ */ c("div", { ref: t, className: b("brycks-card-body", r), style: d, ...a, children: e });
+});
+v.displayName = "CardBody";
+const C = y(function({ divider: r = !1, align: s = "right", className: e, style: a, children: t, ...d }, n) {
+  const p = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: {
+      left: "flex-start",
+      center: "center",
+      right: "flex-end",
+      between: "space-between"
+    }[s],
+    gap: 12,
+    paddingTop: r ? 16 : 0,
+    marginTop: r ? 16 : 12,
+    borderTop: r ? "1px solid var(--brycks-border-muted)" : void 0,
+    ...a
+  };
+  return /* @__PURE__ */ c("div", { ref: n, className: b("brycks-card-footer", e), style: p, ...d, children: t });
+});
+C.displayName = "CardFooter";
+export {
+  g as Card,
+  v as CardBody,
+  C as CardFooter,
+  x as CardHeader
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/layout/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":["/**\n * Card Component\n *\n * A flexible card container with optional header, footer, and body sections.\n * Supports different variants and padding sizes.\n */\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost'\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card variant */\n  variant?: CardVariant\n  /** Card padding */\n  padding?: CardPadding\n  /** Whether the card is interactive (adds hover effect) */\n  interactive?: boolean\n  /** Whether the card is selected */\n  selected?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider below the header */\n  divider?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider above the footer */\n  divider?: boolean\n  /** Footer alignment */\n  align?: 'left' | 'center' | 'right' | 'between'\n  /** Custom class name */\n  className?: string\n}\n\nconst paddingMap: Record<CardPadding, number> = {\n  none: 0,\n  sm: 12,\n  md: 16,\n  lg: 24,\n  xl: 32,\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    variant = 'elevated',\n    padding = 'md',\n    interactive = false,\n    selected = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const getVariantStyles = (): CSSProperties => {\n    const base: CSSProperties = {\n      borderRadius: 'var(--brycks-radius-lg)',\n      transition: 'transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out',\n    }\n\n    switch (variant) {\n      case 'elevated':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-elevated)',\n          boxShadow: selected\n            ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)'\n            : 'var(--brycks-shadow-md)',\n          border: '1px solid var(--brycks-border-subtle)',\n        }\n      case 'outline':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-default)',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid var(--brycks-border-default)',\n        }\n      case 'filled':\n        return {\n          ...base,\n          backgroundColor: 'var(--brycks-background-muted)',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid transparent',\n        }\n      case 'ghost':\n        return {\n          ...base,\n          backgroundColor: 'transparent',\n          border: selected\n            ? '2px solid var(--brycks-primary-default)'\n            : '1px solid transparent',\n        }\n    }\n  }\n\n  const cardStyle: CSSProperties = {\n    ...getVariantStyles(),\n    padding: paddingMap[padding],\n    display: 'flex',\n    flexDirection: 'column',\n    cursor: interactive ? 'pointer' : undefined,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card',\n        `brycks-card--${variant}`,\n        interactive && 'brycks-card--interactive',\n        selected && 'brycks-card--selected',\n        className\n      )}\n      style={cardStyle}\n      data-testid={testId}\n      onMouseEnter={\n        interactive\n          ? (e) => {\n              const target = e.currentTarget\n              if (variant === 'elevated') {\n                target.style.boxShadow = selected\n                  ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)'\n                  : 'var(--brycks-shadow-lg)'\n                target.style.transform = 'translateY(-2px)'\n              } else if (variant !== 'ghost') {\n                target.style.borderColor = 'var(--brycks-border-strong)'\n              }\n            }\n          : undefined\n      }\n      onMouseLeave={\n        interactive\n          ? (e) => {\n              const target = e.currentTarget\n              if (variant === 'elevated') {\n                target.style.boxShadow = selected\n                  ? '0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)'\n                  : 'var(--brycks-shadow-md)'\n                target.style.transform = 'translateY(0)'\n              } else if (variant !== 'ghost') {\n                target.style.borderColor = selected\n                  ? 'var(--brycks-primary-default)'\n                  : 'var(--brycks-border-default)'\n              }\n            }\n          : undefined\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCard.displayName = 'Card'\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { divider = false, className, style, children, ...props },\n  ref\n) {\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 12,\n    paddingBottom: divider ? 16 : 0,\n    marginBottom: divider ? 16 : 12,\n    borderBottom: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-header', className)} style={headerStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardHeader.displayName = 'CardHeader'\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(function CardBody(\n  { className, style, children, ...props },\n  ref\n) {\n  const bodyStyle: CSSProperties = {\n    flex: 1,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-body', className)} style={bodyStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardBody.displayName = 'CardBody'\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { divider = false, align = 'right', className, style, children, ...props },\n  ref\n) {\n  const alignMap: Record<string, CSSProperties['justifyContent']> = {\n    left: 'flex-start',\n    center: 'center',\n    right: 'flex-end',\n    between: 'space-between',\n  }\n\n  const footerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: alignMap[align],\n    gap: 12,\n    paddingTop: divider ? 16 : 0,\n    marginTop: divider ? 16 : 12,\n    borderTop: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-card-footer', className)} style={footerStyle} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardFooter.displayName = 'CardFooter'\n"],"names":["paddingMap","Card","forwardRef","variant","padding","interactive","selected","className","style","children","testId","props","ref","cardStyle","base","jsx","cx","e","target","CardHeader","divider","headerStyle","CardBody","bodyStyle","CardFooter","align","footerStyle"],"mappings":"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"}

package/dist/components/layout/Container/Container.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),y=require("react"),o=require("../../../utils/styles.cjs"),p=require("../../../design-system/tokens/breakpoints.cjs"),f=["m","mx","my","mt","mr","mb","ml","p","px","py","pt","pr","pb","pl","size","centered","padded","testId"];function b(e){const n={...e};for(const s of f)delete n[s];return n}function g(e){const n=o.buildSpacingStyles(e),s=e.size??"xl",r=p.containers[s],t={...n,width:"100%",maxWidth:typeof r=="number"?`${r}px`:r};return e.centered!==!1&&(t.marginLeft="auto",t.marginRight="auto"),e.padded!==!1&&(t.paddingLeft="var(--brycks-space-4)",t.paddingRight="var(--brycks-space-4)"),t}const x=({as:e,className:n,style:s,children:r,testId:t,...i},c)=>{const d=e||"div",l=g(i),u=b(i);return m.jsx(d,{ref:c,className:o.cx("brycks-container",n),style:{...l,...s},"data-testid":t,...u,children:r})},a=y.forwardRef(x);a.displayName="Container";exports.Container=a;
+//# sourceMappingURL=Container.cjs.map

package/dist/components/layout/Container/Container.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.cjs","sources":["../../../../src/components/layout/Container/Container.tsx"],"sourcesContent":["/**\r\n * Container Component\r\n *\r\n * A responsive container that centers content and provides consistent max-widths.\r\n * All values derive from design system - NO hardcoded values.\r\n *\r\n * @module components/layout/Container\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport type { SpacingProps } from '../../../types/common'\r\nimport { containers } from '../../../design-system'\r\nimport { buildSpacingStyles, cx } from '../../../utils/styles'\r\n\r\nexport interface ContainerOwnProps extends SpacingProps {\r\n  /** The element type to render */\r\n  as?: ElementType\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Container size / max-width */\r\n  size?: keyof typeof containers\r\n  /** Whether to center the container */\r\n  centered?: boolean\r\n  /** Whether to add default horizontal padding */\r\n  padded?: boolean\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type ContainerProps<E extends ElementType = 'div'> = ContainerOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof ContainerOwnProps>\r\n\r\ninterface ContainerComponent {\r\n  <E extends ElementType = 'div'>(\r\n    props: ContainerProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\nconst containerOwnPropKeys: (keyof ContainerOwnProps)[] = [\r\n  'm',\r\n  'mx',\r\n  'my',\r\n  'mt',\r\n  'mr',\r\n  'mb',\r\n  'ml',\r\n  'p',\r\n  'px',\r\n  'py',\r\n  'pt',\r\n  'pr',\r\n  'pb',\r\n  'pl',\r\n  'size',\r\n  'centered',\r\n  'padded',\r\n  'testId',\r\n]\r\n\r\nfunction omitContainerProps<P extends Record<string, unknown>>(\r\n  props: P\r\n): Omit<P, (typeof containerOwnPropKeys)[number]> {\r\n  const result = { ...props }\r\n  for (const key of containerOwnPropKeys) {\r\n    delete result[key]\r\n  }\r\n  return result\r\n}\r\n\r\nfunction buildContainerStyles(props: ContainerOwnProps): CSSProperties {\r\n  const spacingStyles = buildSpacingStyles(props)\r\n\r\n  const size = props.size ?? 'xl'\r\n  const maxWidth = containers[size]\r\n\r\n  const styles: CSSProperties = {\r\n    ...spacingStyles,\r\n    width: '100%',\r\n    maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\r\n  }\r\n\r\n  if (props.centered !== false) {\r\n    styles.marginLeft = 'auto'\r\n    styles.marginRight = 'auto'\r\n  }\r\n\r\n  if (props.padded !== false) {\r\n    styles.paddingLeft = 'var(--brycks-space-4)'\r\n    styles.paddingRight = 'var(--brycks-space-4)'\r\n  }\r\n\r\n  return styles\r\n}\r\n\r\nconst ContainerInner = <E extends ElementType = 'div'>(\r\n  { as, className, style, children, testId, ...props }: ContainerProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || 'div'\r\n  const containerStyles = buildContainerStyles(props as ContainerOwnProps)\r\n  const filteredProps = omitContainerProps(props)\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-container', className)}\r\n      style={{ ...containerStyles, ...style }}\r\n      data-testid={testId}\r\n      {...filteredProps}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Container = forwardRef(ContainerInner) as ContainerComponent\r\n\r\nContainer.displayName = 'Container'\r\n"],"names":["containerOwnPropKeys","omitContainerProps","props","result","key","buildContainerStyles","spacingStyles","buildSpacingStyles","size","maxWidth","containers","styles","ContainerInner","as","className","style","children","testId","ref","Component","containerStyles","filteredProps","jsx","cx","Container","forwardRef"],"mappings":"0OAkDMA,EAAoD,CACxD,IACA,KACA,KACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,KACA,KACA,OACA,WACA,SACA,QACF,EAEA,SAASC,EACPC,EACgD,CAChD,MAAMC,EAAS,CAAE,GAAGD,CAAA,EACpB,UAAWE,KAAOJ,EAChB,OAAOG,EAAOC,CAAG,EAEnB,OAAOD,CACT,CAEA,SAASE,EAAqBH,EAAyC,CACrE,MAAMI,EAAgBC,EAAAA,mBAAmBL,CAAK,EAExCM,EAAON,EAAM,MAAQ,KACrBO,EAAWC,EAAAA,WAAWF,CAAI,EAE1BG,EAAwB,CAC5B,GAAGL,EACH,MAAO,OACP,SAAU,OAAOG,GAAa,SAAW,GAAGA,CAAQ,KAAOA,CAAA,EAG7D,OAAIP,EAAM,WAAa,KACrBS,EAAO,WAAa,OACpBA,EAAO,YAAc,QAGnBT,EAAM,SAAW,KACnBS,EAAO,YAAc,wBACrBA,EAAO,aAAe,yBAGjBA,CACT,CAEA,MAAMC,EAAiB,CACrB,CAAE,GAAAC,EAAI,UAAAC,EAAW,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,GAAGf,CAAA,EAC7CgB,IACG,CACH,MAAMC,EAAYN,GAAM,MAClBO,EAAkBf,EAAqBH,CAA0B,EACjEmB,EAAgBpB,EAAmBC,CAAK,EAE9C,OACEoB,EAAAA,IAACH,EAAA,CACC,IAAAD,EACA,UAAWK,EAAAA,GAAG,mBAAoBT,CAAS,EAC3C,MAAO,CAAE,GAAGM,EAAiB,GAAGL,CAAA,EAChC,cAAaE,EACZ,GAAGI,EAEH,SAAAL,CAAA,CAAA,CAGP,EAEaQ,EAAYC,EAAAA,WAAWb,CAAc,EAElDY,EAAU,YAAc"}

package/dist/components/layout/Container/Container.js

@@ -0,0 +1,57 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { cx as f, buildSpacingStyles as l } from "../../../utils/styles.js";
+import { containers as y } from "../../../design-system/tokens/breakpoints.js";
+const u = [
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "size",
+  "centered",
+  "padded",
+  "testId"
+];
+function x(t) {
+  const n = { ...t };
+  for (const r of u)
+    delete n[r];
+  return n;
+}
+function b(t) {
+  const n = l(t), r = t.size ?? "xl", o = y[r], e = {
+    ...n,
+    width: "100%",
+    maxWidth: typeof o == "number" ? `${o}px` : o
+  };
+  return t.centered !== !1 && (e.marginLeft = "auto", e.marginRight = "auto"), t.padded !== !1 && (e.paddingLeft = "var(--brycks-space-4)", e.paddingRight = "var(--brycks-space-4)"), e;
+}
+const g = ({ as: t, className: n, style: r, children: o, testId: e, ...i }, s) => {
+  const a = t || "div", c = b(i), d = x(i);
+  return /* @__PURE__ */ m(
+    a,
+    {
+      ref: s,
+      className: f("brycks-container", n),
+      style: { ...c, ...r },
+      "data-testid": e,
+      ...d,
+      children: o
+    }
+  );
+}, C = p(g);
+C.displayName = "Container";
+export {
+  C as Container
+};
+//# sourceMappingURL=Container.js.map

package/dist/components/layout/Container/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../../../src/components/layout/Container/Container.tsx"],"sourcesContent":["/**\r\n * Container Component\r\n *\r\n * A responsive container that centers content and provides consistent max-widths.\r\n * All values derive from design system - NO hardcoded values.\r\n *\r\n * @module components/layout/Container\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport type { SpacingProps } from '../../../types/common'\r\nimport { containers } from '../../../design-system'\r\nimport { buildSpacingStyles, cx } from '../../../utils/styles'\r\n\r\nexport interface ContainerOwnProps extends SpacingProps {\r\n  /** The element type to render */\r\n  as?: ElementType\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Container size / max-width */\r\n  size?: keyof typeof containers\r\n  /** Whether to center the container */\r\n  centered?: boolean\r\n  /** Whether to add default horizontal padding */\r\n  padded?: boolean\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type ContainerProps<E extends ElementType = 'div'> = ContainerOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof ContainerOwnProps>\r\n\r\ninterface ContainerComponent {\r\n  <E extends ElementType = 'div'>(\r\n    props: ContainerProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\nconst containerOwnPropKeys: (keyof ContainerOwnProps)[] = [\r\n  'm',\r\n  'mx',\r\n  'my',\r\n  'mt',\r\n  'mr',\r\n  'mb',\r\n  'ml',\r\n  'p',\r\n  'px',\r\n  'py',\r\n  'pt',\r\n  'pr',\r\n  'pb',\r\n  'pl',\r\n  'size',\r\n  'centered',\r\n  'padded',\r\n  'testId',\r\n]\r\n\r\nfunction omitContainerProps<P extends Record<string, unknown>>(\r\n  props: P\r\n): Omit<P, (typeof containerOwnPropKeys)[number]> {\r\n  const result = { ...props }\r\n  for (const key of containerOwnPropKeys) {\r\n    delete result[key]\r\n  }\r\n  return result\r\n}\r\n\r\nfunction buildContainerStyles(props: ContainerOwnProps): CSSProperties {\r\n  const spacingStyles = buildSpacingStyles(props)\r\n\r\n  const size = props.size ?? 'xl'\r\n  const maxWidth = containers[size]\r\n\r\n  const styles: CSSProperties = {\r\n    ...spacingStyles,\r\n    width: '100%',\r\n    maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\r\n  }\r\n\r\n  if (props.centered !== false) {\r\n    styles.marginLeft = 'auto'\r\n    styles.marginRight = 'auto'\r\n  }\r\n\r\n  if (props.padded !== false) {\r\n    styles.paddingLeft = 'var(--brycks-space-4)'\r\n    styles.paddingRight = 'var(--brycks-space-4)'\r\n  }\r\n\r\n  return styles\r\n}\r\n\r\nconst ContainerInner = <E extends ElementType = 'div'>(\r\n  { as, className, style, children, testId, ...props }: ContainerProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || 'div'\r\n  const containerStyles = buildContainerStyles(props as ContainerOwnProps)\r\n  const filteredProps = omitContainerProps(props)\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-container', className)}\r\n      style={{ ...containerStyles, ...style }}\r\n      data-testid={testId}\r\n      {...filteredProps}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Container = forwardRef(ContainerInner) as ContainerComponent\r\n\r\nContainer.displayName = 'Container'\r\n"],"names":["containerOwnPropKeys","omitContainerProps","props","result","key","buildContainerStyles","spacingStyles","buildSpacingStyles","size","maxWidth","containers","styles","ContainerInner","as","className","style","children","testId","ref","Component","containerStyles","filteredProps","jsx","cx","Container","forwardRef"],"mappings":";;;;AAkDA,MAAMA,IAAoD;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAASC,EACPC,GACgD;AAChD,QAAMC,IAAS,EAAE,GAAGD,EAAA;AACpB,aAAWE,KAAOJ;AAChB,WAAOG,EAAOC,CAAG;AAEnB,SAAOD;AACT;AAEA,SAASE,EAAqBH,GAAyC;AACrE,QAAMI,IAAgBC,EAAmBL,CAAK,GAExCM,IAAON,EAAM,QAAQ,MACrBO,IAAWC,EAAWF,CAAI,GAE1BG,IAAwB;AAAA,IAC5B,GAAGL;AAAA,IACH,OAAO;AAAA,IACP,UAAU,OAAOG,KAAa,WAAW,GAAGA,CAAQ,OAAOA;AAAA,EAAA;AAG7D,SAAIP,EAAM,aAAa,OACrBS,EAAO,aAAa,QACpBA,EAAO,cAAc,SAGnBT,EAAM,WAAW,OACnBS,EAAO,cAAc,yBACrBA,EAAO,eAAe,0BAGjBA;AACT;AAEA,MAAMC,IAAiB,CACrB,EAAE,IAAAC,GAAI,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,GAAGf,EAAA,GAC7CgB,MACG;AACH,QAAMC,IAAYN,KAAM,OAClBO,IAAkBf,EAAqBH,CAA0B,GACjEmB,IAAgBpB,EAAmBC,CAAK;AAE9C,SACE,gBAAAoB;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWK,EAAG,oBAAoBT,CAAS;AAAA,MAC3C,OAAO,EAAE,GAAGM,GAAiB,GAAGL,EAAA;AAAA,MAChC,eAAaE;AAAA,MACZ,GAAGI;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaQ,IAAYC,EAAWb,CAAc;AAElDY,EAAU,cAAc;"}

package/dist/components/layout/Flex/Flex.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),p=require("react"),u=require("../../../utils/styles.cjs"),d=require("../../../design-system/tokens/spacing.cjs"),q={start:"flex-start",end:"flex-end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly"},m={start:"flex-start",end:"flex-end",center:"center",baseline:"baseline",stretch:"stretch"},g=p.forwardRef(function({direction:l="row",wrap:a="nowrap",justify:r="start",align:e="stretch",gap:t,rowGap:s,columnGap:n,inline:i=!1,grow:c,shrink:x,basis:o,children:f,className:F,style:S,testId:j,...v},h){const I=t?{gap:d.spacing[t]}:{...s?{rowGap:d.spacing[s]}:{},...n?{columnGap:d.spacing[n]}:{}},k={display:i?"inline-flex":"flex",flexDirection:l,flexWrap:a,justifyContent:q[r],alignItems:m[e],...I,flexGrow:c,flexShrink:x,flexBasis:o,...S};return y.jsx("div",{ref:h,className:u.cx("brycks-flex",F),style:k,"data-testid":j,...v,children:f})});g.displayName="Flex";const b=p.forwardRef(function({grow:l,shrink:a,basis:r,alignSelf:e,order:t,children:s,className:n,style:i,testId:c,...x},o){const f={flexGrow:l,flexShrink:a,flexBasis:r,alignSelf:e?m[e]:void 0,order:t,...i};return y.jsx("div",{ref:o,className:u.cx("brycks-flex-item",n),style:f,"data-testid":c,...x,children:s})});b.displayName="FlexItem";exports.Flex=g;exports.FlexItem=b;
+//# sourceMappingURL=Flex.cjs.map

package/dist/components/layout/Flex/Flex.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.cjs","sources":["../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":["/**\n * Flex Component\n *\n * A flexible flexbox container with comprehensive flex properties.\n * Provides a more explicit API than Stack for complex flex layouts.\n */\n\nimport { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing as spacingTokens } from '../../../design-system/tokens/spacing'\n\ntype SpacingKey = keyof typeof spacingTokens\n\ntype FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'\ntype FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'\ntype FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'\ntype FlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch'\n\nexport interface FlexProps extends HTMLAttributes<HTMLDivElement> {\n  /** Flex direction */\n  direction?: FlexDirection\n  /** Flex wrap */\n  wrap?: FlexWrap\n  /** Justify content */\n  justify?: FlexJustify\n  /** Align items */\n  align?: FlexAlign\n  /** Gap between items */\n  gap?: SpacingKey\n  /** Row gap */\n  rowGap?: SpacingKey\n  /** Column gap */\n  columnGap?: SpacingKey\n  /** Whether to display inline */\n  inline?: boolean\n  /** Flex grow */\n  grow?: number\n  /** Flex shrink */\n  shrink?: number\n  /** Flex basis */\n  basis?: string | number\n  /** Children */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Custom styles */\n  style?: CSSProperties\n  /** Test ID */\n  testId?: string\n}\n\nconst justifyMap: Record<FlexJustify, CSSProperties['justifyContent']> = {\n  start: 'flex-start',\n  end: 'flex-end',\n  center: 'center',\n  between: 'space-between',\n  around: 'space-around',\n  evenly: 'space-evenly',\n}\n\nconst alignMap: Record<FlexAlign, CSSProperties['alignItems']> = {\n  start: 'flex-start',\n  end: 'flex-end',\n  center: 'center',\n  baseline: 'baseline',\n  stretch: 'stretch',\n}\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(\n  {\n    direction = 'row',\n    wrap = 'nowrap',\n    justify = 'start',\n    align = 'stretch',\n    gap,\n    rowGap,\n    columnGap,\n    inline = false,\n    grow,\n    shrink,\n    basis,\n    children,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  // Build gap styles - use shorthand OR longhand, never both to avoid React warnings\n  const gapStyles: CSSProperties = gap\n    ? { gap: spacingTokens[gap] }\n    : {\n        ...(rowGap ? { rowGap: spacingTokens[rowGap] } : {}),\n        ...(columnGap ? { columnGap: spacingTokens[columnGap] } : {}),\n      }\n\n  const flexStyle: CSSProperties = {\n    display: inline ? 'inline-flex' : 'flex',\n    flexDirection: direction,\n    flexWrap: wrap,\n    justifyContent: justifyMap[justify],\n    alignItems: alignMap[align],\n    ...gapStyles,\n    flexGrow: grow,\n    flexShrink: shrink,\n    flexBasis: basis,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-flex', className)}\n      style={flexStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nFlex.displayName = 'Flex'\n\n// FlexItem for individual flex children\nexport interface FlexItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** Flex grow */\n  grow?: number\n  /** Flex shrink */\n  shrink?: number\n  /** Flex basis */\n  basis?: string | number\n  /** Align self */\n  alignSelf?: FlexAlign\n  /** Order */\n  order?: number\n  /** Children */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Custom styles */\n  style?: CSSProperties\n  /** Test ID */\n  testId?: string\n}\n\nexport const FlexItem = forwardRef<HTMLDivElement, FlexItemProps>(function FlexItem(\n  {\n    grow,\n    shrink,\n    basis,\n    alignSelf,\n    order,\n    children,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const itemStyle: CSSProperties = {\n    flexGrow: grow,\n    flexShrink: shrink,\n    flexBasis: basis,\n    alignSelf: alignSelf ? alignMap[alignSelf] : undefined,\n    order,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-flex-item', className)}\n      style={itemStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nFlexItem.displayName = 'FlexItem'\n"],"names":["justifyMap","alignMap","Flex","forwardRef","direction","wrap","justify","align","gap","rowGap","columnGap","inline","grow","shrink","basis","children","className","style","testId","props","ref","gapStyles","spacingTokens","flexStyle","jsx","cx","FlexItem","alignSelf","order","itemStyle"],"mappings":"sOAmDMA,EAAmE,CACvE,MAAO,aACP,IAAK,WACL,OAAQ,SACR,QAAS,gBACT,OAAQ,eACR,OAAQ,cACV,EAEMC,EAA2D,CAC/D,MAAO,aACP,IAAK,WACL,OAAQ,SACR,SAAU,WACV,QAAS,SACX,EAEaC,EAAOC,EAAAA,WAAsC,SACxD,CACE,UAAAC,EAAY,MACZ,KAAAC,EAAO,SACP,QAAAC,EAAU,QACV,MAAAC,EAAQ,UACR,IAAAC,EACA,OAAAC,EACA,UAAAC,EACA,OAAAC,EAAS,GACT,KAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CAEA,MAAMC,EAA2Bb,EAC7B,CAAE,IAAKc,EAAAA,QAAcd,CAAG,GACxB,CACE,GAAIC,EAAS,CAAE,OAAQa,EAAAA,QAAcb,CAAM,CAAA,EAAM,CAAA,EACjD,GAAIC,EAAY,CAAE,UAAWY,EAAAA,QAAcZ,CAAS,CAAA,EAAM,CAAA,CAAC,EAG3Da,EAA2B,CAC/B,QAASZ,EAAS,cAAgB,OAClC,cAAeP,EACf,SAAUC,EACV,eAAgBL,EAAWM,CAAO,EAClC,WAAYL,EAASM,CAAK,EAC1B,GAAGc,EACH,SAAUT,EACV,WAAYC,EACZ,UAAWC,EACX,GAAGG,CAAA,EAGL,OACEO,EAAAA,IAAC,MAAA,CACC,IAAAJ,EACA,UAAWK,EAAAA,GAAG,cAAeT,CAAS,EACtC,MAAOO,EACP,cAAaL,EACZ,GAAGC,EAEH,SAAAJ,CAAA,CAAA,CAGP,CAAC,EAEDb,EAAK,YAAc,OAwBZ,MAAMwB,EAAWvB,EAAAA,WAA0C,SAChE,CACE,KAAAS,EACA,OAAAC,EACA,MAAAC,EACA,UAAAa,EACA,MAAAC,EACA,SAAAb,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMS,EAA2B,CAC/B,SAAUjB,EACV,WAAYC,EACZ,UAAWC,EACX,UAAWa,EAAY1B,EAAS0B,CAAS,EAAI,OAC7C,MAAAC,EACA,GAAGX,CAAA,EAGL,OACEO,EAAAA,IAAC,MAAA,CACC,IAAAJ,EACA,UAAWK,EAAAA,GAAG,mBAAoBT,CAAS,EAC3C,MAAOa,EACP,cAAaX,EACZ,GAAGC,EAEH,SAAAJ,CAAA,CAAA,CAGP,CAAC,EAEDW,EAAS,YAAc"}

package/dist/components/layout/Flex/Flex.js

@@ -0,0 +1,101 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { cx as y } from "../../../utils/styles.js";
+import { spacing as m } from "../../../design-system/tokens/spacing.js";
+const I = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+}, u = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  baseline: "baseline",
+  stretch: "stretch"
+}, N = p(function({
+  direction: n = "row",
+  wrap: r = "nowrap",
+  justify: a = "start",
+  align: e = "stretch",
+  gap: t,
+  rowGap: s,
+  columnGap: l,
+  inline: i = !1,
+  grow: f,
+  shrink: o,
+  basis: c,
+  children: x,
+  className: b,
+  style: F,
+  testId: h,
+  ...v
+}, S) {
+  const g = t ? { gap: m[t] } : {
+    ...s ? { rowGap: m[s] } : {},
+    ...l ? { columnGap: m[l] } : {}
+  }, k = {
+    display: i ? "inline-flex" : "flex",
+    flexDirection: n,
+    flexWrap: r,
+    justifyContent: I[a],
+    alignItems: u[e],
+    ...g,
+    flexGrow: f,
+    flexShrink: o,
+    flexBasis: c,
+    ...F
+  };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: S,
+      className: y("brycks-flex", b),
+      style: k,
+      "data-testid": h,
+      ...v,
+      children: x
+    }
+  );
+});
+N.displayName = "Flex";
+const j = p(function({
+  grow: n,
+  shrink: r,
+  basis: a,
+  alignSelf: e,
+  order: t,
+  children: s,
+  className: l,
+  style: i,
+  testId: f,
+  ...o
+}, c) {
+  const x = {
+    flexGrow: n,
+    flexShrink: r,
+    flexBasis: a,
+    alignSelf: e ? u[e] : void 0,
+    order: t,
+    ...i
+  };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: c,
+      className: y("brycks-flex-item", l),
+      style: x,
+      "data-testid": f,
+      ...o,
+      children: s
+    }
+  );
+});
+j.displayName = "FlexItem";
+export {
+  N as Flex,
+  j as FlexItem
+};
+//# sourceMappingURL=Flex.js.map

package/dist/components/layout/Flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":["/**\n * Flex Component\n *\n * A flexible flexbox container with comprehensive flex properties.\n * Provides a more explicit API than Stack for complex flex layouts.\n */\n\nimport { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing as spacingTokens } from '../../../design-system/tokens/spacing'\n\ntype SpacingKey = keyof typeof spacingTokens\n\ntype FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'\ntype FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'\ntype FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'\ntype FlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch'\n\nexport interface FlexProps extends HTMLAttributes<HTMLDivElement> {\n  /** Flex direction */\n  direction?: FlexDirection\n  /** Flex wrap */\n  wrap?: FlexWrap\n  /** Justify content */\n  justify?: FlexJustify\n  /** Align items */\n  align?: FlexAlign\n  /** Gap between items */\n  gap?: SpacingKey\n  /** Row gap */\n  rowGap?: SpacingKey\n  /** Column gap */\n  columnGap?: SpacingKey\n  /** Whether to display inline */\n  inline?: boolean\n  /** Flex grow */\n  grow?: number\n  /** Flex shrink */\n  shrink?: number\n  /** Flex basis */\n  basis?: string | number\n  /** Children */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Custom styles */\n  style?: CSSProperties\n  /** Test ID */\n  testId?: string\n}\n\nconst justifyMap: Record<FlexJustify, CSSProperties['justifyContent']> = {\n  start: 'flex-start',\n  end: 'flex-end',\n  center: 'center',\n  between: 'space-between',\n  around: 'space-around',\n  evenly: 'space-evenly',\n}\n\nconst alignMap: Record<FlexAlign, CSSProperties['alignItems']> = {\n  start: 'flex-start',\n  end: 'flex-end',\n  center: 'center',\n  baseline: 'baseline',\n  stretch: 'stretch',\n}\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(\n  {\n    direction = 'row',\n    wrap = 'nowrap',\n    justify = 'start',\n    align = 'stretch',\n    gap,\n    rowGap,\n    columnGap,\n    inline = false,\n    grow,\n    shrink,\n    basis,\n    children,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  // Build gap styles - use shorthand OR longhand, never both to avoid React warnings\n  const gapStyles: CSSProperties = gap\n    ? { gap: spacingTokens[gap] }\n    : {\n        ...(rowGap ? { rowGap: spacingTokens[rowGap] } : {}),\n        ...(columnGap ? { columnGap: spacingTokens[columnGap] } : {}),\n      }\n\n  const flexStyle: CSSProperties = {\n    display: inline ? 'inline-flex' : 'flex',\n    flexDirection: direction,\n    flexWrap: wrap,\n    justifyContent: justifyMap[justify],\n    alignItems: alignMap[align],\n    ...gapStyles,\n    flexGrow: grow,\n    flexShrink: shrink,\n    flexBasis: basis,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-flex', className)}\n      style={flexStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nFlex.displayName = 'Flex'\n\n// FlexItem for individual flex children\nexport interface FlexItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** Flex grow */\n  grow?: number\n  /** Flex shrink */\n  shrink?: number\n  /** Flex basis */\n  basis?: string | number\n  /** Align self */\n  alignSelf?: FlexAlign\n  /** Order */\n  order?: number\n  /** Children */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Custom styles */\n  style?: CSSProperties\n  /** Test ID */\n  testId?: string\n}\n\nexport const FlexItem = forwardRef<HTMLDivElement, FlexItemProps>(function FlexItem(\n  {\n    grow,\n    shrink,\n    basis,\n    alignSelf,\n    order,\n    children,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const itemStyle: CSSProperties = {\n    flexGrow: grow,\n    flexShrink: shrink,\n    flexBasis: basis,\n    alignSelf: alignSelf ? alignMap[alignSelf] : undefined,\n    order,\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-flex-item', className)}\n      style={itemStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nFlexItem.displayName = 'FlexItem'\n"],"names":["justifyMap","alignMap","Flex","forwardRef","direction","wrap","justify","align","gap","rowGap","columnGap","inline","grow","shrink","basis","children","className","style","testId","props","ref","gapStyles","spacingTokens","flexStyle","jsx","cx","FlexItem","alignSelf","order","itemStyle"],"mappings":";;;;AAmDA,MAAMA,IAAmE;AAAA,EACvE,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV,GAEMC,IAA2D;AAAA,EAC/D,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACX,GAEaC,IAAOC,EAAsC,SACxD;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAEA,QAAMC,IAA2Bb,IAC7B,EAAE,KAAKc,EAAcd,CAAG,MACxB;AAAA,IACE,GAAIC,IAAS,EAAE,QAAQa,EAAcb,CAAM,EAAA,IAAM,CAAA;AAAA,IACjD,GAAIC,IAAY,EAAE,WAAWY,EAAcZ,CAAS,EAAA,IAAM,CAAA;AAAA,EAAC,GAG3Da,IAA2B;AAAA,IAC/B,SAASZ,IAAS,gBAAgB;AAAA,IAClC,eAAeP;AAAA,IACf,UAAUC;AAAA,IACV,gBAAgBL,EAAWM,CAAO;AAAA,IAClC,YAAYL,EAASM,CAAK;AAAA,IAC1B,GAAGc;AAAA,IACH,UAAUT;AAAA,IACV,YAAYC;AAAA,IACZ,WAAWC;AAAA,IACX,GAAGG;AAAA,EAAA;AAGL,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWK,EAAG,eAAeT,CAAS;AAAA,MACtC,OAAOO;AAAA,MACP,eAAaL;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDb,EAAK,cAAc;AAwBZ,MAAMwB,IAAWvB,EAA0C,SAChE;AAAA,EACE,MAAAS;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAa;AAAA,EACA,OAAAC;AAAA,EACA,UAAAb;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMS,IAA2B;AAAA,IAC/B,UAAUjB;AAAA,IACV,YAAYC;AAAA,IACZ,WAAWC;AAAA,IACX,WAAWa,IAAY1B,EAAS0B,CAAS,IAAI;AAAA,IAC7C,OAAAC;AAAA,IACA,GAAGX;AAAA,EAAA;AAGL,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWK,EAAG,oBAAoBT,CAAS;AAAA,MAC3C,OAAOa;AAAA,MACP,eAAaX;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDW,EAAS,cAAc;"}

package/dist/components/layout/Grid/Grid.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),c=require("react"),l=require("../../../utils/styles.cjs"),R=["m","mx","my","mt","mr","mb","ml","p","px","py","pt","pr","pb","pl","columns","rows","gap","gapX","gapY","align","justify","templateColumns","templateRows","flow","inline","testId"];function b(i){const t={...i};for(const e of R)delete t[e];return t}function I(i){const e={...l.buildSpacingStyles(i),display:i.inline?"inline-grid":"grid"};return i.columns!==void 0&&(e.gridTemplateColumns=typeof i.columns=="number"?`repeat(${i.columns}, 1fr)`:i.columns),i.rows!==void 0&&(e.gridTemplateRows=typeof i.rows=="number"?`repeat(${i.rows}, 1fr)`:i.rows),i.templateColumns&&(e.gridTemplateColumns=i.templateColumns),i.templateRows&&(e.gridTemplateRows=i.templateRows),i.gap!==void 0?e.gap=l.spacingToCss(i.gap):(i.gapX!==void 0&&(e.columnGap=l.spacingToCss(i.gapX)),i.gapY!==void 0&&(e.rowGap=l.spacingToCss(i.gapY))),i.align&&(e.alignItems=i.align),i.justify&&(e.justifyItems=i.justify),i.flow&&(e.gridAutoFlow=i.flow),e}const j=({as:i,className:t,style:e,children:r,testId:g,...s},d)=>{const a=i||"div",o=I(s),m=b(s);return u.jsx(a,{ref:d,className:l.cx("brycks-grid",t),style:{...o,...e},"data-testid":g,...m,children:r})},y=c.forwardRef(j);y.displayName="Grid";const T=({as:i,className:t,style:e,children:r,testId:g,colSpan:s,rowSpan:d,colStart:a,colEnd:o,rowStart:m,rowEnd:f,...v},C)=>{const G=i||"div",n={};return s!==void 0&&(n.gridColumn=s==="full"?"1 / -1":`span ${s}`),d!==void 0&&(n.gridRow=`span ${d}`),a!==void 0&&(n.gridColumnStart=a),o!==void 0&&(n.gridColumnEnd=o),m!==void 0&&(n.gridRowStart=m),f!==void 0&&(n.gridRowEnd=f),u.jsx(G,{ref:C,className:l.cx("brycks-grid-item",t),style:{...n,...e},"data-testid":g,...v,children:r})},w=c.forwardRef(T);w.displayName="GridItem";exports.Grid=y;exports.GridItem=w;
+//# sourceMappingURL=Grid.cjs.map

package/dist/components/layout/Grid/Grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.cjs","sources":["../../../../src/components/layout/Grid/Grid.tsx"],"sourcesContent":["/**\r\n * Grid Component\r\n *\r\n * A CSS Grid layout component for creating responsive grid layouts.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport type { SpacingProps } from '../../../types/common'\r\nimport type { SpacingKey } from '../../../design-system/tokens/spacing'\r\nimport { buildSpacingStyles, spacingToCss, cx } from '../../../utils/styles'\r\n\r\nexport interface GridOwnProps extends SpacingProps {\r\n  /** The element type to render */\r\n  as?: ElementType\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Number of columns */\r\n  columns?: number | string\r\n  /** Number of rows */\r\n  rows?: number | string\r\n  /** Gap between items */\r\n  gap?: SpacingKey\r\n  /** Column gap */\r\n  gapX?: SpacingKey\r\n  /** Row gap */\r\n  gapY?: SpacingKey\r\n  /** Align items */\r\n  align?: CSSProperties['alignItems']\r\n  /** Justify items */\r\n  justify?: CSSProperties['justifyItems']\r\n  /** Template columns (CSS value) */\r\n  templateColumns?: string\r\n  /** Template rows (CSS value) */\r\n  templateRows?: string\r\n  /** Auto flow */\r\n  flow?: CSSProperties['gridAutoFlow']\r\n  /** Whether to render as inline-grid */\r\n  inline?: boolean\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type GridProps<E extends ElementType = 'div'> = GridOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof GridOwnProps>\r\n\r\ninterface GridComponent {\r\n  <E extends ElementType = 'div'>(\r\n    props: GridProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\nconst gridOwnPropKeys: (keyof GridOwnProps)[] = [\r\n  'm',\r\n  'mx',\r\n  'my',\r\n  'mt',\r\n  'mr',\r\n  'mb',\r\n  'ml',\r\n  'p',\r\n  'px',\r\n  'py',\r\n  'pt',\r\n  'pr',\r\n  'pb',\r\n  'pl',\r\n  'columns',\r\n  'rows',\r\n  'gap',\r\n  'gapX',\r\n  'gapY',\r\n  'align',\r\n  'justify',\r\n  'templateColumns',\r\n  'templateRows',\r\n  'flow',\r\n  'inline',\r\n  'testId',\r\n]\r\n\r\nfunction omitGridProps<P extends Record<string, unknown>>(\r\n  props: P\r\n): Omit<P, (typeof gridOwnPropKeys)[number]> {\r\n  const result = { ...props }\r\n  for (const key of gridOwnPropKeys) {\r\n    delete result[key]\r\n  }\r\n  return result\r\n}\r\n\r\nfunction buildGridStyles(props: GridOwnProps): CSSProperties {\r\n  const spacingStyles = buildSpacingStyles(props)\r\n\r\n  const styles: CSSProperties = {\r\n    ...spacingStyles,\r\n    display: props.inline ? 'inline-grid' : 'grid',\r\n  }\r\n\r\n  if (props.columns !== undefined) {\r\n    styles.gridTemplateColumns =\r\n      typeof props.columns === 'number' ? `repeat(${props.columns}, 1fr)` : props.columns\r\n  }\r\n\r\n  if (props.rows !== undefined) {\r\n    styles.gridTemplateRows =\r\n      typeof props.rows === 'number' ? `repeat(${props.rows}, 1fr)` : props.rows\r\n  }\r\n\r\n  if (props.templateColumns) styles.gridTemplateColumns = props.templateColumns\r\n  if (props.templateRows) styles.gridTemplateRows = props.templateRows\r\n\r\n  if (props.gap !== undefined) {\r\n    styles.gap = spacingToCss(props.gap)\r\n  } else {\r\n    if (props.gapX !== undefined) styles.columnGap = spacingToCss(props.gapX)\r\n    if (props.gapY !== undefined) styles.rowGap = spacingToCss(props.gapY)\r\n  }\r\n\r\n  if (props.align) styles.alignItems = props.align\r\n  if (props.justify) styles.justifyItems = props.justify\r\n  if (props.flow) styles.gridAutoFlow = props.flow\r\n\r\n  return styles\r\n}\r\n\r\nconst GridInner = <E extends ElementType = 'div'>(\r\n  { as, className, style, children, testId, ...props }: GridProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || 'div'\r\n  const gridStyles = buildGridStyles(props as GridOwnProps)\r\n  const filteredProps = omitGridProps(props)\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-grid', className)}\r\n      style={{ ...gridStyles, ...style }}\r\n      data-testid={testId}\r\n      {...filteredProps}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Grid = forwardRef(GridInner) as GridComponent\r\n\r\nGrid.displayName = 'Grid'\r\n\r\n/** Grid Item Component */\r\nexport interface GridItemOwnProps {\r\n  /** Column span */\r\n  colSpan?: number | 'full'\r\n  /** Row span */\r\n  rowSpan?: number\r\n  /** Column start */\r\n  colStart?: number\r\n  /** Column end */\r\n  colEnd?: number\r\n  /** Row start */\r\n  rowStart?: number\r\n  /** Row end */\r\n  rowEnd?: number\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type GridItemProps<E extends ElementType = 'div'> = GridItemOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof GridItemOwnProps> & {\r\n    as?: E\r\n  }\r\n\r\ninterface GridItemComponent {\r\n  <E extends ElementType = 'div'>(\r\n    props: GridItemProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\nconst GridItemInner = <E extends ElementType = 'div'>(\r\n  {\r\n    as,\r\n    className,\r\n    style,\r\n    children,\r\n    testId,\r\n    colSpan,\r\n    rowSpan,\r\n    colStart,\r\n    colEnd,\r\n    rowStart,\r\n    rowEnd,\r\n    ...props\r\n  }: GridItemProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || 'div'\r\n\r\n  const itemStyles: CSSProperties = {}\r\n\r\n  if (colSpan !== undefined) {\r\n    itemStyles.gridColumn = colSpan === 'full' ? '1 / -1' : `span ${colSpan}`\r\n  }\r\n  if (rowSpan !== undefined) itemStyles.gridRow = `span ${rowSpan}`\r\n  if (colStart !== undefined) itemStyles.gridColumnStart = colStart\r\n  if (colEnd !== undefined) itemStyles.gridColumnEnd = colEnd\r\n  if (rowStart !== undefined) itemStyles.gridRowStart = rowStart\r\n  if (rowEnd !== undefined) itemStyles.gridRowEnd = rowEnd\r\n\r\n  return (\r\n    <Component\r\n      ref={ref as React.LegacyRef<HTMLDivElement>}\r\n      className={cx('brycks-grid-item', className)}\r\n      style={{ ...itemStyles, ...style }}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const GridItem = forwardRef(GridItemInner) as GridItemComponent\r\n\r\nGridItem.displayName = 'GridItem'\r\n"],"names":["gridOwnPropKeys","omitGridProps","props","result","key","buildGridStyles","styles","buildSpacingStyles","spacingToCss","GridInner","as","className","style","children","testId","ref","Component","gridStyles","filteredProps","jsx","cx","Grid","forwardRef","GridItemInner","colSpan","rowSpan","colStart","colEnd","rowStart","rowEnd","itemStyles","GridItem"],"mappings":"+KA+DMA,EAA0C,CAC9C,IACA,KACA,KACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,KACA,KACA,UACA,OACA,MACA,OACA,OACA,QACA,UACA,kBACA,eACA,OACA,SACA,QACF,EAEA,SAASC,EACPC,EAC2C,CAC3C,MAAMC,EAAS,CAAE,GAAGD,CAAA,EACpB,UAAWE,KAAOJ,EAChB,OAAOG,EAAOC,CAAG,EAEnB,OAAOD,CACT,CAEA,SAASE,EAAgBH,EAAoC,CAG3D,MAAMI,EAAwB,CAC5B,GAHoBC,EAAAA,mBAAmBL,CAAK,EAI5C,QAASA,EAAM,OAAS,cAAgB,MAAA,EAG1C,OAAIA,EAAM,UAAY,SACpBI,EAAO,oBACL,OAAOJ,EAAM,SAAY,SAAW,UAAUA,EAAM,OAAO,SAAWA,EAAM,SAG5EA,EAAM,OAAS,SACjBI,EAAO,iBACL,OAAOJ,EAAM,MAAS,SAAW,UAAUA,EAAM,IAAI,SAAWA,EAAM,MAGtEA,EAAM,kBAAiBI,EAAO,oBAAsBJ,EAAM,iBAC1DA,EAAM,eAAcI,EAAO,iBAAmBJ,EAAM,cAEpDA,EAAM,MAAQ,OAChBI,EAAO,IAAME,eAAaN,EAAM,GAAG,GAE/BA,EAAM,OAAS,WAAkB,UAAYM,EAAAA,aAAaN,EAAM,IAAI,GACpEA,EAAM,OAAS,WAAkB,OAASM,EAAAA,aAAaN,EAAM,IAAI,IAGnEA,EAAM,QAAOI,EAAO,WAAaJ,EAAM,OACvCA,EAAM,UAASI,EAAO,aAAeJ,EAAM,SAC3CA,EAAM,OAAMI,EAAO,aAAeJ,EAAM,MAErCI,CACT,CAEA,MAAMG,EAAY,CAChB,CAAE,GAAAC,EAAI,UAAAC,EAAW,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,GAAGZ,CAAA,EAC7Ca,IACG,CACH,MAAMC,EAAYN,GAAM,MAClBO,EAAaZ,EAAgBH,CAAqB,EAClDgB,EAAgBjB,EAAcC,CAAK,EAEzC,OACEiB,EAAAA,IAACH,EAAA,CACC,IAAAD,EACA,UAAWK,EAAAA,GAAG,cAAeT,CAAS,EACtC,MAAO,CAAE,GAAGM,EAAY,GAAGL,CAAA,EAC3B,cAAaE,EACZ,GAAGI,EAEH,SAAAL,CAAA,CAAA,CAGP,EAEaQ,EAAOC,EAAAA,WAAWb,CAAS,EAExCY,EAAK,YAAc,OAsCnB,MAAME,EAAgB,CACpB,CACE,GAAAb,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,QAAAU,EACA,QAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAG3B,CACL,EACAa,IACG,CACH,MAAMC,EAAYN,GAAM,MAElBoB,EAA4B,CAAA,EAElC,OAAIN,IAAY,SACdM,EAAW,WAAaN,IAAY,OAAS,SAAW,QAAQA,CAAO,IAErEC,IAAY,SAAWK,EAAW,QAAU,QAAQL,CAAO,IAC3DC,IAAa,SAAWI,EAAW,gBAAkBJ,GACrDC,IAAW,SAAWG,EAAW,cAAgBH,GACjDC,IAAa,SAAWE,EAAW,aAAeF,GAClDC,IAAW,SAAWC,EAAW,WAAaD,GAGhDV,EAAAA,IAACH,EAAA,CACC,IAAAD,EACA,UAAWK,EAAAA,GAAG,mBAAoBT,CAAS,EAC3C,MAAO,CAAE,GAAGmB,EAAY,GAAGlB,CAAA,EAC3B,cAAaE,EACZ,GAAGZ,EAEH,SAAAW,CAAA,CAAA,CAGP,EAEakB,EAAWT,EAAAA,WAAWC,CAAa,EAEhDQ,EAAS,YAAc"}

package/dist/components/layout/Grid/Grid.js

@@ -0,0 +1,92 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { cx as y, buildSpacingStyles as G, spacingToCss as r } from "../../../utils/styles.js";
+const R = [
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "columns",
+  "rows",
+  "gap",
+  "gapX",
+  "gapY",
+  "align",
+  "justify",
+  "templateColumns",
+  "templateRows",
+  "flow",
+  "inline",
+  "testId"
+];
+function b(i) {
+  const e = { ...i };
+  for (const t of R)
+    delete e[t];
+  return e;
+}
+function I(i) {
+  const t = {
+    ...G(i),
+    display: i.inline ? "inline-grid" : "grid"
+  };
+  return i.columns !== void 0 && (t.gridTemplateColumns = typeof i.columns == "number" ? `repeat(${i.columns}, 1fr)` : i.columns), i.rows !== void 0 && (t.gridTemplateRows = typeof i.rows == "number" ? `repeat(${i.rows}, 1fr)` : i.rows), i.templateColumns && (t.gridTemplateColumns = i.templateColumns), i.templateRows && (t.gridTemplateRows = i.templateRows), i.gap !== void 0 ? t.gap = r(i.gap) : (i.gapX !== void 0 && (t.columnGap = r(i.gapX)), i.gapY !== void 0 && (t.rowGap = r(i.gapY))), i.align && (t.alignItems = i.align), i.justify && (t.justifyItems = i.justify), i.flow && (t.gridAutoFlow = i.flow), t;
+}
+const j = ({ as: i, className: e, style: t, children: a, testId: f, ...l }, m) => {
+  const d = i || "div", s = I(l), o = b(l);
+  return /* @__PURE__ */ u(
+    d,
+    {
+      ref: m,
+      className: y("brycks-grid", e),
+      style: { ...s, ...t },
+      "data-testid": f,
+      ...o,
+      children: a
+    }
+  );
+}, x = c(j);
+x.displayName = "Grid";
+const T = ({
+  as: i,
+  className: e,
+  style: t,
+  children: a,
+  testId: f,
+  colSpan: l,
+  rowSpan: m,
+  colStart: d,
+  colEnd: s,
+  rowStart: o,
+  rowEnd: g,
+  ...w
+}, v) => {
+  const C = i || "div", n = {};
+  return l !== void 0 && (n.gridColumn = l === "full" ? "1 / -1" : `span ${l}`), m !== void 0 && (n.gridRow = `span ${m}`), d !== void 0 && (n.gridColumnStart = d), s !== void 0 && (n.gridColumnEnd = s), o !== void 0 && (n.gridRowStart = o), g !== void 0 && (n.gridRowEnd = g), /* @__PURE__ */ u(
+    C,
+    {
+      ref: v,
+      className: y("brycks-grid-item", e),
+      style: { ...n, ...t },
+      "data-testid": f,
+      ...w,
+      children: a
+    }
+  );
+}, N = c(T);
+N.displayName = "GridItem";
+export {
+  x as Grid,
+  N as GridItem
+};
+//# sourceMappingURL=Grid.js.map

package/dist/components/layout/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../../src/components/layout/Grid/Grid.tsx"],"sourcesContent":["/**\r\n * Grid Component\r\n *\r\n * A CSS Grid layout component for creating responsive grid layouts.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport type { SpacingProps } from '../../../types/common'\r\nimport type { SpacingKey } from '../../../design-system/tokens/spacing'\r\nimport { buildSpacingStyles, spacingToCss, cx } from '../../../utils/styles'\r\n\r\nexport interface GridOwnProps extends SpacingProps {\r\n  /** The element type to render */\r\n  as?: ElementType\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Number of columns */\r\n  columns?: number | string\r\n  /** Number of rows */\r\n  rows?: number | string\r\n  /** Gap between items */\r\n  gap?: SpacingKey\r\n  /** Column gap */\r\n  gapX?: SpacingKey\r\n  /** Row gap */\r\n  gapY?: SpacingKey\r\n  /** Align items */\r\n  align?: CSSProperties['alignItems']\r\n  /** Justify items */\r\n  justify?: CSSProperties['justifyItems']\r\n  /** Template columns (CSS value) */\r\n  templateColumns?: string\r\n  /** Template rows (CSS value) */\r\n  templateRows?: string\r\n  /** Auto flow */\r\n  flow?: CSSProperties['gridAutoFlow']\r\n  /** Whether to render as inline-grid */\r\n  inline?: boolean\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type GridProps<E extends ElementType = 'div'> = GridOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof GridOwnProps>\r\n\r\ninterface GridComponent {\r\n  <E extends ElementType = 'div'>(\r\n    props: GridProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\nconst gridOwnPropKeys: (keyof GridOwnProps)[] = [\r\n  'm',\r\n  'mx',\r\n  'my',\r\n  'mt',\r\n  'mr',\r\n  'mb',\r\n  'ml',\r\n  'p',\r\n  'px',\r\n  'py',\r\n  'pt',\r\n  'pr',\r\n  'pb',\r\n  'pl',\r\n  'columns',\r\n  'rows',\r\n  'gap',\r\n  'gapX',\r\n  'gapY',\r\n  'align',\r\n  'justify',\r\n  'templateColumns',\r\n  'templateRows',\r\n  'flow',\r\n  'inline',\r\n  'testId',\r\n]\r\n\r\nfunction omitGridProps<P extends Record<string, unknown>>(\r\n  props: P\r\n): Omit<P, (typeof gridOwnPropKeys)[number]> {\r\n  const result = { ...props }\r\n  for (const key of gridOwnPropKeys) {\r\n    delete result[key]\r\n  }\r\n  return result\r\n}\r\n\r\nfunction buildGridStyles(props: GridOwnProps): CSSProperties {\r\n  const spacingStyles = buildSpacingStyles(props)\r\n\r\n  const styles: CSSProperties = {\r\n    ...spacingStyles,\r\n    display: props.inline ? 'inline-grid' : 'grid',\r\n  }\r\n\r\n  if (props.columns !== undefined) {\r\n    styles.gridTemplateColumns =\r\n      typeof props.columns === 'number' ? `repeat(${props.columns}, 1fr)` : props.columns\r\n  }\r\n\r\n  if (props.rows !== undefined) {\r\n    styles.gridTemplateRows =\r\n      typeof props.rows === 'number' ? `repeat(${props.rows}, 1fr)` : props.rows\r\n  }\r\n\r\n  if (props.templateColumns) styles.gridTemplateColumns = props.templateColumns\r\n  if (props.templateRows) styles.gridTemplateRows = props.templateRows\r\n\r\n  if (props.gap !== undefined) {\r\n    styles.gap = spacingToCss(props.gap)\r\n  } else {\r\n    if (props.gapX !== undefined) styles.columnGap = spacingToCss(props.gapX)\r\n    if (props.gapY !== undefined) styles.rowGap = spacingToCss(props.gapY)\r\n  }\r\n\r\n  if (props.align) styles.alignItems = props.align\r\n  if (props.justify) styles.justifyItems = props.justify\r\n  if (props.flow) styles.gridAutoFlow = props.flow\r\n\r\n  return styles\r\n}\r\n\r\nconst GridInner = <E extends ElementType = 'div'>(\r\n  { as, className, style, children, testId, ...props }: GridProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || 'div'\r\n  const gridStyles = buildGridStyles(props as GridOwnProps)\r\n  const filteredProps = omitGridProps(props)\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-grid', className)}\r\n      style={{ ...gridStyles, ...style }}\r\n      data-testid={testId}\r\n      {...filteredProps}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Grid = forwardRef(GridInner) as GridComponent\r\n\r\nGrid.displayName = 'Grid'\r\n\r\n/** Grid Item Component */\r\nexport interface GridItemOwnProps {\r\n  /** Column span */\r\n  colSpan?: number | 'full'\r\n  /** Row span */\r\n  rowSpan?: number\r\n  /** Column start */\r\n  colStart?: number\r\n  /** Column end */\r\n  colEnd?: number\r\n  /** Row start */\r\n  rowStart?: number\r\n  /** Row end */\r\n  rowEnd?: number\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type GridItemProps<E extends ElementType = 'div'> = GridItemOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof GridItemOwnProps> & {\r\n    as?: E\r\n  }\r\n\r\ninterface GridItemComponent {\r\n  <E extends ElementType = 'div'>(\r\n    props: GridItemProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\nconst GridItemInner = <E extends ElementType = 'div'>(\r\n  {\r\n    as,\r\n    className,\r\n    style,\r\n    children,\r\n    testId,\r\n    colSpan,\r\n    rowSpan,\r\n    colStart,\r\n    colEnd,\r\n    rowStart,\r\n    rowEnd,\r\n    ...props\r\n  }: GridItemProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || 'div'\r\n\r\n  const itemStyles: CSSProperties = {}\r\n\r\n  if (colSpan !== undefined) {\r\n    itemStyles.gridColumn = colSpan === 'full' ? '1 / -1' : `span ${colSpan}`\r\n  }\r\n  if (rowSpan !== undefined) itemStyles.gridRow = `span ${rowSpan}`\r\n  if (colStart !== undefined) itemStyles.gridColumnStart = colStart\r\n  if (colEnd !== undefined) itemStyles.gridColumnEnd = colEnd\r\n  if (rowStart !== undefined) itemStyles.gridRowStart = rowStart\r\n  if (rowEnd !== undefined) itemStyles.gridRowEnd = rowEnd\r\n\r\n  return (\r\n    <Component\r\n      ref={ref as React.LegacyRef<HTMLDivElement>}\r\n      className={cx('brycks-grid-item', className)}\r\n      style={{ ...itemStyles, ...style }}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const GridItem = forwardRef(GridItemInner) as GridItemComponent\r\n\r\nGridItem.displayName = 'GridItem'\r\n"],"names":["gridOwnPropKeys","omitGridProps","props","result","key","buildGridStyles","styles","buildSpacingStyles","spacingToCss","GridInner","as","className","style","children","testId","ref","Component","gridStyles","filteredProps","jsx","cx","Grid","forwardRef","GridItemInner","colSpan","rowSpan","colStart","colEnd","rowStart","rowEnd","itemStyles","GridItem"],"mappings":"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"}

package/dist/components/layout/Section/Section.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),T=require("react"),N=require("../../../utils/styles.cjs"),i={none:0,sm:16,md:24,lg:32,xl:48},c=T.forwardRef(function({title:t,description:s,titleLevel:r="h2",spacing:l="md",divider:o=!1,actions:n,className:a,style:d,children:y,testId:f,...x},g){const m=r,p={display:"flex",flexDirection:"column",gap:16,paddingTop:o?i[l]:0,marginTop:i[l],borderTop:o?"1px solid var(--brycks-border-muted)":void 0,...d},u={display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:16},S={display:"flex",flexDirection:"column",gap:4},h={fontSize:18,fontWeight:600,color:"var(--brycks-foreground-default)",margin:0,lineHeight:1.3},b={fontSize:14,color:"var(--brycks-foreground-muted)",margin:0,lineHeight:1.5},j={display:"flex",alignItems:"center",gap:8,flexShrink:0},v={display:"flex",flexDirection:"column"},k=t||s||n;return e.jsxs("section",{ref:g,className:N.cx("brycks-section",a),style:p,"data-testid":f,...x,children:[k&&e.jsxs("div",{className:"brycks-section-header",style:u,children:[e.jsxs("div",{style:S,children:[t&&e.jsx(m,{style:h,children:t}),s&&e.jsx("p",{style:b,children:s})]}),n&&e.jsx("div",{style:j,children:n})]}),e.jsx("div",{className:"brycks-section-content",style:v,children:y})]})});c.displayName="Section";exports.Section=c;
+//# sourceMappingURL=Section.cjs.map

package/dist/components/layout/Section/Section.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.cjs","sources":["../../../../src/components/layout/Section/Section.tsx"],"sourcesContent":["/**\n * Section Component\n *\n * A semantic section wrapper with optional title, description, and dividers.\n * Useful for organizing content into logical groups.\n */\n\nimport { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type SectionSpacing = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** Section title */\n  title?: ReactNode\n  /** Section description */\n  description?: ReactNode\n  /** Title level for accessibility */\n  titleLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n  /** Spacing between sections */\n  spacing?: SectionSpacing\n  /** Whether to show a divider above the section */\n  divider?: boolean\n  /** Actions to display in the header (right side) */\n  actions?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst spacingMap: Record<SectionSpacing, number> = {\n  none: 0,\n  sm: 16,\n  md: 24,\n  lg: 32,\n  xl: 48,\n}\n\nexport const Section = forwardRef<HTMLElement, SectionProps>(function Section(\n  {\n    title,\n    description,\n    titleLevel = 'h2',\n    spacing = 'md',\n    divider = false,\n    actions,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const TitleTag = titleLevel\n\n  const sectionStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 16,\n    paddingTop: divider ? spacingMap[spacing] : 0,\n    marginTop: spacingMap[spacing],\n    borderTop: divider ? '1px solid var(--brycks-border-muted)' : undefined,\n    ...style,\n  }\n\n  const headerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'flex-start',\n    justifyContent: 'space-between',\n    gap: 16,\n  }\n\n  const titleContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n  }\n\n  const titleStyle: CSSProperties = {\n    fontSize: 18,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-default)',\n    margin: 0,\n    lineHeight: 1.3,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: 14,\n    color: 'var(--brycks-foreground-muted)',\n    margin: 0,\n    lineHeight: 1.5,\n  }\n\n  const actionsStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    flexShrink: 0,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n  }\n\n  const hasHeader = title || description || actions\n\n  return (\n    <section\n      ref={ref}\n      className={cx('brycks-section', className)}\n      style={sectionStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {hasHeader && (\n        <div className=\"brycks-section-header\" style={headerStyle}>\n          <div style={titleContainerStyle}>\n            {title && (\n              <TitleTag style={titleStyle}>{title}</TitleTag>\n            )}\n            {description && (\n              <p style={descriptionStyle}>{description}</p>\n            )}\n          </div>\n          {actions && <div style={actionsStyle}>{actions}</div>}\n        </div>\n      )}\n      <div className=\"brycks-section-content\" style={contentStyle}>\n        {children}\n      </div>\n    </section>\n  )\n})\n\nSection.displayName = 'Section'\n"],"names":["spacingMap","Section","forwardRef","title","description","titleLevel","spacing","divider","actions","className","style","children","testId","props","ref","TitleTag","sectionStyle","headerStyle","titleContainerStyle","titleStyle","descriptionStyle","actionsStyle","contentStyle","hasHeader","jsxs","cx","jsx"],"mappings":"+KA+BMA,EAA6C,CACjD,KAAM,EACN,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,EACN,EAEaC,EAAUC,EAAAA,WAAsC,SAC3D,CACE,MAAAC,EACA,YAAAC,EACA,WAAAC,EAAa,KACb,QAAAC,EAAU,KACV,QAAAC,EAAU,GACV,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAWV,EAEXW,EAA8B,CAClC,QAAS,OACT,cAAe,SACf,IAAK,GACL,WAAYT,EAAUP,EAAWM,CAAO,EAAI,EAC5C,UAAWN,EAAWM,CAAO,EAC7B,UAAWC,EAAU,uCAAyC,OAC9D,GAAGG,CAAA,EAGCO,EAA6B,CACjC,QAAS,OACT,WAAY,aACZ,eAAgB,gBAChB,IAAK,EAAA,EAGDC,EAAqC,CACzC,QAAS,OACT,cAAe,SACf,IAAK,CAAA,EAGDC,EAA4B,CAChC,SAAU,GACV,WAAY,IACZ,MAAO,mCACP,OAAQ,EACR,WAAY,GAAA,EAGRC,EAAkC,CACtC,SAAU,GACV,MAAO,iCACP,OAAQ,EACR,WAAY,GAAA,EAGRC,EAA8B,CAClC,QAAS,OACT,WAAY,SACZ,IAAK,EACL,WAAY,CAAA,EAGRC,EAA8B,CAClC,QAAS,OACT,cAAe,QAAA,EAGXC,EAAYpB,GAASC,GAAeI,EAE1C,OACEgB,EAAAA,KAAC,UAAA,CACC,IAAAV,EACA,UAAWW,EAAAA,GAAG,iBAAkBhB,CAAS,EACzC,MAAOO,EACP,cAAaJ,EACZ,GAAGC,EAEH,SAAA,CAAAU,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAU,wBAAwB,MAAOP,EAC5C,SAAA,CAAAO,EAAAA,KAAC,MAAA,CAAI,MAAON,EACT,SAAA,CAAAf,GACCuB,EAAAA,IAACX,EAAA,CAAS,MAAOI,EAAa,SAAAhB,EAAM,EAErCC,GACCsB,EAAAA,IAAC,IAAA,CAAE,MAAON,EAAmB,SAAAhB,CAAA,CAAY,CAAA,EAE7C,EACCI,GAAWkB,EAAAA,IAAC,MAAA,CAAI,MAAOL,EAAe,SAAAb,CAAA,CAAQ,CAAA,EACjD,QAED,MAAA,CAAI,UAAU,yBAAyB,MAAOc,EAC5C,SAAAX,CAAA,CACH,CAAA,CAAA,CAAA,CAGN,CAAC,EAEDV,EAAQ,YAAc"}