@ponchia/ui 0.6.6 → 0.6.7

package/svelte/index.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Create a Svelte action from any Bronto delegated behavior initializer.
+ *
+ * @param {(opts?: DelegateOpts) => Cleanup | void} init
+ * @returns {(node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn}
+ */
+export function createBrontoAction(init: (opts?: DelegateOpts) => Cleanup | void): (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+/**
+ * Generic escape hatch for custom behavior initializers.
+ *
+ * @param {Element} node
+ * @param {BrontoBehaviorParams | null | undefined} params
+ * @returns {SvelteActionReturn}
+ */
+export function brontoBehavior(node: Element, params: BrontoBehaviorParams | null | undefined): SvelteActionReturn;
+/**
+ * Generic escape hatch for custom behavior initializers.
+ *
+ * @param {Element} node
+ * @param {BrontoBehaviorParams | null | undefined} params
+ * @returns {SvelteActionReturn}
+ */
+export function useBrontoBehavior(node: Element, params: BrontoBehaviorParams | null | undefined): SvelteActionReturn;
+/** @type {(node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn} */
+export const themeToggle: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const dismissible: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const disabledGuard: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const disclosure: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const menu: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const formValidation: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const combobox: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const popover: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const tableSort: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const tabs: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const dialog: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const modal: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const carousel: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const dotGlyph: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const legend: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const connectors: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const spotlight: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const crosshair: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const command: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const sources: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const splitter: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useThemeToggle: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useDismissible: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useDisabledGuard: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useDisclosure: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useMenu: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useFormValidation: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useCombobox: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const usePopover: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useTableSort: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useTabs: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useDialog: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useModal: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useCarousel: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useDotGlyph: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useLegend: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useConnectors: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useSpotlight: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useCrosshair: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useCommand: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useSources: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+export const useSplitter: (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
+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 BrontoActionRoot = Document | Element | null | undefined;
+export type BrontoActionOpts = Omit<DelegateOpts, "root"> & {
+    root?: BrontoActionRoot;
+};
+export type BrontoBehaviorParams = {
+    init: (opts?: DelegateOpts) => Cleanup | void;
+    opts?: BrontoActionOpts | null | undefined;
+};
+export type SvelteActionReturn = {
+    update?: (next?: unknown) => void;
+    destroy: () => 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/svelte/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"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"}

package/svelte/index.js

@@ -0,0 +1,166 @@
+/**
+ * @ponchia/ui/svelte — thin Svelte actions over @ponchia/ui/behaviors.
+ *
+ * The CSS is the framework; these are optional lifecycle adapters that run the
+ * SSR-safe vanilla behavior initializers when a Svelte action mounts and clean
+ * them up when the action updates or is destroyed. They do not define markup,
+ * own state, or depend on Svelte at runtime.
+ *
+ *   <script>
+ *     import { themeToggle } from '@ponchia/ui/svelte';
+ *   </script>
+ *
+ *   <main use:themeToggle>
+ *     <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} BrontoActionRoot
+ *
+ * @typedef {Omit<DelegateOpts, 'root'> & { root?: BrontoActionRoot }} BrontoActionOpts
+ *
+ * @typedef {{ init: (opts?: DelegateOpts) => Cleanup | void, opts?: BrontoActionOpts | null | undefined }} BrontoBehaviorParams
+ *
+ * @typedef {{ update?: (next?: unknown) => void, destroy: () => void }} SvelteActionReturn
+ */
+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';
+
+function stop(cleanup) {
+  if (typeof cleanup === 'function') cleanup();
+}
+
+function resolveOpts(node, opts) {
+  if (!opts || typeof opts !== 'object') return { root: node };
+  if (!('root' in opts)) return { ...opts, root: node };
+  return { ...opts, root: opts.root || null };
+}
+
+function run(node, init, opts) {
+  if (typeof init !== 'function') return () => {};
+  const cleanup = init(resolveOpts(node, opts));
+  return typeof cleanup === 'function' ? cleanup : () => {};
+}
+
+/**
+ * Create a Svelte action from any Bronto delegated behavior initializer.
+ *
+ * @param {(opts?: DelegateOpts) => Cleanup | void} init
+ * @returns {(node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn}
+ */
+export function createBrontoAction(init) {
+  return (node, opts) => {
+    let cleanup = run(node, init, opts);
+    return {
+      update(next) {
+        stop(cleanup);
+        cleanup = run(node, init, next);
+      },
+      destroy() {
+        stop(cleanup);
+      },
+    };
+  };
+}
+
+/**
+ * Generic escape hatch for custom behavior initializers.
+ *
+ * @param {Element} node
+ * @param {BrontoBehaviorParams | null | undefined} params
+ * @returns {SvelteActionReturn}
+ */
+export function brontoBehavior(node, params) {
+  let cleanup = run(node, params?.init, params?.opts);
+  return {
+    update(next) {
+      stop(cleanup);
+      cleanup = run(node, next?.init, next?.opts);
+    },
+    destroy() {
+      stop(cleanup);
+    },
+  };
+}
+
+export const useBrontoBehavior = brontoBehavior;
+
+/** @type {(node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn} */
+export const themeToggle = createBrontoAction(initThemeToggle);
+export const dismissible = createBrontoAction(initDismissible);
+export const disabledGuard = createBrontoAction(initDisabledGuard);
+export const disclosure = createBrontoAction(initDisclosure);
+export const menu = createBrontoAction(initMenu);
+export const formValidation = createBrontoAction(initFormValidation);
+export const combobox = createBrontoAction(initCombobox);
+export const popover = createBrontoAction(initPopover);
+export const tableSort = createBrontoAction(initTableSort);
+export const tabs = createBrontoAction(initTabs);
+export const dialog = createBrontoAction(initDialog);
+export const modal = createBrontoAction(initModal);
+export const carousel = createBrontoAction(initCarousel);
+export const dotGlyph = createBrontoAction(initDotGlyph);
+export const legend = createBrontoAction(initLegend);
+export const connectors = createBrontoAction(initConnectors);
+export const spotlight = createBrontoAction(initSpotlight);
+export const crosshair = createBrontoAction(initCrosshair);
+export const command = createBrontoAction(initCommand);
+export const sources = createBrontoAction(initSources);
+export const splitter = createBrontoAction(initSplitter);
+
+// Hook-style aliases keep this action surface parallel with React/Solid/Qwik.
+export const useThemeToggle = themeToggle;
+export const useDismissible = dismissible;
+export const useDisabledGuard = disabledGuard;
+export const useDisclosure = disclosure;
+export const useMenu = menu;
+export const useFormValidation = formValidation;
+export const useCombobox = combobox;
+export const usePopover = popover;
+export const useTableSort = tableSort;
+export const useTabs = tabs;
+export const useDialog = dialog;
+export const useModal = modal;
+export const useCarousel = carousel;
+export const useDotGlyph = dotGlyph;
+export const useLegend = legend;
+export const useConnectors = connectors;
+export const useSpotlight = spotlight;
+export const useCrosshair = crosshair;
+export const useCommand = command;
+export const useSources = sources;
+export const useSplitter = splitter;
+
+/** 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';

package/tailwind.css

@@ -0,0 +1,87 @@
+/**
+ * @ponchia/ui/tailwind — Tailwind CSS v4 bridge.
+ *
+ * Import from the app stylesheet after Tailwind itself:
+ *
+ *   @import "tailwindcss";
+ *   @import "@ponchia/ui/tailwind";
+ *
+ * This file is deliberately CSS-only. It maps Bronto's already-loaded CSS
+ * custom properties into Tailwind v4 theme namespaces and state variants; it
+ * does not import @ponchia/ui's component CSS for you.
+ */
+
+@theme inline {
+  --color-bronto-bg: var(--bronto-color-bg);
+  --color-bronto-surface: var(--bronto-color-surface);
+  --color-bronto-surface-muted: var(--surface-muted);
+  --color-bronto-surface-raised: var(--bronto-color-surface-raised);
+  --color-bronto-border: var(--bronto-color-border);
+  --color-bronto-border-strong: var(--bronto-color-border-strong);
+  --color-bronto-text: var(--bronto-color-text);
+  --color-bronto-text-muted: var(--bronto-color-text-muted);
+  --color-bronto-action: var(--bronto-color-action);
+  --color-bronto-on-action: var(--bronto-color-on-action);
+  --color-bronto-focus: var(--bronto-color-focus);
+  --color-bronto-success: var(--bronto-color-success);
+  --color-bronto-warning: var(--bronto-color-warning);
+  --color-bronto-danger: var(--bronto-color-danger);
+  --color-bronto-info: var(--bronto-color-info);
+  --color-bronto-accent-1: var(--accent-1);
+  --color-bronto-accent-2: var(--accent-2);
+  --color-bronto-accent-3: var(--accent-3);
+  --color-bronto-accent-4: var(--accent-4);
+  --color-bronto-accent-5: var(--accent-5);
+  --color-bronto-accent-6: var(--accent-6);
+  --color-bronto-surface-1: var(--surface-1);
+  --color-bronto-surface-2: var(--surface-2);
+  --color-bronto-surface-3: var(--surface-3);
+  --color-bronto-surface-4: var(--surface-4);
+  --color-bronto-surface-5: var(--surface-5);
+  --color-bronto-surface-6: var(--surface-6);
+
+  --font-bronto-sans: var(--sans);
+  --font-bronto-mono: var(--mono);
+  --font-bronto-display: var(--display);
+
+  --text-bronto-2xs: var(--text-2xs);
+  --text-bronto-xs: var(--text-xs);
+  --text-bronto-sm: var(--text-sm);
+  --text-bronto-base: var(--text-base);
+  --text-bronto-lg: var(--text-lg);
+  --text-bronto-xl: var(--text-xl);
+
+  --spacing-bronto-2xs: var(--space-2xs);
+  --spacing-bronto-xs: var(--space-xs);
+  --spacing-bronto-sm: var(--space-sm);
+  --spacing-bronto-md: var(--space-md);
+  --spacing-bronto-lg: var(--space-lg);
+  --spacing-bronto-xl: var(--space-xl);
+  --spacing-bronto-2xl: var(--space-2xl);
+
+  --radius-bronto-sm: var(--radius-sm);
+  --radius-bronto-md: var(--radius-md);
+  --radius-bronto-lg: var(--radius-lg);
+  --radius-bronto-xl: var(--radius-xl);
+  --radius-bronto-pill: var(--radius-pill);
+
+  --shadow-bronto: var(--shadow);
+  --shadow-bronto-raised: var(--shadow-raised);
+
+  --ease-bronto-standard: var(--ease-standard);
+  --ease-bronto-spring: var(--ease-spring);
+  --ease-bronto-out: var(--ease-out);
+}
+
+@custom-variant bronto-light (&:where([data-theme="light"] *));
+@custom-variant bronto-dark (&:where([data-theme="dark"] *));
+@custom-variant bronto-oled (&:where([data-surface="oled"] *));
+@custom-variant bronto-contrast-more (&:where([data-contrast="more"] *));
+@custom-variant bronto-compact (&:where([data-density="compact"] *));
+@custom-variant bronto-comfortable (&:where([data-density="comfortable"] *));
+
+@custom-variant bronto-active (&:where(.is-active, [aria-current="page"], [aria-selected="true"]));
+@custom-variant bronto-open (&:where(.is-open, [open], [popover]:popover-open, [aria-expanded="true"]));
+@custom-variant bronto-selected (&:where(.is-selected, [aria-selected="true"], [aria-pressed="true"]));
+@custom-variant bronto-invalid (&:where(.is-invalid, [aria-invalid="true"], :user-invalid));
+@custom-variant bronto-busy (&:where(.is-busy, [aria-busy="true"]));