@iris-ui-kit/vue 0.1.0

package/dist/skeletons.d.ts

@@ -0,0 +1,179 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+interface IrisLoginSubmitPayload {
+    email: string;
+    password: string;
+    remember: boolean;
+}
+/**
+ * Layer 4 system skeleton: a centered login page using only Iris primitives.
+ * Demonstrates the recommended composition pattern (Container + Stack +
+ * FormField wrappers) for forms.
+ *
+ * The template is opinionated about layout and a11y; data binding is left to
+ * the consumer via the `submit` event + slot props.
+ */
+declare const IrisLoginTemplate: vue.DefineComponent<vue.ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Show "Remember me" checkbox. */
+    showRemember: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Error message shown above the form. */
+    error: {
+        type: StringConstructor;
+        default: string;
+    };
+    submitLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Disable the entire form (e.g. while a request is pending). */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    submit: (_payload: IrisLoginSubmitPayload) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Show "Remember me" checkbox. */
+    showRemember: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Error message shown above the form. */
+    error: {
+        type: StringConstructor;
+        default: string;
+    };
+    submitLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Disable the entire form (e.g. while a request is pending). */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onSubmit?: ((_payload: IrisLoginSubmitPayload) => any) | undefined;
+}>, {
+    title: string;
+    error: string;
+    description: string;
+    loading: boolean;
+    showRemember: boolean;
+    submitLabel: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+interface IrisDashboardNavItem {
+    id: string;
+    label: string;
+    /** Optional icon (any ReactNode-like; ignored if `slots.icon` is used). */
+    icon?: string;
+}
+interface IrisDashboardCardSpec {
+    id: string;
+    title: string;
+    colSpan?: number | 'full';
+    rowSpan?: number;
+    /** Plain text or HTML — replace via `#card.<id>` slot for full control. */
+    body?: string;
+}
+/**
+ * Layer 4 system skeleton: a 3-region dashboard shell — sidebar + header +
+ * main grid. Built from `IrisSidebarLayout` + `IrisHeaderLayout` +
+ * `IrisDashboardGrid` so it inherits collapsing, sticky header, and responsive
+ * column layout out of the box.
+ */
+declare const IrisDashboardTemplate: vue.DefineComponent<vue.ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    sidebarTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    nav: {
+        type: PropType<IrisDashboardNavItem[]>;
+        default: () => never[];
+    };
+    /** Currently active nav item id. */
+    activeId: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Cards to render in the main grid. Skip to use the `default` slot only. */
+    cards: {
+        type: PropType<IrisDashboardCardSpec[]>;
+        default: () => never[];
+    };
+    defaultCollapsed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:activeId': (_id: string) => true;
+    'update:collapsed': (_value: boolean) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    sidebarTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    nav: {
+        type: PropType<IrisDashboardNavItem[]>;
+        default: () => never[];
+    };
+    /** Currently active nav item id. */
+    activeId: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Cards to render in the main grid. Skip to use the `default` slot only. */
+    cards: {
+        type: PropType<IrisDashboardCardSpec[]>;
+        default: () => never[];
+    };
+    defaultCollapsed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:collapsed"?: ((_value: boolean) => any) | undefined;
+    "onUpdate:activeId"?: ((_id: string) => any) | undefined;
+}>, {
+    nav: IrisDashboardNavItem[];
+    title: string;
+    defaultCollapsed: boolean;
+    sidebarTitle: string;
+    activeId: string;
+    cards: IrisDashboardCardSpec[];
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { type IrisDashboardCardSpec, type IrisDashboardNavItem, IrisDashboardTemplate, type IrisLoginSubmitPayload, IrisLoginTemplate };

package/dist/skeletons.js

@@ -0,0 +1,7 @@
+export { IrisDashboardTemplate, IrisLoginTemplate } from './chunk-QLUIKEMJ.js';
+import './chunk-3R3QDLJC.js';
+import './chunk-F77KIPOH.js';
+import './chunk-I6D5VXQK.js';
+import './chunk-TCAXRWT6.js';
+//# sourceMappingURL=skeletons.js.map
+//# sourceMappingURL=skeletons.js.map

package/dist/skeletons.js.map

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

package/dist/skins.cjs

@@ -0,0 +1,138 @@
+'use strict';
+
+var skins = require('@iris-ui-kit/skins');
+var vue = require('vue');
+var theme = require('@iris-ui-kit/theme');
+
+// src/skins/index.ts
+var IrisSkinKey = /* @__PURE__ */ Symbol("IrisSkin");
+var SkinProvider = vue.defineComponent({
+  name: "IrisSkinProvider",
+  props: {
+    engine: { type: Object, required: true },
+    target: { type: Object, default: null },
+    cspNonce: { type: String, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const current = vue.ref(props.engine.current());
+    const unsubscribe = props.engine.subscribe((next) => {
+      current.value = next;
+    });
+    let applied = null;
+    const targetEl = () => props.target ?? document.documentElement;
+    const apply = () => {
+      applied?.revert();
+      applied = skins.applySkin(current.value, targetEl());
+    };
+    vue.onMounted(() => {
+      theme.injectGlobalStyles(props.cspNonce);
+      apply();
+    });
+    vue.watch(current, () => {
+      if (applied) apply();
+    });
+    vue.onBeforeUnmount(() => {
+      unsubscribe();
+      applied?.revert();
+      applied = null;
+    });
+    vue.provide(IrisSkinKey, { engine: props.engine, current });
+    return () => slots.default?.();
+  }
+});
+function useSkinContext() {
+  const ctx = vue.inject(IrisSkinKey);
+  if (!ctx) throw new Error("[iris-ui] useSkin(): no <SkinProvider> ancestor found");
+  return ctx;
+}
+function useSkin() {
+  const { engine, current } = useSkinContext();
+  return {
+    skin: vue.computed(() => current.value),
+    setSkin: engine.setSkin,
+    loadSkin: engine.loadSkin,
+    useFromCatalog: engine.useFromCatalog,
+    patch: engine.patch,
+    resetPatch: engine.resetPatch,
+    setMode: engine.setMode,
+    getMode: engine.getMode,
+    getActiveId: engine.getActiveId,
+    availableSkins: engine.availableSkins,
+    errors: engine.errors
+  };
+}
+
+Object.defineProperty(exports, "SkinResolutionError", {
+  enumerable: true,
+  get: function () { return skins.SkinResolutionError; }
+});
+Object.defineProperty(exports, "applySkin", {
+  enumerable: true,
+  get: function () { return skins.applySkin; }
+});
+Object.defineProperty(exports, "builtinSkins", {
+  enumerable: true,
+  get: function () { return skins.builtinSkins; }
+});
+Object.defineProperty(exports, "createSkinCatalog", {
+  enumerable: true,
+  get: function () { return skins.createSkinCatalog; }
+});
+Object.defineProperty(exports, "createSkinEngine", {
+  enumerable: true,
+  get: function () { return skins.createSkinEngine; }
+});
+Object.defineProperty(exports, "createSkinRegistry", {
+  enumerable: true,
+  get: function () { return skins.createSkinRegistry; }
+});
+Object.defineProperty(exports, "darkSkin", {
+  enumerable: true,
+  get: function () { return skins.darkSkin; }
+});
+Object.defineProperty(exports, "lightSkin", {
+  enumerable: true,
+  get: function () { return skins.lightSkin; }
+});
+Object.defineProperty(exports, "loadSkin", {
+  enumerable: true,
+  get: function () { return skins.loadSkin; }
+});
+Object.defineProperty(exports, "localStorageSkinStorage", {
+  enumerable: true,
+  get: function () { return skins.localStorageSkinStorage; }
+});
+Object.defineProperty(exports, "memorySkinStorage", {
+  enumerable: true,
+  get: function () { return skins.memorySkinStorage; }
+});
+Object.defineProperty(exports, "renderSkinStyle", {
+  enumerable: true,
+  get: function () { return skins.renderSkinStyle; }
+});
+Object.defineProperty(exports, "resolveSkin", {
+  enumerable: true,
+  get: function () { return skins.resolveSkin; }
+});
+Object.defineProperty(exports, "skinBootScript", {
+  enumerable: true,
+  get: function () { return skins.skinBootScript; }
+});
+Object.defineProperty(exports, "skinError", {
+  enumerable: true,
+  get: function () { return skins.skinError; }
+});
+Object.defineProperty(exports, "skinToCssEntries", {
+  enumerable: true,
+  get: function () { return skins.skinToCssEntries; }
+});
+Object.defineProperty(exports, "validateSkin", {
+  enumerable: true,
+  get: function () { return skins.validateSkin; }
+});
+exports.IrisSkinKey = IrisSkinKey;
+exports.SkinProvider = SkinProvider;
+exports.useSkin = useSkin;
+exports.useSkinContext = useSkinContext;
+//# sourceMappingURL=skins.cjs.map
+//# sourceMappingURL=skins.cjs.map

package/dist/skins.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skins/SkinProvider.ts","../src/skins/useSkin.ts"],"names":["defineComponent","ref","applySkin","onMounted","injectGlobalStyles","watch","onBeforeUnmount","provide","inject","computed"],"mappings":";;;;;;;AAyBO,IAAM,WAAA,0BAAoD,UAAU;AAOpE,IAAM,eAAeA,mBAAA,CAAgB;AAAA,EAC1C,IAAA,EAAM,kBAAA;AAAA,EACN,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAgC,UAAU,IAAA,EAAK;AAAA,IAC/D,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAwC,SAAS,IAAA,EAAK;AAAA,IACtE,QAAA,EAAU,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,MAAA;AAAU,GAC/C;AAAA,EACA,KAAA,CAAM,KAAA,EAAO,EAAE,KAAA,EAAM,EAAG;AACtB,IAAA,MAAM,OAAA,GAAUC,OAAA,CAAI,KAAA,CAAM,MAAA,CAAO,SAAS,CAAA;AAC1C,IAAA,MAAM,WAAA,GAAc,KAAA,CAAM,MAAA,CAAO,SAAA,CAAU,CAAC,IAAA,KAAS;AACnD,MAAA,OAAA,CAAQ,KAAA,GAAQ,IAAA;AAAA,IAClB,CAAC,CAAA;AAED,IAAA,IAAI,OAAA,GAAkC,IAAA;AACtC,IAAA,MAAM,QAAA,GAAW,MAAM,KAAA,CAAM,MAAA,IAAU,QAAA,CAAS,eAAA;AAChD,IAAA,MAAM,QAAQ,MAAM;AAClB,MAAA,OAAA,EAAS,MAAA,EAAO;AAChB,MAAA,OAAA,GAAUC,eAAA,CAAU,OAAA,CAAQ,KAAA,EAAO,QAAA,EAAU,CAAA;AAAA,IAC/C,CAAA;AAEA,IAAAC,aAAA,CAAU,MAAM;AACd,MAAAC,wBAAA,CAAmB,MAAM,QAAQ,CAAA;AACjC,MAAA,KAAA,EAAM;AAAA,IACR,CAAC,CAAA;AACD,IAAAC,SAAA,CAAM,SAAS,MAAM;AACnB,MAAA,IAAI,SAAS,KAAA,EAAM;AAAA,IACrB,CAAC,CAAA;AACD,IAAAC,mBAAA,CAAgB,MAAM;AACpB,MAAA,WAAA,EAAY;AACZ,MAAA,OAAA,EAAS,MAAA,EAAO;AAChB,MAAA,OAAA,GAAU,IAAA;AAAA,IACZ,CAAC,CAAA;AAED,IAAAC,WAAA,CAAQ,aAAa,EAAE,MAAA,EAAQ,KAAA,CAAM,MAAA,EAAQ,SAAS,CAAA;AACtD,IAAA,OAAO,MAAM,MAAM,OAAA,IAAU;AAAA,EAC/B;AACF,CAAC;AAEM,SAAS,cAAA,GAAkC;AAChD,EAAA,MAAM,GAAA,GAAMC,WAAO,WAAW,CAAA;AAC9B,EAAA,IAAI,CAAC,GAAA,EAAK,MAAM,IAAI,MAAM,uDAAuD,CAAA;AACjF,EAAA,OAAO,GAAA;AACT;ACrDO,SAAS,OAAA,GAAyB;AACvC,EAAA,MAAM,EAAE,MAAA,EAAQ,OAAA,EAAQ,GAAI,cAAA,EAAe;AAC3C,EAAA,OAAO;AAAA,IACL,IAAA,EAAMC,YAAA,CAAS,MAAM,OAAA,CAAQ,KAAK,CAAA;AAAA,IAClC,SAAS,MAAA,CAAO,OAAA;AAAA,IAChB,UAAU,MAAA,CAAO,QAAA;AAAA,IACjB,gBAAgB,MAAA,CAAO,cAAA;AAAA,IACvB,OAAO,MAAA,CAAO,KAAA;AAAA,IACd,YAAY,MAAA,CAAO,UAAA;AAAA,IACnB,SAAS,MAAA,CAAO,OAAA;AAAA,IAChB,SAAS,MAAA,CAAO,OAAA;AAAA,IAChB,aAAa,MAAA,CAAO,WAAA;AAAA,IACpB,gBAAgB,MAAA,CAAO,cAAA;AAAA,IACvB,QAAQ,MAAA,CAAO;AAAA,GACjB;AACF","file":"skins.cjs","sourcesContent":["import {\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type Ref,\n} from 'vue'\nimport { injectGlobalStyles } from '@iris-ui-kit/theme'\nimport {\n  applySkin,\n  type ApplySkinResult,\n  type ResolvedSkin,\n  type SkinEngine,\n} from '@iris-ui-kit/skins'\n\nexport interface IrisSkinContext {\n  engine: SkinEngine\n  current: Ref<ResolvedSkin>\n}\n\nexport const IrisSkinKey: InjectionKey<IrisSkinContext> = Symbol('IrisSkin')\n\n/**\n * Renderless provider mirroring `<IrisThemeProvider>` for skins: subscribes to\n * the engine store, applies/reverts the resolved skin on the target element,\n * and provides the engine + current skin to descendants. Zero skin logic.\n */\nexport const SkinProvider = defineComponent({\n  name: 'IrisSkinProvider',\n  props: {\n    engine: { type: Object as PropType<SkinEngine>, required: true },\n    target: { type: Object as PropType<HTMLElement | null>, default: null },\n    cspNonce: { type: String, default: undefined },\n  },\n  setup(props, { slots }) {\n    const current = ref(props.engine.current()) as Ref<ResolvedSkin>\n    const unsubscribe = props.engine.subscribe((next) => {\n      current.value = next\n    })\n\n    let applied: ApplySkinResult | null = null\n    const targetEl = () => props.target ?? document.documentElement\n    const apply = () => {\n      applied?.revert()\n      applied = applySkin(current.value, targetEl())\n    }\n\n    onMounted(() => {\n      injectGlobalStyles(props.cspNonce)\n      apply()\n    })\n    watch(current, () => {\n      if (applied) apply()\n    })\n    onBeforeUnmount(() => {\n      unsubscribe()\n      applied?.revert()\n      applied = null\n    })\n\n    provide(IrisSkinKey, { engine: props.engine, current })\n    return () => slots.default?.()\n  },\n})\n\nexport function useSkinContext(): IrisSkinContext {\n  const ctx = inject(IrisSkinKey)\n  if (!ctx) throw new Error('[iris-ui] useSkin(): no <SkinProvider> ancestor found')\n  return ctx\n}\n","import type { ComputedRef } from 'vue'\nimport { computed } from 'vue'\nimport type { ResolvedSkin, Skin, SkinMode, SkinPatch, SkinError } from '@iris-ui-kit/skins'\nimport { useSkinContext } from './SkinProvider'\n\nexport interface UseSkinReturn {\n  skin: ComputedRef<ResolvedSkin>\n  setSkin: (id: string) => void\n  loadSkin: (source: string | Skin) => Promise<ResolvedSkin>\n  useFromCatalog: (id: string) => Promise<ResolvedSkin>\n  patch: (overrides: SkinPatch) => void\n  resetPatch: () => void\n  setMode: (mode: SkinMode) => void\n  getMode: () => SkinMode\n  /** Logical selected id (pre system-variant remap) — e.g. 'auto' while following the system. */\n  getActiveId: () => string\n  availableSkins: () => Skin[]\n  errors: () => SkinError[]\n}\n\n/** Read + control the active skin from anywhere inside a `<SkinProvider>`. */\nexport function useSkin(): UseSkinReturn {\n  const { engine, current } = useSkinContext()\n  return {\n    skin: computed(() => current.value),\n    setSkin: engine.setSkin,\n    loadSkin: engine.loadSkin,\n    useFromCatalog: engine.useFromCatalog,\n    patch: engine.patch,\n    resetPatch: engine.resetPatch,\n    setMode: engine.setMode,\n    getMode: engine.getMode,\n    getActiveId: engine.getActiveId,\n    availableSkins: engine.availableSkins,\n    errors: engine.errors,\n  }\n}\n"]}

package/dist/skins.d.cts

@@ -0,0 +1,67 @@
+import { SkinEngine, ResolvedSkin, Skin, SkinPatch, SkinMode, SkinError } from '@iris-ui-kit/skins';
+export { ApplySkinResult, LoadSkinOptions, ResolvedSkin, Skin, SkinBootScriptConfig, SkinCatalog, SkinCatalogConfig, SkinEngine, SkinEngineConfig, SkinError, SkinErrorCode, SkinLookup, SkinManifest, SkinManifestEntry, SkinMode, SkinPatch, SkinRegistry, SkinResolutionError, SkinStorage, SkinTokenOverrides, applySkin, builtinSkins, createSkinCatalog, createSkinEngine, createSkinRegistry, darkSkin, lightSkin, loadSkin, localStorageSkinStorage, memorySkinStorage, renderSkinStyle, resolveSkin, skinBootScript, skinError, skinToCssEntries, validateSkin } from '@iris-ui-kit/skins';
+import * as vue from 'vue';
+import { Ref, InjectionKey, PropType, ComputedRef } from 'vue';
+
+interface IrisSkinContext {
+    engine: SkinEngine;
+    current: Ref<ResolvedSkin>;
+}
+declare const IrisSkinKey: InjectionKey<IrisSkinContext>;
+/**
+ * Renderless provider mirroring `<IrisThemeProvider>` for skins: subscribes to
+ * the engine store, applies/reverts the resolved skin on the target element,
+ * and provides the engine + current skin to descendants. Zero skin logic.
+ */
+declare const SkinProvider: vue.DefineComponent<vue.ExtractPropTypes<{
+    engine: {
+        type: PropType<SkinEngine>;
+        required: true;
+    };
+    target: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+    cspNonce: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    engine: {
+        type: PropType<SkinEngine>;
+        required: true;
+    };
+    target: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+    cspNonce: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    target: HTMLElement | null;
+    cspNonce: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare function useSkinContext(): IrisSkinContext;
+
+interface UseSkinReturn {
+    skin: ComputedRef<ResolvedSkin>;
+    setSkin: (id: string) => void;
+    loadSkin: (source: string | Skin) => Promise<ResolvedSkin>;
+    useFromCatalog: (id: string) => Promise<ResolvedSkin>;
+    patch: (overrides: SkinPatch) => void;
+    resetPatch: () => void;
+    setMode: (mode: SkinMode) => void;
+    getMode: () => SkinMode;
+    /** Logical selected id (pre system-variant remap) — e.g. 'auto' while following the system. */
+    getActiveId: () => string;
+    availableSkins: () => Skin[];
+    errors: () => SkinError[];
+}
+/** Read + control the active skin from anywhere inside a `<SkinProvider>`. */
+declare function useSkin(): UseSkinReturn;
+
+export { type IrisSkinContext, IrisSkinKey, SkinProvider, type UseSkinReturn, useSkin, useSkinContext };

package/dist/skins.d.ts

@@ -0,0 +1,67 @@
+import { SkinEngine, ResolvedSkin, Skin, SkinPatch, SkinMode, SkinError } from '@iris-ui-kit/skins';
+export { ApplySkinResult, LoadSkinOptions, ResolvedSkin, Skin, SkinBootScriptConfig, SkinCatalog, SkinCatalogConfig, SkinEngine, SkinEngineConfig, SkinError, SkinErrorCode, SkinLookup, SkinManifest, SkinManifestEntry, SkinMode, SkinPatch, SkinRegistry, SkinResolutionError, SkinStorage, SkinTokenOverrides, applySkin, builtinSkins, createSkinCatalog, createSkinEngine, createSkinRegistry, darkSkin, lightSkin, loadSkin, localStorageSkinStorage, memorySkinStorage, renderSkinStyle, resolveSkin, skinBootScript, skinError, skinToCssEntries, validateSkin } from '@iris-ui-kit/skins';
+import * as vue from 'vue';
+import { Ref, InjectionKey, PropType, ComputedRef } from 'vue';
+
+interface IrisSkinContext {
+    engine: SkinEngine;
+    current: Ref<ResolvedSkin>;
+}
+declare const IrisSkinKey: InjectionKey<IrisSkinContext>;
+/**
+ * Renderless provider mirroring `<IrisThemeProvider>` for skins: subscribes to
+ * the engine store, applies/reverts the resolved skin on the target element,
+ * and provides the engine + current skin to descendants. Zero skin logic.
+ */
+declare const SkinProvider: vue.DefineComponent<vue.ExtractPropTypes<{
+    engine: {
+        type: PropType<SkinEngine>;
+        required: true;
+    };
+    target: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+    cspNonce: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    engine: {
+        type: PropType<SkinEngine>;
+        required: true;
+    };
+    target: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+    cspNonce: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    target: HTMLElement | null;
+    cspNonce: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare function useSkinContext(): IrisSkinContext;
+
+interface UseSkinReturn {
+    skin: ComputedRef<ResolvedSkin>;
+    setSkin: (id: string) => void;
+    loadSkin: (source: string | Skin) => Promise<ResolvedSkin>;
+    useFromCatalog: (id: string) => Promise<ResolvedSkin>;
+    patch: (overrides: SkinPatch) => void;
+    resetPatch: () => void;
+    setMode: (mode: SkinMode) => void;
+    getMode: () => SkinMode;
+    /** Logical selected id (pre system-variant remap) — e.g. 'auto' while following the system. */
+    getActiveId: () => string;
+    availableSkins: () => Skin[];
+    errors: () => SkinError[];
+}
+/** Read + control the active skin from anywhere inside a `<SkinProvider>`. */
+declare function useSkin(): UseSkinReturn;
+
+export { type IrisSkinContext, IrisSkinKey, SkinProvider, type UseSkinReturn, useSkin, useSkinContext };

package/dist/skins.js

@@ -0,0 +1,3 @@
+export { IrisSkinKey, SkinProvider, SkinResolutionError, applySkin, builtinSkins, createSkinCatalog, createSkinEngine, createSkinRegistry, darkSkin, lightSkin, loadSkin, localStorageSkinStorage, memorySkinStorage, renderSkinStyle, resolveSkin, skinBootScript, skinError, skinToCssEntries, useSkin, useSkinContext, validateSkin } from './chunk-H7HVVPYR.js';
+//# sourceMappingURL=skins.js.map
+//# sourceMappingURL=skins.js.map

package/dist/skins.js.map

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

package/dist/theme.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+var vue = require('vue');
+var theme = require('@iris-ui-kit/theme');
+
+// src/theme/ThemeProvider.ts
+var IrisThemeKey = /* @__PURE__ */ Symbol("IrisTheme");
+var ThemeProvider = vue.defineComponent({
+  name: "IrisThemeProvider",
+  props: {
+    store: {
+      type: Object,
+      required: true
+    },
+    target: {
+      type: Object,
+      default: null
+    },
+    /** Writing direction; sets `dir` on the target for RTL. Default `'ltr'`. */
+    dir: {
+      type: String,
+      default: "ltr"
+    },
+    /** CSP nonce for injected inline stylesheets. */
+    cspNonce: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const current = vue.ref(props.store.store.getState());
+    const unsubscribe = props.store.store.subscribe((next) => {
+      current.value = next;
+    });
+    let applied = null;
+    let dirApplied = null;
+    const targetEl = () => props.target ?? document.documentElement;
+    const applyCurrent = () => {
+      applied?.revert();
+      applied = theme.applyTheme(current.value, targetEl());
+    };
+    const applyDir = () => {
+      dirApplied?.revert();
+      dirApplied = theme.applyDirection(props.dir, targetEl());
+    };
+    vue.onMounted(() => {
+      theme.injectGlobalStyles(props.cspNonce);
+      applyCurrent();
+      applyDir();
+    });
+    vue.watch(current, () => {
+      if (applied) applyCurrent();
+    });
+    vue.watch(
+      () => props.dir,
+      () => {
+        if (dirApplied) applyDir();
+      }
+    );
+    vue.onBeforeUnmount(() => {
+      unsubscribe();
+      applied?.revert();
+      applied = null;
+      dirApplied?.revert();
+      dirApplied = null;
+    });
+    vue.provide(IrisThemeKey, { store: props.store, current, dir: vue.computed(() => props.dir) });
+    return () => slots.default?.();
+  }
+});
+function useThemeContext() {
+  const ctx = vue.inject(IrisThemeKey);
+  if (!ctx) {
+    throw new Error("[iris-ui] useTheme(): no <ThemeProvider> ancestor found");
+  }
+  return ctx;
+}
+function useDirection() {
+  const ctx = vue.inject(IrisThemeKey, null);
+  return ctx ? ctx.dir : vue.computed(() => "ltr");
+}
+function useTheme() {
+  const ctx = useThemeContext();
+  return {
+    theme: vue.computed(() => ctx.current.value),
+    setTheme: ctx.store.setTheme,
+    availableThemes: ctx.store.availableThemes
+  };
+}
+function useColorScheme() {
+  const scheme = vue.ref(theme.getColorScheme());
+  const stop = theme.watchColorScheme((s) => {
+    scheme.value = s;
+  });
+  vue.onBeforeUnmount(stop);
+  return scheme;
+}
+
+exports.IrisThemeKey = IrisThemeKey;
+exports.ThemeProvider = ThemeProvider;
+exports.useColorScheme = useColorScheme;
+exports.useDirection = useDirection;
+exports.useTheme = useTheme;
+exports.useThemeContext = useThemeContext;
+//# sourceMappingURL=theme.cjs.map
+//# sourceMappingURL=theme.cjs.map

package/dist/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/ThemeProvider.ts","../src/theme/useTheme.ts","../src/theme/useColorScheme.ts"],"names":["defineComponent","ref","applyTheme","applyDirection","onMounted","injectGlobalStyles","watch","onBeforeUnmount","provide","computed","inject","getColorScheme","watchColorScheme"],"mappings":"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","file":"theme.cjs","sourcesContent":["import {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  type ComputedRef,\n  type InjectionKey,\n  type PropType,\n  type Ref,\n} from 'vue'\nimport {\n  applyDirection,\n  applyTheme,\n  injectGlobalStyles,\n  type ApplyDirectionResult,\n  type ApplyThemeResult,\n  type Direction,\n  type ThemeStore,\n} from '@iris-ui-kit/theme'\nimport type { IrisTheme } from '@iris-ui-kit/tokens'\n\nexport interface IrisThemeContext {\n  store: ThemeStore\n  current: Ref<IrisTheme>\n  dir: ComputedRef<Direction>\n}\n\nexport const IrisThemeKey: InjectionKey<IrisThemeContext> = Symbol('IrisTheme')\n\n/**\n * Renderless provider that:\n * 1. exposes the theme store to descendants via `provide`,\n * 2. applies the current theme to a target element on mount and on change,\n * 3. reverts the inline custom properties on unmount.\n *\n * `target` defaults to `document.documentElement`. Pass an element ref to\n * scope a theme to a subtree.\n */\nexport const ThemeProvider = defineComponent({\n  name: 'IrisThemeProvider',\n  props: {\n    store: {\n      type: Object as PropType<ThemeStore>,\n      required: true,\n    },\n    target: {\n      type: Object as PropType<HTMLElement | null>,\n      default: null,\n    },\n    /** Writing direction; sets `dir` on the target for RTL. Default `'ltr'`. */\n    dir: {\n      type: String as PropType<Direction>,\n      default: 'ltr',\n    },\n    /** CSP nonce for injected inline stylesheets. */\n    cspNonce: {\n      type: String,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const current = ref(props.store.store.getState()) as Ref<IrisTheme>\n    const unsubscribe = props.store.store.subscribe((next) => {\n      current.value = next\n    })\n\n    let applied: ApplyThemeResult | null = null\n    let dirApplied: ApplyDirectionResult | null = null\n\n    const targetEl = () => props.target ?? document.documentElement\n\n    const applyCurrent = () => {\n      applied?.revert()\n      applied = applyTheme(current.value, targetEl())\n    }\n\n    const applyDir = () => {\n      dirApplied?.revert()\n      dirApplied = applyDirection(props.dir, targetEl())\n    }\n\n    onMounted(() => {\n      injectGlobalStyles(props.cspNonce)\n      applyCurrent()\n      applyDir()\n    })\n\n    watch(current, () => {\n      if (applied) applyCurrent()\n    })\n\n    watch(\n      () => props.dir,\n      () => {\n        if (dirApplied) applyDir()\n      },\n    )\n\n    onBeforeUnmount(() => {\n      unsubscribe()\n      applied?.revert()\n      applied = null\n      dirApplied?.revert()\n      dirApplied = null\n    })\n\n    provide(IrisThemeKey, { store: props.store, current, dir: computed(() => props.dir) })\n\n    return () => slots.default?.()\n  },\n})\n\nexport function useThemeContext(): IrisThemeContext {\n  const ctx = inject(IrisThemeKey)\n  if (!ctx) {\n    throw new Error('[iris-ui] useTheme(): no <ThemeProvider> ancestor found')\n  }\n  return ctx\n}\n\n/**\n * Current writing direction (`'ltr'` / `'rtl'`) from the nearest\n * `<ThemeProvider>`, or a static `'ltr'` ref when there is none.\n */\nexport function useDirection(): ComputedRef<Direction> {\n  const ctx = inject(IrisThemeKey, null)\n  return ctx ? ctx.dir : computed(() => 'ltr' as Direction)\n}\n","import { computed, type ComputedRef } from 'vue'\nimport type { IrisTheme } from '@iris-ui-kit/tokens'\nimport { useThemeContext } from './ThemeProvider'\n\nexport interface UseThemeReturn {\n  /** Reactive ref to the active theme. */\n  theme: ComputedRef<IrisTheme>\n  /** Switch by name or by passing a theme directly. */\n  setTheme: (target: string | IrisTheme) => void\n  /** Map of all themes registered with the store. */\n  availableThemes: Record<string, IrisTheme>\n}\n\n/**\n * Read and write the current theme from anywhere inside a <ThemeProvider>.\n *\n * @example\n * const { theme, setTheme } = useTheme()\n * theme.value.colors['iris.primary']\n * setTheme('dark')\n */\nexport function useTheme(): UseThemeReturn {\n  const ctx = useThemeContext()\n  return {\n    theme: computed(() => ctx.current.value),\n    setTheme: ctx.store.setTheme,\n    availableThemes: ctx.store.availableThemes,\n  }\n}\n","import { onBeforeUnmount, ref, type Ref } from 'vue'\nimport { getColorScheme, watchColorScheme, type ColorScheme } from '@iris-ui-kit/theme'\n\n/**\n * Reactive system color scheme (`'light'` / `'dark'`) from\n * `prefers-color-scheme`. SSR-safe (reports `'light'` until matchMedia is\n * available). Wire it to a theme store to auto-follow the system:\n *\n * ```ts\n * const scheme = useColorScheme()\n * watch(scheme, (s) => store.setTheme(s === 'dark' ? 'dark' : 'light'), { immediate: true })\n * ```\n */\nexport function useColorScheme(): Ref<ColorScheme> {\n  const scheme = ref<ColorScheme>(getColorScheme())\n  const stop = watchColorScheme((s) => {\n    scheme.value = s\n  })\n  onBeforeUnmount(stop)\n  return scheme\n}\n"]}