@bridger-kr/react 0.1.0

package/dist/components/product/ProductCinematic.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var PRODUCT_SHELL_TONE = {
+  Cinematic: "cinematic",
+  Console: "console"
+};
+var SHELL_TONE_CLASS = {
+  [PRODUCT_SHELL_TONE.Cinematic]: "dt-product-shell-cinematic",
+  [PRODUCT_SHELL_TONE.Console]: "dt-product-shell-console"
+};
+function ProductShell({ tone = PRODUCT_SHELL_TONE.Cinematic, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("dt-product-shell", SHELL_TONE_CLASS[tone], className), ...rest, children });
+}
+function ProductCinematicBackdrop({
+  animated = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx("dt-product-cinematic-backdrop", animated && "dt-product-cinematic-backdrop-animated", className),
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dt-product-cinematic-wash" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "dt-product-cinematic-lines", viewBox: "0 0 1440 720", preserveAspectRatio: "xMidYMid slice", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { className: "dt-product-cinematic-track", d: "M-60 248 H520 C690 248 710 168 884 168 H1500" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { className: "dt-product-cinematic-track", d: "M-60 430 H510 C660 430 692 542 872 542 H1500" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { className: "dt-product-cinematic-track", d: "M-60 338 H610 C748 338 770 326 930 326 H1500" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { className: "dt-product-cinematic-flow dt-product-cinematic-flow-a", d: "M-60 248 H520 C690 248 710 168 884 168 H1500" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { className: "dt-product-cinematic-flow dt-product-cinematic-flow-b", d: "M-60 430 H510 C660 430 692 542 872 542 H1500" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { className: "dt-product-cinematic-flow dt-product-cinematic-flow-c", d: "M-60 338 H610 C748 338 770 326 930 326 H1500" })
+        ] })
+      ]
+    }
+  );
+}
+function ProductMotionField({
+  gridSrc,
+  label = "Live API routing motion",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("dt-product-motion-field", className), "aria-label": label, ...rest, children: [
+    gridSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: "dt-product-motion-grid", src: gridSrc, alt: "", "aria-hidden": "true", loading: "lazy" }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-product-motion-orbit dt-product-motion-orbit-a", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-product-motion-node" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-product-motion-orbit dt-product-motion-orbit-b", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-product-motion-node" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-product-motion-axis", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-product-motion-copy", children: "API" })
+  ] });
+}
+function ProductSideRail({ items, label, className, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cx("dt-product-side-rail", className), "aria-label": label, ...rest, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, children: item.label }, item.key)) });
+}
+
+exports.PRODUCT_SHELL_TONE = PRODUCT_SHELL_TONE;
+exports.ProductCinematicBackdrop = ProductCinematicBackdrop;
+exports.ProductMotionField = ProductMotionField;
+exports.ProductShell = ProductShell;
+exports.ProductSideRail = ProductSideRail;
+//# sourceMappingURL=ProductCinematic.cjs.map
+//# sourceMappingURL=ProductCinematic.cjs.map

