sinwan-ui-core 0.0.0 → 1.0.0

package/dist/chunks/chunk-xaegn57w.js

@@ -0,0 +1,189 @@
+// src/theme.tsx
+import { _$createTemplate } from "sinwan/renderer/web";
+import { unwrap as _$unwrap } from "sinwan/reactivity";
+import {
+  cc,
+  inject,
+  onMounted,
+  onUnmounted,
+  provide
+} from "sinwan/component";
+import { batch, computed, signal } from "sinwan/reactivity";
+import { jsx, Fragment } from "sinwan/jsx-runtime";
+var _$tmpl_0 = {
+  html: '<button type="button" data-slot="theme-toggle" aria-label="Toggle color theme"></button>',
+  slots: [
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+var DEFAULT_PALETTES = ["credit-blue", "jomlaty"];
+var ThemeKey2 = Symbol("sinwan-ui.theme");
+function isTheme(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
+function isPalette(value, allowed) {
+  return value !== null && allowed.includes(value);
+}
+function readStoredTheme(storageKey, fallback) {
+  if (typeof localStorage === "undefined")
+    return fallback;
+  try {
+    const value = localStorage.getItem(storageKey);
+    if (isTheme(value))
+      return value;
+  } catch {}
+  return fallback;
+}
+function readStoredPalette(storageKey, fallback, allowed) {
+  if (typeof localStorage === "undefined")
+    return fallback;
+  try {
+    const value = localStorage.getItem(storageKey);
+    if (isPalette(value, allowed))
+      return value;
+  } catch {}
+  return fallback;
+}
+function getSystemTheme() {
+  if (typeof window === "undefined" || !window.matchMedia)
+    return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function disableTransitionsTemporarily() {
+  const style = document.createElement("style");
+  style.appendChild(document.createTextNode("*,*::before,*::after{transition:none!important;animation:none!important}"));
+  document.head.appendChild(style);
+  return () => {
+    window.getComputedStyle(document.body);
+    requestAnimationFrame(() => {
+      style.parentNode?.removeChild(style);
+    });
+  };
+}
+function writeDomTheme(next, attribute) {
+  if (typeof document === "undefined")
+    return;
+  const root = document.documentElement;
+  if (attribute === "class") {
+    root.classList.remove("light", "dark");
+    root.classList.add(next);
+  } else {
+    root.setAttribute("data-theme", next);
+  }
+  root.style.colorScheme = next;
+}
+function writeDomPalette(next) {
+  if (typeof document === "undefined")
+    return;
+  document.documentElement.setAttribute("data-palette", next);
+}
+var ThemeProvider2 = cc((props) => {
+  const allowedPalettes = (props.palettes === undefined ? DEFAULT_PALETTES : props.palettes).length > 0 ? props.palettes === undefined ? DEFAULT_PALETTES : props.palettes : DEFAULT_PALETTES;
+  const initialTheme = props.forcedTheme ?? readStoredTheme(props.storageKey === undefined ? "sinwan-ui-theme" : props.storageKey, props.defaultTheme === undefined ? "system" : props.defaultTheme);
+  const initialPalette = props.forcedPalette ?? readStoredPalette(props.paletteStorageKey === undefined ? "sinwan-ui-palette" : props.paletteStorageKey, props.defaultPalette === undefined ? "credit-blue" : props.defaultPalette, allowedPalettes);
+  const theme = signal(initialTheme);
+  const palette = signal(initialPalette);
+  const resolved = signal(initialTheme === "system" ? getSystemTheme() : initialTheme);
+  const resolve = (value) => {
+    if (props.forcedTheme === "light" || props.forcedTheme === "dark")
+      return props.forcedTheme;
+    if (props.forcedTheme === "system")
+      return getSystemTheme();
+    if (value === "system")
+      return (props.enableSystem === undefined ? true : props.enableSystem) ? getSystemTheme() : "light";
+    return value;
+  };
+  const withTransitionLock = (apply) => {
+    const restore = (props.disableTransitionOnChange === undefined ? true : props.disableTransitionOnChange) && typeof document !== "undefined" ? disableTransitionsTemporarily() : null;
+    apply();
+    restore?.();
+  };
+  const commit = (value, nextTheme) => {
+    const next = resolve(value);
+    withTransitionLock(() => {
+      writeDomTheme(next, props.attribute === undefined ? "class" : props.attribute);
+      writeDomPalette(palette.value);
+      batch(() => {
+        if (nextTheme !== undefined) {
+          theme.value = nextTheme;
+        }
+        resolved.value = next;
+      });
+    });
+  };
+  const commitPalette = (next) => {
+    withTransitionLock(() => {
+      writeDomPalette(next);
+      writeDomTheme(resolved.value, props.attribute === undefined ? "class" : props.attribute);
+      palette.value = next;
+    });
+  };
+  const setTheme = (value) => {
+    if (props.forcedTheme)
+      return;
+    try {
+      localStorage.setItem(props.storageKey === undefined ? "sinwan-ui-theme" : props.storageKey, value);
+    } catch {}
+    commit(value, value);
+  };
+  const setPalette = (value) => {
+    if (props.forcedPalette)
+      return;
+    if (!allowedPalettes.includes(value))
+      return;
+    try {
+      localStorage.setItem(props.paletteStorageKey === undefined ? "sinwan-ui-palette" : props.paletteStorageKey, value);
+    } catch {}
+    commitPalette(value);
+  };
+  onMounted(() => {
+    commit(theme.value);
+    writeDomPalette(palette.value);
+    if (!(props.enableSystem === undefined ? true : props.enableSystem))
+      return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => {
+      if (theme.value === "system" || props.forcedTheme === "system") {
+        commit("system");
+      }
+    };
+    mq.addEventListener("change", onChange);
+    onUnmounted(() => mq.removeEventListener("change", onChange));
+  });
+  provide(ThemeKey2, {
+    theme,
+    resolved,
+    setTheme,
+    themes: (props.enableSystem === undefined ? true : props.enableSystem) ? ["light", "dark", "system"] : ["light", "dark"],
+    palette,
+    setPalette,
+    palettes: allowedPalettes
+  });
+  computed(() => resolved.value);
+  computed(() => palette.value);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: () => _$unwrap(props).children
+  });
+});
+function useTheme2() {
+  const api = inject(ThemeKey2);
+  if (!api) {
+    throw new Error("useTheme() must be used within a ThemeProvider");
+  }
+  return api;
+}
+var ThemeToggle2 = cc((props) => {
+  const { theme, resolved, setTheme } = useTheme2();
+  return _$createTemplate(_$tmpl_0, [
+    () => _$unwrap(props).class,
+    () => {
+      const next = theme.value === "system" ? resolved.value === "dark" ? "light" : "dark" : theme.value === "dark" ? "light" : "dark";
+      setTheme(next);
+    },
+    () => _$unwrap(props).children ?? (resolved.value === "dark" ? "Light" : "Dark")
+  ]);
+});
+
+export { ThemeKey2, ThemeProvider2, useTheme2, ThemeToggle2 };

package/dist/controls.d.ts

@@ -0,0 +1,141 @@
+import { type InjectionKey, type SinwanNode } from "sinwan/component";
+import { For, Show } from "sinwan/control-flow";
+import { type Computed, type Signal } from "sinwan/reactivity";
+import { Slot } from "./slot";
+export declare const TabsKey: InjectionKey<{
+    value: Signal<string> | Computed<string>;
+    setValue: (v: string) => void;
+}>;
+export declare const TabsRoot: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (v: string) => void;
+    class?: string;
+    orientation?: "horizontal" | "vertical";
+}>;
+export declare const TabsList: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    class?: string;
+    "data-variant"?: string;
+}>;
+export declare const TabsTrigger: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    class?: string;
+    value: string;
+    disabled?: boolean;
+}>;
+export declare const TabsContent: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    class?: string;
+    value: string;
+}>;
+export declare const AccordionKey: InjectionKey<{
+    type: "single" | "multiple";
+    value: Signal<string[]> | Computed<string[]>;
+    toggle: (item: string) => void;
+}>;
+export declare const AccordionItemKey: InjectionKey<{
+    value: string;
+}>;
+export declare const AccordionRoot: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    type?: "single" | "multiple";
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (v: string | string[]) => void;
+    class?: string;
+    collapsible?: boolean;
+}>;
+export declare const AccordionItem: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    class?: string;
+    value: string;
+}>;
+export declare const AccordionTrigger: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    class?: string;
+}>;
+export declare const AccordionContent: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    class?: string;
+}>;
+export declare const CheckboxRoot: import("sinwan/component").SinwanComponent<{
+    checked?: boolean;
+    indeterminate?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    class?: string;
+    id?: string;
+    name?: string;
+    value?: string;
+    "aria-label"?: string;
+    children?: SinwanNode;
+}>;
+export declare const SwitchRoot: import("sinwan/component").SinwanComponent<{
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    class?: string;
+    id?: string;
+    children?: SinwanNode;
+    "data-size"?: string;
+}>;
+export declare const RadioGroupKey: InjectionKey<{
+    value: Signal<string> | Computed<string>;
+    setValue: (v: string) => void;
+    name?: string;
+}>;
+export declare const RadioGroupRoot: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (v: string) => void;
+    class?: string;
+    name?: string;
+}>;
+export declare const RadioGroupItem: import("sinwan/component").SinwanComponent<{
+    value: string;
+    class?: string;
+    disabled?: boolean;
+    id?: string;
+    children?: SinwanNode;
+}>;
+export declare const ToggleRoot: import("sinwan/component").SinwanComponent<{
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    disabled?: boolean;
+    class?: string;
+    children?: SinwanNode;
+}>;
+export declare const ToggleGroupKey: InjectionKey<{
+    type: "single" | "multiple";
+    value: Signal<string[]> | Computed<string[]>;
+    toggle: (v: string) => void;
+}>;
+export declare const ToggleGroupRoot: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    type?: "single" | "multiple";
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (v: string | string[]) => void;
+    class?: string;
+    style?: Record<string, string> | string;
+    "data-variant"?: string;
+    "data-size"?: string;
+    "data-spacing"?: string | number;
+    "data-orientation"?: string;
+}>;
+export declare const ToggleGroupItem: import("sinwan/component").SinwanComponent<{
+    children?: SinwanNode;
+    class?: string;
+    value: string;
+    disabled?: boolean;
+    "data-variant"?: string;
+    "data-size"?: string;
+    "data-spacing"?: string | number;
+}>;
+export { For, Show, Slot };

