@ug666/ui-react 0.1.0 → 0.2.0

package/dist/primitives/index.d.ts

@@ -0,0 +1,137 @@
+export { a as Button, B as ButtonProps, a as UGButton, B as UGButtonProps, b as buttonVariants, b as ugButtonVariants } from '../button-CaLZig8j.js';
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** 输入框标签文本 */
+    label?: string;
+    /** 错误提示文本，有值时边框变红 */
+    error?: string;
+    /** 帮助说明文本 */
+    helperText?: string;
+}
+/**
+ * 通用输入框组件
+ * @example
+ * <Input label="用户名" placeholder="请输入用户名" />
+ * <Input label="邮箱" error="邮箱格式不正确" value={email} onChange={handleChange} />
+ * <Input label="备注" helperText="最多 200 字" />
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** 是否为必填项，显示红色星号 */
+    required?: boolean;
+}
+/**
+ * 通用标签组件
+ * @example
+ * <Label htmlFor="email">邮箱</Label>
+ * <Label htmlFor="name" required>姓名</Label>
+ */
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+type CardProps = React.HTMLAttributes<HTMLDivElement>;
+type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * 卡片容器
+ * @example
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>标题</CardTitle>
+ *     <CardDescription>描述文字</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>内容区域</CardContent>
+ *   <CardFooter>底部操作</CardFooter>
+ * </Card>
+ */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: react.ForwardRefExoticComponent<CardTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: react.ForwardRefExoticComponent<CardDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+/**
+ * 徽标组件
+ * @example
+ * <Badge variant="default">新品</Badge>
+ * <Badge variant="success">已完成</Badge>
+ * <Badge variant="destructive">已删除</Badge>
+ * <Badge variant="warning">待审核</Badge>
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+declare const tagVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof tagVariants> {
+    /** 是否显示关闭按钮 */
+    closable?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义背景色（覆盖 variant 颜色，建议传 token CSS 变量） */
+    color?: string;
+    /** 关闭按钮点击回调 */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * 标签组件（可交互，支持关闭）
+ * @example
+ * <Tag>默认标签</Tag>
+ * <Tag variant="success">已完成</Tag>
+ * <Tag variant="primary" closable onClose={removeTag}>可关闭</Tag>
+ * <Tag variant="warning" disabled>禁用状态</Tag>
+ * <Tag color="hsl(var(--primary))">自定义颜色</Tag>
+ */
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
+
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SpinnerProps extends React.HTMLAttributes<SVGSVGElement>, VariantProps<typeof spinnerVariants> {
+    /** 无障碍标签 */
+    label?: string;
+}
+/**
+ * 加载旋转动画
+ * @example
+ * <Spinner />
+ * <Spinner size="sm" />
+ * <Spinner size="lg" className="text-primary" />
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<SVGSVGElement>>;
+
+/** 分割线方向 */
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 方向，默认 horizontal */
+    orientation?: SeparatorOrientation;
+}
+/**
+ * 分割线
+ * @example
+ * // 水平分割线
+ * <Separator />
+ *
+ * // 垂直分割线（父容器需设定高度）
+ * <div className="flex h-8 items-center gap-4">
+ *   <span>左侧文字</span>
+ *   <Separator orientation="vertical" />
+ *   <span>右侧文字</span>
+ * </div>
+ */
+declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Badge, type BadgeProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Input, type InputProps, Label, type LabelProps, Separator, type SeparatorOrientation, type SeparatorProps, Spinner, type SpinnerProps, Tag, type TagProps, Badge as UGBadge, type BadgeProps as UGBadgeProps, Card as UGCard, CardContent as UGCardContent, type CardContentProps as UGCardContentProps, CardDescription as UGCardDescription, type CardDescriptionProps as UGCardDescriptionProps, CardFooter as UGCardFooter, type CardFooterProps as UGCardFooterProps, CardHeader as UGCardHeader, type CardHeaderProps as UGCardHeaderProps, type CardProps as UGCardProps, CardTitle as UGCardTitle, type CardTitleProps as UGCardTitleProps, Input as UGInput, type InputProps as UGInputProps, Label as UGLabel, type LabelProps as UGLabelProps, Separator as UGSeparator, type SeparatorOrientation as UGSeparatorOrientation, type SeparatorProps as UGSeparatorProps, Spinner as UGSpinner, type SpinnerProps as UGSpinnerProps, Tag as UGTag, type TagProps as UGTagProps, badgeVariants, tagVariants, badgeVariants as ugBadgeVariants, tagVariants as ugTagVariants };

