@kashi-ui/react 0.4.0 → 0.5.0

package/README.md

@@ -20,7 +20,7 @@ export function SignUp() {
 }
 ```
 
-کامپوننت‌ها: Button · Input · Textarea · Badge · Card · Alert · Avatar · AvatarGroup · Checkbox · Switch
+کامپوننت‌ها: Button · Input · Textarea · Select · Checkbox · RadioGroup · Switch · Badge · Card · Alert · Avatar · AvatarGroup · Tabs · Dialog · Toast · Tooltip · RelativeTime
 
 فارسی: DatePicker و Calendar شمسی · NationalIdInput · CardNumberInput · IbanInput · MobileInput · PriceInput
 

package/dist/Dialog.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    /** آیکون شاخص بالای عنوان */
+    icon?: ReactNode;
+    /** «danger» برای تأیید عملیات مخرب */
+    tone?: "default" | "danger";
+    /** @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** دکمه‌های پایین پنجره */
+    footer?: ReactNode;
+    /** بستن با کلیک روی پس‌زمینه @default true */
+    dismissible?: boolean;
+    /** @default "بستن" */
+    closeLabel?: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * پنجرهٔ گفتگو روی <dialog> بومی با showModal:
+ * فوکوس داخل پنجره می‌ماند، Esc می‌بندد، بقیهٔ صفحه از دسترس صفحه‌خوان خارج می‌شود
+ * و پس از بستن، فوکوس به عنصری که پنجره را باز کرده برمی‌گردد.
+ */
+export declare function Dialog({ open, onOpenChange, title, description, icon, tone, size, footer, dismissible, closeLabel, className, children, }: DialogProps): import("react").JSX.Element;

package/dist/Dialog.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { cx } from "./cx.js";
+import { CloseIcon } from "./icons.js";
+/**
+ * پنجرهٔ گفتگو روی <dialog> بومی با showModal:
+ * فوکوس داخل پنجره می‌ماند، Esc می‌بندد، بقیهٔ صفحه از دسترس صفحه‌خوان خارج می‌شود
+ * و پس از بستن، فوکوس به عنصری که پنجره را باز کرده برمی‌گردد.
+ */
+export function Dialog({ open, onOpenChange, title, description, icon, tone = "default", size = "md", footer, dismissible = true, closeLabel = "بستن", className, children, }) {
+    const ref = useRef(null);
+    const opener = useRef(null);
+    const id = useId();
+    useEffect(() => {
+        const d = ref.current;
+        if (!d)
+            return;
+        if (open && !d.open) {
+            opener.current = document.activeElement;
+            d.showModal();
+        }
+        else if (!open && d.open) {
+            d.close();
+        }
+    }, [open]);
+    return (_jsxs("dialog", { ref: ref, className: cx("k-dialog", size !== "md" && `k-dialog--${size}`, tone === "danger" && "k-dialog--danger", className), "aria-labelledby": `${id}-title`, "aria-describedby": description ? `${id}-desc` : undefined, onClose: () => {
+            onOpenChange(false);
+            opener.current?.focus?.();
+        }, onCancel: (e) => {
+            // Esc: بستن از طریق state تا والد همگام بماند
+            e.preventDefault();
+            onOpenChange(false);
+        }, onClick: (e) => {
+            // کلیک روی خود <dialog> یعنی کلیک روی پس‌زمینه
+            if (dismissible && e.target === ref.current)
+                onOpenChange(false);
+        }, children: [_jsxs("div", { className: "k-dialog__header", children: [icon && _jsx("span", { className: "k-dialog__icon", "aria-hidden": "true", children: icon }), _jsxs("div", { className: "k-dialog__heading", children: [_jsx("h2", { className: "k-dialog__title", id: `${id}-title`, children: title }), description && _jsx("p", { className: "k-dialog__description", id: `${id}-desc`, children: description })] }), _jsx("button", { type: "button", className: "k-btn k-btn--tertiary k-btn--icon k-btn--sm k-dialog__close", "aria-label": closeLabel, onClick: () => onOpenChange(false), children: _jsx(CloseIcon, {}) })] }), children && _jsx("div", { className: "k-dialog__body", children: children }), footer && _jsx("div", { className: "k-dialog__footer", children: footer })] }));
+}

package/dist/Radio.d.ts

@@ -0,0 +1,26 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface RadioGroupProps {
+    /** عنوان گروه (legend) */
+    label: ReactNode;
+    /** نام فیلد فرم؛ پیش‌فرض خودکار */
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** «list» (پیش‌فرض)، «inline» افقی، «cards» کارت‌های قابل‌انتخاب */
+    variant?: "list" | "inline" | "cards";
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/** گروه رادیو با fieldset و legend؛ پیمایش با کلیدهای جهت‌دار را مرورگر انجام می‌دهد */
+export declare function RadioGroup({ label, name, value, defaultValue, onChange, variant, hint, error, required, disabled, className, children, }: RadioGroupProps): import("react").JSX.Element;
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value"> {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+}
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Radio.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, useState } from "react";
+import { cx } from "./cx.js";
+import { isDev } from "./utils.js";
+const RadioCtx = createContext(null);
+/** گروه رادیو با fieldset و legend؛ پیمایش با کلیدهای جهت‌دار را مرورگر انجام می‌دهد */
+export function RadioGroup({ label, name, value, defaultValue, onChange, variant = "list", hint, error, required, disabled, className, children, }) {
+    const id = useId();
+    const [inner, setInner] = useState(defaultValue);
+    const current = value !== undefined ? value : inner;
+    const describedBy = [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || undefined;
+    return (_jsxs("fieldset", { className: cx("k-radio-group", variant !== "list" && `k-radio-group--${variant}`, className), "aria-describedby": describedBy, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, disabled: disabled, children: [_jsxs("legend", { className: "k-label", children: [label, required && _jsx("span", { className: "k-label__required", "aria-hidden": "true", children: "*" })] }), _jsx(RadioCtx.Provider, { value: {
+                    name: name ?? id,
+                    value: current,
+                    invalid: !!error,
+                    disabled,
+                    setValue: (v) => {
+                        if (value === undefined)
+                            setInner(v);
+                        onChange?.(v);
+                    },
+                }, children: children }), error && _jsx("p", { className: "k-hint k-hint--error", id: `${id}-error`, children: error }), hint && _jsx("p", { className: "k-hint", id: `${id}-hint`, children: hint })] }));
+}
+export const Radio = forwardRef(function Radio({ value, label, description, id, className, disabled, name, ...rest }, ref) {
+    const ctx = useContext(RadioCtx);
+    // بدون name مشترک، مرورگر رادیوها را یک گروه نمی‌داند و چند گزینه هم‌زمان انتخاب می‌شود
+    if (!ctx && !name && isDev()) {
+        console.warn("[kashi] <Radio> باید داخل <RadioGroup> باشد یا name داشته باشد؛ وگرنه چند گزینه هم‌زمان قابل‌انتخاب است.");
+    }
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    return (_jsxs("label", { className: cx("k-check", className), htmlFor: inputId, children: [_jsx("input", { ref: ref, type: "radio", className: "k-radio", id: inputId, name: ctx?.name ?? name, value: value, checked: ctx ? ctx.value === value : undefined, onChange: () => ctx?.setValue(value), disabled: disabled, "aria-describedby": description ? `${inputId}-desc` : undefined, ...rest }), _jsxs("span", { className: "k-check__text", children: [_jsx("span", { className: "k-check__label", children: label }), description && _jsx("span", { className: "k-check__description", id: `${inputId}-desc`, children: description })] })] }));
+});

package/dist/RelativeTime.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from "react";
+export interface RelativeTimeProps extends Omit<HTMLAttributes<HTMLTimeElement>, "children"> {
+    date: Date;
+    /** @default "fa" */
+    digits?: "fa" | "latin";
+    /** فاصلهٔ به‌روزرسانی بر حسب میلی‌ثانیه @default 60000 */
+    refresh?: number;
+}
+/** «۵ دقیقه پیش» در یک <time> معنایی؛ تاریخ کامل شمسی در title و برای صفحه‌خوان در دسترس است */
+export declare function RelativeTime({ date, digits, refresh, ...rest }: RelativeTimeProps): import("react").JSX.Element;

package/dist/RelativeTime.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { formatJalali, formatRelative } from "@kashi-ui/persian";
+/** «۵ دقیقه پیش» در یک <time> معنایی؛ تاریخ کامل شمسی در title و برای صفحه‌خوان در دسترس است */
+export function RelativeTime({ date, digits = "fa", refresh = 60000, ...rest }) {
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        const t = setInterval(() => setNow(new Date()), refresh);
+        return () => clearInterval(t);
+    }, [refresh]);
+    return (_jsx("time", { dateTime: date.toISOString(), title: formatJalali(date, { style: "full", digits }), ...rest, children: formatRelative(date, { now, digits }) }));
+}

package/dist/Select.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode, type SelectHTMLAttributes } from "react";
+export interface SelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    /** گزینهٔ خالی اول، مثل «انتخاب کنید» */
+    placeholder?: string;
+    /** گزینه‌ها؛ یا به‌جای آن <option> را به‌عنوان children بدهید */
+    options?: SelectOption[];
+    /** @default "md" */
+    size?: "sm" | "md" | "lg";
+    fieldClassName?: string;
+}
+/** فهرست انتخابی روی <select> بومی: در گوشی انتخاب‌گر سیستم باز می‌شود و صفحه‌خوان کامل پشتیبانی می‌کند */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/Select.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cx } from "./cx.js";
+import { Field, describedBy } from "./Field.js";
+/** فهرست انتخابی روی <select> بومی: در گوشی انتخاب‌گر سیستم باز می‌شود و صفحه‌خوان کامل پشتیبانی می‌کند */
+export const Select = forwardRef(function Select({ label, hint, error, placeholder, options, size = "md", id, required, className, fieldClassName, children, "aria-describedby": extra, ...rest }, ref) {
+    const autoId = useId();
+    const selectId = id ?? autoId;
+    const placeholderSelected = placeholder !== undefined && rest.value === undefined && rest.defaultValue === undefined;
+    return (_jsx(Field, { id: selectId, label: label, hint: hint, error: error, required: required, className: fieldClassName, children: _jsx("div", { className: cx("k-select", size !== "md" && `k-select--${size}`, className), children: _jsxs("select", { ref: ref, id: selectId, className: "k-select__control", required: required, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy(selectId, hint, error, extra), defaultValue: placeholderSelected ? "" : undefined, ...rest, children: [placeholder !== undefined && _jsx("option", { value: "", disabled: true, children: placeholder }), options?.map((o) => (_jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))), children] }) }) }));
+});

package/dist/Tabs.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** @default "line" */
+    variant?: "line" | "pill" | "segmented";
+    /** زبانه‌ها تمام عرض را پر کنند */
+    block?: boolean;
+}
+/** زبانه‌ها با الگوی Tabs در WAI-ARIA؛ کلیدهای جهت‌دار در راست‌به‌چپ برعکس عمل می‌کنند */
+export declare function Tabs({ value, defaultValue, onChange, variant, block, className, children, ...rest }: TabsProps): import("react").JSX.Element;
+export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+    /** نام فهرست برای صفحه‌خوان، مثل «تنظیمات حساب» */
+    "aria-label": string;
+}
+export declare function TabList({ className, children, ...rest }: TabListProps): import("react").JSX.Element;
+export interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, "value"> {
+    value: string;
+    disabled?: boolean;
+}
+export declare function Tab({ value, className, children, disabled, ...rest }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    children: ReactNode;
+}
+export declare function TabPanel({ value, className, children, ...rest }: TabPanelProps): import("react").JSX.Element;

package/dist/Tabs.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+const TabsCtx = createContext(null);
+const useTabs = () => {
+    const ctx = useContext(TabsCtx);
+    if (!ctx)
+        throw new Error("[kashi] Tab و TabPanel باید داخل <Tabs> باشند.");
+    return ctx;
+};
+/** زبانه‌ها با الگوی Tabs در WAI-ARIA؛ کلیدهای جهت‌دار در راست‌به‌چپ برعکس عمل می‌کنند */
+export function Tabs({ value, defaultValue = "", onChange, variant = "line", block, className, children, ...rest }) {
+    const id = useId();
+    const [inner, setInner] = useState(defaultValue);
+    const selected = value !== undefined ? value : inner;
+    return (_jsx(TabsCtx.Provider, { value: {
+            id,
+            selected,
+            select: (v) => {
+                if (value === undefined)
+                    setInner(v);
+                onChange?.(v);
+            },
+        }, children: _jsx("div", { className: cx("k-tabs", `k-tabs--${variant}`, block && "k-tabs--block", className), ...rest, children: children }) }));
+}
+export function TabList({ className, children, ...rest }) {
+    const ref = useRef(null);
+    const onKeyDown = (e) => {
+        const tabs = [...(ref.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? [])];
+        const i = tabs.indexOf(document.activeElement);
+        if (i < 0)
+            return;
+        const rtl = getComputedStyle(ref.current).direction === "rtl";
+        const moves = {
+            ArrowLeft: rtl ? i + 1 : i - 1,
+            ArrowRight: rtl ? i - 1 : i + 1,
+            Home: 0,
+            End: tabs.length - 1,
+        };
+        if (!(e.key in moves))
+            return;
+        e.preventDefault();
+        const next = tabs[(moves[e.key] + tabs.length) % tabs.length];
+        next.focus();
+        next.click(); // فعال‌سازی خودکار با فوکوس
+    };
+    return (_jsx("div", { ref: ref, role: "tablist", className: cx("k-tabs__list", className), onKeyDown: onKeyDown, ...rest, children: children }));
+}
+export function Tab({ value, className, children, disabled, ...rest }) {
+    const { id, selected, select } = useTabs();
+    const on = selected === value;
+    return (_jsx("button", { type: "button", role: "tab", id: `${id}-tab-${value}`, "aria-selected": on, "aria-controls": `${id}-panel-${value}`, tabIndex: on ? 0 : -1, disabled: disabled, className: cx("k-tabs__tab", className), onClick: () => select(value), ...rest, children: children }));
+}
+export function TabPanel({ value, className, children, ...rest }) {
+    const { id, selected } = useTabs();
+    return (_jsx("div", { role: "tabpanel", id: `${id}-panel-${value}`, "aria-labelledby": `${id}-tab-${value}`, hidden: selected !== value, tabIndex: 0, className: cx("k-tabs__panel", className), ...rest, children: children }));
+}

package/dist/Toast.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+export type ToastTone = "neutral" | "success" | "error" | "warning" | "info";
+export interface ToastOptions {
+    title: ReactNode;
+    description?: ReactNode;
+    tone?: ToastTone;
+    /** میلی‌ثانیه؛ Infinity برای ماندن تا بستن دستی. پیش‌فرض ۵ ثانیه، و بی‌نهایت اگر action داشته باشد */
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+/** نمایش اعلان کوتاه؛ شناسهٔ آن را برمی‌گرداند */
+export declare function toast(options: ToastOptions | string): number;
+export declare namespace toast {
+    var success: (title: ReactNode, o?: Omit<ToastOptions, "title" | "tone">) => number;
+    var error: (title: ReactNode, o?: Omit<ToastOptions, "title" | "tone">) => number;
+    var warning: (title: ReactNode, o?: Omit<ToastOptions, "title" | "tone">) => number;
+    var info: (title: ReactNode, o?: Omit<ToastOptions, "title" | "tone">) => number;
+    var dismiss: (id: number) => void;
+}
+export interface ToasterProps {
+    /** @default "bottom" */
+    position?: "top" | "bottom";
+    /** @default "اعلان‌ها" */
+    label?: string;
+    /** @default "بستن اعلان" */
+    closeLabel?: string;
+}
+/** محل نمایش اعلان‌ها؛ یک بار در ریشهٔ برنامه قرار دهید */
+export declare function Toaster({ position, label, closeLabel }: ToasterProps): import("react").JSX.Element;

package/dist/Toast.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { cx } from "./cx.js";
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./icons.js";
+// مخزن سادهٔ سراسری؛ هر جای برنامه می‌تواند toast() را صدا بزند
+let items = [];
+let nextId = 1;
+const listeners = new Set();
+const emit = () => listeners.forEach((l) => l());
+const subscribe = (l) => {
+    listeners.add(l);
+    return () => listeners.delete(l);
+};
+function dismiss(id) {
+    items = items.map((t) => (t.id === id ? { ...t, closing: true } : t));
+    emit();
+    setTimeout(() => {
+        items = items.filter((t) => t.id !== id);
+        emit();
+    }, 200);
+}
+/** نمایش اعلان کوتاه؛ شناسهٔ آن را برمی‌گرداند */
+export function toast(options) {
+    const o = typeof options === "string" ? { title: options } : options;
+    const id = nextId++;
+    items = [...items, { ...o, id }];
+    emit();
+    return id;
+}
+toast.success = (title, o = {}) => toast({ ...o, title, tone: "success" });
+toast.error = (title, o = {}) => toast({ ...o, title, tone: "error" });
+toast.warning = (title, o = {}) => toast({ ...o, title, tone: "warning" });
+toast.info = (title, o = {}) => toast({ ...o, title, tone: "info" });
+toast.dismiss = dismiss;
+const ICONS = {
+    neutral: InfoIcon, info: InfoIcon, success: SuccessIcon, warning: WarningIcon, error: ErrorIcon,
+};
+function ToastView({ t, closeLabel }) {
+    const duration = t.duration ?? (t.action ? Infinity : 5000);
+    const remaining = useRef(duration);
+    const started = useRef(0);
+    const timer = useRef();
+    const [paused, setPaused] = useState(false);
+    // زمان‌سنج با توقف هنگام hover یا فوکوس (WCAG 2.2.1)
+    useEffect(() => {
+        if (!Number.isFinite(duration) || paused || t.closing)
+            return;
+        started.current = Date.now();
+        timer.current = setTimeout(() => dismiss(t.id), remaining.current);
+        return () => {
+            clearTimeout(timer.current);
+            remaining.current -= Date.now() - started.current;
+        };
+    }, [paused, t.closing]);
+    const Icon = ICONS[t.tone ?? "neutral"];
+    return (_jsxs("li", { className: cx("k-toast", t.tone && t.tone !== "neutral" && `k-toast--${t.tone}`), "data-state": t.closing ? "closing" : "open", role: t.tone === "error" ? "alert" : "status", onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: () => setPaused(false), onKeyDown: (e) => e.key === "Escape" && dismiss(t.id), children: [_jsx("span", { className: "k-toast__icon", "aria-hidden": "true", children: _jsx(Icon, {}) }), _jsxs("div", { className: "k-toast__content", children: [_jsx("p", { className: "k-toast__title", children: t.title }), t.description && _jsx("p", { className: "k-toast__description", children: t.description }), t.action && (_jsx("button", { type: "button", className: "k-btn k-btn--link k-toast__action", onClick: () => {
+                            t.action.onClick();
+                            dismiss(t.id);
+                        }, children: t.action.label }))] }), _jsx("button", { type: "button", className: "k-btn k-btn--tertiary k-btn--icon k-btn--sm k-toast__close", "aria-label": closeLabel, onClick: () => dismiss(t.id), children: _jsx(CloseIcon, {}) }), Number.isFinite(duration) && _jsx("span", { className: "k-toast__progress", "aria-hidden": "true", style: { animationDuration: `${duration}ms` } })] }));
+}
+/** محل نمایش اعلان‌ها؛ یک بار در ریشهٔ برنامه قرار دهید */
+export function Toaster({ position = "bottom", label = "اعلان‌ها", closeLabel = "بستن اعلان" }) {
+    const list = useSyncExternalStore(subscribe, () => items, () => items);
+    return (_jsx("section", { "aria-label": label, children: _jsx("ol", { className: cx("k-toaster", position === "top" && "k-toaster--top"), "aria-live": "polite", children: list.map((t) => _jsx(ToastView, { t: t, closeLabel: closeLabel }, t.id)) }) }));
+}

package/dist/Tooltip.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface TooltipProps {
+    /** متن راهنما؛ فقط توضیح تکمیلی، نه اطلاعات ضروری */
+    content: ReactNode;
+    /** عنصر فوکوس‌پذیر، معمولاً یک دکمه */
+    children: ReactElement;
+    /** @default "top" */
+    placement?: "top" | "bottom";
+    /** تأخیر نمایش با hover بر حسب میلی‌ثانیه @default 300 */
+    delay?: number;
+}
+/**
+ * راهنمای کوتاه طبق WCAG 1.4.13: با hover و فوکوس نمایش داده می‌شود، روی خودش هم hover پذیر است
+ * و با Esc بسته می‌شود. با aria-describedby به عنصر متصل است.
+ */
+export declare function Tooltip({ content, children, placement, delay }: TooltipProps): import("react").JSX.Element;

package/dist/Tooltip.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+/**
+ * راهنمای کوتاه طبق WCAG 1.4.13: با hover و فوکوس نمایش داده می‌شود، روی خودش هم hover پذیر است
+ * و با Esc بسته می‌شود. با aria-describedby به عنصر متصل است.
+ */
+export function Tooltip({ content, children, placement = "top", delay = 300 }) {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const timer = useRef();
+    const show = (wait) => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(true), wait);
+    };
+    const hide = () => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(false), 100);
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open]);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const child = isValidElement(children)
+        ? cloneElement(children, {
+            "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" "),
+        })
+        : children;
+    return (_jsxs("span", { className: "k-tooltip-anchor", onMouseEnter: () => show(delay), onMouseLeave: hide, onFocus: () => show(0), onBlur: hide, children: [child, _jsx("span", { role: "tooltip", id: id, className: cx("k-tooltip", placement === "bottom" && "k-tooltip--bottom"), hidden: !open, children: content })] }));
+}

package/dist/index.d.ts

@@ -28,3 +28,17 @@ export { MobileInput } from "./MobileInput.js";
 export type { MobileInputProps } from "./MobileInput.js";
 export { PriceInput } from "./PriceInput.js";
 export type { PriceInputProps } from "./PriceInput.js";
+export { RadioGroup, Radio } from "./Radio.js";
+export type { RadioGroupProps, RadioProps } from "./Radio.js";
+export { Select } from "./Select.js";
+export type { SelectProps, SelectOption } from "./Select.js";
+export { Tabs, TabList, Tab, TabPanel } from "./Tabs.js";
+export type { TabsProps, TabListProps, TabProps, TabPanelProps } from "./Tabs.js";
+export { Dialog } from "./Dialog.js";
+export type { DialogProps } from "./Dialog.js";
+export { Toaster, toast } from "./Toast.js";
+export type { ToasterProps, ToastOptions, ToastTone } from "./Toast.js";
+export { Tooltip } from "./Tooltip.js";
+export type { TooltipProps } from "./Tooltip.js";
+export { RelativeTime } from "./RelativeTime.js";
+export type { RelativeTimeProps } from "./RelativeTime.js";

package/dist/index.js

@@ -14,3 +14,10 @@ export { DatePicker } from "./DatePicker.js";
 export { IbanInput } from "./IbanInput.js";
 export { MobileInput } from "./MobileInput.js";
 export { PriceInput } from "./PriceInput.js";
+export { RadioGroup, Radio } from "./Radio.js";
+export { Select } from "./Select.js";
+export { Tabs, TabList, Tab, TabPanel } from "./Tabs.js";
+export { Dialog } from "./Dialog.js";
+export { Toaster, toast } from "./Toast.js";
+export { Tooltip } from "./Tooltip.js";
+export { RelativeTime } from "./RelativeTime.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kashi-ui/react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "کامپوننت‌های React دیزاین‌سیستم کاشی",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,7 +22,7 @@
     "test": "node --test test/*.test.mjs"
   },
   "peerDependencies": {
-    "@kashi-ui/css": "^0.4.0",
+    "@kashi-ui/css": "^0.5.0",
     "react": ">=18"
   },
   "devDependencies": {
@@ -59,7 +59,7 @@
     }
   },
   "dependencies": {
-    "@kashi-ui/bank-logos": "^0.4.0",
-    "@kashi-ui/persian": "^0.4.0"
+    "@kashi-ui/bank-logos": "^0.5.0",
+    "@kashi-ui/persian": "^0.5.0"
   }
 }