@aaas-pro/library 0.0.0-stage → 0.1.0

package/dist/primitives/toast.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+let sequence = 0, snapshot = [];
+const subscribers = /* @__PURE__ */ new Set(), timers = /* @__PURE__ */ new Map();
+const defaults = /* @__PURE__ */ new Map();
+const empty = [];
+const notify = () => subscribers.forEach((callback) => callback());
+function dismiss(id, automatic = false) {
+  const removed = snapshot.filter((item) => id === void 0 || item.id === id);
+  snapshot = snapshot.filter((item) => !removed.includes(item));
+  removed.forEach((item) => {
+    clearTimeout(timers.get(item.id));
+    timers.delete(item.id);
+    automatic ? item.onAutoClose?.(item) : item.onDismiss?.(item);
+  });
+  notify();
+}
+function add(type, title, options = {}) {
+  options = { ...defaults.get(options.toasterId), ...options, ...type === "loading" && options.duration === void 0 ? { duration: Infinity } : {} };
+  const id = options.id ?? ++sequence, item = { ...options, id, title, type };
+  clearTimeout(timers.get(id));
+  snapshot = [...snapshot.filter((item2) => item2.id !== id), item];
+  notify();
+  const duration = options.duration ?? (type === "loading" ? Infinity : 4e3);
+  if (Number.isFinite(duration) && duration > 0) timers.set(id, setTimeout(() => dismiss(id, true), duration));
+  return id;
+}
+const toast = Object.assign((title, options) => add("message", title, options), {
+  message: (title, options) => add("message", title, options),
+  success: (title, options) => add("success", title, options),
+  error: (title, options) => add("error", title, options),
+  warning: (title, options) => add("warning", title, options),
+  info: (title, options) => add("info", title, options),
+  loading: (title, options) => add("loading", title, options),
+  dismiss,
+  custom: (render, options = {}) => {
+    const id = options.id ?? ++sequence;
+    return add("message", render(id), { ...options, id });
+  },
+  promise: (promise, options) => {
+    const id = add("loading", options.loading ?? "处理中…", options);
+    const task = typeof promise === "function" ? promise() : promise;
+    task.then((value) => add("success", typeof options.success === "function" ? options.success(value) : options.success ?? "操作完成", { ...options, id }), (error) => add("error", typeof options.error === "function" ? options.error(error) : options.error ?? "操作失败", { ...options, id }));
+    return id;
+  }
+});
+function Toaster({ id, position = "bottom-right", duration = 4e3, visibleToasts = 3, closeButton = true, richColors = false, theme, icons, toastOptions, offset = 24, style, className, ...props }) {
+  React.useEffect(() => {
+    const options = { duration, ...toastOptions };
+    defaults.set(id, options);
+    return () => {
+      if (defaults.get(id) === options) defaults.delete(id);
+    };
+  }, [id, duration, toastOptions]);
+  const records = React.useSyncExternalStore(React.useCallback((callback) => {
+    subscribers.add(callback);
+    return () => {
+      subscribers.delete(callback);
+    };
+  }, []), () => snapshot, () => empty).filter((item) => item.toasterId === id).slice(-Math.max(1, visibleToasts));
+  const center = position.endsWith("center"), left = position.endsWith("left");
+  return /* @__PURE__ */ jsx("div", { ...props, "data-aaas-toaster": id ?? "default", "data-theme": theme, className, "aria-label": "消息通知", style: { position: "fixed", colorScheme: theme === "system" ? "light dark" : theme, zIndex: 1e3, [position.startsWith("top") ? "top" : "bottom"]: offset, left: center ? "50%" : left ? offset : void 0, right: !center && !left ? offset : void 0, transform: center ? "translateX(-50%)" : void 0, width: "min(360px, calc(100vw - 32px))", display: "grid", gap: 8, pointerEvents: "none", ...style }, children: records.map((item) => /* @__PURE__ */ jsxs("div", { "data-toast-type": item.type, role: item.type === "error" ? "alert" : "status", "aria-live": item.type === "error" ? "assertive" : "polite", style: { background: richColors && item.type !== "message" && item.type !== "loading" ? `color-mix(in srgb, ${item.type === "error" ? "var(--destructive)" : item.type === "success" ? "var(--success, #16a34a)" : item.type === "warning" ? "var(--warning, #d97706)" : "var(--info, #2563eb)"} 12%, var(--normal-bg, var(--popover)))` : "var(--normal-bg, var(--popover))", color: "var(--normal-text, var(--popover-foreground))", border: "1px solid var(--normal-border, var(--border))", borderRadius: "var(--radius)", padding: 16, boxShadow: "0 8px 28px #0002", pointerEvents: "auto" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+      icons?.[item.type],
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx("strong", { children: item.title }),
+        item.description && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, opacity: 0.75, marginTop: 4 }, children: item.description })
+      ] }),
+      closeButton && item.dismissible !== false && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "关闭通知", onClick: () => dismiss(item.id), children: "×" })
+    ] }),
+    (item.action || item.cancel) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [
+      item.action && /* @__PURE__ */ jsx("button", { type: "button", onClick: (event) => {
+        item.action?.onClick(event);
+        if (!event.defaultPrevented) dismiss(item.id);
+      }, children: item.action.label }),
+      item.cancel && /* @__PURE__ */ jsx("button", { type: "button", onClick: (event) => {
+        item.cancel?.onClick?.(event);
+        if (!event.defaultPrevented) dismiss(item.id);
+      }, children: item.cancel.label })
+    ] })
+  ] }, item.id)) });
+}
+export {
+  Toaster,
+  toast
+};