package/dist/components/product/ProductCinematic.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/product/ProductCinematic.tsx"],"names":["jsx","jsxs"],"mappings":";;;;;AAAO,SAAS,MAAM,OAAA,EAA2D;AAC/E,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;ACCO,IAAM,kBAAA,GAAqB;AAAA,EAChC,SAAA,EAAW,WAAA;AAAA,EACX,OAAA,EAAS;AACX;AAIA,IAAM,gBAAA,GAAqD;AAAA,EACzD,CAAC,kBAAA,CAAmB,SAAS,GAAG,4BAAA;AAAA,EAChC,CAAC,kBAAA,CAAmB,OAAO,GAAG;AAChC,CAAA;AAMO,SAAS,YAAA,CAAa,EAAE,IAAA,GAAO,kBAAA,CAAmB,WAAW,SAAA,EAAW,QAAA,EAAU,GAAG,IAAA,EAAK,EAAsB;AACrH,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,kBAAA,EAAoB,gBAAA,CAAiB,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC5E,QAAA,EACH,CAAA;AAEJ;AAMO,SAAS,wBAAA,CAAyB;AAAA,EACvC,QAAA,GAAW,IAAA;AAAA,EACX,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkC;AAChC,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,QAAA,IAAY,0CAA0C,SAAS,CAAA;AAAA,MAC9G,aAAA,EAAY,MAAA;AAAA,MACX,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EAA4B,CAAA;AAAA,wCAC1C,KAAA,EAAA,EAAI,SAAA,EAAU,8BAA6B,OAAA,EAAQ,cAAA,EAAe,qBAAoB,gBAAA,EACrF,QAAA,EAAA;AAAA,0BAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,4BAAA,EAA6B,CAAA,EAAE,8CAAA,EAA+C,CAAA;AAAA,0BAC9FA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,4BAAA,EAA6B,GAAE,8CAAA,EAA+C,CAAA;AAAA,0BAC9FA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,4BAAA,EAA6B,GAAE,8CAAA,EAA+C,CAAA;AAAA,0BAC9FA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uDAAA,EAAwD,GAAE,8CAAA,EAA+C,CAAA;AAAA,0BACzHA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uDAAA,EAAwD,GAAE,8CAAA,EAA+C,CAAA;AAAA,0BACzHA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uDAAA,EAAwD,GAAE,8CAAA,EAA+C;AAAA,SAAA,EAC3H;AAAA;AAAA;AAAA,GACF;AAEJ;AAOO,SAAS,kBAAA,CAAmB;AAAA,EACjC,OAAA;AAAA,EACA,KAAA,GAAQ,yBAAA;AAAA,EACR,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4B;AAC1B,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA,EAAG,YAAA,EAAY,KAAA,EAAQ,GAAG,IAAA,EAC9E,QAAA,EAAA;AAAA,IAAA,OAAA,mBAAUD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EAAyB,GAAA,EAAK,OAAA,EAAS,GAAA,EAAI,EAAA,EAAG,aAAA,EAAY,MAAA,EAAO,OAAA,EAAQ,MAAA,EAAO,CAAA,GAAK,IAAA;AAAA,oBAC/GA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mDAAA,EAAoD,aAAA,EAAY,QAC9E,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EAAyB,CAAA,EAC3C,CAAA;AAAA,oBACAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mDAAA,EAAoD,aAAA,EAAY,QAC9E,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EAAyB,CAAA,EAC3C,CAAA;AAAA,oBACAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EAAyB,eAAY,MAAA,EAAO,CAAA;AAAA,oBAC5DA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EAAyB,QAAA,EAAA,KAAA,EAAG;AAAA,GAAA,EAC9C,CAAA;AAEJ;AAaO,SAAS,gBAAgB,EAAE,KAAA,EAAO,OAAO,SAAA,EAAW,GAAG,MAAK,EAAyB;AAC1F,EAAA,uBACEA,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,EAAA,CAAG,sBAAA,EAAwB,SAAS,CAAA,EAAG,YAAA,EAAY,KAAA,EAAQ,GAAG,IAAA,EAC7E,QAAA,EAAA,KAAA,CAAM,IAAI,CAAC,IAAA,qBACVA,cAAA,CAAC,GAAA,EAAA,EAAiB,IAAA,EAAM,IAAA,CAAK,IAAA,EAC1B,QAAA,EAAA,IAAA,CAAK,KAAA,EAAA,EADA,IAAA,CAAK,GAEb,CACD,CAAA,EACH,CAAA;AAEJ","file":"ProductCinematic.cjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport const PRODUCT_SHELL_TONE = {\n  Cinematic: 'cinematic',\n  Console: 'console',\n} as const;\n\nexport type ProductShellTone = (typeof PRODUCT_SHELL_TONE)[keyof typeof PRODUCT_SHELL_TONE];\n\nconst SHELL_TONE_CLASS: Record<ProductShellTone, string> = {\n  [PRODUCT_SHELL_TONE.Cinematic]: 'dt-product-shell-cinematic',\n  [PRODUCT_SHELL_TONE.Console]: 'dt-product-shell-console',\n};\n\nexport interface ProductShellProps extends HTMLAttributes<HTMLDivElement> {\n  tone?: ProductShellTone;\n}\n\nexport function ProductShell({ tone = PRODUCT_SHELL_TONE.Cinematic, className, children, ...rest }: ProductShellProps) {\n  return (\n    <div className={cx('dt-product-shell', SHELL_TONE_CLASS[tone], className)} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport interface ProductCinematicBackdropProps extends HTMLAttributes<HTMLDivElement> {\n  animated?: boolean;\n}\n\nexport function ProductCinematicBackdrop({\n  animated = true,\n  className,\n  ...rest\n}: ProductCinematicBackdropProps) {\n  return (\n    <div\n      className={cx('dt-product-cinematic-backdrop', animated && 'dt-product-cinematic-backdrop-animated', className)}\n      aria-hidden=\"true\"\n      {...rest}\n    >\n      <div className=\"dt-product-cinematic-wash\" />\n      <svg className=\"dt-product-cinematic-lines\" viewBox=\"0 0 1440 720\" preserveAspectRatio=\"xMidYMid slice\">\n        <path className=\"dt-product-cinematic-track\" d=\"M-60 248 H520 C690 248 710 168 884 168 H1500\" />\n        <path className=\"dt-product-cinematic-track\" d=\"M-60 430 H510 C660 430 692 542 872 542 H1500\" />\n        <path className=\"dt-product-cinematic-track\" d=\"M-60 338 H610 C748 338 770 326 930 326 H1500\" />\n        <path className=\"dt-product-cinematic-flow dt-product-cinematic-flow-a\" d=\"M-60 248 H520 C690 248 710 168 884 168 H1500\" />\n        <path className=\"dt-product-cinematic-flow dt-product-cinematic-flow-b\" d=\"M-60 430 H510 C660 430 692 542 872 542 H1500\" />\n        <path className=\"dt-product-cinematic-flow dt-product-cinematic-flow-c\" d=\"M-60 338 H610 C748 338 770 326 930 326 H1500\" />\n      </svg>\n    </div>\n  );\n}\n\nexport interface ProductMotionFieldProps extends HTMLAttributes<HTMLDivElement> {\n  gridSrc?: string;\n  label?: string;\n}\n\nexport function ProductMotionField({\n  gridSrc,\n  label = 'Live API routing motion',\n  className,\n  ...rest\n}: ProductMotionFieldProps) {\n  return (\n    <div className={cx('dt-product-motion-field', className)} aria-label={label} {...rest}>\n      {gridSrc ? <img className=\"dt-product-motion-grid\" src={gridSrc} alt=\"\" aria-hidden=\"true\" loading=\"lazy\" /> : null}\n      <span className=\"dt-product-motion-orbit dt-product-motion-orbit-a\" aria-hidden=\"true\">\n        <span className=\"dt-product-motion-node\" />\n      </span>\n      <span className=\"dt-product-motion-orbit dt-product-motion-orbit-b\" aria-hidden=\"true\">\n        <span className=\"dt-product-motion-node\" />\n      </span>\n      <span className=\"dt-product-motion-axis\" aria-hidden=\"true\" />\n      <span className=\"dt-product-motion-copy\">API</span>\n    </div>\n  );\n}\n\nexport interface ProductSideRailItem {\n  key: string;\n  href: string;\n  label: ReactNode;\n}\n\nexport interface ProductSideRailProps extends HTMLAttributes<HTMLElement> {\n  items: readonly ProductSideRailItem[];\n  label: string;\n}\n\nexport function ProductSideRail({ items, label, className, ...rest }: ProductSideRailProps) {\n  return (\n    <aside className={cx('dt-product-side-rail', className)} aria-label={label} {...rest}>\n      {items.map((item) => (\n        <a key={item.key} href={item.href}>\n          {item.label}\n        </a>\n      ))}\n    </aside>\n  );\n}\n"]}

package/dist/components/product/ProductCinematic.d.cts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+declare const PRODUCT_SHELL_TONE: {
+    readonly Cinematic: "cinematic";
+    readonly Console: "console";
+};
+type ProductShellTone = (typeof PRODUCT_SHELL_TONE)[keyof typeof PRODUCT_SHELL_TONE];
+interface ProductShellProps extends HTMLAttributes<HTMLDivElement> {
+    tone?: ProductShellTone;
+}
+declare function ProductShell({ tone, className, children, ...rest }: ProductShellProps): react.JSX.Element;
+interface ProductCinematicBackdropProps extends HTMLAttributes<HTMLDivElement> {
+    animated?: boolean;
+}
+declare function ProductCinematicBackdrop({ animated, className, ...rest }: ProductCinematicBackdropProps): react.JSX.Element;
+interface ProductMotionFieldProps extends HTMLAttributes<HTMLDivElement> {
+    gridSrc?: string;
+    label?: string;
+}
+declare function ProductMotionField({ gridSrc, label, className, ...rest }: ProductMotionFieldProps): react.JSX.Element;
+interface ProductSideRailItem {
+    key: string;
+    href: string;
+    label: ReactNode;
+}
+interface ProductSideRailProps extends HTMLAttributes<HTMLElement> {
+    items: readonly ProductSideRailItem[];
+    label: string;
+}
+declare function ProductSideRail({ items, label, className, ...rest }: ProductSideRailProps): react.JSX.Element;
+
+export { PRODUCT_SHELL_TONE, ProductCinematicBackdrop, type ProductCinematicBackdropProps, ProductMotionField, type ProductMotionFieldProps, ProductShell, type ProductShellProps, type ProductShellTone, ProductSideRail, type ProductSideRailItem, type ProductSideRailProps };

package/dist/components/product/ProductCinematic.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+declare const PRODUCT_SHELL_TONE: {
+    readonly Cinematic: "cinematic";
+    readonly Console: "console";
+};
+type ProductShellTone = (typeof PRODUCT_SHELL_TONE)[keyof typeof PRODUCT_SHELL_TONE];
+interface ProductShellProps extends HTMLAttributes<HTMLDivElement> {
+    tone?: ProductShellTone;
+}
+declare function ProductShell({ tone, className, children, ...rest }: ProductShellProps): react.JSX.Element;
+interface ProductCinematicBackdropProps extends HTMLAttributes<HTMLDivElement> {
+    animated?: boolean;
+}
+declare function ProductCinematicBackdrop({ animated, className, ...rest }: ProductCinematicBackdropProps): react.JSX.Element;
+interface ProductMotionFieldProps extends HTMLAttributes<HTMLDivElement> {
+    gridSrc?: string;
+    label?: string;
+}
+declare function ProductMotionField({ gridSrc, label, className, ...rest }: ProductMotionFieldProps): react.JSX.Element;
+interface ProductSideRailItem {
+    key: string;
+    href: string;
+    label: ReactNode;
+}
+interface ProductSideRailProps extends HTMLAttributes<HTMLElement> {
+    items: readonly ProductSideRailItem[];
+    label: string;
+}
+declare function ProductSideRail({ items, label, className, ...rest }: ProductSideRailProps): react.JSX.Element;
+
+export { PRODUCT_SHELL_TONE, ProductCinematicBackdrop, type ProductCinematicBackdropProps, ProductMotionField, type ProductMotionFieldProps, ProductShell, type ProductShellProps, type ProductShellTone, ProductSideRail, type ProductSideRailItem, type ProductSideRailProps };

package/dist/components/product/ProductCinematic.mjs

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var PRODUCT_SHELL_TONE = {
+  Cinematic: "cinematic",
+  Console: "console"
+};
+var SHELL_TONE_CLASS = {
+  [PRODUCT_SHELL_TONE.Cinematic]: "dt-product-shell-cinematic",
+  [PRODUCT_SHELL_TONE.Console]: "dt-product-shell-console"
+};
+function ProductShell({ tone = PRODUCT_SHELL_TONE.Cinematic, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("dt-product-shell", SHELL_TONE_CLASS[tone], className), ...rest, children });
+}
+function ProductCinematicBackdrop({
+  animated = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("dt-product-cinematic-backdrop", animated && "dt-product-cinematic-backdrop-animated", className),
+      "aria-hidden": "true",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "dt-product-cinematic-wash" }),
+        /* @__PURE__ */ jsxs("svg", { className: "dt-product-cinematic-lines", viewBox: "0 0 1440 720", preserveAspectRatio: "xMidYMid slice", children: [
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-track", d: "M-60 248 H520 C690 248 710 168 884 168 H1500" }),
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-track", d: "M-60 430 H510 C660 430 692 542 872 542 H1500" }),
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-track", d: "M-60 338 H610 C748 338 770 326 930 326 H1500" }),
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-flow dt-product-cinematic-flow-a", d: "M-60 248 H520 C690 248 710 168 884 168 H1500" }),
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-flow dt-product-cinematic-flow-b", d: "M-60 430 H510 C660 430 692 542 872 542 H1500" }),
+          /* @__PURE__ */ jsx("path", { className: "dt-product-cinematic-flow dt-product-cinematic-flow-c", d: "M-60 338 H610 C748 338 770 326 930 326 H1500" })
+        ] })
+      ]
+    }
+  );
+}
+function ProductMotionField({
+  gridSrc,
+  label = "Live API routing motion",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("dt-product-motion-field", className), "aria-label": label, ...rest, children: [
+    gridSrc ? /* @__PURE__ */ jsx("img", { className: "dt-product-motion-grid", src: gridSrc, alt: "", "aria-hidden": "true", loading: "lazy" }) : null,
+    /* @__PURE__ */ jsx("span", { className: "dt-product-motion-orbit dt-product-motion-orbit-a", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "dt-product-motion-node" }) }),
+    /* @__PURE__ */ jsx("span", { className: "dt-product-motion-orbit dt-product-motion-orbit-b", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "dt-product-motion-node" }) }),
+    /* @__PURE__ */ jsx("span", { className: "dt-product-motion-axis", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "dt-product-motion-copy", children: "API" })
+  ] });
+}
+function ProductSideRail({ items, label, className, ...rest }) {
+  return /* @__PURE__ */ jsx("aside", { className: cx("dt-product-side-rail", className), "aria-label": label, ...rest, children: items.map((item) => /* @__PURE__ */ jsx("a", { href: item.href, children: item.label }, item.key)) });
+}
+
+export { PRODUCT_SHELL_TONE, ProductCinematicBackdrop, ProductMotionField, ProductShell, ProductSideRail };
+//# sourceMappingURL=ProductCinematic.mjs.map
+//# sourceMappingURL=ProductCinematic.mjs.map