package/dist/primitives/index.js

@@ -0,0 +1,56 @@
+"use client";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Separator,
+  Spinner,
+  Tag,
+  badgeVariants,
+  tagVariants
+} from "../chunk-S45GP6IB.js";
+import {
+  Button,
+  buttonVariants
+} from "../chunk-RUDEZA5Q.js";
+export {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Separator,
+  Spinner,
+  Tag,
+  Badge as UGBadge,
+  Button as UGButton,
+  Card as UGCard,
+  CardContent as UGCardContent,
+  CardDescription as UGCardDescription,
+  CardFooter as UGCardFooter,
+  CardHeader as UGCardHeader,
+  CardTitle as UGCardTitle,
+  Input as UGInput,
+  Label as UGLabel,
+  Separator as UGSeparator,
+  Spinner as UGSpinner,
+  Tag as UGTag,
+  badgeVariants,
+  buttonVariants,
+  tagVariants,
+  badgeVariants as ugBadgeVariants,
+  buttonVariants as ugButtonVariants,
+  tagVariants as ugTagVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/primitives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/sidebar-vl00Z2o-.d.cts

@@ -0,0 +1,93 @@
+import * as react from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface ModalProps {
+    /** 是否显示 */
+    open: boolean;
+    /** 关闭回调 */
+    onClose: () => void;
+    /** 子内容 */
+    children: React.ReactNode;
+    /** 额外类名 */
+    className?: string;
+}
+interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 最大宽度，默认 max-w-lg */
+    maxWidth?: string;
+}
+type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+type ModalTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;
+interface ModalCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * 对话框组件
+ * @example
+ * <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+ *   <ModalContent>
+ *     <ModalHeader>
+ *       <ModalTitle>确认删除</ModalTitle>
+ *     </ModalHeader>
+ *     <p className="px-6 pb-4 text-sm text-text-secondary">此操作不可撤销。</p>
+ *     <ModalFooter>
+ *       <Button variant="outline" onClick={() => setIsOpen(false)}>取消</Button>
+ *       <Button variant="destructive">删除</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ */
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
+declare const ModalContent: react.ForwardRefExoticComponent<ModalContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const ModalHeader: react.ForwardRefExoticComponent<ModalHeaderProps & react.RefAttributes<HTMLDivElement>>;
+declare const ModalTitle: react.ForwardRefExoticComponent<ModalTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const ModalFooter: react.ForwardRefExoticComponent<ModalFooterProps & react.RefAttributes<HTMLDivElement>>;
+/** 独立关闭按钮，可放在 ModalHeader 右侧 */
+declare const ModalCloseButton: react.ForwardRefExoticComponent<ModalCloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface SidebarItem {
+    id?: string;
+    label: string;
+    href?: string;
+    icon: LucideIcon;
+    active?: boolean;
+    children?: SidebarItem[];
+}
+type SidebarVariant = 'primary' | 'dark';
+interface SidebarProps {
+    /** 导航菜单项 */
+    items: SidebarItem[];
+    /** 视觉变体：primary 品牌色（默认），dark 深灰色（推荐后台管理） */
+    variant?: SidebarVariant;
+    /** 是否折叠，折叠时只显示图标 */
+    collapsed?: boolean;
+    /** 非受控折叠默认值 */
+    defaultCollapsed?: boolean;
+    /** 折叠状态变化回调 */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** 是否显示内置折叠按钮 */
+    collapsible?: boolean;
+    /** 是否显示内置搜索 */
+    searchable?: boolean;
+    /** 搜索输入占位文案 */
+    searchPlaceholder?: string;
+    /** 是否启用移动端抽屉模式 */
+    responsive?: boolean;
+    /** 移动端抽屉是否打开 */
+    mobileOpen?: boolean;
+    /** 移动端抽屉开关回调 */
+    onMobileOpenChange?: (open: boolean) => void;
+    /** 顶部插槽，用于品牌或用户信息 */
+    header?: React.ReactNode;
+    /** 底部插槽，用于退出登录等操作 */
+    footer?: React.ReactNode;
+    /** 额外类名 */
+    className?: string;
+}
+/**
+ * 侧边栏布局组件
+ * @example
+ * <Sidebar variant="dark" items={navItems} footer={<LogoutButton />} />
+ */
+declare const Sidebar: react.ForwardRefExoticComponent<SidebarProps & react.RefAttributes<HTMLElement>>;
+
+export { Modal as M, Sidebar as S, ModalCloseButton as a, type ModalCloseButtonProps as b, ModalContent as c, type ModalContentProps as d, ModalFooter as e, type ModalFooterProps as f, ModalHeader as g, type ModalHeaderProps as h, type ModalProps as i, ModalTitle as j, type ModalTitleProps as k, type SidebarItem as l, type SidebarProps as m, type SidebarVariant as n };

