@gxp-dev/mod-ui 2.0.0 → 2.0.1

package/src/definitions/__tests__/schema.test.ts

@@ -35,7 +35,6 @@ describe("CardElement union", () => {
       "boolean",
       "builder",
       "code",
-      "components",
       "configuration-block",
       "display",
       "editor",

package/src/definitions/elements/PickerElement.ts

@@ -21,6 +21,7 @@ export type PickerStyle =
   | "timezone-picker"
   | "color-picker"
   | "icon-picker"
+  | "icon-picker-inline"
   | "icon"
   | "map-picker"
   | "async-select"
@@ -329,6 +330,7 @@ export const PickerStyleMetadataMap: Partial<Record<PickerStyle, { displayLabel:
   "timezone-picker": { displayLabel: "Timezone", description: "A searchable timezone selector." },
   "color-picker": { displayLabel: "Color", description: "A colour wheel and swatch picker." },
   "icon-picker": { displayLabel: "Icon", description: "A searchable icon selector." },
+  "icon-picker-inline": { displayLabel: "Icon Picker Inline", description: "A searchable picker that returns a chosen icon identifier." },
   "map-picker": { displayLabel: "Map", description: "An interactive map for picking a geographic location." },
   "async-select": { displayLabel: "Async Select", description: "A remote-search selection picker." },
   "data-model": { displayLabel: "Data Model", description: "A picker that navigates and selects from a data model path." },

package/src/definitions/elements/index.ts

@@ -55,17 +55,6 @@ export {
   CodeElementMetadata,
 } from "./CodeElement"
 
-export type {
-  ComponentsElement,
-  ComponentsSize,
-  ComponentsStyle,
-} from "./ComponentsElement"
-export {
-  ComponentsElementDefaults,
-  ComponentsElementEditConfig,
-  ComponentsElementMetadata,
-} from "./ComponentsElement"
-
 export type {
   ConfigurationBlockElement,
   ConfigurationBlockStyle,
@@ -138,7 +127,6 @@ import type { BooleanElement } from "./BooleanElement"
 import type { BuilderElement } from "./BuilderElement"
 import type { CardLayoutElement } from "./CardLayoutElement"
 import type { CodeElement } from "./CodeElement"
-import type { ComponentsElement } from "./ComponentsElement"
 import type { ConfigurationBlockElement } from "./ConfigurationBlockElement"
 import type { DisplayElement } from "./DisplayElement"
 import type { EditorElement } from "./EditorElement"
@@ -152,7 +140,6 @@ import { BooleanElementEditConfig, BooleanElementMetadata, BooleanStyleMetadataM
 import { BuilderElementEditConfig, BuilderElementMetadata, BuilderStyleMetadataMap } from "./BuilderElement"
 import { CardLayoutElementEditConfig, CardLayoutElementMetadata, CardStyleMetadataMap } from "./CardLayoutElement"
 import { CodeElementEditConfig, CodeElementMetadata, CodeStyleMetadataMap } from "./CodeElement"
-import { ComponentsElementEditConfig, ComponentsElementMetadata, ComponentsStyleMetadataMap } from "./ComponentsElement"
 import { ConfigurationBlockElementEditConfig, ConfigurationBlockElementMetadata, ConfigurationBlockStyleMetadataMap } from "./ConfigurationBlockElement"
 import { DisplayElementEditConfig, DisplayElementMetadata, DisplayStyleMetadataMap } from "./DisplayElement"
 import { EditorElementEditConfig, EditorElementMetadata, EditorStyleMetadataMap } from "./EditorElement"
@@ -172,7 +159,6 @@ export type CardElement =
   | BuilderElement
   | CardLayoutElement
   | CodeElement
-  | ComponentsElement
   | ConfigurationBlockElement
   | DisplayElement
   | EditorElement
@@ -191,7 +177,6 @@ export const CardElementMetadataMap = {
   builder: BuilderElementMetadata,
   card: CardLayoutElementMetadata,
   code: CodeElementMetadata,
-  components: ComponentsElementMetadata,
   "configuration-block": ConfigurationBlockElementMetadata,
   display: DisplayElementMetadata,
   editor: EditorElementMetadata,
@@ -208,7 +193,6 @@ export const CategoryStyleMetadataMaps = {
   builder: BuilderStyleMetadataMap,
   card: CardStyleMetadataMap,
   code: CodeStyleMetadataMap,
-  components: ComponentsStyleMetadataMap,
   "configuration-block": ConfigurationBlockStyleMetadataMap,
   display: DisplayStyleMetadataMap,
   editor: EditorStyleMetadataMap,
@@ -237,7 +221,6 @@ export const CardElementStylesMap = {
   builder: deriveStyles(BuilderStyleMetadataMap),
   card: deriveStyles(CardStyleMetadataMap),
   code: deriveStyles(CodeStyleMetadataMap),
-  components: deriveStyles(ComponentsStyleMetadataMap),
   "configuration-block": deriveStyles(ConfigurationBlockStyleMetadataMap),
   display: deriveStyles(DisplayStyleMetadataMap),
   editor: deriveStyles(EditorStyleMetadataMap),
@@ -257,7 +240,6 @@ export const CategoryEditConfigMap = {
   builder: BuilderElementEditConfig,
   card: CardLayoutElementEditConfig,
   code: CodeElementEditConfig,
-  components: ComponentsElementEditConfig,
   "configuration-block": ConfigurationBlockElementEditConfig,
   display: DisplayElementEditConfig,
   editor: EditorElementEditConfig,

package/src/definitions/index.ts

@@ -2,7 +2,7 @@
  * Public barrel for every definition layer.
  *
  * Consumers typically import from this top-level path:
- *   import type { CardElement, DisplayCard, ShowPageConfig } from "@gxp-dev/adminkit"
+ *   import type { CardElement, DisplayCard, ShowPageConfig } from "@gxp-dev/mod-ui"
  *
  * The engine and adapters import from `definitions/elements` /
  * `definitions/cards` / `definitions/shared` directly to avoid pulling

package/src/definitions/shared/base.ts

@@ -13,7 +13,6 @@ export type ElementCategory =
   | "builder"
   | "card"
   | "code"
-  | "components"
   | "configuration-block"
   | "display"
   | "editor"

package/src/display.ts

@@ -0,0 +1,15 @@
+export { default as BannerDisplay } from "./components/compositions/elements/display/BannerDisplay.vue"
+export { default as BarcodeDisplay } from "./components/compositions/elements/display/BarcodeDisplay.vue"
+export { default as CarouselDisplay } from "./components/compositions/elements/display/CarouselDisplay.vue"
+export { default as ChartDisplay } from "./components/compositions/elements/display/ChartDisplay.vue"
+export { default as HtmlDisplay } from "./components/compositions/elements/display/HtmlDisplay.vue"
+export { default as IconDisplay } from "./components/compositions/elements/display/IconDisplay.vue"
+export { default as IframeDisplay } from "./components/compositions/elements/display/IframeDisplay.vue"
+export { default as ImageDisplay } from "./components/compositions/elements/display/ImageDisplay.vue"
+export { default as MarkdownDisplay } from "./components/compositions/elements/display/MarkdownDisplay.vue"
+export { default as ProgressBarDisplay } from "./components/compositions/elements/display/ProgressBarDisplay.vue"
+export { default as QrCodeDisplay } from "./components/compositions/elements/display/QrCodeDisplay.vue"
+export { default as ReactiveCanvasDisplay } from "./components/compositions/elements/display/ReactiveCanvasDisplay.vue"
+export { default as SpriteDisplay } from "./components/compositions/elements/display/SpriteDisplay.vue"
+export { default as TypeDisplay } from "./components/compositions/elements/display/TypeDisplay.vue"
+export { default as VideoPlayerDisplay } from "./components/compositions/elements/display/VideoPlayerDisplay.vue"

package/src/editor.ts

@@ -0,0 +1,5 @@
+export { default as CodeEditor } from "./components/compositions/elements/editor/CodeEditor.vue"
+export { default as HtmlEditor } from "./components/compositions/elements/editor/HtmlEditor.vue"
+export { default as ImageEditor } from "./components/compositions/elements/editor/ImageEditor.vue"
+export { default as MarkdownEditor } from "./components/compositions/elements/editor/MarkdownEditor.vue"
+export { default as RichTextEditor } from "./components/compositions/elements/editor/RichTextEditor.vue"

package/src/engine/registry.ts

@@ -19,7 +19,6 @@ import type { BooleanStyle } from "@/definitions/elements/BooleanElement"
 import type { BuilderStyle } from "@/definitions/elements/BuilderElement"
 import type { CardStyle } from "@/definitions/elements/CardLayoutElement"
 import type { CodeStyle } from "@/definitions/elements/CodeElement"
-import type { ComponentsStyle } from "@/definitions/elements/ComponentsElement"
 import type { ConfigurationBlockStyle } from "@/definitions/elements/ConfigurationBlockElement"
 import type { DisplayStyle } from "@/definitions/elements/DisplayElement"
 import type { EditorStyle } from "@/definitions/elements/EditorElement"
@@ -54,7 +53,6 @@ export interface ElementRegistry {
   builder: Record<BuilderStyle, ElementPath>
   card: Record<CardStyle, ElementPath>
   code: Record<CodeStyle, ElementPath>
-  components: Record<ComponentsStyle, ElementPath>
   "configuration-block": Record<ConfigurationBlockStyle, ElementPath>
   display: Record<DisplayStyle, ElementPath>
   editor: Record<EditorStyle, ElementPath>
@@ -102,10 +100,6 @@ export const elementRegistry: ElementRegistry = {
     "build-status": "code/BuildStatus",
     "chat-message": "code/ChatMessage",
   },
-  components: {
-    "icon-badge": "components/IconBadge",
-    "icon-picker": "components/IconPickerInline",
-  },
   "configuration-block": {
     "elements-block": "configuration-block/ElementsBlock",
     repeatable: "configuration-block/RepeatableBlock",
@@ -171,6 +165,7 @@ export const elementRegistry: ElementRegistry = {
     "timezone-picker": "picker/TimezonePicker",
     "color-picker": "picker/ColorPicker",
     "icon-picker": "picker/IconPicker",
+    "icon-picker-inline": "picker/IconPickerInline",
     icon: "picker/IconPicker",
     "map-picker": "picker/MapPicker",
     "async-select": "picker/AsyncSelectPicker",
@@ -204,7 +199,6 @@ export const elementDefaultStyle: Record<ElementCategory, string> = {
   builder: "form-builder",
   card: "list",
   code: "git-editor",
-  components: "icon-badge",
   "configuration-block": "repeatable",
   display: "type",
   editor: "code-editor",

package/src/engine/useFormData.ts

@@ -6,7 +6,7 @@ import { useFormDataStore } from "@/stores/formDataStore"
  * / FormPanel) to advertise which formId child renderers should bind
  * to. Avoids prop-drilling `formId` through every nested card/element.
  */
-export const FORM_ID_KEY = Symbol("gxp-adminkit:formId") as InjectionKey<string>
+export const FORM_ID_KEY = Symbol("gx-modui:formId") as InjectionKey<string>
 
 /**
  * Provide a formId to descendants. Call once at the page boundary.

package/src/file.ts

@@ -0,0 +1,3 @@
+export { default as AssetPickerFile } from "./components/compositions/elements/file/AssetPickerFile.vue"
+export { default as DropzoneFile } from "./components/compositions/elements/file/DropzoneFile.vue"
+export { default as UploadFile } from "./components/compositions/elements/file/UploadFile.vue"

package/src/index.ts

@@ -1,5 +1,5 @@
 /**
- * @gxp-dev/adminkit — public entry point.
+ * @gxp-dev/mod-ui — public entry point.
  *
  * Layered exports:
  *
@@ -20,8 +20,8 @@
  * is how consumers consume them. Direct sub-path imports work for
  * advanced cases:
  *
- *   import Button from "@gxp-dev/adminkit/components/ui/button"
- *   import TextInput from "@gxp-dev/adminkit/elements/input/TextInput.vue"
+ *   import Button from "@gxp-dev/mod-ui/components/ui/button"
+ *   import TextInput from "@gxp-dev/mod-ui/elements/input/TextInput.vue"
  */
 
 // Definitions (types + metadata maps).

package/src/input.ts

@@ -0,0 +1,10 @@
+export { default as BarcodeScannerInput } from "./components/compositions/elements/input/BarcodeScannerInput.vue"
+export { default as EmailInput } from "./components/compositions/elements/input/EmailInput.vue"
+export { default as NumberInput } from "./components/compositions/elements/input/NumberInput.vue"
+export { default as PasswordInput } from "./components/compositions/elements/input/PasswordInput.vue"
+export { default as RangeSliderInput } from "./components/compositions/elements/input/RangeSliderInput.vue"
+export { default as SearchInput } from "./components/compositions/elements/input/SearchInput.vue"
+export { default as TelInput } from "./components/compositions/elements/input/TelInput.vue"
+export { default as TextareaInput } from "./components/compositions/elements/input/TextareaInput.vue"
+export { default as TextInput } from "./components/compositions/elements/input/TextInput.vue"
+export { default as UrlInput } from "./components/compositions/elements/input/UrlInput.vue"

package/src/lib/storybook.ts

@@ -0,0 +1,67 @@
+/**
+ * Generates a consistent `parameters.docs.description.component` block
+ * that shows the import path and optional usage example in the autodocs page.
+ *
+ * UI / page / store components (named barrel exports):
+ *   componentDoc("Button", { usage: '<Button>Click</Button>' })
+ *   → import { Button } from "@gxp-dev/mod-ui"
+ *
+ * Composition elements / cards (default deep imports):
+ *   componentDoc("TextInput", { deep: "components/compositions/elements/input/TextInput.vue" })
+ *   → import TextInput from "@gxp-dev/mod-ui/components/compositions/elements/input/TextInput.vue"
+ *
+ * Multiple named exports:
+ *   componentDoc("Badge", { namedExports: ["Badge", "badgeVariants"] })
+ */
+
+interface ComponentDocOptions {
+  /**
+   * Named exports to show in the import line. Defaults to `[componentName]`.
+   * Ignored when `barrel` or `deep` is set.
+   */
+  namedExports?: string[]
+  /**
+   * Short subpath barrel (e.g. `"builder"`, `"input"`). Generates:
+   *   import { ComponentName } from "@gxp-dev/mod-ui/builder"
+   */
+  barrel?: string
+  /**
+   * Full deep path for a default import (legacy — prefer `barrel`):
+   *   import ComponentName from "@gxp-dev/mod-ui/<deep>"
+   */
+  deep?: string
+  /** Optional extra prose shown below the import block. */
+  description?: string
+  /** Optional usage code snippet (Vue template). Shown as a second code block. */
+  usage?: string
+}
+
+export function componentDoc(
+  componentName: string,
+  options: ComponentDocOptions = {},
+): { docs: { description: { component: string } } } {
+  const pkg = "@gxp-dev/mod-ui"
+  const importLine = options.barrel
+    ? `import { ${componentName} } from "${pkg}/${options.barrel}"`
+    : options.deep
+      ? `import ${componentName} from "${pkg}/${options.deep}"`
+      : `import { ${(options.namedExports ?? [componentName]).join(", ")} } from "${pkg}"`
+
+  const parts: string[] = ["```ts", importLine, "```"]
+
+  if (options.description) {
+    parts.push("", options.description)
+  }
+
+  if (options.usage) {
+    parts.push("", "**Usage**", "", "```vue", options.usage, "```")
+  }
+
+  return {
+    docs: {
+      description: {
+        component: parts.join("\n"),
+      },
+    },
+  }
+}

package/src/option-select.ts

@@ -0,0 +1,9 @@
+export { default as AsyncSelectOption } from "./components/compositions/elements/option-select/AsyncSelectOption.vue"
+export { default as AutoCompleteOption } from "./components/compositions/elements/option-select/AutoCompleteOption.vue"
+export { default as CheckboxOption } from "./components/compositions/elements/option-select/CheckboxOption.vue"
+export { default as IntegrationConnectorOption } from "./components/compositions/elements/option-select/IntegrationConnectorOption.vue"
+export { default as ListOption } from "./components/compositions/elements/option-select/ListOption.vue"
+export { default as PillSelectOption } from "./components/compositions/elements/option-select/PillSelectOption.vue"
+export { default as RadioOption } from "./components/compositions/elements/option-select/RadioOption.vue"
+export { default as SelectMultipleOption } from "./components/compositions/elements/option-select/SelectMultipleOption.vue"
+export { default as SelectOption } from "./components/compositions/elements/option-select/SelectOption.vue"

package/src/pages/IndexPage.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import type { DataTableColumn } from "@/definitions/cards/DataTableCard"
 import IndexPage from "./IndexPage.vue"
 import type { IndexPageConfig } from "./IndexPage.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const baseHeaders: DataTableColumn[] = [
   { key: "name", title: "Name", sortable: true },
@@ -32,7 +33,7 @@ const meta = {
   title: "Pages/IndexPage",
   component: IndexPage,
   tags: ["autodocs"],
-  parameters: { layout: "fullscreen" },
+  parameters: { layout: "fullscreen", ...componentDoc("IndexPage") },
 } satisfies Meta<typeof IndexPage>
 
 export default meta

package/src/pages/ShowPage.stories.ts

@@ -5,6 +5,7 @@ import type { ElementListCard } from "@/definitions/cards/ElementListCard"
 import type { InputElement } from "@/definitions/elements/InputElement"
 import ShowPage from "./ShowPage.vue"
 import type { ShowPageConfig } from "./ShowPage.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const firstName: InputElement = {
   id: "first-name",
@@ -68,7 +69,7 @@ const meta = {
   title: "Pages/ShowPage",
   component: ShowPage,
   tags: ["autodocs"],
-  parameters: { layout: "fullscreen" },
+  parameters: { layout: "fullscreen", ...componentDoc("ShowPage") },
 } satisfies Meta<typeof ShowPage>
 
 export default meta

package/src/pages/ShowPage.vue

@@ -18,7 +18,7 @@ import type {
  * IndexPage to read the page-level eventHandlers map.
  */
 export const PAGE_EVENT_HANDLERS_KEY = Symbol(
-  "gxp-adminkit:pageEventHandlers",
+  "gx-modui:pageEventHandlers",
 ) as InjectionKey<Record<string, (...args: unknown[]) => void>>
 
 export interface BreadCrumb {

package/src/picker.ts

@@ -0,0 +1,11 @@
+export { default as AsyncSelectPicker } from "./components/compositions/elements/picker/AsyncSelectPicker.vue"
+export { default as ColorPicker } from "./components/compositions/elements/picker/ColorPicker.vue"
+export { default as DataModelPicker } from "./components/compositions/elements/picker/DataModelPicker.vue"
+export { default as DatePicker } from "./components/compositions/elements/picker/DatePicker.vue"
+export { default as DateTimePicker } from "./components/compositions/elements/picker/DateTimePicker.vue"
+export { default as IconPicker } from "./components/compositions/elements/picker/IconPicker.vue"
+export { default as IconPickerInline } from "./components/compositions/elements/picker/IconPickerInline.vue"
+export { default as IntegrationConnectorPicker } from "./components/compositions/elements/picker/IntegrationConnectorPicker.vue"
+export { default as MapPicker } from "./components/compositions/elements/picker/MapPicker.vue"
+export { default as TimePicker } from "./components/compositions/elements/picker/TimePicker.vue"
+export { default as TimezonePicker } from "./components/compositions/elements/picker/TimezonePicker.vue"

package/src/stores/dependencyListBuilderStore.ts

@@ -132,7 +132,7 @@ export function buildRuleFromTemplate(
 }
 
 export const useDependencyListBuilderStore = defineStore(
-  "gxp-adminkit/dependencyListBuilder",
+  "gx-modui/dependencyListBuilder",
   () => {
     const builders = ref<Record<string, DependencyListBuilderSchema>>({})
     const selections = ref<Record<string, DependencyListBuilderSelection>>({})

package/src/stores/elementListBuilderStore.ts

@@ -34,7 +34,7 @@ function emptySchema(): ElementListBuilderSchema {
 }
 
 export const useElementListBuilderStore = defineStore(
-  "gxp-adminkit/elementListBuilder",
+  "gx-modui/elementListBuilder",
   () => {
     const builders = ref<Record<string, ElementListBuilderSchema>>({})
     const selections = ref<Record<string, ElementListBuilderSelection>>({})

package/src/stores/formBuilderStore.ts

@@ -52,7 +52,7 @@ function emptyRoot(rootId: string): BuilderSchema {
   }
 }
 
-export const useFormBuilderStore = defineStore("gxp-adminkit/formBuilder", () => {
+export const useFormBuilderStore = defineStore("gx-modui/formBuilder", () => {
   /**
    * Per-builder state, keyed by `builderId`. Lets multiple builders
    * coexist on the same page without colliding.

package/src/stores/formDataStore.ts

@@ -20,7 +20,7 @@ export interface FormState {
   dirty: boolean
 }
 
-export const useFormDataStore = defineStore("gxp-adminkit/formData", () => {
+export const useFormDataStore = defineStore("gx-modui/formData", () => {
   const forms = ref<Record<string, FormState>>({})
 
   function ensureForm(formId: string): FormState {

package/src/stores/gridBuilderStore.ts

@@ -52,7 +52,7 @@ function emptySchema(): GridBuilderSchema {
 }
 
 export const useGridBuilderStore = defineStore(
-  "gxp-adminkit/gridBuilder",
+  "gx-modui/gridBuilder",
   () => {
     /**
      * Per-builder state, keyed by `builderId`. Lets multiple builders

package/src/stores/objectBuilderStore.ts

@@ -118,7 +118,7 @@ function detectType(value: unknown): ObjectBuilderEntryType {
 }
 
 export const useObjectBuilderStore = defineStore(
-  "gxp-adminkit/objectBuilder",
+  "gx-modui/objectBuilder",
   () => {
     const builders = ref<Record<string, ObjectBuilderSchema>>({})
     const selections = ref<Record<string, ObjectBuilderSelection>>({})

package/src/stores/presetBuilderStore.ts

@@ -46,7 +46,7 @@ function emptyState(builderId: string): PresetBuilderState {
 }
 
 export const usePresetBuilderStore = defineStore(
-  "gxp-adminkit/presetBuilder",
+  "gx-modui/presetBuilder",
   () => {
     const builders = ref<Record<string, PresetBuilderState>>({})
 

package/src/stores/quizBuilderStore.ts

@@ -67,7 +67,7 @@ const DEFAULT_OPTION_TEMPLATES: Record<
 }
 
 export const useQuizBuilderStore = defineStore(
-  "gxp-adminkit/quizBuilder",
+  "gx-modui/quizBuilder",
   () => {
     const builders = ref<Record<string, QuizBuilderSchema>>({})
     const selections = ref<Record<string, QuizBuilderSelection>>({})

package/src/stores/reactiveCanvasBuilderStore.ts

@@ -87,7 +87,7 @@ function defaultPropsForType(type: string): Record<string, unknown> {
 }
 
 export const useReactiveCanvasBuilderStore = defineStore(
-  "gxp-adminkit/reactiveCanvasBuilder",
+  "gx-modui/reactiveCanvasBuilder",
   () => {
     const builders = ref<Record<string, ReactiveCanvasBuilderSchema>>({})
     const selections = ref<

package/src/styles/themes/dark.css

@@ -1,5 +1,5 @@
 /*
- * @gxp-dev/adminkit — Dark Theme
+ * @gxp-dev/mod-ui — Dark Theme
  *
  * Applied by adding the `dark` class to any ancestor (commonly <html> or <body>).
  * Pairs with the `dark` custom variant in tailwind.css.

package/src/styles/themes/default.css

@@ -1,5 +1,5 @@
 /*
- * @gxp-dev/adminkit — Default Theme (light)
+ * @gxp-dev/mod-ui — Default Theme (light)
  *
  * shadcn "neutral" base palette. Consumers can override any of these
  * variables in their own CSS to retheme the entire kit.

package/src/styles/themes/kiosk.css

@@ -1,5 +1,5 @@
 /*
- * @gxp-dev/adminkit — Kiosk Theme
+ * @gxp-dev/mod-ui — Kiosk Theme
  *
  * High-contrast theme tuned for tablet/kiosk surfaces. Mirrors the existing
  * GxP platform kiosk palette (deep blue background, white foreground).

package/dist/components/compositions/elements/components/IconBadge.vue.js

@@ -1,5 +0,0 @@
-import f from "./IconBadge.vue2.js";
-export {
-  f as default
-};
-//# sourceMappingURL=IconBadge.vue.js.map

package/dist/components/compositions/elements/components/IconBadge.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconBadge.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/elements/components/IconBadge.vue2.js

@@ -1,77 +0,0 @@
-import { defineComponent as g, computed as o, ref as y, watch as C, openBlock as c, createBlock as d, unref as z, normalizeClass as k, withCtx as w, resolveDynamicComponent as b, createCommentVNode as p, createElementBlock as A, toDisplayString as I } from "vue";
-import "../../../ui/badge/index.js";
-import h from "../../../ui/badge/Badge.vue.js";
-const B = { key: 1 }, D = /* @__PURE__ */ g({
-  __name: "IconBadge",
-  props: {
-    label: {},
-    icon: {},
-    size: { default: "md" },
-    color: {},
-    classList: {}
-  },
-  setup(r) {
-    const t = r, i = o(() => {
-      const e = t.icon ?? "";
-      return e ? m(String(e)) : "";
-    });
-    function m(e) {
-      return e.replace(/[-_\s]+(.)?/g, (a, n) => n ? n.toUpperCase() : "").replace(/^(.)/, (a) => a.toUpperCase());
-    }
-    const s = y(null);
-    async function v(e) {
-      if (!e) {
-        s.value = null;
-        return;
-      }
-      const n = await import("lucide-vue-next");
-      s.value = n[e] ?? null;
-    }
-    C(
-      i,
-      (e) => {
-        v(e);
-      },
-      { immediate: !0 }
-    );
-    const l = {
-      xs: "[&_svg]:size-3 px-1.5 py-0 text-[10px]",
-      sm: "[&_svg]:size-3 px-2 py-0 text-xs",
-      md: "[&_svg]:size-4 px-2.5 py-0.5 text-xs",
-      lg: "[&_svg]:size-5 px-3 py-1 text-sm",
-      xl: "[&_svg]:size-6 px-4 py-1.5 text-base"
-    }, f = o(() => l[t.size] ?? l.md), u = {
-      primary: "default",
-      secondary: "secondary",
-      success: "success",
-      danger: "destructive",
-      destructive: "destructive",
-      warning: "warning",
-      info: "info",
-      light: "outline",
-      dark: "default"
-    }, x = o(() => {
-      const e = t.color;
-      return e && u[e] ? u[e] : "default";
-    }), _ = o(() => {
-      const e = t.classList;
-      return e ? Array.isArray(e) ? e.join(" ") : e : "";
-    });
-    return (e, a) => (c(), d(z(h), {
-      variant: x.value,
-      class: k([f.value, _.value]),
-      "data-icon-name": i.value,
-      "data-testid": "icon-badge"
-    }, {
-      default: w(() => [
-        s.value ? (c(), d(b(s.value), { key: 0 })) : p("", !0),
-        r.label ? (c(), A("span", B, I(r.label), 1)) : p("", !0)
-      ]),
-      _: 1
-    }, 8, ["variant", "class", "data-icon-name"]));
-  }
-});
-export {
-  D as default
-};
-//# sourceMappingURL=IconBadge.vue2.js.map

package/dist/components/compositions/elements/components/IconBadge.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconBadge.vue2.js","sources":["../../../../../src/components/compositions/elements/components/IconBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon badge composition. Renders a Badge primitive\n * wrapping a lucide icon resolved by name. Pure presentation — does\n * not bind to form data.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <IconBadge icon=\"Check\" label=\"Done\" color=\"success\" size=\"md\" />\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { Badge, type BadgeVariants } from \"@/components/ui/badge\"\n\nexport type IconBadgeSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\nexport type IconBadgeColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"destructive\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\"\n\nexport interface IconBadgeProps {\n  label?: string\n  icon?: string\n  size?: IconBadgeSize\n  color?: IconBadgeColor\n  classList?: string | string[]\n}\n\nconst props = withDefaults(defineProps<IconBadgeProps>(), {\n  size: \"md\",\n})\n\nconst iconName = computed<string>(() => {\n  const raw = props.icon ?? \"\"\n  return raw ? toPascalCase(String(raw)) : \"\"\n})\n\nfunction toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nconst ResolvedIcon = ref<Component | null>(null)\n\nasync function loadIcon(name: string): Promise<void> {\n  if (!name) {\n    ResolvedIcon.value = null\n    return\n  }\n  const mod = await import(\"lucide-vue-next\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  ResolvedIcon.value = registry[name] ?? null\n}\n\nwatch(\n  iconName,\n  (next) => {\n    void loadIcon(next)\n  },\n  { immediate: true },\n)\n\nconst SIZE_TO_TW: Record<IconBadgeSize, string> = {\n  xs: \"[&_svg]:size-3 px-1.5 py-0 text-[10px]\",\n  sm: \"[&_svg]:size-3 px-2 py-0 text-xs\",\n  md: \"[&_svg]:size-4 px-2.5 py-0.5 text-xs\",\n  lg: \"[&_svg]:size-5 px-3 py-1 text-sm\",\n  xl: \"[&_svg]:size-6 px-4 py-1.5 text-base\",\n}\n\nconst sizeClass = computed<string>(() => SIZE_TO_TW[props.size] ?? SIZE_TO_TW.md)\n\nconst VARIANT_MAP: Record<IconBadgeColor, NonNullable<BadgeVariants[\"variant\"]>> = {\n  primary: \"default\",\n  secondary: \"secondary\",\n  success: \"success\",\n  danger: \"destructive\",\n  destructive: \"destructive\",\n  warning: \"warning\",\n  info: \"info\",\n  light: \"outline\",\n  dark: \"default\",\n}\n\nconst variant = computed<NonNullable<BadgeVariants[\"variant\"]>>(() => {\n  const c = props.color\n  if (c && VARIANT_MAP[c]) {\n    return VARIANT_MAP[c]\n  }\n  return \"default\"\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <Badge\n    :variant=\"variant\"\n    :class=\"[sizeClass, rootClass]\"\n    :data-icon-name=\"iconName\"\n    data-testid=\"icon-badge\"\n  >\n    <component\n      :is=\"ResolvedIcon\"\n      v-if=\"ResolvedIcon\"\n    />\n    <span v-if=\"label\">{{ label }}</span>\n  </Badge>\n</template>\n"],"names":["props","__props","iconName","computed","raw","toPascalCase","input","_","ch","m","ResolvedIcon","ref","loadIcon","name","registry","watch","next","SIZE_TO_TW","sizeClass","VARIANT_MAP","variant","c","rootClass","cl","_createBlock","_unref","Badge","_normalizeClass","_openBlock","_resolveDynamicComponent","_createElementBlock"],"mappings":";;;;;;;;;;;;;AAiCA,UAAMA,IAAQC,GAIRC,IAAWC,EAAiB,MAAM;AACtC,YAAMC,IAAMJ,EAAM,QAAQ;AAC1B,aAAOI,IAAMC,EAAa,OAAOD,CAAG,CAAC,IAAI;AAAA,IAC3C,CAAC;AAED,aAASC,EAAaC,GAAuB;AAC3C,aAAOA,EACJ,QAAQ,gBAAgB,CAACC,GAAGC,MAAiBA,IAAKA,EAAG,YAAA,IAAgB,EAAG,EACxE,QAAQ,QAAQ,CAACC,MAAMA,EAAE,aAAa;AAAA,IAC3C;AAEA,UAAMC,IAAeC,EAAsB,IAAI;AAE/C,mBAAeC,EAASC,GAA6B;AACnD,UAAI,CAACA,GAAM;AACT,QAAAH,EAAa,QAAQ;AACrB;AAAA,MACF;AAEA,YAAMI,IADM,MAAM,OAAO,iBAAiB;AAE1C,MAAAJ,EAAa,QAAQI,EAASD,CAAI,KAAK;AAAA,IACzC;AAEA,IAAAE;AAAA,MACEb;AAAA,MACA,CAACc,MAAS;AACR,QAAKJ,EAASI,CAAI;AAAA,MACpB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAMC,IAA4C;AAAA,MAChD,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,GAGAC,IAAYf,EAAiB,MAAMc,EAAWjB,EAAM,IAAI,KAAKiB,EAAW,EAAE,GAE1EE,IAA6E;AAAA,MACjF,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,IAAA,GAGFC,IAAUjB,EAAgD,MAAM;AACpE,YAAMkB,IAAIrB,EAAM;AAChB,aAAIqB,KAAKF,EAAYE,CAAC,IACbF,EAAYE,CAAC,IAEf;AAAA,IACT,CAAC,GAEKC,IAAYnB,EAAiB,MAAM;AACvC,YAAMoB,IAAKvB,EAAM;AACjB,aAAKuB,IAGE,MAAM,QAAQA,CAAE,IAAIA,EAAG,KAAK,GAAG,IAAIA,IAFjC;AAAA,IAGX,CAAC;2BAICC,EAWQC,EAAAC,CAAA,GAAA;AAAA,MAVL,SAASN,EAAA;AAAA,MACT,OAAKO,EAAA,CAAGT,EAAA,OAAWI,EAAA,KAAS,CAAA;AAAA,MAC5B,kBAAgBpB,EAAA;AAAA,MACjB,eAAY;AAAA,IAAA;iBAEZ,MAGE;AAAA,QADMQ,EAAA,SAFRkB,EAAA,GAAAJ,EAGEK,EAFKnB,EAAA,KAAY,GAAA,EAAA,KAAA,EAAA,CAAA;QAGPT,EAAA,SAAZ2B,EAAA,GAAAE,EAAqC,aAAf7B,EAAA,KAAK,GAAA,CAAA;;;;;;"}

package/dist/components/compositions/elements/components/IconPickerInline.vue.js

@@ -1,5 +0,0 @@
-import f from "./IconPickerInline.vue2.js";
-export {
-  f as default
-};
-//# sourceMappingURL=IconPickerInline.vue.js.map

package/dist/components/compositions/elements/components/IconPickerInline.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconPickerInline.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/elements/components/IconPickerInline.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconPickerInline.vue2.js","sources":["../../../../../src/components/compositions/elements/components/IconPickerInline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven inline icon picker composition. A trigger Button +\n * Popover with a searchable grid of lucide icons.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <IconPickerInline v-model=\"iconName\" label=\"Pick an icon\" />\n */\nimport { computed, h, ref, type Component } from \"vue\"\nimport * as LucideIcons from \"lucide-vue-next\"\nimport { Search } from \"lucide-vue-next\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport interface IconPickerInlineProps {\n  modelValue?: string\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<IconPickerInlineProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\n/**\n * Curated subset of lucide icons. Hardcoded so we don't enumerate\n * the entire ~1400-icon set in the picker UI.\n */\nconst ICON_NAMES: readonly string[] = [\n  \"Activity\",\n  \"AlertCircle\",\n  \"Archive\",\n  \"Bell\",\n  \"Bookmark\",\n  \"Calendar\",\n  \"Camera\",\n  \"Check\",\n  \"Clock\",\n  \"Cloud\",\n  \"Code\",\n  \"Download\",\n  \"Edit\",\n  \"Eye\",\n  \"File\",\n  \"Flag\",\n  \"Folder\",\n  \"Globe\",\n  \"Heart\",\n  \"Home\",\n  \"Image\",\n  \"Info\",\n  \"Link\",\n  \"Lock\",\n  \"Mail\",\n  \"MapPin\",\n  \"MessageSquare\",\n  \"Plus\",\n  \"Search\",\n  \"Settings\",\n  \"Star\",\n  \"Tag\",\n  \"Trash\",\n  \"Upload\",\n  \"User\",\n  \"Video\",\n  \"X\",\n  \"Zap\",\n]\n\nconst filtered = computed<readonly string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return ICON_NAMES\n  }\n  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))\n})\n\nfunction resolveIcon(name: string): Component | undefined {\n  const registry = LucideIcons as unknown as Record<string, Component | undefined>\n  return registry[name]\n}\n\nfunction renderIcon(name: string, cls = \"size-4\") {\n  const icon = resolveIcon(name)\n  return icon ? h(icon, { class: cls }) : null\n}\n\nconst previewIcon = computed<Component | undefined>(() =>\n  resolveIcon(model.value ?? \"\"),\n)\n\nfunction onSelect(name: string): void {\n  model.value = name\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"icon-picker-inline\"\n  >\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          class=\"w-fit justify-start gap-2\"\n          :disabled=\"disabled\"\n          :data-element-name=\"name ?? undefined\"\n          data-testid=\"icon-picker-trigger\"\n        >\n          <component\n            :is=\"previewIcon\"\n            v-if=\"previewIcon\"\n            class=\"size-4\"\n          />\n          <span>{{ model || \"Pick an icon\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-72 p-2\">\n        <div class=\"mb-2 flex items-center gap-2\">\n          <Search class=\"size-4 text-muted-foreground\" />\n          <Input\n            v-model=\"query\"\n            placeholder=\"Search icons…\"\n            data-testid=\"icon-picker-search\"\n            class=\"h-8\"\n          />\n        </div>\n        <div\n          class=\"grid max-h-60 grid-cols-6 gap-1 overflow-auto\"\n          data-testid=\"icon-picker-grid\"\n        >\n          <button\n            v-for=\"iconName in filtered\"\n            :key=\"iconName\"\n            type=\"button\"\n            class=\"flex aspect-square items-center justify-center rounded border border-transparent hover:border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            :class=\"model === iconName ? 'border-primary bg-primary/10' : ''\"\n            :aria-label=\"iconName\"\n            :title=\"iconName\"\n            :data-testid=\"`icon-picker-item-${iconName}`\"\n            @click=\"onSelect(iconName)\"\n          >\n            <component :is=\"renderIcon(iconName)\" />\n          </button>\n        </div>\n        <p\n          v-if=\"!filtered.length\"\n          class=\"p-3 text-center text-sm text-muted-foreground\"\n        >\n          No icons match.\n        </p>\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"names":["model","_useModel","__props","query","ref","ICON_NAMES","filtered","computed","q","name","resolveIcon","LucideIcons","renderIcon","cls","icon","h","previewIcon","onSelect","_createBlock","_unref","FieldFrame","_createVNode","Popover","PopoverTrigger","Button","_openBlock","_resolveDynamicComponent","_createElementVNode","PopoverContent","_hoisted_1","Search","Input","$event","_hoisted_2","_createElementBlock","_Fragment","_renderList","iconName","_normalizeClass","_hoisted_4"],"mappings":"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"}