package/dist/components/product/ProductCinematic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/product/ProductCinematic.tsx"],"names":[],"mappings":"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","file":"ProductCinematic.mjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport const PRODUCT_SHELL_TONE = {\n  Cinematic: 'cinematic',\n  Console: 'console',\n} as const;\n\nexport type ProductShellTone = (typeof PRODUCT_SHELL_TONE)[keyof typeof PRODUCT_SHELL_TONE];\n\nconst SHELL_TONE_CLASS: Record<ProductShellTone, string> = {\n  [PRODUCT_SHELL_TONE.Cinematic]: 'dt-product-shell-cinematic',\n  [PRODUCT_SHELL_TONE.Console]: 'dt-product-shell-console',\n};\n\nexport interface ProductShellProps extends HTMLAttributes<HTMLDivElement> {\n  tone?: ProductShellTone;\n}\n\nexport function ProductShell({ tone = PRODUCT_SHELL_TONE.Cinematic, className, children, ...rest }: ProductShellProps) {\n  return (\n    <div className={cx('dt-product-shell', SHELL_TONE_CLASS[tone], className)} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport interface ProductCinematicBackdropProps extends HTMLAttributes<HTMLDivElement> {\n  animated?: boolean;\n}\n\nexport function ProductCinematicBackdrop({\n  animated = true,\n  className,\n  ...rest\n}: ProductCinematicBackdropProps) {\n  return (\n    <div\n      className={cx('dt-product-cinematic-backdrop', animated && 'dt-product-cinematic-backdrop-animated', className)}\n      aria-hidden=\"true\"\n      {...rest}\n    >\n      <div className=\"dt-product-cinematic-wash\" />\n      <svg className=\"dt-product-cinematic-lines\" viewBox=\"0 0 1440 720\" preserveAspectRatio=\"xMidYMid slice\">\n        <path className=\"dt-product-cinematic-track\" d=\"M-60 248 H520 C690 248 710 168 884 168 H1500\" />\n        <path className=\"dt-product-cinematic-track\" d=\"M-60 430 H510 C660 430 692 542 872 542 H1500\" />\n        <path className=\"dt-product-cinematic-track\" d=\"M-60 338 H610 C748 338 770 326 930 326 H1500\" />\n        <path className=\"dt-product-cinematic-flow dt-product-cinematic-flow-a\" d=\"M-60 248 H520 C690 248 710 168 884 168 H1500\" />\n        <path className=\"dt-product-cinematic-flow dt-product-cinematic-flow-b\" d=\"M-60 430 H510 C660 430 692 542 872 542 H1500\" />\n        <path className=\"dt-product-cinematic-flow dt-product-cinematic-flow-c\" d=\"M-60 338 H610 C748 338 770 326 930 326 H1500\" />\n      </svg>\n    </div>\n  );\n}\n\nexport interface ProductMotionFieldProps extends HTMLAttributes<HTMLDivElement> {\n  gridSrc?: string;\n  label?: string;\n}\n\nexport function ProductMotionField({\n  gridSrc,\n  label = 'Live API routing motion',\n  className,\n  ...rest\n}: ProductMotionFieldProps) {\n  return (\n    <div className={cx('dt-product-motion-field', className)} aria-label={label} {...rest}>\n      {gridSrc ? <img className=\"dt-product-motion-grid\" src={gridSrc} alt=\"\" aria-hidden=\"true\" loading=\"lazy\" /> : null}\n      <span className=\"dt-product-motion-orbit dt-product-motion-orbit-a\" aria-hidden=\"true\">\n        <span className=\"dt-product-motion-node\" />\n      </span>\n      <span className=\"dt-product-motion-orbit dt-product-motion-orbit-b\" aria-hidden=\"true\">\n        <span className=\"dt-product-motion-node\" />\n      </span>\n      <span className=\"dt-product-motion-axis\" aria-hidden=\"true\" />\n      <span className=\"dt-product-motion-copy\">API</span>\n    </div>\n  );\n}\n\nexport interface ProductSideRailItem {\n  key: string;\n  href: string;\n  label: ReactNode;\n}\n\nexport interface ProductSideRailProps extends HTMLAttributes<HTMLElement> {\n  items: readonly ProductSideRailItem[];\n  label: string;\n}\n\nexport function ProductSideRail({ items, label, className, ...rest }: ProductSideRailProps) {\n  return (\n    <aside className={cx('dt-product-side-rail', className)} aria-label={label} {...rest}>\n      {items.map((item) => (\n        <a key={item.key} href={item.href}>\n          {item.label}\n        </a>\n      ))}\n    </aside>\n  );\n}\n"]}

package/dist/components/product/ProductPageHeader.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function ProductPageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cx("dt-product-page-header", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dt-product-page-header-row", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dt-product-page-header-copy", children: [
+        eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-product-page-header-eyebrow", children: eyebrow }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dt-product-page-header-text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { children: title }),
+          description ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: description }) : null
+        ] })
+      ] }),
+      actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dt-product-page-header-actions", children: actions }) : null
+    ] }),
+    children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dt-product-page-header-content", children }) : null
+  ] });
+}
+
+exports.ProductPageHeader = ProductPageHeader;
+//# sourceMappingURL=ProductPageHeader.cjs.map
+//# sourceMappingURL=ProductPageHeader.cjs.map

