@iris-ui-kit/vue 0.1.0

package/dist/theme.d.cts

@@ -0,0 +1,103 @@
+import * as vue from 'vue';
+import { Ref, ComputedRef, InjectionKey, PropType } from 'vue';
+import { ThemeStore, Direction, ColorScheme } from '@iris-ui-kit/theme';
+import { IrisTheme } from '@iris-ui-kit/tokens';
+
+interface IrisThemeContext {
+    store: ThemeStore;
+    current: Ref<IrisTheme>;
+    dir: ComputedRef<Direction>;
+}
+declare const IrisThemeKey: InjectionKey<IrisThemeContext>;
+/**
+ * Renderless provider that:
+ * 1. exposes the theme store to descendants via `provide`,
+ * 2. applies the current theme to a target element on mount and on change,
+ * 3. reverts the inline custom properties on unmount.
+ *
+ * `target` defaults to `document.documentElement`. Pass an element ref to
+ * scope a theme to a subtree.
+ */
+declare const ThemeProvider: vue.DefineComponent<vue.ExtractPropTypes<{
+    store: {
+        type: PropType<ThemeStore>;
+        required: true;
+    };
+    target: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+    /** Writing direction; sets `dir` on the target for RTL. Default `'ltr'`. */
+    dir: {
+        type: PropType<Direction>;
+        default: string;
+    };
+    /** CSP nonce for injected inline stylesheets. */
+    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<{
+    store: {
+        type: PropType<ThemeStore>;
+        required: true;
+    };
+    target: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+    /** Writing direction; sets `dir` on the target for RTL. Default `'ltr'`. */
+    dir: {
+        type: PropType<Direction>;
+        default: string;
+    };
+    /** CSP nonce for injected inline stylesheets. */
+    cspNonce: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    target: HTMLElement | null;
+    dir: Direction;
+    cspNonce: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare function useThemeContext(): IrisThemeContext;
+/**
+ * Current writing direction (`'ltr'` / `'rtl'`) from the nearest
+ * `<ThemeProvider>`, or a static `'ltr'` ref when there is none.
+ */
+declare function useDirection(): ComputedRef<Direction>;
+
+interface UseThemeReturn {
+    /** Reactive ref to the active theme. */
+    theme: ComputedRef<IrisTheme>;
+    /** Switch by name or by passing a theme directly. */
+    setTheme: (target: string | IrisTheme) => void;
+    /** Map of all themes registered with the store. */
+    availableThemes: Record<string, IrisTheme>;
+}
+/**
+ * Read and write the current theme from anywhere inside a <ThemeProvider>.
+ *
+ * @example
+ * const { theme, setTheme } = useTheme()
+ * theme.value.colors['iris.primary']
+ * setTheme('dark')
+ */
+declare function useTheme(): UseThemeReturn;
+
+/**
+ * Reactive system color scheme (`'light'` / `'dark'`) from
+ * `prefers-color-scheme`. SSR-safe (reports `'light'` until matchMedia is
+ * available). Wire it to a theme store to auto-follow the system:
+ *
+ * ```ts
+ * const scheme = useColorScheme()
+ * watch(scheme, (s) => store.setTheme(s === 'dark' ? 'dark' : 'light'), { immediate: true })
+ * ```
+ */
+declare function useColorScheme(): Ref<ColorScheme>;
+
+export { type IrisThemeContext, IrisThemeKey, ThemeProvider, type UseThemeReturn, useColorScheme, useDirection, useTheme, useThemeContext };

package/dist/theme.d.ts

@@ -0,0 +1,103 @@
+import * as vue from 'vue';
+import { Ref, ComputedRef, InjectionKey, PropType } from 'vue';
+import { ThemeStore, Direction, ColorScheme } from '@iris-ui-kit/theme';
+import { IrisTheme } from '@iris-ui-kit/tokens';
+
+interface IrisThemeContext {
+    store: ThemeStore;
+    current: Ref<IrisTheme>;
+    dir: ComputedRef<Direction>;
+}
+declare const IrisThemeKey: InjectionKey<IrisThemeContext>;
+/**
+ * Renderless provider that:
+ * 1. exposes the theme store to descendants via `provide`,
+ * 2. applies the current theme to a target element on mount and on change,
+ * 3. reverts the inline custom properties on unmount.
+ *
+ * `target` defaults to `document.documentElement`. Pass an element ref to
+ * scope a theme to a subtree.
+ */
+declare const ThemeProvider: vue.DefineComponent<vue.ExtractPropTypes<{
+    store: {
+        type: PropType<ThemeStore>;
+        required: true;
+    };
+    target: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+    /** Writing direction; sets `dir` on the target for RTL. Default `'ltr'`. */
+    dir: {
+        type: PropType<Direction>;
+        default: string;
+    };
+    /** CSP nonce for injected inline stylesheets. */
+    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<{
+    store: {
+        type: PropType<ThemeStore>;
+        required: true;
+    };
+    target: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+    /** Writing direction; sets `dir` on the target for RTL. Default `'ltr'`. */
+    dir: {
+        type: PropType<Direction>;
+        default: string;
+    };
+    /** CSP nonce for injected inline stylesheets. */
+    cspNonce: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    target: HTMLElement | null;
+    dir: Direction;
+    cspNonce: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare function useThemeContext(): IrisThemeContext;
+/**
+ * Current writing direction (`'ltr'` / `'rtl'`) from the nearest
+ * `<ThemeProvider>`, or a static `'ltr'` ref when there is none.
+ */
+declare function useDirection(): ComputedRef<Direction>;
+
+interface UseThemeReturn {
+    /** Reactive ref to the active theme. */
+    theme: ComputedRef<IrisTheme>;
+    /** Switch by name or by passing a theme directly. */
+    setTheme: (target: string | IrisTheme) => void;
+    /** Map of all themes registered with the store. */
+    availableThemes: Record<string, IrisTheme>;
+}
+/**
+ * Read and write the current theme from anywhere inside a <ThemeProvider>.
+ *
+ * @example
+ * const { theme, setTheme } = useTheme()
+ * theme.value.colors['iris.primary']
+ * setTheme('dark')
+ */
+declare function useTheme(): UseThemeReturn;
+
+/**
+ * Reactive system color scheme (`'light'` / `'dark'`) from
+ * `prefers-color-scheme`. SSR-safe (reports `'light'` until matchMedia is
+ * available). Wire it to a theme store to auto-follow the system:
+ *
+ * ```ts
+ * const scheme = useColorScheme()
+ * watch(scheme, (s) => store.setTheme(s === 'dark' ? 'dark' : 'light'), { immediate: true })
+ * ```
+ */
+declare function useColorScheme(): Ref<ColorScheme>;
+
+export { type IrisThemeContext, IrisThemeKey, ThemeProvider, type UseThemeReturn, useColorScheme, useDirection, useTheme, useThemeContext };

package/dist/theme.js

@@ -0,0 +1,3 @@
+export { IrisThemeKey, ThemeProvider, useColorScheme, useDirection, useTheme, useThemeContext } from './chunk-72PZMU6R.js';
+//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

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

package/dist/undo.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var vue = require('vue');
+var undo = require('@iris-ui-kit/core/undo');
+
+// src/undo/useUndoStack.ts
+function useUndoStack(options) {
+  const stack = undo.createUndoStack(options);
+  const state = vue.shallowRef({
+    canUndo: stack.canUndo(),
+    canRedo: stack.canRedo(),
+    depth: stack.depth,
+    index: stack.index
+  });
+  const sync = () => {
+    state.value = {
+      canUndo: stack.canUndo(),
+      canRedo: stack.canRedo(),
+      depth: stack.depth,
+      index: stack.index
+    };
+  };
+  const push = (snapshot) => {
+    const result = stack.push(snapshot);
+    sync();
+    return result;
+  };
+  const undo$1 = () => {
+    const result = stack.undo();
+    if (result !== void 0) sync();
+    return result;
+  };
+  const redo = () => {
+    const result = stack.redo();
+    if (result !== void 0) sync();
+    return result;
+  };
+  const clear = () => {
+    stack.clear();
+    sync();
+  };
+  return { push, undo: undo$1, redo, clear, stack, state };
+}
+
+Object.defineProperty(exports, "createUndoStack", {
+  enumerable: true,
+  get: function () { return undo.createUndoStack; }
+});
+exports.useUndoStack = useUndoStack;
+//# sourceMappingURL=undo.cjs.map
+//# sourceMappingURL=undo.cjs.map

package/dist/undo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/undo/useUndoStack.ts"],"names":["createUndoStack","shallowRef","undo"],"mappings":";;;;;;AAgCO,SAAS,aAAgB,OAAA,EAa9B;AACA,EAAA,MAAM,KAAA,GAAQA,qBAAmB,OAAO,CAAA;AAExC,EAAA,MAAM,QAAQC,cAAA,CAAmC;AAAA,IAC/C,OAAA,EAAS,MAAM,OAAA,EAAQ;AAAA,IACvB,OAAA,EAAS,MAAM,OAAA,EAAQ;AAAA,IACvB,OAAO,KAAA,CAAM,KAAA;AAAA,IACb,OAAO,KAAA,CAAM;AAAA,GACd,CAAA;AAED,EAAA,MAAM,OAAO,MAAM;AACjB,IAAA,KAAA,CAAM,KAAA,GAAQ;AAAA,MACZ,OAAA,EAAS,MAAM,OAAA,EAAQ;AAAA,MACvB,OAAA,EAAS,MAAM,OAAA,EAAQ;AAAA,MACvB,OAAO,KAAA,CAAM,KAAA;AAAA,MACb,OAAO,KAAA,CAAM;AAAA,KACf;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,IAAA,GAAO,CAAC,QAAA,KAAmB;AAC/B,IAAA,MAAM,MAAA,GAAS,KAAA,CAAM,IAAA,CAAK,QAAQ,CAAA;AAClC,IAAA,IAAA,EAAK;AACL,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AAEA,EAAA,MAAMC,SAAO,MAAqB;AAChC,IAAA,MAAM,MAAA,GAAS,MAAM,IAAA,EAAK;AAC1B,IAAA,IAAI,MAAA,KAAW,QAAW,IAAA,EAAK;AAC/B,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AAEA,EAAA,MAAM,OAAO,MAAqB;AAChC,IAAA,MAAM,MAAA,GAAS,MAAM,IAAA,EAAK;AAC1B,IAAA,IAAI,MAAA,KAAW,QAAW,IAAA,EAAK;AAC/B,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AAEA,EAAA,MAAM,QAAQ,MAAM;AAClB,IAAA,KAAA,CAAM,KAAA,EAAM;AACZ,IAAA,IAAA,EAAK;AAAA,EACP,CAAA;AAEA,EAAA,OAAO,EAAE,IAAA,QAAMA,MAAA,EAAM,IAAA,EAAM,KAAA,EAAO,OAAO,KAAA,EAAM;AACjD","file":"undo.cjs","sourcesContent":["import { shallowRef, type ShallowRef } from 'vue'\nimport { createUndoStack, type UndoStack, type UndoStackOptions } from '@iris-ui-kit/core/undo'\n\n/**\n * Reactive snapshot metadata for the UndoStack: convenience booleans that\n * update on every push/undo/redo/clear for use in UI bindings (enable/disable\n * undo/redo buttons).\n */\nexport interface UndoStackReactiveState {\n  canUndo: boolean\n  canRedo: boolean\n  depth: number\n  index: number\n}\n\n/**\n * Vue bridge over the framework-agnostic {@link createUndoStack}.\n * Creates the stack once in `setup()` and returns a stable controller\n * plus a reactive `state` that tracks `canUndo`/`canRedo`/`depth`/`index` for\n * easy UI binding.\n *\n * The returned `push`/`undo`/`redo`/`clear` automatically update the reactive\n * state — no manual `.value = ...` needed.\n *\n * @example\n *   const { push, undo, redo, state } = useUndoStack({ initial: formValues })\n *   // After mutation:\n *   push(currentValues)\n *   // In template:\n *   <button :disabled=\"!state.canUndo\" @click=\"undo\">Undo</button>\n *   <button :disabled=\"!state.canRedo\" @click=\"redo\">Redo</button>\n */\nexport function useUndoStack<T>(options?: UndoStackOptions<T>): {\n  /** Push a new snapshot onto the stack. Returns the stored value. */\n  push: (snapshot: T) => T\n  /** Undo: returns the previous snapshot, or undefined if nothing to undo. */\n  undo: () => T | undefined\n  /** Redo: returns the next snapshot, or undefined if nothing to redo. */\n  redo: () => T | undefined\n  /** Clear all history. */\n  clear: () => void\n  /** The raw undo stack (stable reference, same across renders). */\n  stack: UndoStack<T>\n  /** Reactive metadata: canUndo, canRedo, depth, index. */\n  state: ShallowRef<UndoStackReactiveState>\n} {\n  const stack = createUndoStack<T>(options)\n\n  const state = shallowRef<UndoStackReactiveState>({\n    canUndo: stack.canUndo(),\n    canRedo: stack.canRedo(),\n    depth: stack.depth,\n    index: stack.index,\n  })\n\n  const sync = () => {\n    state.value = {\n      canUndo: stack.canUndo(),\n      canRedo: stack.canRedo(),\n      depth: stack.depth,\n      index: stack.index,\n    }\n  }\n\n  const push = (snapshot: T): T => {\n    const result = stack.push(snapshot)\n    sync()\n    return result\n  }\n\n  const undo = (): T | undefined => {\n    const result = stack.undo()\n    if (result !== undefined) sync()\n    return result\n  }\n\n  const redo = (): T | undefined => {\n    const result = stack.redo()\n    if (result !== undefined) sync()\n    return result\n  }\n\n  const clear = () => {\n    stack.clear()\n    sync()\n  }\n\n  return { push, undo, redo, clear, stack, state }\n}\n"]}

package/dist/undo.d.cts

@@ -0,0 +1,48 @@
+import { ShallowRef } from 'vue';
+import { UndoStackOptions, UndoStack } from '@iris-ui-kit/core/undo';
+export { UndoStack, UndoStackOptions, createUndoStack } from '@iris-ui-kit/core/undo';
+
+/**
+ * Reactive snapshot metadata for the UndoStack: convenience booleans that
+ * update on every push/undo/redo/clear for use in UI bindings (enable/disable
+ * undo/redo buttons).
+ */
+interface UndoStackReactiveState {
+    canUndo: boolean;
+    canRedo: boolean;
+    depth: number;
+    index: number;
+}
+/**
+ * Vue bridge over the framework-agnostic {@link createUndoStack}.
+ * Creates the stack once in `setup()` and returns a stable controller
+ * plus a reactive `state` that tracks `canUndo`/`canRedo`/`depth`/`index` for
+ * easy UI binding.
+ *
+ * The returned `push`/`undo`/`redo`/`clear` automatically update the reactive
+ * state — no manual `.value = ...` needed.
+ *
+ * @example
+ *   const { push, undo, redo, state } = useUndoStack({ initial: formValues })
+ *   // After mutation:
+ *   push(currentValues)
+ *   // In template:
+ *   <button :disabled="!state.canUndo" @click="undo">Undo</button>
+ *   <button :disabled="!state.canRedo" @click="redo">Redo</button>
+ */
+declare function useUndoStack<T>(options?: UndoStackOptions<T>): {
+    /** Push a new snapshot onto the stack. Returns the stored value. */
+    push: (snapshot: T) => T;
+    /** Undo: returns the previous snapshot, or undefined if nothing to undo. */
+    undo: () => T | undefined;
+    /** Redo: returns the next snapshot, or undefined if nothing to redo. */
+    redo: () => T | undefined;
+    /** Clear all history. */
+    clear: () => void;
+    /** The raw undo stack (stable reference, same across renders). */
+    stack: UndoStack<T>;
+    /** Reactive metadata: canUndo, canRedo, depth, index. */
+    state: ShallowRef<UndoStackReactiveState>;
+};
+
+export { type UndoStackReactiveState, useUndoStack };

package/dist/undo.d.ts

@@ -0,0 +1,48 @@
+import { ShallowRef } from 'vue';
+import { UndoStackOptions, UndoStack } from '@iris-ui-kit/core/undo';
+export { UndoStack, UndoStackOptions, createUndoStack } from '@iris-ui-kit/core/undo';
+
+/**
+ * Reactive snapshot metadata for the UndoStack: convenience booleans that
+ * update on every push/undo/redo/clear for use in UI bindings (enable/disable
+ * undo/redo buttons).
+ */
+interface UndoStackReactiveState {
+    canUndo: boolean;
+    canRedo: boolean;
+    depth: number;
+    index: number;
+}
+/**
+ * Vue bridge over the framework-agnostic {@link createUndoStack}.
+ * Creates the stack once in `setup()` and returns a stable controller
+ * plus a reactive `state` that tracks `canUndo`/`canRedo`/`depth`/`index` for
+ * easy UI binding.
+ *
+ * The returned `push`/`undo`/`redo`/`clear` automatically update the reactive
+ * state — no manual `.value = ...` needed.
+ *
+ * @example
+ *   const { push, undo, redo, state } = useUndoStack({ initial: formValues })
+ *   // After mutation:
+ *   push(currentValues)
+ *   // In template:
+ *   <button :disabled="!state.canUndo" @click="undo">Undo</button>
+ *   <button :disabled="!state.canRedo" @click="redo">Redo</button>
+ */
+declare function useUndoStack<T>(options?: UndoStackOptions<T>): {
+    /** Push a new snapshot onto the stack. Returns the stored value. */
+    push: (snapshot: T) => T;
+    /** Undo: returns the previous snapshot, or undefined if nothing to undo. */
+    undo: () => T | undefined;
+    /** Redo: returns the next snapshot, or undefined if nothing to redo. */
+    redo: () => T | undefined;
+    /** Clear all history. */
+    clear: () => void;
+    /** The raw undo stack (stable reference, same across renders). */
+    stack: UndoStack<T>;
+    /** Reactive metadata: canUndo, canRedo, depth, index. */
+    state: ShallowRef<UndoStackReactiveState>;
+};
+
+export { type UndoStackReactiveState, useUndoStack };

package/dist/undo.js

@@ -0,0 +1,3 @@
+export { createUndoStack, useUndoStack } from './chunk-VM2CXEUA.js';
+//# sourceMappingURL=undo.js.map
+//# sourceMappingURL=undo.js.map

package/dist/undo.js.map

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

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@iris-ui-kit/vue",
+  "version": "0.1.0",
+  "description": "Vue 3.5 adapter for Iris UI — full component set",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.6",
+    "@iris-ui-kit/core": "0.1.0",
+    "@iris-ui-kit/tokens": "0.1.0",
+    "@iris-ui-kit/theme": "0.1.0",
+    "@iris-ui-kit/skins": "0.0.1",
+    "@iris-ui-kit/icons": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vue/server-renderer": "3.5.34",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^25.0.1",
+    "vue": "^3.5.13"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nousresearch/iris-ui.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "clean": "rm -rf dist .turbo"
+  }
+}