@godxjp/ui 33.19.0 → 33.21.0

package/dist/components/layout/editorial-account.js

@@ -0,0 +1,466 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Search } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const headingTag = (level) => level === 3 ? "h3" : "h2";
+function EditorialToggleGroup({
+  items,
+  value,
+  onValueChange,
+  variant = "text",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": rest["aria-label"],
+      "data-slot": "editorial-toggle-group",
+      "data-variant": variant,
+      className: cn("ui-editorial-toggle-group", className),
+      children: items.map((item) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": item.value === value,
+          "aria-label": variant === "icon" ? item.label : void 0,
+          title: variant === "icon" ? item.label : void 0,
+          className: "ui-editorial-toggle-group-option ui-focus-ring",
+          onClick: () => onValueChange(item.value),
+          children: [
+            item.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-editorial-toggle-group-icon", children: item.icon }),
+            variant === "text" && item.label
+          ]
+        },
+        item.value
+      ))
+    }
+  );
+}
+function EditorialMetaBar({ icon, start, end, className }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-meta-bar", className: cn("ui-editorial-meta-bar", className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "ui-editorial-meta-bar-start", children: [
+      icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-editorial-meta-bar-icon", children: icon }),
+      start
+    ] }),
+    end != null && /* @__PURE__ */ jsx("span", { className: "ui-editorial-meta-bar-end", children: end })
+  ] });
+}
+function EditorialEmptyPanel({
+  variant = "guest",
+  eyebrow,
+  title,
+  level,
+  description,
+  actions,
+  icon,
+  className
+}) {
+  const Heading = headingTag(level);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "editorial-empty-panel",
+      "data-variant": variant,
+      className: cn("ui-editorial-empty-panel", className),
+      children: [
+        variant === "guest" ? /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "ui-editorial-empty-panel-art", children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {})
+        ] }) : icon != null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "ui-editorial-empty-panel-icon", children: icon }),
+        eyebrow,
+        /* @__PURE__ */ jsx(Heading, { className: "ui-editorial-empty-panel-title", children: title }),
+        description != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-empty-panel-description", children: description }),
+        actions != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-empty-panel-actions", children: actions })
+      ]
+    }
+  );
+}
+function EditorialStats({ items, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "aria-label": rest["aria-label"],
+      "data-slot": "editorial-stats",
+      className: cn("ui-editorial-stats", className),
+      children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "ui-editorial-stats-item", children: [
+        /* @__PURE__ */ jsx("span", { className: "ui-editorial-stats-label", children: item.label }),
+        /* @__PURE__ */ jsxs("strong", { className: "ui-editorial-stats-value", children: [
+          item.value,
+          item.unit != null && /* @__PURE__ */ jsx("small", { className: "ui-editorial-stats-unit", children: item.unit })
+        ] }),
+        item.note != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-stats-note", children: item.note })
+      ] }, index))
+    }
+  );
+}
+function EditorialToolbar({
+  summary,
+  start,
+  end,
+  divider = false,
+  className
+}) {
+  const hasSummary = summary != null && (summary.count != null || summary.note != null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "editorial-toolbar",
+      "data-summary": hasSummary ? "" : void 0,
+      "data-divider": divider ? "" : void 0,
+      className: cn("ui-editorial-toolbar", className),
+      children: [
+        hasSummary && /* @__PURE__ */ jsxs("div", { className: "ui-editorial-toolbar-summary", children: [
+          summary.count != null && /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "ui-editorial-toolbar-count", children: summary.count }),
+          summary.note != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-toolbar-note", children: summary.note })
+        ] }),
+        start != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-toolbar-start", children: start }),
+        end != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-toolbar-end", children: end })
+      ]
+    }
+  );
+}
+function HoldingGrid({ view = "grid", children, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "aria-label": rest["aria-label"],
+      "data-slot": "holding-grid",
+      "data-view": view,
+      className: cn("ui-holding-grid", className),
+      children: React.Children.map(
+        children,
+        (child) => child == null || child === false ? null : /* @__PURE__ */ jsx("li", { className: "ui-holding-grid-item", children: child })
+      )
+    }
+  );
+}
+function HoldingCard({
+  media,
+  overline,
+  title,
+  level,
+  meta,
+  tags,
+  purchase,
+  date,
+  actions,
+  className
+}) {
+  const Heading = headingTag(level);
+  const mediaBox = React.isValidElement(media) ? React.cloneElement(media, {
+    className: cn("ui-holding-card-media", media.props.className)
+  }) : /* @__PURE__ */ jsx("div", { className: "ui-holding-card-media", children: media });
+  return /* @__PURE__ */ jsxs("article", { "data-slot": "holding-card", className: cn("ui-holding-card", className), children: [
+    mediaBox,
+    /* @__PURE__ */ jsxs("div", { className: "ui-holding-card-body", children: [
+      overline != null && /* @__PURE__ */ jsx("p", { className: "ui-holding-card-overline", children: overline }),
+      /* @__PURE__ */ jsx(Heading, { className: "ui-holding-card-title", children: title }),
+      meta != null && /* @__PURE__ */ jsx("p", { className: "ui-holding-card-meta", children: meta }),
+      tags != null && tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "ui-holding-card-tags", children: tags.map((tag, index) => /* @__PURE__ */ jsx("span", { className: "ui-holding-card-tag", children: tag }, index)) }),
+      purchase != null && /* @__PURE__ */ jsxs("div", { className: "ui-holding-card-purchase", children: [
+        /* @__PURE__ */ jsx("span", { className: "ui-holding-card-purchase-label", children: purchase.label }),
+        /* @__PURE__ */ jsx("strong", { className: "ui-holding-card-purchase-value", children: purchase.value })
+      ] }),
+      date != null && /* @__PURE__ */ jsx("p", { className: "ui-holding-card-date", children: date }),
+      actions != null && /* @__PURE__ */ jsx("div", { className: "ui-holding-card-actions", children: actions })
+    ] })
+  ] });
+}
+function HoldingCardAction({
+  icon,
+  children,
+  asChild,
+  onClick,
+  disabled,
+  className,
+  ...rest
+}) {
+  const glyph = icon != null ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-holding-card-action-icon", children: icon }) : null;
+  if (asChild && React.isValidElement(children)) {
+    const child = children;
+    return React.cloneElement(
+      child,
+      {
+        "aria-label": rest["aria-label"],
+        className: cn("ui-holding-card-action ui-focus-ring", className, child.props.className)
+      },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        glyph,
+        child.props.children
+      ] })
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": rest["aria-label"],
+      disabled,
+      onClick,
+      className: cn("ui-holding-card-action ui-focus-ring", className),
+      children: [
+        glyph,
+        children
+      ]
+    }
+  );
+}
+function SettingsLayout({ aside, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "settings-layout", className: cn("ui-settings-layout", className), children: [
+    aside != null && /* @__PURE__ */ jsx("aside", { className: "ui-settings-layout-aside", children: aside }),
+    /* @__PURE__ */ jsx("div", { className: "ui-settings-layout-panels", children })
+  ] });
+}
+function SettingsPanel({
+  number,
+  title,
+  level,
+  description,
+  children,
+  titleId,
+  className
+}) {
+  const Heading = headingTag(level);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      "data-slot": "settings-panel",
+      className: cn("ui-settings-panel", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-settings-panel-head", children: [
+          number != null && /* @__PURE__ */ jsx("span", { className: "ui-settings-panel-number", children: number }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Heading, { id: titleId, className: "ui-settings-panel-title", children: title }),
+            description != null && /* @__PURE__ */ jsx("p", { className: "ui-settings-panel-description", children: description })
+          ] })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function ThemePicker({
+  legend,
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  className
+}) {
+  const reactId = React.useId();
+  const groupName = name ?? `theme-picker-${reactId}`;
+  const [inner, setInner] = React.useState(defaultValue);
+  const current = value !== void 0 ? value : inner;
+  return /* @__PURE__ */ jsxs("fieldset", { "data-slot": "theme-picker", className: cn("ui-theme-picker", className), children: [
+    /* @__PURE__ */ jsx("legend", { className: "sr-only", children: legend }),
+    options.map((option) => /* @__PURE__ */ jsxs("label", { className: "ui-theme-picker-option", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          name: groupName,
+          value: option.value,
+          checked: current === option.value,
+          onChange: () => {
+            if (value === void 0) setInner(option.value);
+            onValueChange?.(option.value);
+          },
+          className: "ui-theme-picker-input"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { "aria-hidden": true, "data-preview": option.preview, className: "ui-theme-picker-preview", children: [
+        /* @__PURE__ */ jsx("i", {}),
+        /* @__PURE__ */ jsx("i", {}),
+        /* @__PURE__ */ jsx("i", {})
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "ui-theme-picker-label", children: [
+        option.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-theme-picker-icon", children: option.icon }),
+        option.label
+      ] })
+    ] }, option.value))
+  ] });
+}
+function EditorialAuth({
+  eyebrow,
+  title,
+  description,
+  art,
+  benefits,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-auth", className: cn("ui-editorial-auth", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-editorial-auth-story", children: [
+      eyebrow,
+      /* @__PURE__ */ jsx("h1", { className: "ui-editorial-auth-title", children: title }),
+      description != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-auth-description", children: description }),
+      /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "ui-editorial-auth-art", children: [
+        /* @__PURE__ */ jsx("div", {}),
+        /* @__PURE__ */ jsx("div", { children: art })
+      ] }),
+      benefits != null && benefits.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ui-editorial-auth-benefits", children: benefits.map((benefit, index) => /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "ui-editorial-auth-benefit-icon" }),
+        benefit
+      ] }, index)) })
+    ] }),
+    children
+  ] });
+}
+function EditorialAuthCard({
+  badge,
+  title,
+  level,
+  description,
+  children,
+  footer,
+  className
+}) {
+  const Heading = headingTag(level);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-auth-card", className: cn("ui-editorial-auth-card", className), children: [
+    badge != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-auth-card-badge", children: badge }),
+    /* @__PURE__ */ jsx(Heading, { className: "ui-editorial-auth-card-title", children: title }),
+    description != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-auth-card-description", children: description }),
+    /* @__PURE__ */ jsx("div", { className: "ui-editorial-auth-card-body", children }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-auth-card-footer", children: footer })
+  ] });
+}
+function EditorialTextButton({
+  children,
+  icon,
+  asChild,
+  onClick,
+  disabled,
+  className
+}) {
+  const glyph = icon != null ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-editorial-text-button-icon", children: icon }) : null;
+  if (asChild && React.isValidElement(children)) {
+    const child = children;
+    return React.cloneElement(
+      child,
+      { className: cn("ui-editorial-text-button ui-focus-ring", className, child.props.className) },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        child.props.children,
+        glyph
+      ] })
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick,
+      className: cn("ui-editorial-text-button ui-focus-ring", className),
+      children: [
+        children,
+        glyph
+      ]
+    }
+  );
+}
+function EditorialSearchInline({
+  label,
+  id,
+  placeholder,
+  defaultValue,
+  onSearch,
+  debounce = 300,
+  count,
+  className
+}) {
+  const reactId = React.useId();
+  const inputId = id ?? `editorial-inline-search-${reactId}`;
+  const timer = React.useRef(void 0);
+  const last = React.useRef((defaultValue ?? "").trim());
+  const report = React.useCallback(
+    (value) => {
+      const query = value.trim();
+      if (query === last.current) return;
+      last.current = query;
+      onSearch?.(query);
+    },
+    [onSearch]
+  );
+  React.useEffect(() => () => clearTimeout(timer.current), []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "search",
+      "aria-label": label,
+      "data-slot": "editorial-search",
+      "data-variant": "inline",
+      className: cn("ui-editorial-search-inline", className),
+      children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ui-editorial-search-inline-label", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "ui-editorial-search-inline-field", children: [
+          /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "ui-editorial-search-inline-icon" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type: "search",
+              placeholder,
+              defaultValue,
+              autoComplete: "off",
+              className: "ui-editorial-search-inline-input ui-focus-ring",
+              onChange: (event) => {
+                const value = event.currentTarget.value;
+                clearTimeout(timer.current);
+                timer.current = setTimeout(() => report(value), debounce);
+              },
+              onKeyDown: (event) => {
+                if (event.key !== "Enter") return;
+                clearTimeout(timer.current);
+                report(event.currentTarget.value);
+              }
+            }
+          )
+        ] }),
+        count != null && /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "ui-editorial-search-inline-count", children: count })
+      ]
+    }
+  );
+}
+function EditorialFootnote({
+  children,
+  action,
+  align = "start",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "editorial-footnote",
+      "data-align": align === "start" ? void 0 : align,
+      className: cn("ui-editorial-footnote", className),
+      children: [
+        children != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-footnote-body", children }),
+        action != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-footnote-action", children: action })
+      ]
+    }
+  );
+}
+export {
+  EditorialAuth,
+  EditorialAuthCard,
+  EditorialEmptyPanel,
+  EditorialFootnote,
+  EditorialMetaBar,
+  EditorialSearchInline,
+  EditorialStats,
+  EditorialTextButton,
+  EditorialToggleGroup,
+  EditorialToolbar,
+  HoldingCard,
+  HoldingCardAction,
+  HoldingGrid,
+  SettingsLayout,
+  SettingsPanel,
+  ThemePicker
+};