package/dist/components/product/ProductPageHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/product/ProductPageHeader.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAAO,SAAS,MAAM,OAAA,EAA2D;AAC/E,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;ACSO,SAAS,iBAAA,CAAkB;AAAA,EAChC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,uBACEA,eAAA,CAAC,YAAO,SAAA,EAAW,EAAA,CAAG,0BAA0B,SAAS,CAAA,EAAI,GAAG,IAAA,EAC9D,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4BAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,6BAAA,EACZ,QAAA,EAAA;AAAA,QAAA,OAAA,mBAAUC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gCAAA,EAAkC,mBAAQ,CAAA,GAAU,IAAA;AAAA,wBAC/ED,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EACb,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,QAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UACV,WAAA,mBAAcA,cAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA,WAAA,EAAY,CAAA,GAAO;AAAA,SAAA,EACxC;AAAA,OAAA,EACF,CAAA;AAAA,MACC,0BAAUA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAAkC,mBAAQ,CAAA,GAAS;AAAA,KAAA,EAC/E,CAAA;AAAA,IACC,2BAAWA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAAkC,UAAS,CAAA,GAAS;AAAA,GAAA,EACjF,CAAA;AAEJ","file":"ProductPageHeader.cjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport interface ProductPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  eyebrow?: ReactNode;\n  title: ReactNode;\n  description?: ReactNode;\n  actions?: ReactNode;\n  children?: ReactNode;\n}\n\nexport function ProductPageHeader({\n  eyebrow,\n  title,\n  description,\n  actions,\n  children,\n  className,\n  ...rest\n}: ProductPageHeaderProps) {\n  return (\n    <header className={cx('dt-product-page-header', className)} {...rest}>\n      <div className=\"dt-product-page-header-row\">\n        <div className=\"dt-product-page-header-copy\">\n          {eyebrow ? <span className=\"dt-product-page-header-eyebrow\">{eyebrow}</span> : null}\n          <div className=\"dt-product-page-header-text\">\n            <h1>{title}</h1>\n            {description ? <p>{description}</p> : null}\n          </div>\n        </div>\n        {actions ? <div className=\"dt-product-page-header-actions\">{actions}</div> : null}\n      </div>\n      {children ? <div className=\"dt-product-page-header-content\">{children}</div> : null}\n    </header>\n  );\n}\n"]}

