@ponchia/ui 0.6.5 → 0.6.7

package/tokens/index.js

@@ -150,7 +150,7 @@ export const cssVars = {
     '--text-dim': '#a0a0a0',
     '--accent': '#ff3b41',
     '--accent-ramp-end': '#000000',
-    '--accent-strong': 'color-mix(in srgb, var(--accent) 84%, #fff)',
+    '--accent-strong': 'color-mix(in srgb, var(--accent) 80%, #fff)',
     '--accent-text': 'var(--accent-strong)',
     // Read-only export: the resolved on-accent ink for FOREIGN renderers
     // (D2/Mermaid/Vega labels on an accent fill — see tokens/*.json). In-DOM

package/tokens/index.json

@@ -123,7 +123,7 @@
       "--text-dim": "#a0a0a0",
       "--accent": "#ff3b41",
       "--accent-ramp-end": "#000000",
-      "--accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
+      "--accent-strong": "color-mix(in srgb, var(--accent) 80%, #fff)",
       "--accent-text": "var(--accent-strong)",
       "--on-accent": "var(--button-text)",
       "--accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
@@ -269,7 +269,7 @@
         "text-dim": "#a0a0a0",
         "accent": "#ff3b41",
         "accent-ramp-end": "#000000",
-        "accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
+        "accent-strong": "color-mix(in srgb, var(--accent) 80%, #fff)",
         "accent-text": "var(--accent-strong)",
         "on-accent": "var(--button-text)",
         "accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",

package/tokens/resolved.json

@@ -70,7 +70,7 @@
     "--accent-3": "#330506",
     "--accent-4": "#80191c",
     "--accent-5": "#ff3b41",
-    "--accent-6": "#ff5a5f",
+    "--accent-6": "#ff6267",
     "--surface-1": "#121212",
     "--surface-2": "#181818",
     "--surface-3": "#1c1c1c",
@@ -109,8 +109,8 @@
     "--text-dim": "#a0a0a0",
     "--accent": "#ff3b41",
     "--accent-ramp-end": "#000000",
-    "--accent-strong": "#ff5a5f",
-    "--accent-text": "#ff5a5f",
+    "--accent-strong": "#ff6267",
+    "--accent-text": "#ff6267",
     "--on-accent": "#000000",
     "--accent-soft": "rgba(255, 59, 65, 0.14)",
     "--success": "#4ec27e",

package/tokens/tokens.dtcg.json

@@ -712,7 +712,7 @@
           "$type": "color",
           "$value": null,
           "$extensions": {
-            "com.ponchia.css": "color-mix(in srgb, var(--accent) 84%, #fff)"
+            "com.ponchia.css": "color-mix(in srgb, var(--accent) 80%, #fff)"
           }
         },
         "text": {

package/vue/index.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Create a Vue directive object from any Bronto delegated behavior initializer.
+ *
+ * @param {(opts?: DelegateOpts) => Cleanup | void} init
+ * @returns {BrontoDirective}
+ */
+export function createBrontoDirective(init: (opts?: DelegateOpts) => Cleanup | void): BrontoDirective;
+/** @type {BrontoDirective} */
+export const vThemeToggle: BrontoDirective;
+export const vDismissible: BrontoDirective;
+export const vDisabledGuard: BrontoDirective;
+export const vDisclosure: BrontoDirective;
+export const vMenu: BrontoDirective;
+export const vFormValidation: BrontoDirective;
+export const vCombobox: BrontoDirective;
+export const vPopover: BrontoDirective;
+export const vTableSort: BrontoDirective;
+export const vTabs: BrontoDirective;
+export const vDialog: BrontoDirective;
+export const vModal: BrontoDirective;
+export const vCarousel: BrontoDirective;
+export const vDotGlyph: BrontoDirective;
+export const vLegend: BrontoDirective;
+export const vConnectors: BrontoDirective;
+export const vSpotlight: BrontoDirective;
+export const vCrosshair: BrontoDirective;
+export const vCommand: BrontoDirective;
+export const vSources: BrontoDirective;
+export const vSplitter: BrontoDirective;
+export const directives: Readonly<{
+    themeToggle: BrontoDirective;
+    dismissible: BrontoDirective;
+    disabledGuard: BrontoDirective;
+    disclosure: BrontoDirective;
+    menu: BrontoDirective;
+    formValidation: BrontoDirective;
+    combobox: BrontoDirective;
+    popover: BrontoDirective;
+    tableSort: BrontoDirective;
+    tabs: BrontoDirective;
+    dialog: BrontoDirective;
+    modal: BrontoDirective;
+    carousel: BrontoDirective;
+    dotGlyph: BrontoDirective;
+    legend: BrontoDirective;
+    connectors: BrontoDirective;
+    spotlight: BrontoDirective;
+    crosshair: BrontoDirective;
+    command: BrontoDirective;
+    sources: BrontoDirective;
+    splitter: BrontoDirective;
+}>;
+export const brontoVue: Readonly<{
+    install(app: any): void;
+}>;
+export default brontoVue;
+export function useToast(): (message: string, opts?: ToastOpts) => Cleanup;
+export type Cleanup = import("../behaviors/index.js").Cleanup;
+export type DelegateOpts = import("../behaviors/index.js").DelegateOpts;
+export type ThemeStorageOpts = import("../behaviors/index.js").ThemeStorageOpts;
+export type ToastOpts = import("../behaviors/index.js").ToastOpts;
+export type BrontoDirectiveRoot = Document | Element | null | undefined;
+export type BrontoDirectiveOpts = Omit<DelegateOpts, "root"> & {
+    root?: BrontoDirectiveRoot;
+};
+export type BrontoDirectiveBinding = {
+    value?: BrontoDirectiveOpts | null | undefined;
+    oldValue?: BrontoDirectiveOpts | null | undefined;
+};
+export type BrontoDirective = {
+    mounted: (el: Element, binding?: BrontoDirectiveBinding) => void;
+    updated: (el: Element, binding?: BrontoDirectiveBinding) => void;
+    beforeUnmount: (el: Element) => void;
+};
+import { applyStoredTheme } from '../behaviors/index.js';
+import { toast } from '../behaviors/index.js';
+export { applyStoredTheme, toast };
+export { cls, ui, cx } from "../classes/index.js";
+//# sourceMappingURL=index.d.ts.map

package/vue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAoFA;;;;;GAKG;AACH,4CAHW,CAAC,IAAI,CAAC,EAAE,YAAY,KAAK,OAAO,GAAG,IAAI,GACrC,eAAe,CAgB3B;AAED,8BAA8B;AAC9B,2BADW,eAAe,CACyC;AACnE,2CAAmE;AACnE,6CAAuE;AACvE,0CAAiE;AACjE,oCAAqD;AACrD,8CAAyE;AACzE,wCAA6D;AAC7D,uCAA2D;AAC3D,yCAA+D;AAC/D,oCAAqD;AACrD,sCAAyD;AACzD,qCAAuD;AACvD,wCAA6D;AAC7D,wCAA6D;AAC7D,sCAAyD;AACzD,0CAAiE;AACjE,yCAA+D;AAC/D,yCAA+D;AAC/D,uCAA2D;AAC3D,uCAA2D;AAC3D,wCAA6D;AAE7D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AA4BH;;GAQG;;AAMI,4BADM,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,OAAO,CACxB;sBAnLtB,OAAO,uBAAuB,EAAE,OAAO;2BACvC,OAAO,uBAAuB,EAAE,YAAY;+BAC5C,OAAO,uBAAuB,EAAE,gBAAgB;wBAChD,OAAO,uBAAuB,EAAE,SAAS;kCAEzC,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS;kCAErC,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAAE;qCAE3D;IAAE,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAA;CAAE;8BAErG;IAAE,OAAO,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAAC,OAAO,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAAC,aAAa,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE;iCA0BlL,uBAAuB;sBAAvB,uBAAuB"}

package/vue/index.js

@@ -0,0 +1,197 @@
+/**
+ * @ponchia/ui/vue — thin Vue directives over @ponchia/ui/behaviors.
+ *
+ * The CSS is the framework; these are optional lifecycle adapters that run the
+ * vanilla behavior initializers from Vue directive hooks. They are plain
+ * directive objects, so this module has no runtime dependency on Vue.
+ *
+ *   import { brontoVue } from '@ponchia/ui/vue';
+ *   app.use(brontoVue);
+ *
+ *   <main v-bronto-theme-toggle>
+ *     <button data-bronto-theme-toggle>Toggle theme</button>
+ *   </main>
+ *
+ * @typedef {import('../behaviors/index.js').Cleanup} Cleanup
+ * @typedef {import('../behaviors/index.js').DelegateOpts} DelegateOpts
+ * @typedef {import('../behaviors/index.js').ThemeStorageOpts} ThemeStorageOpts
+ * @typedef {import('../behaviors/index.js').ToastOpts} ToastOpts
+ *
+ * @typedef {Document | Element | null | undefined} BrontoDirectiveRoot
+ *
+ * @typedef {Omit<DelegateOpts, 'root'> & { root?: BrontoDirectiveRoot }} BrontoDirectiveOpts
+ *
+ * @typedef {{ value?: BrontoDirectiveOpts | null | undefined, oldValue?: BrontoDirectiveOpts | null | undefined }} BrontoDirectiveBinding
+ *
+ * @typedef {{ mounted: (el: Element, binding?: BrontoDirectiveBinding) => void, updated: (el: Element, binding?: BrontoDirectiveBinding) => void, beforeUnmount: (el: Element) => void }} BrontoDirective
+ */
+import {
+  applyStoredTheme,
+  initThemeToggle,
+  dismissible as initDismissible,
+  initDisabledGuard,
+  initDisclosure,
+  initMenu,
+  initFormValidation,
+  initCombobox,
+  initPopover,
+  initTableSort,
+  initTabs,
+  initDialog,
+  initModal,
+  initCarousel,
+  initDotGlyph,
+  initLegend,
+  initConnectors,
+  initSpotlight,
+  initCrosshair,
+  initCommand,
+  initSources,
+  initSplitter,
+  toast,
+} from '../behaviors/index.js';
+
+const cleanups = new WeakMap();
+
+function cleanupMap(el) {
+  let map = cleanups.get(el);
+  if (!map) {
+    map = new Map();
+    cleanups.set(el, map);
+  }
+  return map;
+}
+
+function stop(el, key) {
+  const map = cleanups.get(el);
+  const cleanup = map?.get(key);
+  if (typeof cleanup === 'function') cleanup();
+  map?.delete(key);
+  if (map?.size === 0) cleanups.delete(el);
+}
+
+function resolveOpts(el, opts) {
+  if (!opts || typeof opts !== 'object') return { root: el };
+  if (!('root' in opts)) return { ...opts, root: el };
+  return { ...opts, root: opts.root || null };
+}
+
+function start(el, key, init, opts) {
+  stop(el, key);
+  const cleanup = init(resolveOpts(el, opts));
+  if (typeof cleanup === 'function') cleanupMap(el).set(key, cleanup);
+}
+
+/**
+ * Create a Vue directive object from any Bronto delegated behavior initializer.
+ *
+ * @param {(opts?: DelegateOpts) => Cleanup | void} init
+ * @returns {BrontoDirective}
+ */
+export function createBrontoDirective(init) {
+  const key = Symbol('bronto-vue-directive');
+  return {
+    mounted(el, binding) {
+      start(el, key, init, binding?.value);
+    },
+    updated(el, binding) {
+      if (binding?.value === binding?.oldValue) return;
+      start(el, key, init, binding?.value);
+    },
+    beforeUnmount(el) {
+      stop(el, key);
+    },
+  };
+}
+
+/** @type {BrontoDirective} */
+export const vThemeToggle = createBrontoDirective(initThemeToggle);
+export const vDismissible = createBrontoDirective(initDismissible);
+export const vDisabledGuard = createBrontoDirective(initDisabledGuard);
+export const vDisclosure = createBrontoDirective(initDisclosure);
+export const vMenu = createBrontoDirective(initMenu);
+export const vFormValidation = createBrontoDirective(initFormValidation);
+export const vCombobox = createBrontoDirective(initCombobox);
+export const vPopover = createBrontoDirective(initPopover);
+export const vTableSort = createBrontoDirective(initTableSort);
+export const vTabs = createBrontoDirective(initTabs);
+export const vDialog = createBrontoDirective(initDialog);
+export const vModal = createBrontoDirective(initModal);
+export const vCarousel = createBrontoDirective(initCarousel);
+export const vDotGlyph = createBrontoDirective(initDotGlyph);
+export const vLegend = createBrontoDirective(initLegend);
+export const vConnectors = createBrontoDirective(initConnectors);
+export const vSpotlight = createBrontoDirective(initSpotlight);
+export const vCrosshair = createBrontoDirective(initCrosshair);
+export const vCommand = createBrontoDirective(initCommand);
+export const vSources = createBrontoDirective(initSources);
+export const vSplitter = createBrontoDirective(initSplitter);
+
+export const directives = Object.freeze({
+  themeToggle: vThemeToggle,
+  dismissible: vDismissible,
+  disabledGuard: vDisabledGuard,
+  disclosure: vDisclosure,
+  menu: vMenu,
+  formValidation: vFormValidation,
+  combobox: vCombobox,
+  popover: vPopover,
+  tableSort: vTableSort,
+  tabs: vTabs,
+  dialog: vDialog,
+  modal: vModal,
+  carousel: vCarousel,
+  dotGlyph: vDotGlyph,
+  legend: vLegend,
+  connectors: vConnectors,
+  spotlight: vSpotlight,
+  crosshair: vCrosshair,
+  command: vCommand,
+  sources: vSources,
+  splitter: vSplitter,
+});
+
+const directiveNames = {
+  themeToggle: 'bronto-theme-toggle',
+  dismissible: 'bronto-dismissible',
+  disabledGuard: 'bronto-disabled-guard',
+  disclosure: 'bronto-disclosure',
+  menu: 'bronto-menu',
+  formValidation: 'bronto-form-validation',
+  combobox: 'bronto-combobox',
+  popover: 'bronto-popover',
+  tableSort: 'bronto-table-sort',
+  tabs: 'bronto-tabs',
+  dialog: 'bronto-dialog',
+  modal: 'bronto-modal',
+  carousel: 'bronto-carousel',
+  dotGlyph: 'bronto-dot-glyph',
+  legend: 'bronto-legend',
+  connectors: 'bronto-connectors',
+  spotlight: 'bronto-spotlight',
+  crosshair: 'bronto-crosshair',
+  command: 'bronto-command',
+  sources: 'bronto-sources',
+  splitter: 'bronto-splitter',
+};
+
+const camelizeDirectiveName = (name) => name.replace(/-([a-z])/g, (_m, ch) => ch.toUpperCase());
+
+export const brontoVue = Object.freeze({
+  install(app) {
+    for (const [key, directive] of Object.entries(directives)) {
+      const name = directiveNames[key];
+      app.directive(name, directive);
+      app.directive(camelizeDirectiveName(name), directive);
+    }
+  },
+});
+
+export default brontoVue;
+
+/** The `toast()` imperative (no lifecycle of its own).
+ * @returns {(message: string, opts?: ToastOpts) => Cleanup} */
+export const useToast = () => toast;
+
+export { applyStoredTheme, toast };
+export { cls, ui, cx } from '../classes/index.js';