package/dist/controls.js

@@ -0,0 +1,55 @@
+import {
+  For2,
+  Show2,
+  TabsKey2,
+  TabsRoot2,
+  TabsList2,
+  TabsTrigger2,
+  TabsContent2,
+  AccordionKey2,
+  AccordionItemKey2,
+  AccordionRoot2,
+  AccordionItem2,
+  AccordionTrigger2,
+  AccordionContent2,
+  CheckboxRoot2,
+  SwitchRoot2,
+  RadioGroupKey2,
+  RadioGroupRoot2,
+  RadioGroupItem2,
+  ToggleRoot2,
+  ToggleGroupKey2,
+  ToggleGroupRoot2,
+  ToggleGroupItem2
+} from "./chunks/chunk-te52bwb8.js";
+import {
+  Slot2
+} from "./chunks/chunk-bw9vp0y9.js";
+import"./chunks/chunk-7r6fwdyt.js";
+import"./chunks/chunk-ejwby1pn.js";
+import"./chunks/chunk-6r59k5mb.js";
+export {
+  AccordionContent2 as AccordionContent,
+  AccordionItem2 as AccordionItem,
+  AccordionItemKey2 as AccordionItemKey,
+  AccordionKey2 as AccordionKey,
+  AccordionRoot2 as AccordionRoot,
+  AccordionTrigger2 as AccordionTrigger,
+  CheckboxRoot2 as CheckboxRoot,
+  For2 as For,
+  RadioGroupItem2 as RadioGroupItem,
+  RadioGroupKey2 as RadioGroupKey,
+  RadioGroupRoot2 as RadioGroupRoot,
+  Show2 as Show,
+  Slot2 as Slot,
+  SwitchRoot2 as SwitchRoot,
+  TabsContent2 as TabsContent,
+  TabsKey2 as TabsKey,
+  TabsList2 as TabsList,
+  TabsRoot2 as TabsRoot,
+  TabsTrigger2 as TabsTrigger,
+  ToggleGroupItem2 as ToggleGroupItem,
+  ToggleGroupKey2 as ToggleGroupKey,
+  ToggleGroupRoot2 as ToggleGroupRoot,
+  ToggleRoot2 as ToggleRoot
+};