package/dist/components/product/ProductPageHeader.d.cts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface ProductPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    children?: ReactNode;
+}
+declare function ProductPageHeader({ eyebrow, title, description, actions, children, className, ...rest }: ProductPageHeaderProps): react.JSX.Element;
+
+export { ProductPageHeader, type ProductPageHeaderProps };

package/dist/components/product/ProductPageHeader.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface ProductPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    children?: ReactNode;
+}
+declare function ProductPageHeader({ eyebrow, title, description, actions, children, className, ...rest }: ProductPageHeaderProps): react.JSX.Element;
+
+export { ProductPageHeader, type ProductPageHeaderProps };

package/dist/components/product/ProductPageHeader.mjs

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function ProductPageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: cx("dt-product-page-header", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "dt-product-page-header-row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "dt-product-page-header-copy", children: [
+        eyebrow ? /* @__PURE__ */ jsx("span", { className: "dt-product-page-header-eyebrow", children: eyebrow }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "dt-product-page-header-text", children: [
+          /* @__PURE__ */ jsx("h1", { children: title }),
+          description ? /* @__PURE__ */ jsx("p", { children: description }) : null
+        ] })
+      ] }),
+      actions ? /* @__PURE__ */ jsx("div", { className: "dt-product-page-header-actions", children: actions }) : null
+    ] }),
+    children ? /* @__PURE__ */ jsx("div", { className: "dt-product-page-header-content", children }) : null
+  ] });
+}
+
+export { ProductPageHeader };
+//# sourceMappingURL=ProductPageHeader.mjs.map
+//# sourceMappingURL=ProductPageHeader.mjs.map