package/dist/primitives/toggle-group.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type ButtonProps, type DivProps } from './core';
+type Selection = {
+    type: 'single';
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+} | {
+    type: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+type GroupProps = Omit<DivProps, 'defaultValue'> & Selection & {
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    loop?: boolean;
+    rovingFocus?: boolean;
+};
+export declare function Root({ type, value, defaultValue, onValueChange, disabled, orientation, loop, rovingFocus, onKeyDown, ...props }: GroupProps): React.JSX.Element;
+export declare function Item({ value, onClick, ...props }: ButtonProps & {
+    value: string;
+}): React.JSX.Element;
+export {};

package/dist/primitives/toggle-group.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ButtonPart, useControllable, DivPart, moveFocus } from "./core.js";
+const Context = React.createContext({ values: [], toggle: (_v) => {
+}, disabled: false, single: false });
+function Root({ type, value, defaultValue, onValueChange, disabled = false, orientation = "horizontal", loop = true, rovingFocus = true, onKeyDown, ...props }) {
+  const [current, set] = useControllable(value, defaultValue ?? (type === "single" ? "" : []), (next) => {
+    if (type === "single")
+      onValueChange?.(next);
+    else
+      onValueChange?.(next);
+  });
+  const values = Array.isArray(current) ? current : current ? [current] : [];
+  const toggle = (key) => set(type === "single" ? values.includes(key) ? "" : key : values.includes(key) ? values.filter((v) => v !== key) : [...values, key]);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: { values, toggle, disabled, single: type === "single" }, children: /* @__PURE__ */ jsx(DivPart, { ...props, role: "group", "data-orientation": orientation, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented && rovingFocus)
+      moveFocus(event, "button", { vertical: orientation === "vertical", loop });
+  } }) });
+}
+function Item({ value, onClick, ...props }) {
+  const state = React.useContext(Context);
+  const on = state.values.includes(value);
+  return /* @__PURE__ */ jsx(ButtonPart, { ...props, disabled: props.disabled || state.disabled, "aria-pressed": on, "data-state": on ? "on" : "off", onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented)
+      state.toggle(value);
+  } });
+}
+export {
+  Item,
+  Root
+};

package/dist/primitives/toggle.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonProps } from './core';
+export interface ToggleProps extends ButtonProps {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+}
+export declare function Root({ pressed, defaultPressed, onPressedChange, onClick, ...props }: ToggleProps): import("react").JSX.Element;

package/dist/primitives/toggle.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { useControllable, ButtonPart } from "./core.js";
+function Root({ pressed, defaultPressed = false, onPressedChange, onClick, ...props }) {
+  const [current, set] = useControllable(pressed, defaultPressed, onPressedChange);
+  return /* @__PURE__ */ jsx(ButtonPart, { ...props, "aria-pressed": current, "data-state": current ? "on" : "off", onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented)
+      set(!current);
+  } });
+}
+export {
+  Root
+};

package/dist/primitives/tooltip.d.ts

@@ -0,0 +1,7 @@
+export declare const Root: ({ children, open: controlled, defaultOpen, onOpenChange, modal: isModal, delayDuration, openDelay, closeDelay, ...rest }: import("./layer").LayerRootProps & {
+    sub?: boolean;
+    direction?: import("./layer").LayerState["direction"];
+}) => import("react").JSX.Element, Trigger: ({ onClick, onKeyDown, onPointerEnter, onPointerLeave, onFocus, onBlur, onContextMenu, ref, disabled, ...props }: import("./core").ButtonProps) => import("react").JSX.Element, Portal: ({ children, container, forceMount }: import("./layer").PortalProps) => import("react").ReactPortal | null, Content: ({ forceMount, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ref, style, onKeyDown, onPointerEnter, onPointerLeave, ...props }: import("./layer").LayerContentProps) => import("react").JSX.Element | null, Arrow: (props: React.ComponentProps<"span">) => import("react").JSX.Element, Provider: ({ children, delayDuration }: {
+    children?: React.ReactNode;
+    delayDuration?: number;
+}) => import("react").JSX.Element;

package/dist/primitives/tooltip.js

@@ -0,0 +1,10 @@
+import { createLayer } from "./layer.js";
+const { Root, Trigger, Portal, Content, Arrow, Provider } = createLayer({ role: "tooltip", hover: true });
+export {
+  Arrow,
+  Content,
+  Portal,
+  Provider,
+  Root,
+  Trigger
+};

package/dist/style-entry.d.ts

@@ -0,0 +1 @@
+import './styles.css';

package/dist/style-entry.js

@@ -0,0 +1 @@
+/* empty css           */