package/dist/sidebar-vl00Z2o-.d.ts

@@ -0,0 +1,93 @@
+import * as react from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface ModalProps {
+    /** 是否显示 */
+    open: boolean;
+    /** 关闭回调 */
+    onClose: () => void;
+    /** 子内容 */
+    children: React.ReactNode;
+    /** 额外类名 */
+    className?: string;
+}
+interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 最大宽度，默认 max-w-lg */
+    maxWidth?: string;
+}
+type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+type ModalTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;
+interface ModalCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * 对话框组件
+ * @example
+ * <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+ *   <ModalContent>
+ *     <ModalHeader>
+ *       <ModalTitle>确认删除</ModalTitle>
+ *     </ModalHeader>
+ *     <p className="px-6 pb-4 text-sm text-text-secondary">此操作不可撤销。</p>
+ *     <ModalFooter>
+ *       <Button variant="outline" onClick={() => setIsOpen(false)}>取消</Button>
+ *       <Button variant="destructive">删除</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ */
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
+declare const ModalContent: react.ForwardRefExoticComponent<ModalContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const ModalHeader: react.ForwardRefExoticComponent<ModalHeaderProps & react.RefAttributes<HTMLDivElement>>;
+declare const ModalTitle: react.ForwardRefExoticComponent<ModalTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const ModalFooter: react.ForwardRefExoticComponent<ModalFooterProps & react.RefAttributes<HTMLDivElement>>;
+/** 独立关闭按钮，可放在 ModalHeader 右侧 */
+declare const ModalCloseButton: react.ForwardRefExoticComponent<ModalCloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface SidebarItem {
+    id?: string;
+    label: string;
+    href?: string;
+    icon: LucideIcon;
+    active?: boolean;
+    children?: SidebarItem[];
+}
+type SidebarVariant = 'primary' | 'dark';
+interface SidebarProps {
+    /** 导航菜单项 */
+    items: SidebarItem[];
+    /** 视觉变体：primary 品牌色（默认），dark 深灰色（推荐后台管理） */
+    variant?: SidebarVariant;
+    /** 是否折叠，折叠时只显示图标 */
+    collapsed?: boolean;
+    /** 非受控折叠默认值 */
+    defaultCollapsed?: boolean;
+    /** 折叠状态变化回调 */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** 是否显示内置折叠按钮 */
+    collapsible?: boolean;
+    /** 是否显示内置搜索 */
+    searchable?: boolean;
+    /** 搜索输入占位文案 */
+    searchPlaceholder?: string;
+    /** 是否启用移动端抽屉模式 */
+    responsive?: boolean;
+    /** 移动端抽屉是否打开 */
+    mobileOpen?: boolean;
+    /** 移动端抽屉开关回调 */
+    onMobileOpenChange?: (open: boolean) => void;
+    /** 顶部插槽，用于品牌或用户信息 */
+    header?: React.ReactNode;
+    /** 底部插槽，用于退出登录等操作 */
+    footer?: React.ReactNode;
+    /** 额外类名 */
+    className?: string;
+}
+/**
+ * 侧边栏布局组件
+ * @example
+ * <Sidebar variant="dark" items={navItems} footer={<LogoutButton />} />
+ */
+declare const Sidebar: react.ForwardRefExoticComponent<SidebarProps & react.RefAttributes<HTMLElement>>;
+
+export { Modal as M, Sidebar as S, ModalCloseButton as a, type ModalCloseButtonProps as b, ModalContent as c, type ModalContentProps as d, ModalFooter as e, type ModalFooterProps as f, ModalHeader as g, type ModalHeaderProps as h, type ModalProps as i, ModalTitle as j, type ModalTitleProps as k, type SidebarItem as l, type SidebarProps as m, type SidebarVariant as n };