package/dist/components/product/ProductPageHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/product/ProductPageHeader.tsx"],"names":[],"mappings":";;;AAAO,SAAS,MAAM,OAAA,EAA2D;AAC/E,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;ACSO,SAAS,iBAAA,CAAkB;AAAA,EAChC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,uBACE,IAAA,CAAC,YAAO,SAAA,EAAW,EAAA,CAAG,0BAA0B,SAAS,CAAA,EAAI,GAAG,IAAA,EAC9D,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4BAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,6BAAA,EACZ,QAAA,EAAA;AAAA,QAAA,OAAA,mBAAU,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gCAAA,EAAkC,mBAAQ,CAAA,GAAU,IAAA;AAAA,wBAC/E,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UACV,WAAA,mBAAc,GAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA,WAAA,EAAY,CAAA,GAAO;AAAA,SAAA,EACxC;AAAA,OAAA,EACF,CAAA;AAAA,MACC,0BAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAAkC,mBAAQ,CAAA,GAAS;AAAA,KAAA,EAC/E,CAAA;AAAA,IACC,2BAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAAkC,UAAS,CAAA,GAAS;AAAA,GAAA,EACjF,CAAA;AAEJ","file":"ProductPageHeader.mjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport interface ProductPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  eyebrow?: ReactNode;\n  title: ReactNode;\n  description?: ReactNode;\n  actions?: ReactNode;\n  children?: ReactNode;\n}\n\nexport function ProductPageHeader({\n  eyebrow,\n  title,\n  description,\n  actions,\n  children,\n  className,\n  ...rest\n}: ProductPageHeaderProps) {\n  return (\n    <header className={cx('dt-product-page-header', className)} {...rest}>\n      <div className=\"dt-product-page-header-row\">\n        <div className=\"dt-product-page-header-copy\">\n          {eyebrow ? <span className=\"dt-product-page-header-eyebrow\">{eyebrow}</span> : null}\n          <div className=\"dt-product-page-header-text\">\n            <h1>{title}</h1>\n            {description ? <p>{description}</p> : null}\n          </div>\n        </div>\n        {actions ? <div className=\"dt-product-page-header-actions\">{actions}</div> : null}\n      </div>\n      {children ? <div className=\"dt-product-page-header-content\">{children}</div> : null}\n    </header>\n  );\n}\n"]}

package/dist/components/product/SectionCard.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function SectionCard({
+  eyebrow,
+  title,
+  description,
+  action,
+  children,
+  contentClassName,
+  style,
+  ...rest
+}) {
+  const hasHeader = Boolean(eyebrow || title || description || action);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      ...rest,
+      style: {
+        borderRadius: "var(--dt-radius-lg)",
+        background: "var(--dt-surface)",
+        boxShadow: "var(--dt-ring), var(--dt-shadow-xs)",
+        padding: "var(--dt-space-4)",
+        ...style
+      },
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "header",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              gap: "var(--dt-space-3)",
+              marginBottom: children ? "var(--dt-space-3)" : 0
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0 }, children: [
+                eyebrow ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    style: {
+                      marginBottom: 6,
+                      fontSize: 12,
+                      fontWeight: 650,
+                      textTransform: "uppercase",
+                      color: "var(--dt-muted)"
+                    },
+                    children: eyebrow
+                  }
+                ) : null,
+                title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: 18, fontWeight: 650, letterSpacing: "-0.01em", color: "var(--dt-ink-strong)" }, children: title }) : null,
+                description ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 6, fontSize: 13, lineHeight: 1.55, color: "var(--dt-muted-strong)", maxWidth: 560 }, children: description }) : null
+              ] }),
+              action ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: "0 0 auto" }, children: action }) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(contentClassName), children })
+      ]
+    }
+  );
+}
+
+exports.SectionCard = SectionCard;
+//# sourceMappingURL=SectionCard.cjs.map
+//# sourceMappingURL=SectionCard.cjs.map

