@chaos_team/chaos-ui 1.0.5

package/dist/time-picker-H1AaecnE.d.cts

@@ -0,0 +1,452 @@
+import * as React from 'react';
+import * as Lucide from 'lucide-react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * @component Transfer
+ * @category ui/data-entry
+ * @since 0.2.0
+ * @description Dual-panel shuttle component for moving items between source and target lists. Supports search, select-all, one-way mode, i18n, disabled state, and custom render functions. / 双栏穿梭框，支持搜索、全选、单向模式、国际化、禁用状态和自定义渲染。
+ * @keywords transfer, shuttle, dual-panel, selection, move, assign
+ * @example
+ * <Transfer
+ *   dataSource={items}
+ *   targetKeys={selected}
+ *   onChange={setSelected}
+ *   titles={["Available", "Selected"]}
+ * />
+ */
+interface TransferItem {
+    key: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface TransferProps {
+    dataSource: TransferItem[];
+    targetKeys?: string[];
+    onChange?: (targetKeys: string[]) => void;
+    titles?: [string, string];
+    searchable?: boolean;
+    filterOption?: (input: string, item: TransferItem) => boolean;
+    render?: (item: TransferItem) => React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    oneWay?: boolean;
+}
+declare function Transfer({ dataSource, targetKeys, onChange, titles: titlesProp, searchable, filterOption, render, disabled, className, oneWay, }: TransferProps): React.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonProps = Button$1.Props & VariantProps<typeof buttonVariants> & {
+    /** Leading icon, rendered before children / 前置图标 */
+    icon?: React.ReactNode;
+    /** Trailing icon, rendered after children / 后置图标 */
+    iconRight?: React.ReactNode;
+};
+/**
+ * @component Button
+ * @category ui/primitives
+ * @since 0.2.0
+ * @description Interactive button with multiple variants, sizes, and icon support / 交互按钮，支持多种变体、尺寸和图标
+ * @keywords button, action, submit, click, icon
+ * @example
+ * <Button variant="default" size="default">Click me</Button>
+ * <Button variant="outline" icon={<SettingsIcon />}>Settings</Button>
+ */
+declare function Button({ className, variant, size, icon, iconRight, children, ...props }: ButtonProps): React.JSX.Element;
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    keywords?: string[];
+    group?: string;
+}
+interface ComboboxProps {
+    options: ComboboxOption[];
+    value?: string;
+    onChange?: (value: string | undefined) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    className?: string;
+    align?: "start" | "center" | "end";
+    clearable?: boolean;
+    searchable?: boolean;
+    renderOption?: (option: ComboboxOption) => React.ReactNode;
+}
+/**
+ * @component Combobox
+ * @category ui/data-entry
+ * @since 0.2.0
+ * @description Searchable select dropdown with keyboard navigation and clearable selection / 带搜索、键盘导航和可清除选择的下拉选择框
+ * @keywords combobox, select, search, autocomplete, dropdown
+ * @example
+ * <Combobox
+ *   options={[{ value: "react", label: "React" }]}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ */
+declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyText, disabled, className, align, clearable, searchable, renderOption, }: ComboboxProps): React.JSX.Element;
+
+declare const variantConfig: {
+    default: {
+        icon: React.ForwardRefExoticComponent<Omit<Lucide.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    };
+    search: {
+        icon: React.ForwardRefExoticComponent<Omit<Lucide.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    };
+    error: {
+        icon: React.ForwardRefExoticComponent<Omit<Lucide.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    };
+    network: {
+        icon: React.ForwardRefExoticComponent<Omit<Lucide.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    };
+};
+interface EmptyStateTexts {
+    title?: string;
+    description?: string;
+}
+interface EmptyStateProps {
+    variant?: string;
+    icon?: React.ElementType;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+    centered?: boolean;
+    fullPage?: boolean;
+    /**
+     * Override i18n strings. When provided, useTranslation is skipped.
+     * / 覆盖 i18n 字符串，传入后跳过 useTranslation
+     */
+    texts?: EmptyStateTexts;
+}
+/**
+ * @component EmptyState
+ * @category ui/feedback
+ * @since 0.2.0
+ * @description Placeholder displayed when data is empty, with icon, title, description, and optional action / 数据为空时显示的占位符，含图标、标题、描述和可选操作
+ * @keywords empty, state, placeholder, no-data, feedback, zero-state
+ * @example
+ * <EmptyState variant="search" title="No results" description="Try a different query" />
+ */
+declare function EmptyState({ variant, icon: iconProp, title: titleProp, description: descProp, action, className, centered, fullPage, texts: textsProp, }: EmptyStateProps): React.JSX.Element;
+
+interface FabProps extends React.ComponentProps<typeof Button> {
+    icon?: React.ReactNode;
+    label?: string;
+    position?: "bottom-right" | "bottom-left" | "bottom-center";
+    offset?: number;
+}
+/**
+ * @component Fab
+ * @category ui/primitives
+ * @since 0.2.0
+ * @description Floating Action Button fixed to the screen edge for primary actions / 固定在屏幕边缘的浮动操作按钮，用于主要操作
+ * @keywords fab, floating, action, button, fixed
+ * @example
+ * <Fab icon={<PlusIcon />} position="bottom-right" />
+ */
+declare function Fab({ icon, label, position, offset, className, ...props }: FabProps): React.JSX.Element;
+interface FabSpeedDialAction {
+    icon: React.ReactNode;
+    label: string;
+    onClick?: () => void;
+}
+interface FabSpeedDialProps {
+    icon: React.ReactNode;
+    actions: FabSpeedDialAction[];
+    position?: "bottom-right" | "bottom-left";
+}
+/**
+ * @component FabSpeedDial
+ * @category ui/primitives
+ * @since 0.2.0
+ * @description Floating action button that expands into a radial menu of speed-dial actions / 展开为放射状快捷菜单的浮动操作按钮
+ * @keywords fab, speed-dial, radial, menu, floating, actions
+ * @example
+ * <FabSpeedDial icon={<PlusIcon />} actions={[{ icon: <EditIcon />, label: "Edit", onClick: () => {} }]} />
+ */
+declare function FabSpeedDial({ icon, actions, position, }: FabSpeedDialProps): React.JSX.Element;
+interface BackTopProps {
+    threshold?: number;
+    target?: React.RefObject<HTMLElement | null>;
+    className?: string;
+}
+/**
+ * @component BackTop
+ * @category ui/primitives
+ * @since 0.2.0
+ * @description Button that appears after scrolling past a threshold, scrolls back to top / 滚动超过阈值后出现的返回顶部按钮
+ * @keywords back-top, scroll, top, button, navigation
+ * @example
+ * <BackTop threshold={300} />
+ */
+declare function BackTop({ threshold, target, className }: BackTopProps): React.JSX.Element | null;
+
+/**
+ * @component Card
+ * @category ui/shell
+ * @since 0.2.0
+ * @description A container component with header, content, and footer slots for structured content / 带有标题、内容和底部插槽的结构化容器组件
+ * @keywords card, container, panel, shell
+ * @example
+ * <Card>
+ *   <CardHeader><CardTitle>Title</CardTitle></CardHeader>
+ *   <CardContent>Content</CardContent>
+ * </Card>
+ */
+declare function Card({ className, size, flush, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+    /** Remove padding on CardContent for edge-to-edge tables / 内容通栏 */
+    flush?: boolean;
+}): React.JSX.Element;
+/**
+ * @component CardHeader
+ * @category ui/shell
+ * @since 0.2.0
+ * @description Top section of a Card, typically containing title, description, and actions / 卡片顶部区域，通常包含标题、描述和操作按钮
+ * @keywords card, header, title
+ * @example
+ * <CardHeader>
+ *   <CardTitle>Title</CardTitle>
+ *   <CardDescription>Description text</CardDescription>
+ * </CardHeader>
+ */
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * @component CardTitle
+ * @category ui/shell
+ * @since 0.2.0
+ * @description The heading text inside a CardHeader / 卡片标题文字
+ * @keywords card, title, heading
+ * @example
+ * <CardTitle>Section Title</CardTitle>
+ */
+declare function CardTitle({ className, size, ...props }: React.ComponentProps<"div"> & {
+    /** Explicit size override independent of Card size / 独立于 Card 的尺寸 */
+    size?: "sm" | "default";
+}): React.JSX.Element;
+/**
+ * @component CardDescription
+ * @category ui/shell
+ * @since 0.2.0
+ * @description Supplementary text below the CardTitle / 卡片标题下方的补充说明文字
+ * @keywords card, description, subtitle
+ * @example
+ * <CardDescription>Additional context about this card.</CardDescription>
+ */
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * @component CardAction
+ * @category ui/shell
+ * @since 0.2.0
+ * @description An action area placed in the top-right corner of a CardHeader / 卡片头部右上角的操作区域
+ * @keywords card, action, button, header
+ * @example
+ * <CardAction>
+ *   <Button size="sm">Action</Button>
+ * </CardAction>
+ */
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * @component CardContent
+ * @category ui/shell
+ * @since 0.2.0
+ * @description The main body area of a Card, with optional flush padding for edge-to-edge content / 卡片主体内容区，支持通栏模式
+ * @keywords card, content, body
+ * @example
+ * <CardContent>Main card content goes here.</CardContent>
+ */
+declare function CardContent({ className, flush, ...props }: React.ComponentProps<"div"> & {
+    /** Remove horizontal padding for edge-to-edge content like tables / 内容通栏，去掉水平内边距 */
+    flush?: boolean;
+}): React.JSX.Element;
+/**
+ * @component CardFooter
+ * @category ui/shell
+ * @since 0.2.0
+ * @description Bottom section of a Card, typically for action buttons or summary / 卡片底部区域，通常放置操作按钮或摘要信息
+ * @keywords card, footer, actions
+ * @example
+ * <CardFooter>
+ *   <Button>Save</Button>
+ * </CardFooter>
+ */
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * @component CardSection
+ * @category ui/shell
+ * @since 0.2.0
+ * @description Titled section within a Card with optional header actions / 卡片中的带标题分区，支持可选的头部操作按钮
+ * @keywords card, section, divider, partition
+ * @example
+ * <CardSection title="Details" actions={<Button size="sm">Edit</Button>}>
+ *   Content here
+ * </CardSection>
+ *
+ * Supports `title` and `actions` props to replace the repeated 3 inline
+ * patterns (CardHeader+CardTitle / Tailwind div / Flex+title+Button).
+ * Render as a header row when `title` or `actions` is provided;
+ * otherwise renders as a plain bordered partition div.
+ */
+declare function CardSection({ className, title, actions, children, ...props }: React.ComponentProps<"div"> & {
+    /** Section title text / 区块标题 */
+    title?: React.ReactNode;
+    /** Right-side action area / 右侧操作区 */
+    actions?: React.ReactNode;
+}): React.JSX.Element;
+
+type InputProps = React.ComponentProps<"input">;
+/**
+ * @component Input
+ * @category ui/data-entry
+ * @since 0.2.0
+ * @description A styled text input built on @base-ui/react Input primitive with focus, disabled, and invalid states / 基于 @base-ui/react Input 的样式化文本输入框，支持聚焦、禁用和无效状态
+ * @keywords input, text-input, form, base-ui
+ * @example
+ * <Input type="email" placeholder="Enter your email" />
+ */
+declare function Input({ className, type, ...props }: InputProps): React.JSX.Element;
+
+interface RatingProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    size?: "sm" | "default" | "lg";
+    readonly?: boolean;
+    allowHalf?: boolean;
+    className?: string;
+    iconClassName?: string;
+}
+/**
+ * @component Rating
+ * @category ui/data-entry
+ * @since 0.2.0
+ * @description Star rating component with half-star and read-only support / 星级评分组件，支持半星和只读模式
+ * @keywords rating, star, score, review, half-star, evaluation
+ * @example
+ * <Rating defaultValue={3.5} max={5} allowHalf onChange={(v) => console.log(v)} />
+ */
+declare function Rating({ value, defaultValue, onChange, max, size, readonly, allowHalf, className, iconClassName, ...props }: RatingProps): React.JSX.Element;
+
+interface SegmentedControlOption<T extends string> {
+    value: T;
+    label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+interface SegmentedControlProps<T extends string> {
+    options: SegmentedControlOption<T>[];
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    size?: "sm" | "default" | "lg";
+    disabled?: boolean;
+    className?: string;
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * @component SegmentedControl
+ * @category ui/data-entry
+ * @since 0.2.0
+ * @description A toggle-based segmented control for selecting one option from a set / 分段控制器，基于切换按钮从一组选项中选择一个
+ * @keywords segmented, control, toggle, switch, tabs, options, select
+ * @example
+ * <SegmentedControl
+ *   options={[{ value: "day", label: "Day" }, { value: "week", label: "Week" }]}
+ *   defaultValue="day"
+ *   onChange={(v) => console.log(v)}
+ * />
+ */
+declare function SegmentedControl<T extends string>({ options, value, defaultValue, onChange, size, disabled, className, orientation, }: SegmentedControlProps<T>): React.JSX.Element;
+
+interface TourStep {
+    target: string | (() => HTMLElement | null);
+    title: string;
+    description?: React.ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    offset?: number;
+}
+interface TourProps {
+    steps: TourStep[];
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onComplete?: () => void;
+    onSkip?: () => void;
+    storageKey?: string;
+    className?: string;
+}
+/**
+ * @component Tour
+ * @category ui/overlay
+ * @since 0.2.0
+ * @description Step-by-step guided product tour overlay with spotlight, navigation, and localStorage persistence / 逐步引导式产品导览覆盖层，带有聚焦高亮、导航和 localStorage 持久化
+ * @keywords tour, onboarding, guide, walkthrough, spotlight, 导览, 引导
+ * @example
+ * <Tour
+ *   steps={[
+ *     { target: "#dashboard", title: "Dashboard", description: "Your overview" },
+ *   ]}
+ *   onComplete={() => console.log("tour done")}
+ * />
+ */
+declare function Tour({ steps, open, onOpenChange, onComplete, onSkip, storageKey, className, }: TourProps): React.JSX.Element | null;
+
+interface WatermarkProps {
+    text?: string;
+    image?: string;
+    rotate?: number;
+    gap?: [number, number];
+    fontSize?: number;
+    className?: string;
+    fullPage?: boolean;
+    zIndex?: number;
+    opacity?: number;
+    color?: string;
+}
+/**
+ * @component Watermark
+ * @category ui/feedback
+ * @since 0.2.0
+ * @description Tiled watermark overlay with text or image, supporting full-page and container modes / 平铺水印覆盖层，支持文本或图片，可全页面或容器内显示
+ * @keywords watermark, overlay, tiled, security, 水印
+ * @example
+ * <Watermark text="Confidential" />
+ * <Watermark image="/logo.png" fullPage={false} />
+ */
+declare function Watermark({ text, image, rotate, gap, fontSize, className, fullPage, zIndex, opacity, color, }: WatermarkProps): React.JSX.Element;
+
+/**
+ * @component TimePicker
+ * @category ui/data-entry
+ * @since 0.2.0
+ * @description Time selection component with 12h/24h format, configurable minute step, and Popover-based hour/minute dropdowns. / 时间选择器，支持12/24小时制、可配置分钟步长，基于 Popover 的小时/分钟下拉选择。
+ * @keywords time, picker, clock, hour, minute, 12h, 24h
+ * @example
+ * <TimePicker value="09:30" onChange={setTime} step={15} />
+ * <TimePicker value="02:30 PM" format="12h" step={30} />
+ */
+interface TimePickerProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    step?: 1 | 5 | 10 | 15 | 30 | 60;
+    format?: "12h" | "24h";
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+}
+declare function TimePicker({ value, onChange, step, format, disabled, placeholder, className, }: TimePickerProps): React.JSX.Element;
+declare function formatTimeInput(h: number, m: number, format?: "12h" | "24h"): string;
+
+export { type ButtonProps as B, Card as C, EmptyState as E, Fab as F, Input as I, Rating as R, SegmentedControl as S, type TransferItem as T, Watermark as W, Button as a, BackTop as b, Combobox as c, type ComboboxOption as d, type EmptyStateTexts as e, FabSpeedDial as f, TimePicker as g, Tour as h, type TourStep as i, Transfer as j, formatTimeInput as k, CardAction as l, CardContent as m, CardDescription as n, CardFooter as o, CardHeader as p, CardSection as q, CardTitle as r, type InputProps as s, buttonVariants as t, variantConfig as v };