package/dist/core.d.ts

@@ -0,0 +1,24 @@
+import { type SinwanNode } from "sinwan/component";
+import { Portal as SinwanPortal, Show } from "sinwan/control-flow";
+import { signal, type Signal } from "sinwan/reactivity";
+export type PresenceProps = {
+    present?: boolean;
+    exitMs?: number;
+    children?: SinwanNode;
+};
+/** Keep children mounted through CSS exit (`data-state=closed`) before unmount. */
+export declare const Presence: import("sinwan/component").SinwanComponent<PresenceProps>;
+export type UiPortalProps = {
+    children?: SinwanNode;
+    container?: HTMLElement | null | (() => HTMLElement | null);
+};
+export declare const UiPortal: import("sinwan/component").SinwanComponent<UiPortalProps>;
+export declare function useControllableState<T>(options: {
+    value?: T | (() => T);
+    defaultValue: T;
+    onChange?: (value: T) => void;
+}): [Signal<T>, (value: T | ((prev: T) => T)) => void];
+export declare function getFocusableElements(root: HTMLElement): HTMLElement[];
+export declare function trapFocus(event: KeyboardEvent, root: HTMLElement): void;
+export { basePlacement, computePosition, createPointReference, createRectReference, createSizeFloating, estimatePosition, readDocumentRtl, toFloatingPlacement, useAnchorPosition, usePointPosition, type Align, type FloatingPosition, type FloatingStyle, type Placement, type RectLike, type UseAnchorPositionOptions, type UsePointPositionOptions, } from "./floating";
+export { signal, Show, SinwanPortal };