package/dist/components/product/SectionCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/product/SectionCard.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAAO,SAAS,MAAM,OAAA,EAA2D;AAC/E,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;ACgBO,SAAS,WAAA,CAAY;AAAA,EAC1B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,OAAA,IAAW,KAAA,IAAS,eAAe,MAAM,CAAA;AACnE,EAAA,uBACEA,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,YAAA,EAAc,qBAAA;AAAA,QACd,UAAA,EAAY,mBAAA;AAAA,QACZ,SAAA,EAAW,qCAAA;AAAA,QACX,OAAA,EAAS,mBAAA;AAAA,QACT,GAAG;AAAA,OACL;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA,mBACCA,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO;AAAA,cACL,OAAA,EAAS,MAAA;AAAA,cACT,UAAA,EAAY,YAAA;AAAA,cACZ,cAAA,EAAgB,eAAA;AAAA,cAChB,GAAA,EAAK,mBAAA;AAAA,cACL,YAAA,EAAc,WAAW,mBAAA,GAAsB;AAAA,aACjD;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,GAAE,EACvB,QAAA,EAAA;AAAA,gBAAA,OAAA,mBACCC,cAAA;AAAA,kBAAC,GAAA;AAAA,kBAAA;AAAA,oBACC,KAAA,EAAO;AAAA,sBACL,YAAA,EAAc,CAAA;AAAA,sBACd,QAAA,EAAU,EAAA;AAAA,sBACV,UAAA,EAAY,GAAA;AAAA,sBACZ,aAAA,EAAe,WAAA;AAAA,sBACf,KAAA,EAAO;AAAA,qBACT;AAAA,oBAEC,QAAA,EAAA;AAAA;AAAA,iBACH,GACE,IAAA;AAAA,gBACH,KAAA,mBACCA,cAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,eAAe,SAAA,EAAW,KAAA,EAAO,sBAAA,EAAuB,EACjG,iBACH,CAAA,GACE,IAAA;AAAA,gBACH,8BACCA,cAAA,CAAC,GAAA,EAAA,EAAE,KAAA,EAAO,EAAE,WAAW,CAAA,EAAG,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,MAAM,KAAA,EAAO,wBAAA,EAA0B,UAAU,GAAA,EAAI,EACtG,uBACH,CAAA,GACE;AAAA,eAAA,EACN,CAAA;AAAA,cACC,MAAA,kCAAU,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,IAAA,EAAM,UAAA,EAAW,EAAI,QAAA,EAAA,MAAA,EAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D,GACE,IAAA;AAAA,uCACH,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,gBAAgB,GAAI,QAAA,EAAS;AAAA;AAAA;AAAA,GAClD;AAEJ","file":"SectionCard.cjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { ReactNode, HTMLAttributes } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport interface SectionCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  eyebrow?: string;\n  title?: ReactNode;\n  description?: ReactNode;\n  /** Right-aligned action (usually a ghost Button). */\n  action?: ReactNode;\n  children?: ReactNode;\n  contentClassName?: string;\n}\n\n/**\n * Console section panel — title, description, action, body. No eyebrow kicker:\n * the title is a plain noun-phrase heading, the section's own content does the\n * rest. Lay items flat inside; never card-in-card.\n */\nexport function SectionCard({\n  eyebrow,\n  title,\n  description,\n  action,\n  children,\n  contentClassName,\n  style,\n  ...rest\n}: SectionCardProps) {\n  const hasHeader = Boolean(eyebrow || title || description || action);\n  return (\n    <section\n      {...rest}\n      style={{\n        borderRadius: 'var(--dt-radius-lg)',\n        background: 'var(--dt-surface)',\n        boxShadow: 'var(--dt-ring), var(--dt-shadow-xs)',\n        padding: 'var(--dt-space-4)',\n        ...style,\n      }}\n    >\n      {hasHeader ? (\n        <header\n          style={{\n            display: 'flex',\n            alignItems: 'flex-start',\n            justifyContent: 'space-between',\n            gap: 'var(--dt-space-3)',\n            marginBottom: children ? 'var(--dt-space-3)' : 0,\n          }}\n        >\n          <div style={{ minWidth: 0 }}>\n            {eyebrow ? (\n              <p\n                style={{\n                  marginBottom: 6,\n                  fontSize: 12,\n                  fontWeight: 650,\n                  textTransform: 'uppercase',\n                  color: 'var(--dt-muted)',\n                }}\n              >\n                {eyebrow}\n              </p>\n            ) : null}\n            {title ? (\n              <h3 style={{ fontSize: 18, fontWeight: 650, letterSpacing: '-0.01em', color: 'var(--dt-ink-strong)' }}>\n                {title}\n              </h3>\n            ) : null}\n            {description ? (\n              <p style={{ marginTop: 6, fontSize: 13, lineHeight: 1.55, color: 'var(--dt-muted-strong)', maxWidth: 560 }}>\n                {description}\n              </p>\n            ) : null}\n          </div>\n          {action ? <div style={{ flex: '0 0 auto' }}>{action}</div> : null}\n        </header>\n      ) : null}\n      <div className={cx(contentClassName)}>{children}</div>\n    </section>\n  );\n}\n"]}

package/dist/components/product/SectionCard.d.cts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface SectionCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Right-aligned action (usually a ghost Button). */
+    action?: ReactNode;
+    children?: ReactNode;
+    contentClassName?: string;
+}
+/**
+ * Console section panel — title, description, action, body. No eyebrow kicker:
+ * the title is a plain noun-phrase heading, the section's own content does the
+ * rest. Lay items flat inside; never card-in-card.
+ */
+declare function SectionCard({ eyebrow, title, description, action, children, contentClassName, style, ...rest }: SectionCardProps): react.JSX.Element;
+
+export { SectionCard, type SectionCardProps };

package/dist/components/product/SectionCard.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface SectionCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Right-aligned action (usually a ghost Button). */
+    action?: ReactNode;
+    children?: ReactNode;
+    contentClassName?: string;
+}
+/**
+ * Console section panel — title, description, action, body. No eyebrow kicker:
+ * the title is a plain noun-phrase heading, the section's own content does the
+ * rest. Lay items flat inside; never card-in-card.
+ */
+declare function SectionCard({ eyebrow, title, description, action, children, contentClassName, style, ...rest }: SectionCardProps): react.JSX.Element;
+
+export { SectionCard, type SectionCardProps };

package/dist/components/product/SectionCard.mjs

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function SectionCard({
+  eyebrow,
+  title,
+  description,
+  action,
+  children,
+  contentClassName,
+  style,
+  ...rest
+}) {
+  const hasHeader = Boolean(eyebrow || title || description || action);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...rest,
+      style: {
+        borderRadius: "var(--dt-radius-lg)",
+        background: "var(--dt-surface)",
+        boxShadow: "var(--dt-ring), var(--dt-shadow-xs)",
+        padding: "var(--dt-space-4)",
+        ...style
+      },
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxs(
+          "header",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              gap: "var(--dt-space-3)",
+              marginBottom: children ? "var(--dt-space-3)" : 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                eyebrow ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      marginBottom: 6,
+                      fontSize: 12,
+                      fontWeight: 650,
+                      textTransform: "uppercase",
+                      color: "var(--dt-muted)"
+                    },
+                    children: eyebrow
+                  }
+                ) : null,
+                title ? /* @__PURE__ */ jsx("h3", { style: { fontSize: 18, fontWeight: 650, letterSpacing: "-0.01em", color: "var(--dt-ink-strong)" }, children: title }) : null,
+                description ? /* @__PURE__ */ jsx("p", { style: { marginTop: 6, fontSize: 13, lineHeight: 1.55, color: "var(--dt-muted-strong)", maxWidth: 560 }, children: description }) : null
+              ] }),
+              action ? /* @__PURE__ */ jsx("div", { style: { flex: "0 0 auto" }, children: action }) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: cx(contentClassName), children })
+      ]
+    }
+  );
+}
+
+export { SectionCard };
+//# sourceMappingURL=SectionCard.mjs.map
+//# sourceMappingURL=SectionCard.mjs.map

