@kubuild/components 0.7.0 → 0.8.0

package/dist/{chunk-3HU2KE2B.js → chunk-CJN5OHHX.js}

@@ -149,7 +149,20 @@ var ComponentRegistry = class {
 };
 
 // src/definitions/constants.ts
-var LAYOUT_PARENTS = ["page", "section", "container", "columns", "flex", "grid", "modal", "drawer", "collapsible"];
+var LAYOUT_PARENTS = [
+  "page",
+  "section",
+  "container",
+  "columns",
+  "flex",
+  "grid",
+  "modal",
+  "drawer",
+  "collapsible",
+  "accordion-item",
+  "tab-panel",
+  "carousel"
+];
 var CONTENT_CHILD_TYPES = [
   "heading",
   "text",
@@ -180,7 +193,14 @@ var CONTENT_CHILD_TYPES = [
   "custom",
   "modal",
   "drawer",
-  "collapsible"
+  "collapsible",
+  "countdown",
+  "accordion",
+  "tabs",
+  "carousel",
+  "rating",
+  "divider",
+  "spacer"
 ];
 
 // src/definitions/layout/page.ts
@@ -350,12 +370,26 @@ var gridDefinition = {
 
 // src/definitions/typography/heading.ts
 import { isVariableBinding } from "@kubuild/schema";
+
+// src/canonical-props.ts
+import { getCanonicalTextPropRule } from "@kubuild/schema";
+function canonicalTextPropFields(componentType) {
+  const rule = getCanonicalTextPropRule(componentType);
+  if (!rule) return {};
+  return {
+    canonicalTextProp: rule.canonical,
+    deprecatedPropAliases: Object.fromEntries(rule.aliases.map((alias) => [alias, rule.canonical]))
+  };
+}
+
+// src/definitions/typography/heading.ts
 var headingDefinition = {
   type: "heading",
   label: "Heading",
   category: "typography",
   icon: "heading",
   acceptsChildren: false,
+  ...canonicalTextPropFields("heading"),
   defaultProps: { text: "Heading Text", level: 2 },
   propFields: [
     { name: "text", label: "Text", type: "string", defaultValue: "Heading Text" },
@@ -381,7 +415,8 @@ var headingDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (!isVariableBinding(props.text) && (typeof props.text !== "string" || props.text.trim().length === 0)) {
+    const text = props.text ?? props.content;
+    if (!isVariableBinding(text) && (typeof text !== "string" || text.trim().length === 0)) {
       errors.push('Heading requires a non-empty "text".');
     }
     if (props.level !== void 0 && (typeof props.level !== "number" || props.level < 1 || props.level > 6)) {
@@ -407,9 +442,11 @@ var textDefinition = {
   category: "typography",
   icon: "type",
   acceptsChildren: false,
-  defaultProps: { content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." },
+  ...canonicalTextPropFields("text"),
+  // `as: 'p'` keeps the block-level rendering the old `content` default produced (STORA-550).
+  defaultProps: { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", as: "p" },
   propFields: [
-    { name: "content", label: "Content", type: "string", defaultValue: "Lorem ipsum dolor sit amet." }
+    { name: "text", label: "Content", type: "string", defaultValue: "Lorem ipsum dolor sit amet." }
   ],
   traits: [
     idTrait(),
@@ -417,8 +454,9 @@ var textDefinition = {
     ariaLabelTrait()
   ],
   validateProps: (props) => {
-    if (!isVariableBinding2(props.content) && (typeof props.content !== "string" || props.content.trim().length === 0)) {
-      return ['Text requires a non-empty "content".'];
+    const value = props.text ?? props.content;
+    if (!isVariableBinding2(value) && (typeof value !== "string" || value.trim().length === 0)) {
+      return ['Text requires a non-empty "text".'];
     }
     return true;
   },
@@ -439,6 +477,7 @@ var paragraphDefinition = {
   category: "typography",
   icon: "paragraph",
   acceptsChildren: false,
+  ...canonicalTextPropFields("paragraph"),
   defaultProps: {
     text: "A paragraph of text with clean semantic typography."
   },
@@ -481,6 +520,7 @@ var linkDefinition = {
   category: "typography",
   icon: "link",
   acceptsChildren: false,
+  ...canonicalTextPropFields("link"),
   defaultProps: {
     text: "Click here",
     href: "#",
@@ -561,6 +601,7 @@ var blockquoteDefinition = {
     "html-embed",
     "custom"
   ],
+  ...canonicalTextPropFields("blockquote"),
   defaultProps: {
     text: "\u201CSimplicity is the soul of efficiency.\u201D"
   },
@@ -614,6 +655,7 @@ var badgeDefinition = {
   category: "typography",
   icon: "badge",
   acceptsChildren: false,
+  ...canonicalTextPropFields("badge"),
   defaultProps: {
     text: "Badge",
     variant: "default"
@@ -1286,6 +1328,7 @@ var buttonDefinition = {
   icon: "mouse-pointer",
   acceptsChildren: false,
   capabilities: ["actionRegistry"],
+  ...canonicalTextPropFields("button"),
   defaultProps: {
     label: "Click Me",
     variant: "primary"
@@ -2616,6 +2659,526 @@ var collapsibleDefinition = {
   }
 };
 
+// src/definitions/conversion/countdown.ts
+import { isVariableBinding as isVariableBinding23 } from "@kubuild/schema";
+var COUNTDOWN_MODES = ["evergreen", "fixed"];
+var COUNTDOWN_FORMATS = ["mm:ss", "hh:mm:ss", "d h m s"];
+var COUNTDOWN_EXPIRE_BEHAVIORS = ["text", "hide", "zero"];
+var COUNTDOWN_STORAGE_TYPES = ["session", "local"];
+var countdownDefinition = {
+  type: "countdown",
+  label: "Countdown",
+  category: "interactive",
+  icon: "clock",
+  description: "Urgency timer for limited offers (evergreen per-visitor or fixed deadline).",
+  acceptsChildren: false,
+  defaultProps: {
+    mode: "evergreen",
+    durationMinutes: 15,
+    targetDate: "",
+    timezone: "UTC",
+    format: "hh:mm:ss",
+    label: "",
+    labelDays: "Days",
+    labelHours: "Hours",
+    labelMinutes: "Minutes",
+    labelSeconds: "Seconds",
+    expireBehavior: "text",
+    expiredText: "This offer has expired.",
+    storage: "session",
+    storageKey: ""
+  },
+  propFields: [
+    {
+      name: "mode",
+      label: "Mode",
+      type: "select",
+      defaultValue: "evergreen",
+      options: [
+        { label: "Evergreen (per visitor)", value: "evergreen" },
+        { label: "Fixed date", value: "fixed" }
+      ]
+    },
+    {
+      name: "durationMinutes",
+      label: "Duration (minutes)",
+      type: "number",
+      defaultValue: 15,
+      description: "Evergreen mode: how long each visitor gets from their first view."
+    },
+    {
+      name: "targetDate",
+      label: "Target Date/Time",
+      type: "string",
+      defaultValue: "",
+      description: 'Fixed mode: wall-clock time "YYYY-MM-DDTHH:mm" in the selected timezone.'
+    },
+    {
+      name: "timezone",
+      label: "Timezone",
+      type: "string",
+      defaultValue: "UTC",
+      description: 'Fixed mode: IANA timezone name, e.g. "Asia/Jakarta" or "Europe/London".'
+    },
+    {
+      name: "format",
+      label: "Format",
+      type: "select",
+      defaultValue: "hh:mm:ss",
+      options: [
+        { label: "mm:ss", value: "mm:ss" },
+        { label: "hh:mm:ss", value: "hh:mm:ss" },
+        { label: "d h m s (unit blocks)", value: "d h m s" }
+      ]
+    },
+    {
+      name: "label",
+      label: "Label",
+      type: "string",
+      defaultValue: "",
+      description: 'Optional text shown before the timer, e.g. "Offer ends in".'
+    },
+    { name: "labelDays", label: "Days Label", type: "string", defaultValue: "Days" },
+    { name: "labelHours", label: "Hours Label", type: "string", defaultValue: "Hours" },
+    { name: "labelMinutes", label: "Minutes Label", type: "string", defaultValue: "Minutes" },
+    { name: "labelSeconds", label: "Seconds Label", type: "string", defaultValue: "Seconds" },
+    {
+      name: "expireBehavior",
+      label: "When Expired",
+      type: "select",
+      defaultValue: "text",
+      options: [
+        { label: "Show expired text", value: "text" },
+        { label: "Hide timer", value: "hide" },
+        { label: "Keep showing zeros", value: "zero" }
+      ],
+      description: 'Add an "On Expire" action pipeline to redirect, show a toast, open a modal, etc.'
+    },
+    {
+      name: "expiredText",
+      label: "Expired Text",
+      type: "string",
+      defaultValue: "This offer has expired."
+    },
+    {
+      name: "storage",
+      label: "Evergreen Storage",
+      type: "select",
+      defaultValue: "session",
+      options: [
+        { label: "Session (per browser session)", value: "session" },
+        { label: "Local (persists across visits)", value: "local" }
+      ]
+    },
+    {
+      name: "storageKey",
+      label: "Storage Key",
+      type: "string",
+      defaultValue: "",
+      description: "Share one deadline across pages by using the same key (defaults to the node id)."
+    }
+  ],
+  traits: [
+    idTrait(),
+    ariaLabelTrait({ description: 'Accessible name for the timer, e.g. "Offer ends in".' })
+  ],
+  defaultStyles: {
+    base: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "12px",
+      fontSize: "28px",
+      fontWeight: "700",
+      fontVariantNumeric: "tabular-nums"
+    }
+  },
+  validateProps: (props) => {
+    const errors = [];
+    const checkEnum = (name, allowed) => {
+      const value = props[name];
+      if (value === void 0 || isVariableBinding23(value)) return;
+      if (typeof value !== "string" || !allowed.includes(value)) {
+        errors.push(`Countdown "${name}" must be one of: ${allowed.join(", ")}.`);
+      }
+    };
+    checkEnum("mode", COUNTDOWN_MODES);
+    checkEnum("format", COUNTDOWN_FORMATS);
+    checkEnum("expireBehavior", COUNTDOWN_EXPIRE_BEHAVIORS);
+    checkEnum("storage", COUNTDOWN_STORAGE_TYPES);
+    const duration = props.durationMinutes;
+    if (duration !== void 0 && !isVariableBinding23(duration)) {
+      if (typeof duration !== "number" || !Number.isFinite(duration) || duration < 0) {
+        errors.push('Countdown "durationMinutes" must be a non-negative number.');
+      }
+    }
+    return errors;
+  }
+};
+
+// src/definitions/conversion/accordion.ts
+import { isVariableBinding as isVariableBinding24 } from "@kubuild/schema";
+var accordionDefinition = {
+  type: "accordion",
+  label: "Accordion",
+  category: "interactive",
+  icon: "chevron-down",
+  description: "Group of expandable items (FAQ) with single- or multi-open behavior.",
+  acceptsChildren: true,
+  allowedChildren: ["accordion-item"],
+  defaultProps: {
+    allowMultiple: false,
+    defaultOpenIndex: 0,
+    icon: "chevron",
+    faqSchema: false
+  },
+  defaultChildren: [
+    {
+      type: "accordion-item",
+      props: { title: "What is included?" },
+      children: [{ type: "paragraph", props: { text: "Everything you need to get started." } }]
+    },
+    {
+      type: "accordion-item",
+      props: { title: "Can I get a refund?" },
+      children: [{ type: "paragraph", props: { text: "Yes, within 30 days of purchase." } }]
+    },
+    {
+      type: "accordion-item",
+      props: { title: "How do I get access?" },
+      children: [
+        { type: "paragraph", props: { text: "You receive an email right after checkout." } }
+      ]
+    }
+  ],
+  propFields: [
+    {
+      name: "allowMultiple",
+      label: "Allow Multiple Open",
+      type: "boolean",
+      defaultValue: false,
+      description: "When off, opening an item closes the others."
+    },
+    {
+      name: "defaultOpenIndex",
+      label: "Default Open Item",
+      type: "number",
+      defaultValue: 0,
+      description: "Zero-based index of the item open on first render (-1 = all closed)."
+    },
+    {
+      name: "icon",
+      label: "Icon",
+      type: "select",
+      defaultValue: "chevron",
+      options: [
+        { label: "Chevron", value: "chevron" },
+        { label: "Plus / Minus", value: "plus" },
+        { label: "None", value: "none" }
+      ]
+    },
+    {
+      name: "faqSchema",
+      label: "Output FAQPage JSON-LD",
+      type: "boolean",
+      defaultValue: false,
+      description: "Emits schema.org FAQPage structured data on the published page for SEO."
+    }
+  ],
+  traits: [idTrait(), ariaLabelTrait({ description: "Accessible name for the accordion group." })],
+  defaultStyles: {
+    base: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      borderTop: "1px solid #e2e8f0"
+    }
+  },
+  validateProps: (props) => {
+    const errors = [];
+    const idx = props.defaultOpenIndex;
+    if (idx !== void 0 && !isVariableBinding24(idx) && (typeof idx !== "number" || !Number.isInteger(idx))) {
+      errors.push('Accordion "defaultOpenIndex" must be an integer.');
+    }
+    return errors;
+  }
+};
+var accordionItemDefinition = {
+  type: "accordion-item",
+  label: "Accordion Item",
+  category: "interactive",
+  icon: "chevron-right",
+  description: "One question/answer row of an accordion: a title header plus content children.",
+  acceptsChildren: true,
+  allowedChildren: ["container", "columns", "flex", "grid", ...CONTENT_CHILD_TYPES],
+  defaultProps: {
+    title: "Question"
+  },
+  defaultChildren: [{ type: "paragraph", props: { text: "Answer goes here." } }],
+  propFields: [{ name: "title", label: "Title", type: "string", defaultValue: "Question" }],
+  traits: [idTrait()],
+  defaultStyles: {
+    base: {
+      borderBottom: "1px solid #e2e8f0"
+    }
+  }
+};
+
+// src/definitions/conversion/tabs.ts
+import { isVariableBinding as isVariableBinding25 } from "@kubuild/schema";
+var tabsDefinition = {
+  type: "tabs",
+  label: "Tabs",
+  category: "interactive",
+  icon: "tabs",
+  description: "Tabbed content for product variants, specifications, or plan comparison.",
+  acceptsChildren: true,
+  allowedChildren: ["tab-panel"],
+  defaultProps: {
+    activeIndex: 0
+  },
+  defaultChildren: [
+    {
+      type: "tab-panel",
+      props: { label: "Tab 1" },
+      children: [{ type: "paragraph", props: { text: "Content for the first tab." } }]
+    },
+    {
+      type: "tab-panel",
+      props: { label: "Tab 2" },
+      children: [{ type: "paragraph", props: { text: "Content for the second tab." } }]
+    }
+  ],
+  propFields: [
+    {
+      name: "activeIndex",
+      label: "Active Tab",
+      type: "number",
+      defaultValue: 0,
+      description: "Zero-based index of the tab shown initially."
+    }
+  ],
+  traits: [idTrait(), ariaLabelTrait({ description: "Accessible name for the tab list." })],
+  defaultStyles: {
+    base: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%"
+    }
+  },
+  validateProps: (props) => {
+    const errors = [];
+    const idx = props.activeIndex;
+    if (idx !== void 0 && !isVariableBinding25(idx) && (typeof idx !== "number" || !Number.isInteger(idx) || idx < 0)) {
+      errors.push('Tabs "activeIndex" must be a non-negative integer.');
+    }
+    return errors;
+  }
+};
+var tabPanelDefinition = {
+  type: "tab-panel",
+  label: "Tab Panel",
+  category: "interactive",
+  icon: "layout",
+  description: "Content of a single tab; its label is shown in the tab list.",
+  acceptsChildren: true,
+  allowedChildren: ["container", "columns", "flex", "grid", ...CONTENT_CHILD_TYPES],
+  defaultProps: {
+    label: "Tab"
+  },
+  defaultChildren: [{ type: "paragraph", props: { text: "Tab content." } }],
+  propFields: [{ name: "label", label: "Tab Label", type: "string", defaultValue: "Tab" }],
+  traits: [idTrait()],
+  defaultStyles: {
+    base: {
+      paddingTop: "16px"
+    }
+  }
+};
+
+// src/definitions/conversion/carousel.ts
+import { isVariableBinding as isVariableBinding26 } from "@kubuild/schema";
+var carouselDefinition = {
+  type: "carousel",
+  label: "Carousel",
+  category: "interactive",
+  icon: "carousel",
+  description: "Slider for product galleries and testimonials; each child is a slide.",
+  acceptsChildren: true,
+  allowedChildren: ["*"],
+  defaultProps: {
+    autoplay: false,
+    interval: 5e3,
+    loop: true,
+    showDots: true,
+    showArrows: true
+  },
+  defaultChildren: [
+    { type: "container", children: [{ type: "paragraph", props: { text: "Slide 1" } }] },
+    { type: "container", children: [{ type: "paragraph", props: { text: "Slide 2" } }] },
+    { type: "container", children: [{ type: "paragraph", props: { text: "Slide 3" } }] }
+  ],
+  propFields: [
+    { name: "autoplay", label: "Autoplay", type: "boolean", defaultValue: false },
+    { name: "interval", label: "Autoplay Interval (ms)", type: "number", defaultValue: 5e3 },
+    { name: "loop", label: "Loop", type: "boolean", defaultValue: true },
+    { name: "showDots", label: "Show Dots", type: "boolean", defaultValue: true },
+    { name: "showArrows", label: "Show Arrows", type: "boolean", defaultValue: true }
+  ],
+  traits: [
+    idTrait(),
+    ariaLabelTrait({ description: 'Accessible name for the carousel, e.g. "Testimonials".' })
+  ],
+  defaultStyles: {
+    base: {
+      position: "relative",
+      width: "100%",
+      overflow: "hidden"
+    }
+  },
+  validateProps: (props) => {
+    const errors = [];
+    const interval = props.interval;
+    if (interval !== void 0 && !isVariableBinding26(interval) && (typeof interval !== "number" || !(interval > 0))) {
+      errors.push('Carousel "interval" must be a positive number of milliseconds.');
+    }
+    return errors;
+  }
+};
+
+// src/definitions/conversion/rating.ts
+import { isVariableBinding as isVariableBinding27 } from "@kubuild/schema";
+var ratingDefinition = {
+  type: "rating",
+  label: "Rating",
+  category: "media",
+  icon: "star",
+  description: "Read-only star rating with half-star support.",
+  acceptsChildren: false,
+  defaultProps: {
+    value: 5,
+    max: 5,
+    size: 20,
+    color: "#f59e0b",
+    emptyColor: "#e2e8f0",
+    labelTemplate: "{value} out of {max}"
+  },
+  propFields: [
+    {
+      name: "value",
+      label: "Value",
+      type: "number",
+      defaultValue: 5,
+      description: "Rounded to the nearest half star."
+    },
+    { name: "max", label: "Max Stars", type: "number", defaultValue: 5 },
+    { name: "size", label: "Star Size (px)", type: "number", defaultValue: 20 },
+    { name: "color", label: "Color", type: "color", defaultValue: "#f59e0b" },
+    { name: "emptyColor", label: "Empty Color", type: "color", defaultValue: "#e2e8f0" },
+    {
+      name: "labelTemplate",
+      label: "Accessible Label",
+      type: "string",
+      defaultValue: "{value} out of {max}",
+      description: 'Screen reader text; {value} and {max} are replaced (e.g. "{value} dari {max}").'
+    }
+  ],
+  traits: [idTrait()],
+  defaultStyles: {
+    base: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2px"
+    }
+  },
+  validateProps: (props) => {
+    const errors = [];
+    for (const name of ["value", "max", "size"]) {
+      const v = props[name];
+      if (v !== void 0 && !isVariableBinding27(v) && (typeof v !== "number" || !Number.isFinite(v) || v < 0)) {
+        errors.push(`Rating "${name}" must be a non-negative number.`);
+      }
+    }
+    return errors;
+  }
+};
+
+// src/definitions/conversion/divider.ts
+import { isVariableBinding as isVariableBinding28 } from "@kubuild/schema";
+var dividerDefinition = {
+  type: "divider",
+  label: "Divider",
+  category: "layout",
+  icon: "divider",
+  description: "Horizontal rule (solid/dashed/dotted) with an optional centered label.",
+  acceptsChildren: false,
+  defaultProps: {
+    lineStyle: "solid",
+    thickness: 1,
+    color: "#e2e8f0",
+    label: ""
+  },
+  propFields: [
+    {
+      name: "lineStyle",
+      label: "Line Style",
+      type: "select",
+      defaultValue: "solid",
+      options: [
+        { label: "Solid", value: "solid" },
+        { label: "Dashed", value: "dashed" },
+        { label: "Dotted", value: "dotted" }
+      ]
+    },
+    { name: "thickness", label: "Thickness (px)", type: "number", defaultValue: 1 },
+    { name: "color", label: "Color", type: "color", defaultValue: "#e2e8f0" },
+    {
+      name: "label",
+      label: "Center Label",
+      type: "string",
+      defaultValue: "",
+      description: 'Optional text in the middle of the line, e.g. "OR".'
+    }
+  ],
+  traits: [idTrait()],
+  defaultStyles: {
+    base: {
+      width: "100%",
+      marginTop: "16px",
+      marginBottom: "16px"
+    }
+  },
+  validateProps: (props) => {
+    const v = props.lineStyle;
+    if (v !== void 0 && !isVariableBinding28(v) && !["solid", "dashed", "dotted"].includes(v)) {
+      return ['Divider "lineStyle" must be one of: solid, dashed, dotted.'];
+    }
+    return [];
+  }
+};
+var spacerDefinition = {
+  type: "spacer",
+  label: "Spacer",
+  category: "layout",
+  icon: "dimension",
+  description: "Empty vertical space; height is responsive per breakpoint.",
+  acceptsChildren: false,
+  defaultProps: {},
+  traits: [idTrait()],
+  defaultStyles: {
+    base: {
+      width: "100%",
+      height: "48px"
+    },
+    tablet: {
+      height: "32px"
+    },
+    mobile: {
+      height: "24px"
+    }
+  }
+};
+
 // src/definitions/index.ts
 var coreComponentDefinitions = [
   pageDefinition,
@@ -2655,7 +3218,17 @@ var coreComponentDefinitions = [
   tableCellDefinition,
   modalDefinition,
   drawerDefinition,
-  collapsibleDefinition
+  collapsibleDefinition,
+  // Conversion components (Epic 60)
+  countdownDefinition,
+  accordionDefinition,
+  accordionItemDefinition,
+  tabsDefinition,
+  tabPanelDefinition,
+  carouselDefinition,
+  ratingDefinition,
+  dividerDefinition,
+  spacerDefinition
 ];
 function createDefaultComponentRegistry() {
   const registry = new ComponentRegistry();
@@ -2675,6 +3248,7 @@ export {
   columnsDefinition,
   flexDefinition,
   gridDefinition,
+  canonicalTextPropFields,
   headingDefinition,
   textDefinition,
   paragraphDefinition,
@@ -2707,7 +3281,20 @@ export {
   modalDefinition,
   drawerDefinition,
   collapsibleDefinition,
+  COUNTDOWN_MODES,
+  COUNTDOWN_FORMATS,
+  COUNTDOWN_EXPIRE_BEHAVIORS,
+  COUNTDOWN_STORAGE_TYPES,
+  countdownDefinition,
+  accordionDefinition,
+  accordionItemDefinition,
+  tabsDefinition,
+  tabPanelDefinition,
+  carouselDefinition,
+  ratingDefinition,
+  dividerDefinition,
+  spacerDefinition,
   coreComponentDefinitions,
   createDefaultComponentRegistry
 };
-//# sourceMappingURL=chunk-3HU2KE2B.js.map
+//# sourceMappingURL=chunk-CJN5OHHX.js.map