@kubuild/components 0.2.0 → 0.3.0

package/dist/chunk-OK53DS7G.js

@@ -0,0 +1,911 @@
+// src/traits/types.ts
+var TRAIT_GROUP_ORDER = [
+  "identity",
+  "link",
+  "media",
+  "form",
+  "behavior",
+  "semantic",
+  "accessibility"
+];
+var TRAIT_GROUP_LABELS = {
+  identity: "Identity",
+  link: "Link",
+  media: "Media",
+  form: "Form",
+  behavior: "Behavior",
+  semantic: "Semantic",
+  accessibility: "Accessibility"
+};
+function withOverrides(base, overrides) {
+  return overrides ? { ...base, ...overrides } : base;
+}
+function sortTraits(traits) {
+  const groupRank = (group) => {
+    if (!group) return Number.MAX_SAFE_INTEGER;
+    const idx = TRAIT_GROUP_ORDER.indexOf(group);
+    return idx === -1 ? Number.MAX_SAFE_INTEGER : idx;
+  };
+  return [...traits].sort((a, b) => groupRank(a.group) - groupRank(b.group));
+}
+function collectTraitNames(traitsList) {
+  const names = /* @__PURE__ */ new Set();
+  for (const traits of traitsList) {
+    for (const trait of traits) {
+      names.add(trait.name);
+    }
+  }
+  return Array.from(names);
+}
+
+// src/traits/common.ts
+function idTrait(overrides) {
+  return withOverrides(
+    {
+      name: "id",
+      label: "Element ID",
+      type: "string",
+      attribute: "id",
+      group: "identity",
+      description: "A custom, document-unique identifier used for anchors, CSS, and scripting."
+    },
+    overrides
+  );
+}
+function titleTrait(overrides) {
+  return withOverrides(
+    {
+      name: "title",
+      label: "Title",
+      type: "string",
+      attribute: "title",
+      group: "semantic",
+      description: "Advisory title for the element (tooltip / document title)."
+    },
+    overrides
+  );
+}
+function ariaLabelTrait(overrides) {
+  return withOverrides(
+    {
+      name: "ariaLabel",
+      label: "Accessible Label (aria-label)",
+      type: "string",
+      attribute: "aria-label",
+      group: "accessibility",
+      description: "Accessible name for assistive technology when no visible label exists."
+    },
+    overrides
+  );
+}
+
+// src/traits/link.ts
+function hrefTrait(overrides) {
+  return withOverrides(
+    {
+      name: "href",
+      label: "Link URL",
+      type: "string",
+      defaultValue: "#",
+      attribute: "href",
+      group: "link",
+      description: "The destination URL the element navigates to when activated."
+    },
+    overrides
+  );
+}
+function targetTrait(overrides) {
+  return withOverrides(
+    {
+      name: "target",
+      label: "Open In",
+      type: "select",
+      defaultValue: "_self",
+      attribute: "target",
+      group: "link",
+      options: [
+        { label: "Same tab (_self)", value: "_self" },
+        { label: "New tab (_blank)", value: "_blank" },
+        { label: "Parent frame (_parent)", value: "_parent" },
+        { label: "Top frame (_top)", value: "_top" }
+      ],
+      description: "Where the linked resource should open."
+    },
+    overrides
+  );
+}
+function relTrait(overrides) {
+  return withOverrides(
+    {
+      name: "rel",
+      label: "Relationship (rel)",
+      type: "string",
+      defaultValue: "",
+      attribute: "rel",
+      group: "link",
+      description: 'Space-separated relationship tokens (e.g. "noopener noreferrer").'
+    },
+    overrides
+  );
+}
+
+// src/traits/media.ts
+function srcTrait(overrides) {
+  return withOverrides(
+    {
+      name: "src",
+      label: "Source URL",
+      type: "string",
+      attribute: "src",
+      group: "media",
+      required: true,
+      description: "The source URL of the media resource."
+    },
+    overrides
+  );
+}
+function altTrait(overrides) {
+  return withOverrides(
+    {
+      name: "alt",
+      label: "Alt Text",
+      type: "string",
+      attribute: "alt",
+      group: "accessibility",
+      required: true,
+      description: "Alternative text describing the media for screen readers and fallback."
+    },
+    overrides
+  );
+}
+function posterTrait(overrides) {
+  return withOverrides(
+    {
+      name: "poster",
+      label: "Poster Image URL",
+      type: "string",
+      attribute: "poster",
+      group: "media",
+      description: "A preview image shown before the video starts playing."
+    },
+    overrides
+  );
+}
+function controlsTrait(overrides) {
+  return withOverrides(
+    {
+      name: "controls",
+      label: "Show Controls",
+      type: "boolean",
+      defaultValue: true,
+      attribute: "controls",
+      group: "media",
+      description: "Whether to show the native play/pause/volume controls."
+    },
+    overrides
+  );
+}
+function autoplayTrait(overrides) {
+  return withOverrides(
+    {
+      name: "autoplay",
+      label: "Autoplay",
+      type: "boolean",
+      defaultValue: false,
+      attribute: "autoplay",
+      group: "media",
+      description: "Whether the media starts playing automatically on load."
+    },
+    overrides
+  );
+}
+function loopTrait(overrides) {
+  return withOverrides(
+    {
+      name: "loop",
+      label: "Loop",
+      type: "boolean",
+      defaultValue: false,
+      attribute: "loop",
+      group: "media",
+      description: "Whether the media restarts automatically when it reaches the end."
+    },
+    overrides
+  );
+}
+function mutedTrait(overrides) {
+  return withOverrides(
+    {
+      name: "muted",
+      label: "Muted",
+      type: "boolean",
+      defaultValue: false,
+      attribute: "muted",
+      group: "media",
+      description: "Whether the media starts with the audio muted."
+    },
+    overrides
+  );
+}
+function loadingTrait(overrides) {
+  return withOverrides(
+    {
+      name: "loading",
+      label: "Loading Mode",
+      type: "select",
+      defaultValue: "lazy",
+      attribute: "loading",
+      group: "media",
+      options: [
+        { label: "Lazy (load when near viewport)", value: "lazy" },
+        { label: "Eager (load immediately)", value: "eager" }
+      ],
+      description: "Native loading hint: lazy defers offscreen images, eager loads immediately."
+    },
+    overrides
+  );
+}
+
+// src/traits/structure.ts
+function citeTrait(overrides) {
+  return withOverrides(
+    {
+      name: "cite",
+      label: "Citation URL (cite)",
+      type: "string",
+      attribute: "cite",
+      group: "semantic",
+      description: "The URL of the source document the quote is taken from."
+    },
+    overrides
+  );
+}
+function colSpanTrait(overrides) {
+  return withOverrides(
+    {
+      name: "colSpan",
+      label: "Column Span (colSpan)",
+      type: "number",
+      defaultValue: 1,
+      attribute: "colspan",
+      group: "semantic",
+      description: "The number of columns the cell spans."
+    },
+    overrides
+  );
+}
+function rowSpanTrait(overrides) {
+  return withOverrides(
+    {
+      name: "rowSpan",
+      label: "Row Span (rowSpan)",
+      type: "number",
+      defaultValue: 1,
+      attribute: "rowspan",
+      group: "semantic",
+      description: "The number of rows the cell spans."
+    },
+    overrides
+  );
+}
+function tagTrait(overrides) {
+  return withOverrides(
+    {
+      name: "tag",
+      label: "HTML Tag",
+      type: "select",
+      attribute: "tag",
+      group: "semantic",
+      description: "The semantic HTML tag the component renders as."
+    },
+    overrides
+  );
+}
+
+// src/traits/form.ts
+function placeholderTrait(overrides) {
+  return withOverrides(
+    {
+      name: "placeholder",
+      label: "Placeholder",
+      type: "string",
+      attribute: "placeholder",
+      group: "form",
+      description: "Hint text shown inside the control when it is empty."
+    },
+    overrides
+  );
+}
+function fieldNameTrait(overrides) {
+  return withOverrides(
+    {
+      name: "name",
+      label: "Field Name",
+      type: "string",
+      attribute: "name",
+      group: "form",
+      required: true,
+      description: "The name submitted with the form data for this field."
+    },
+    overrides
+  );
+}
+function requiredTrait(overrides) {
+  return withOverrides(
+    {
+      name: "required",
+      label: "Required",
+      type: "boolean",
+      defaultValue: false,
+      attribute: "required",
+      group: "form",
+      description: "Whether the field must be filled before the form can be submitted."
+    },
+    overrides
+  );
+}
+function disabledTrait(overrides) {
+  return withOverrides(
+    {
+      name: "disabled",
+      label: "Disabled",
+      type: "boolean",
+      defaultValue: false,
+      attribute: "disabled",
+      group: "behavior",
+      description: "Disables the control so it cannot be focused or activated."
+    },
+    overrides
+  );
+}
+function readOnlyTrait(overrides) {
+  return withOverrides(
+    {
+      name: "readOnly",
+      label: "Read Only",
+      type: "boolean",
+      defaultValue: false,
+      attribute: "readonly",
+      group: "behavior",
+      description: "Prevents the user from modifying the control value."
+    },
+    overrides
+  );
+}
+function actionTrait(overrides) {
+  return withOverrides(
+    {
+      name: "action",
+      label: "Action URL",
+      type: "string",
+      attribute: "action",
+      group: "form",
+      description: "The URL the form data is submitted to."
+    },
+    overrides
+  );
+}
+function methodTrait(overrides) {
+  return withOverrides(
+    {
+      name: "method",
+      label: "Method",
+      type: "select",
+      defaultValue: "POST",
+      attribute: "method",
+      group: "form",
+      options: [
+        { label: "POST", value: "POST" },
+        { label: "GET", value: "GET" }
+      ],
+      description: "The HTTP method used to submit the form."
+    },
+    overrides
+  );
+}
+function autoCompleteTrait(overrides) {
+  return withOverrides(
+    {
+      name: "autoComplete",
+      label: "Auto Complete",
+      type: "select",
+      defaultValue: "on",
+      attribute: "autocomplete",
+      group: "form",
+      options: [
+        { label: "On", value: "on" },
+        { label: "Off", value: "off" }
+      ],
+      description: "Whether the browser may autofill values for this form."
+    },
+    overrides
+  );
+}
+function valueTrait(overrides) {
+  return withOverrides(
+    {
+      name: "value",
+      label: "Value",
+      type: "string",
+      attribute: "value",
+      group: "form",
+      description: "The value submitted with the form data when the control is selected."
+    },
+    overrides
+  );
+}
+function defaultCheckedTrait(overrides) {
+  return withOverrides(
+    {
+      name: "defaultChecked",
+      label: "Default Checked",
+      type: "boolean",
+      defaultValue: false,
+      attribute: "checked",
+      group: "form",
+      description: "Whether the control starts in the checked state."
+    },
+    overrides
+  );
+}
+function defaultValueTrait(overrides) {
+  return withOverrides(
+    {
+      name: "defaultValue",
+      label: "Default Value",
+      type: "string",
+      attribute: "value",
+      group: "form",
+      description: "The initial value of the control before the user edits it."
+    },
+    overrides
+  );
+}
+function rowsTrait(overrides) {
+  return withOverrides(
+    {
+      name: "rows",
+      label: "Rows",
+      type: "number",
+      defaultValue: 4,
+      attribute: "rows",
+      group: "form",
+      description: "The number of visible text lines in the textarea."
+    },
+    overrides
+  );
+}
+function inputTypeTrait(overrides) {
+  return withOverrides(
+    {
+      name: "type",
+      label: "Input Type",
+      type: "select",
+      defaultValue: "text",
+      attribute: "type",
+      group: "form",
+      description: "The semantic input type of the control."
+    },
+    overrides
+  );
+}
+function buttonTypeTrait(overrides) {
+  return withOverrides(
+    {
+      name: "buttonType",
+      label: "Button Type",
+      type: "select",
+      defaultValue: "button",
+      attribute: "type",
+      group: "form",
+      options: [
+        { label: "Button", value: "button" },
+        { label: "Submit Form (submit)", value: "submit" },
+        { label: "Reset Form (reset)", value: "reset" }
+      ],
+      description: "The button\u2019s behavior inside a form."
+    },
+    overrides
+  );
+}
+function preventDefaultTrait(overrides) {
+  return withOverrides(
+    {
+      name: "preventDefault",
+      label: "Prevent Default",
+      type: "boolean",
+      defaultValue: true,
+      group: "form",
+      description: "Intercept the native browser submit and handle it via the KUBUILD action pipeline instead."
+    },
+    overrides
+  );
+}
+function scrollToFirstErrorTrait(overrides) {
+  return withOverrides(
+    {
+      name: "scrollToFirstError",
+      label: "Scroll to First Error",
+      type: "boolean",
+      defaultValue: true,
+      group: "form",
+      description: "Automatically scroll to and focus the first invalid field when submission fails validation."
+    },
+    overrides
+  );
+}
+function resetOnSubmitTrait(overrides) {
+  return withOverrides(
+    {
+      name: "resetOnSubmit",
+      label: "Reset on Submit",
+      type: "boolean",
+      defaultValue: false,
+      group: "form",
+      description: "Reset all fields to their initial values after a successful form submission."
+    },
+    overrides
+  );
+}
+function patternTrait(overrides) {
+  return withOverrides(
+    {
+      name: "pattern",
+      label: "Pattern (regex)",
+      type: "string",
+      attribute: "pattern",
+      group: "form",
+      description: "A regular expression the input value must match to pass validation."
+    },
+    overrides
+  );
+}
+function minLengthTrait(overrides) {
+  return withOverrides(
+    {
+      name: "minLength",
+      label: "Min Length",
+      type: "number",
+      attribute: "minlength",
+      group: "form",
+      description: "The minimum number of characters the user must enter."
+    },
+    overrides
+  );
+}
+function maxLengthTrait(overrides) {
+  return withOverrides(
+    {
+      name: "maxLength",
+      label: "Max Length",
+      type: "number",
+      attribute: "maxlength",
+      group: "form",
+      description: "The maximum number of characters the user is allowed to enter."
+    },
+    overrides
+  );
+}
+function prefixIconTrait(overrides) {
+  return withOverrides(
+    {
+      name: "prefixIcon",
+      label: "Prefix Icon",
+      type: "string",
+      group: "form",
+      description: 'Lucide icon name displayed before the input value (e.g. "mail", "search").'
+    },
+    overrides
+  );
+}
+function suffixIconTrait(overrides) {
+  return withOverrides(
+    {
+      name: "suffixIcon",
+      label: "Suffix Icon",
+      type: "string",
+      group: "form",
+      description: 'Lucide icon name displayed after the input value (e.g. "eye", "check").'
+    },
+    overrides
+  );
+}
+function helperTextTrait(overrides) {
+  return withOverrides(
+    {
+      name: "helperText",
+      label: "Helper Text",
+      type: "string",
+      group: "form",
+      description: 'A short message displayed below the input to guide the user (e.g. "Must be at least 8 characters").'
+    },
+    overrides
+  );
+}
+function resizeTrait(overrides) {
+  return withOverrides(
+    {
+      name: "resize",
+      label: "Resize",
+      type: "select",
+      defaultValue: "vertical",
+      group: "form",
+      options: [
+        { label: "Vertical only", value: "vertical" },
+        { label: "Horizontal only", value: "horizontal" },
+        { label: "Both", value: "both" },
+        { label: "None", value: "none" }
+      ],
+      description: "Controls whether and how the user can resize the textarea."
+    },
+    overrides
+  );
+}
+function autoGrowTrait(overrides) {
+  return withOverrides(
+    {
+      name: "autoGrow",
+      label: "Auto Grow",
+      type: "boolean",
+      defaultValue: false,
+      group: "form",
+      description: "Automatically expand the textarea height to fit the content without scrolling."
+    },
+    overrides
+  );
+}
+function maxCharCountTrait(overrides) {
+  return withOverrides(
+    {
+      name: "maxCharCount",
+      label: "Max Character Count",
+      type: "number",
+      group: "form",
+      description: 'Maximum character limit displayed as a counter below the textarea (e.g. "120 / 500").'
+    },
+    overrides
+  );
+}
+function optionsListTrait(overrides) {
+  return withOverrides(
+    {
+      name: "options",
+      label: "Options",
+      type: "string",
+      group: "form",
+      description: "The list of dropdown options, each with a label and value. Editable via the inspector trait panel."
+    },
+    overrides
+  );
+}
+function labelTextTrait(overrides) {
+  return withOverrides(
+    {
+      name: "label",
+      label: "Label Text",
+      type: "string",
+      group: "form",
+      description: "The visible text label displayed alongside the control."
+    },
+    overrides
+  );
+}
+function indeterminateTrait(overrides) {
+  return withOverrides(
+    {
+      name: "indeterminate",
+      label: "Indeterminate",
+      type: "boolean",
+      defaultValue: false,
+      group: "form",
+      description: "Renders the checkbox in a mixed/indeterminate visual state (neither checked nor unchecked)."
+    },
+    overrides
+  );
+}
+function switchSizeTrait(overrides) {
+  return withOverrides(
+    {
+      name: "switchSize",
+      label: "Size",
+      type: "select",
+      defaultValue: "md",
+      group: "form",
+      options: [
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" }
+      ],
+      description: "The visual size of the switch toggle."
+    },
+    overrides
+  );
+}
+function orientationTrait(overrides) {
+  return withOverrides(
+    {
+      name: "orientation",
+      label: "Orientation",
+      type: "select",
+      defaultValue: "vertical",
+      group: "form",
+      options: [
+        { label: "Vertical", value: "vertical" },
+        { label: "Horizontal", value: "horizontal" }
+      ],
+      description: "The layout direction of the child controls (vertical stack or horizontal row)."
+    },
+    overrides
+  );
+}
+function defaultSelectedTrait(overrides) {
+  return withOverrides(
+    {
+      name: "defaultSelected",
+      label: "Default Selected",
+      type: "string",
+      group: "form",
+      description: "The value of the radio item that is selected by default."
+    },
+    overrides
+  );
+}
+function acceptTrait(overrides) {
+  return withOverrides(
+    {
+      name: "accept",
+      label: "Accepted File Types",
+      type: "string",
+      attribute: "accept",
+      defaultValue: "*/*",
+      group: "form",
+      description: 'Comma-separated list of MIME types or file extensions accepted (e.g. "image/*,.pdf,.docx").'
+    },
+    overrides
+  );
+}
+function maxFileSizeTrait(overrides) {
+  return withOverrides(
+    {
+      name: "maxFileSize",
+      label: "Max File Size (MB)",
+      type: "number",
+      defaultValue: 10,
+      group: "form",
+      description: "The maximum allowable file size in megabytes (MB)."
+    },
+    overrides
+  );
+}
+function multipleTrait(overrides) {
+  return withOverrides(
+    {
+      name: "multiple",
+      label: "Allow Multiple Files",
+      type: "boolean",
+      attribute: "multiple",
+      defaultValue: false,
+      group: "form",
+      description: "Allow multiple files to be selected and uploaded at once."
+    },
+    overrides
+  );
+}
+function showPreviewTrait(overrides) {
+  return withOverrides(
+    {
+      name: "showPreview",
+      label: "Show Preview",
+      type: "boolean",
+      defaultValue: true,
+      group: "form",
+      description: "Display an interactive preview (image thumbnail or file list with badges) for selected files."
+    },
+    overrides
+  );
+}
+function loadingTextTrait(overrides) {
+  return withOverrides(
+    {
+      name: "loadingText",
+      label: "Loading Text",
+      type: "string",
+      defaultValue: "Submitting...",
+      group: "behavior",
+      description: "Text displayed on the button while the form submission is in progress."
+    },
+    overrides
+  );
+}
+function showSpinnerTrait(overrides) {
+  return withOverrides(
+    {
+      name: "showSpinner",
+      label: "Show Loading Spinner",
+      type: "boolean",
+      defaultValue: true,
+      group: "behavior",
+      description: "Automatically show an animated loading spinner icon while form is submitting."
+    },
+    overrides
+  );
+}
+function autoDisableOnSubmitTrait(overrides) {
+  return withOverrides(
+    {
+      name: "autoDisableOnSubmit",
+      label: "Auto Disable on Submit",
+      type: "boolean",
+      defaultValue: true,
+      group: "behavior",
+      description: "Automatically disable the button to prevent duplicate submissions while the form is submitting."
+    },
+    overrides
+  );
+}
+
+export {
+  TRAIT_GROUP_ORDER,
+  TRAIT_GROUP_LABELS,
+  withOverrides,
+  sortTraits,
+  collectTraitNames,
+  idTrait,
+  titleTrait,
+  ariaLabelTrait,
+  hrefTrait,
+  targetTrait,
+  relTrait,
+  srcTrait,
+  altTrait,
+  posterTrait,
+  controlsTrait,
+  autoplayTrait,
+  loopTrait,
+  mutedTrait,
+  loadingTrait,
+  citeTrait,
+  colSpanTrait,
+  rowSpanTrait,
+  tagTrait,
+  placeholderTrait,
+  fieldNameTrait,
+  requiredTrait,
+  disabledTrait,
+  readOnlyTrait,
+  actionTrait,
+  methodTrait,
+  autoCompleteTrait,
+  valueTrait,
+  defaultCheckedTrait,
+  defaultValueTrait,
+  rowsTrait,
+  inputTypeTrait,
+  buttonTypeTrait,
+  preventDefaultTrait,
+  scrollToFirstErrorTrait,
+  resetOnSubmitTrait,
+  patternTrait,
+  minLengthTrait,
+  maxLengthTrait,
+  prefixIconTrait,
+  suffixIconTrait,
+  helperTextTrait,
+  resizeTrait,
+  autoGrowTrait,
+  maxCharCountTrait,
+  optionsListTrait,
+  labelTextTrait,
+  indeterminateTrait,
+  switchSizeTrait,
+  orientationTrait,
+  defaultSelectedTrait,
+  acceptTrait,
+  maxFileSizeTrait,
+  multipleTrait,
+  showPreviewTrait,
+  loadingTextTrait,
+  showSpinnerTrait,
+  autoDisableOnSubmitTrait
+};
+//# sourceMappingURL=chunk-OK53DS7G.js.map