package/dist/components/layout/editorial-catalog.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { CatalogDetailProp, CatalogDetailSectionProp, CatalogDetailTagProp, EditorialFilterFieldProp, EditorialFilterPanelProp, EditorialPromptProp, PriceSummaryProp } from "../../props/components/layout.prop.js";
+export type { CatalogDetailProp, CatalogDetailProp as CatalogDetailProps, CatalogDetailSectionProp, CatalogDetailSectionProp as CatalogDetailSectionProps, CatalogDetailTagProp, EditorialPromptProp, EditorialPromptProp as EditorialPromptProps, PriceSummaryProp, PriceSummaryProp as PriceSummaryProps, } from "../../props/components/layout.prop.js";
+export type { EditorialFilterFieldProp, EditorialFilterFieldProp as EditorialFilterFieldProps, EditorialFilterPanelProp, EditorialFilterPanelProp as EditorialFilterPanelProps, } from "../../props/components/layout.prop.js";
+/** A catalog's filter panel: labelled fields that wrap, bottom aligned, and a trailing action. */
+export declare function EditorialFilterPanel({ variant, children, action, className, ...rest }: EditorialFilterPanelProp): React.JSX.Element;
+/** One field of an `EditorialFilterPanel`: a visible label over one control. */
+export declare function EditorialFilterField({ label, htmlFor, children, className, }: EditorialFilterFieldProp): React.JSX.Element;
+/** The head of a catalog item's page: framed picture beside kicker, h1, tags, summary, facts. */
+export declare function CatalogDetail({ variant, media, favorite, mediaCaption, overline, title, meta, summary, actions, facts, className, }: CatalogDetailProp): React.JSX.Element;
+/** One outlined tag in a `CatalogDetail` meta row. */
+export declare function CatalogDetailTag({ children, className }: CatalogDetailTagProp): React.JSX.Element;
+/** One band of an item page under its head: hairline, h2, muted paragraph, then the rest. */
+export declare function CatalogDetailSection({ variant, title, description, children, id, titleId, className, }: CatalogDetailSectionProp): React.JSX.Element;
+/** A joined strip of headline figures, with an optional wider context cell. */
+export declare function PriceSummary({ items, context, className }: PriceSummaryProp): React.JSX.Element;
+/** A polite inline invitation: round glyph, heading, paragraph, note, one action. */
+export declare function EditorialPrompt({ icon, title, description, note, action, level, className, }: EditorialPromptProp): React.JSX.Element;