package/dist/components/product/SectionCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/product/SectionCard.tsx"],"names":[],"mappings":";;;AAAO,SAAS,MAAM,OAAA,EAA2D;AAC/E,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;ACgBO,SAAS,WAAA,CAAY;AAAA,EAC1B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,OAAA,IAAW,KAAA,IAAS,eAAe,MAAM,CAAA;AACnE,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,YAAA,EAAc,qBAAA;AAAA,QACd,UAAA,EAAY,mBAAA;AAAA,QACZ,SAAA,EAAW,qCAAA;AAAA,QACX,OAAA,EAAS,mBAAA;AAAA,QACT,GAAG;AAAA,OACL;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA,mBACC,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO;AAAA,cACL,OAAA,EAAS,MAAA;AAAA,cACT,UAAA,EAAY,YAAA;AAAA,cACZ,cAAA,EAAgB,eAAA;AAAA,cAChB,GAAA,EAAK,mBAAA;AAAA,cACL,YAAA,EAAc,WAAW,mBAAA,GAAsB;AAAA,aACjD;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,GAAE,EACvB,QAAA,EAAA;AAAA,gBAAA,OAAA,mBACC,GAAA;AAAA,kBAAC,GAAA;AAAA,kBAAA;AAAA,oBACC,KAAA,EAAO;AAAA,sBACL,YAAA,EAAc,CAAA;AAAA,sBACd,QAAA,EAAU,EAAA;AAAA,sBACV,UAAA,EAAY,GAAA;AAAA,sBACZ,aAAA,EAAe,WAAA;AAAA,sBACf,KAAA,EAAO;AAAA,qBACT;AAAA,oBAEC,QAAA,EAAA;AAAA;AAAA,iBACH,GACE,IAAA;AAAA,gBACH,KAAA,mBACC,GAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,eAAe,SAAA,EAAW,KAAA,EAAO,sBAAA,EAAuB,EACjG,iBACH,CAAA,GACE,IAAA;AAAA,gBACH,8BACC,GAAA,CAAC,GAAA,EAAA,EAAE,KAAA,EAAO,EAAE,WAAW,CAAA,EAAG,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,MAAM,KAAA,EAAO,wBAAA,EAA0B,UAAU,GAAA,EAAI,EACtG,uBACH,CAAA,GACE;AAAA,eAAA,EACN,CAAA;AAAA,cACC,MAAA,uBAAU,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,IAAA,EAAM,UAAA,EAAW,EAAI,QAAA,EAAA,MAAA,EAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D,GACE,IAAA;AAAA,4BACH,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,gBAAgB,GAAI,QAAA,EAAS;AAAA;AAAA;AAAA,GAClD;AAEJ","file":"SectionCard.mjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { ReactNode, HTMLAttributes } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport interface SectionCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  eyebrow?: string;\n  title?: ReactNode;\n  description?: ReactNode;\n  /** Right-aligned action (usually a ghost Button). */\n  action?: ReactNode;\n  children?: ReactNode;\n  contentClassName?: string;\n}\n\n/**\n * Console section panel — title, description, action, body. No eyebrow kicker:\n * the title is a plain noun-phrase heading, the section's own content does the\n * rest. Lay items flat inside; never card-in-card.\n */\nexport function SectionCard({\n  eyebrow,\n  title,\n  description,\n  action,\n  children,\n  contentClassName,\n  style,\n  ...rest\n}: SectionCardProps) {\n  const hasHeader = Boolean(eyebrow || title || description || action);\n  return (\n    <section\n      {...rest}\n      style={{\n        borderRadius: 'var(--dt-radius-lg)',\n        background: 'var(--dt-surface)',\n        boxShadow: 'var(--dt-ring), var(--dt-shadow-xs)',\n        padding: 'var(--dt-space-4)',\n        ...style,\n      }}\n    >\n      {hasHeader ? (\n        <header\n          style={{\n            display: 'flex',\n            alignItems: 'flex-start',\n            justifyContent: 'space-between',\n            gap: 'var(--dt-space-3)',\n            marginBottom: children ? 'var(--dt-space-3)' : 0,\n          }}\n        >\n          <div style={{ minWidth: 0 }}>\n            {eyebrow ? (\n              <p\n                style={{\n                  marginBottom: 6,\n                  fontSize: 12,\n                  fontWeight: 650,\n                  textTransform: 'uppercase',\n                  color: 'var(--dt-muted)',\n                }}\n              >\n                {eyebrow}\n              </p>\n            ) : null}\n            {title ? (\n              <h3 style={{ fontSize: 18, fontWeight: 650, letterSpacing: '-0.01em', color: 'var(--dt-ink-strong)' }}>\n                {title}\n              </h3>\n            ) : null}\n            {description ? (\n              <p style={{ marginTop: 6, fontSize: 13, lineHeight: 1.55, color: 'var(--dt-muted-strong)', maxWidth: 560 }}>\n                {description}\n              </p>\n            ) : null}\n          </div>\n          {action ? <div style={{ flex: '0 0 auto' }}>{action}</div> : null}\n        </header>\n      ) : null}\n      <div className={cx(contentClassName)}>{children}</div>\n    </section>\n  );\n}\n"]}