package/dist/core.js

@@ -0,0 +1,42 @@
+import {
+  SinwanPortal2,
+  Show3,
+  signal2,
+  Presence2,
+  UiPortal2,
+  useControllableState2,
+  getFocusableElements2,
+  trapFocus2
+} from "./chunks/chunk-ejwby1pn.js";
+import {
+  toFloatingPlacement2,
+  basePlacement2,
+  readDocumentRtl2,
+  createRectReference2,
+  createSizeFloating2,
+  createPointReference2,
+  computePosition2,
+  estimatePosition2,
+  useAnchorPosition2,
+  usePointPosition2
+} from "./chunks/chunk-6r59k5mb.js";
+export {
+  Presence2 as Presence,
+  Show3 as Show,
+  SinwanPortal2 as SinwanPortal,
+  UiPortal2 as UiPortal,
+  basePlacement2 as basePlacement,
+  computePosition2 as computePosition,
+  createPointReference2 as createPointReference,
+  createRectReference2 as createRectReference,
+  createSizeFloating2 as createSizeFloating,
+  estimatePosition2 as estimatePosition,
+  getFocusableElements2 as getFocusableElements,
+  readDocumentRtl2 as readDocumentRtl,
+  signal2 as signal,
+  toFloatingPlacement2 as toFloatingPlacement,
+  trapFocus2 as trapFocus,
+  useAnchorPosition2 as useAnchorPosition,
+  useControllableState2 as useControllableState,
+  usePointPosition2 as usePointPosition
+};

package/dist/direction.d.ts

@@ -0,0 +1,15 @@
+import { type InjectionKey, type SinwanNode } from "sinwan/component";
+export type Direction = "ltr" | "rtl";
+export type DirectionApi = {
+    dir: {
+        readonly value: Direction;
+    };
+    setDir: (dir: Direction) => void;
+};
+export declare const DirectionKey: InjectionKey<DirectionApi>;
+export type DirectionProviderProps = {
+    children?: SinwanNode;
+    dir?: Direction;
+};
+export declare const DirectionProvider: import("sinwan/component").SinwanComponent<DirectionProviderProps>;
+export declare function useDirection(): Direction;

package/dist/direction.js

@@ -0,0 +1,10 @@
+import {
+  DirectionKey2,
+  DirectionProvider2,
+  useDirection2
+} from "./chunks/chunk-f6hw8ash.js";
+export {
+  DirectionKey2 as DirectionKey,
+  DirectionProvider2 as DirectionProvider,
+  useDirection2 as useDirection
+};

package/dist/dismiss.d.ts

@@ -0,0 +1 @@
+export declare function isDismissExemptPointerTarget(target: EventTarget | null): boolean;

package/dist/dismiss.js

@@ -0,0 +1,6 @@
+import {
+  isDismissExemptPointerTarget2
+} from "./chunks/chunk-9whagkb6.js";
+export {
+  isDismissExemptPointerTarget2 as isDismissExemptPointerTarget
+};

package/dist/floating.d.ts