package/dist/components/layout/editorial-catalog.js

@@ -0,0 +1,164 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bookmark } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+function EditorialFilterPanel({
+  variant = "panel",
+  children,
+  action,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": rest["aria-label"],
+      "data-slot": "editorial-filter-panel",
+      "data-variant": variant === "bare" ? "bare" : void 0,
+      className: cn("ui-editorial-filter-panel", className),
+      children: [
+        children,
+        action != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-filter-panel-action", children: action })
+      ]
+    }
+  );
+}
+function EditorialFilterField({
+  label,
+  htmlFor,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-filter-field", className: cn("ui-editorial-filter-field", className), children: [
+    /* @__PURE__ */ jsx("label", { htmlFor, className: "ui-editorial-filter-field-label", children: label }),
+    children
+  ] });
+}
+function CatalogDetail({
+  variant = "card",
+  media,
+  favorite,
+  mediaCaption,
+  overline,
+  title,
+  meta,
+  summary,
+  actions,
+  facts,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "catalog-detail",
+      "data-variant": variant,
+      className: cn("ui-catalog-detail", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-visual", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-art", children: [
+            favorite && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": favorite.pressed,
+                "aria-label": favorite.label,
+                disabled: favorite.disabled,
+                className: "ui-catalog-card-favorite ui-focus-ring",
+                onClick: () => favorite.onPressedChange(!favorite.pressed),
+                children: /* @__PURE__ */ jsx(Bookmark, { "aria-hidden": true, className: "ui-catalog-card-favorite-icon" })
+              }
+            ),
+            media
+          ] }),
+          mediaCaption != null && /* @__PURE__ */ jsx("p", { className: "ui-catalog-detail-caption", children: mediaCaption })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-main", children: [
+          overline,
+          /* @__PURE__ */ jsx("h1", { className: "ui-catalog-detail-title", children: title }),
+          meta != null && /* @__PURE__ */ jsx("div", { className: "ui-catalog-detail-meta", children: meta }),
+          summary && /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-summary", children: [
+            summary.label != null && /* @__PURE__ */ jsx("p", { className: "ui-catalog-detail-summary-label", children: summary.label }),
+            /* @__PURE__ */ jsx("p", { className: "ui-catalog-detail-summary-price", children: summary.price }),
+            summary.note != null && /* @__PURE__ */ jsx("p", { className: "ui-catalog-detail-summary-note", children: summary.note })
+          ] }),
+          actions != null && /* @__PURE__ */ jsx("div", { className: "ui-catalog-detail-actions", children: actions }),
+          facts && facts.length > 0 && /* @__PURE__ */ jsx("dl", { className: "ui-catalog-detail-facts", children: facts.map((fact) => /* @__PURE__ */ jsxs("div", { className: "ui-catalog-detail-fact", children: [
+            /* @__PURE__ */ jsx("dt", { children: fact.label }),
+            /* @__PURE__ */ jsx("dd", { children: fact.value })
+          ] }, fact.key)) })
+        ] })
+      ]
+    }
+  );
+}
+function CatalogDetailTag({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("ui-catalog-detail-tag", className), children });
+}
+function CatalogDetailSection({
+  variant = "band",
+  title,
+  description,
+  children,
+  id,
+  titleId,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id,
+      "aria-labelledby": title != null ? titleId : void 0,
+      "data-slot": "catalog-detail-section",
+      "data-variant": variant === "module" ? "module" : void 0,
+      className: cn("ui-catalog-detail-section", className),
+      children: [
+        title != null && /* @__PURE__ */ jsx("h2", { id: titleId, className: "ui-catalog-detail-section-title", children: title }),
+        description != null && /* @__PURE__ */ jsx("p", { className: "ui-catalog-detail-section-description", children: description }),
+        children
+      ]
+    }
+  );
+}
+function PriceSummary({ items, context, className }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "price-summary", className: cn("ui-price-summary", className), children: [
+    items.map((item) => /* @__PURE__ */ jsxs("div", { className: "ui-price-summary-cell", children: [
+      /* @__PURE__ */ jsx("span", { className: "ui-price-summary-label", children: item.label }),
+      /* @__PURE__ */ jsx("strong", { className: "ui-price-summary-value", children: item.value }),
+      item.caption != null && /* @__PURE__ */ jsx("small", { className: "ui-price-summary-caption", children: item.caption })
+    ] }, item.key)),
+    context && /* @__PURE__ */ jsxs("div", { className: "ui-price-summary-cell", "data-context": "", children: [
+      /* @__PURE__ */ jsx("span", { className: "ui-price-summary-label", children: context.label }),
+      /* @__PURE__ */ jsx("b", { className: "ui-price-summary-context", children: context.value }),
+      context.caption != null && /* @__PURE__ */ jsx("small", { className: "ui-price-summary-caption", children: context.caption })
+    ] })
+  ] });
+}
+function EditorialPrompt({
+  icon,
+  title,
+  description,
+  note,
+  action,
+  level = 3,
+  className
+}) {
+  const Heading = level === 2 ? "h2" : level === 4 ? "h4" : "h3";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-prompt", className: cn("ui-editorial-prompt", className), children: [
+    icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-editorial-prompt-icon", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "ui-editorial-prompt-copy", children: [
+      /* @__PURE__ */ jsx(Heading, { className: "ui-editorial-prompt-title", children: title }),
+      description != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-prompt-description", children: description }),
+      note != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-prompt-note", children: note })
+    ] }),
+    action != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-prompt-action", children: action })
+  ] });
+}
+export {
+  CatalogDetail,
+  CatalogDetailSection,
+  CatalogDetailTag,
+  EditorialFilterField,
+  EditorialFilterPanel,
+  EditorialPrompt,
+  PriceSummary
+};