@@ -0,0 +1,105 @@
+import { type Placement as FuiPlacement } from "@floating-ui/dom";
+import { type Computed, type Signal } from "sinwan/reactivity";
+type SignalOrComputed<T> = Signal<T> | Computed<T>;
+export type Placement = "top" | "right" | "bottom" | "left";
+export type Align = "start" | "center" | "end";
+export type FloatingStyle = Record<string, string>;
+export type RectLike = {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+};
+/** Map sinwan-ui side + align to Floating UI placement (`bottom-start`, …). */
+export declare function toFloatingPlacement(placement?: Placement, align?: Align): FuiPlacement;
+export declare function basePlacement(placement: FuiPlacement | string): Placement;
+/** LTR-safe RTL probe for Floating UI (Happy-DOM-safe). */
+export declare function readDocumentRtl(): boolean;
+export type VirtualClientRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    toJSON(): VirtualClientRect;
+};
+export declare function createRectReference(rect: RectLike): {
+    getBoundingClientRect(): VirtualClientRect;
+};
+export declare function createSizeFloating(width: number, height: number): {
+    getBoundingClientRect(): VirtualClientRect;
+};
+export declare function createPointReference(x: number, y: number): {
+    getBoundingClientRect(): VirtualClientRect;
+};
+/**
+ * Position a floating box relative to an anchor rect using @floating-ui/dom
+ * (offset, flip, shift). Falls back to `estimatePosition` if Floating UI fails.
+ */
+export declare function computePosition(anchor: RectLike, content: {
+    width: number;
+    height: number;
+}, placement?: Placement, align?: Align, gap?: number): Promise<{
+    top: number;
+    left: number;
+    placement: FuiPlacement;
+}>;
+/**
+ * Sync estimate for first paint (before Floating UI's async refine).
+ * Matches basic offset + align; flip/shift apply on the next Floating UI pass.
+ */
+export declare function estimatePosition(anchor: RectLike, content: {
+    width: number;
+    height: number;
+}, placement?: Placement, align?: Align, gap?: number): {
+    top: number;
+    left: number;
+};
+export type UseAnchorPositionOptions = {
+    open: SignalOrComputed<boolean>;
+    trigger: SignalOrComputed<HTMLElement | null>;
+    content?: SignalOrComputed<HTMLElement | null>;
+    placement?: Placement;
+    align?: Align;
+    gap?: number;
+    fallbackSize?: {
+        width: number;
+        height: number;
+    };
+    extra?: (anchor: DOMRect) => Record<string, string>;
+};
+export type FloatingPosition = {
+    style: Signal<FloatingStyle>;
+    ready: Signal<boolean>;
+    /** Resolved base side after Floating UI flip (for `data-side`). */
+    side: Signal<Placement>;
+    present: {
+        readonly value: boolean;
+    };
+};
+/**
+ * Anchor a fixed layer to a trigger with @floating-ui/dom.
+ * `present` places synchronously for the first paint, then Floating UI refines
+ * with flip/shift and `autoUpdate` while open.
+ */
+export declare function useAnchorPosition(options: UseAnchorPositionOptions): FloatingPosition;
+export type UsePointPositionOptions = {
+    open: SignalOrComputed<boolean>;
+    point: SignalOrComputed<{
+        x: number;
+        y: number;
+    }>;
+    content?: SignalOrComputed<HTMLElement | null>;
+    fallbackSize?: {
+        width: number;
+        height: number;
+    };
+};
+/** Position a layer at a pointer coordinate (context menu) via Floating UI. */
+export declare function usePointPosition(options: UsePointPositionOptions): FloatingPosition;
+export {};

package/dist/floating.js

@@ -0,0 +1,24 @@
+import {
+  toFloatingPlacement2,
+  basePlacement2,
+  readDocumentRtl2,
+  createRectReference2,
+  createSizeFloating2,
+  createPointReference2,
+  computePosition2,
+  estimatePosition2,
+  useAnchorPosition2,
+  usePointPosition2
+} from "./chunks/chunk-6r59k5mb.js";
+export {
+  basePlacement2 as basePlacement,
+  computePosition2 as computePosition,
+  createPointReference2 as createPointReference,
+  createRectReference2 as createRectReference,
+  createSizeFloating2 as createSizeFloating,
+  estimatePosition2 as estimatePosition,
+  readDocumentRtl2 as readDocumentRtl,
+  toFloatingPlacement2 as toFloatingPlacement,
+  useAnchorPosition2 as useAnchorPosition,
+  usePointPosition2 as usePointPosition
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./controls";
+export * from "./core";
+export * from "./direction";
+export * from "./dismiss";
+export * from "./floating";
+export * from "./menu-sub";
+export * from "./overlay";
+export * from "./slot";
+export * from "./theme";
+export * from "./types";