@ichaingo/ui 1.1.0

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/README.md

@@ -0,0 +1,103 @@
+# @ichaingo/ui
+
+这是一个使用 Tailwind CSS 构建的现代化 UI 组件库。
+
+## 安装
+
+```bash
+npm install @ichaingo/ui
+# 或
+yarn add @ichaingo/ui
+# 或
+pnpm add @ichaingo/ui
+```
+
+## 使用方法
+
+### 导入整个库
+
+```tsx
+import { Button, Card, Input } from '@ichaingo/ui';
+```
+
+### 按需导入单个组件
+
+你也可以按需导入单个组件，这样可以减少打包体积：
+
+```tsx
+// 导入单个组件
+import { Button } from '@ichaingo/ui/button';
+import { Card } from '@ichaingo/ui/card';
+import { Input } from '@ichaingo/ui/input';
+import { Dialog } from '@ichaingo/ui/dialog';
+import { Form } from '@ichaingo/ui/form';
+```
+
+### 可用的组件入口
+
+- `@ichaingo/ui/accordion` - 手风琴组件
+- `@ichaingo/ui/alert` - 警告组件
+- `@ichaingo/ui/alert-dialog` - 警告对话框
+- `@ichaingo/ui/aspect-ratio` - 宽高比组件
+- `@ichaingo/ui/avatar` - 头像组件
+- `@ichaingo/ui/badge` - 徽章组件
+- `@ichaingo/ui/breadcrumb` - 面包屑导航
+- `@ichaingo/ui/button` - 按钮组件
+- `@ichaingo/ui/calendar` - 日历组件
+- `@ichaingo/ui/card` - 卡片组件
+- `@ichaingo/ui/carousel` - 轮播图组件
+- `@ichaingo/ui/checkbox` - 复选框组件
+- `@ichaingo/ui/collapsible` - 可折叠组件
+- `@ichaingo/ui/command` - 命令组件
+- `@ichaingo/ui/context-menu` - 上下文菜单
+- `@ichaingo/ui/dialog` - 对话框组件
+- `@ichaingo/ui/dropdown-menu` - 下拉菜单
+- `@ichaingo/ui/form` - 表单组件
+- `@ichaingo/ui/hover-card` - 悬停卡片
+- `@ichaingo/ui/input` - 输入框组件
+- `@ichaingo/ui/label` - 标签组件
+- `@ichaingo/ui/menubar` - 菜单栏
+- `@ichaingo/ui/navigation-menu` - 导航菜单
+- `@ichaingo/ui/pagination` - 分页组件
+- `@ichaingo/ui/popover` - 弹出框组件
+- `@ichaingo/ui/progress` - 进度条组件
+- `@ichaingo/ui/radio-group` - 单选按钮组
+- `@ichaingo/ui/resizable` - 可调整大小组件
+- `@ichaingo/ui/scroll-area` - 滚动区域
+- `@ichaingo/ui/select` - 选择器组件
+- `@ichaingo/ui/separator` - 分隔符组件
+- `@ichaingo/ui/sheet` - 侧边栏组件
+- `@ichaingo/ui/skeleton` - 骨架屏组件
+- `@ichaingo/ui/slider` - 滑块组件
+- `@ichaingo/ui/sonner` - 通知组件
+- `@ichaingo/ui/switch` - 开关组件
+- `@ichaingo/ui/table` - 表格组件
+- `@ichaingo/ui/tabs` - 标签页组件
+- `@ichaingo/ui/textarea` - 文本域组件
+- `@ichaingo/ui/toggle-group` - 切换按钮组
+- `@ichaingo/ui/toggle` - 切换按钮
+- `@ichaingo/ui/tooltip` - 工具提示
+
+## 样式
+
+确保在你的项目中引入了 Tailwind CSS：
+
+```css
+@import '@ichaingo/ui/styles.css';
+```
+
+## 开发
+
+```bash
+# 安装依赖
+pnpm install
+
+# 构建库
+pnpm build
+
+# 运行测试
+pnpm test
+
+# 运行 Storybook
+pnpm storybook
+```

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/dist/accordion.d.ts

@@ -0,0 +1,13 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export declare function Accordion({ ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Root>): JSX.Element;
+
+export declare function AccordionContent({ className, children, ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Content>): JSX.Element;
+
+export declare function AccordionItem({ className, ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Item>): JSX.Element;
+
+export declare function AccordionTrigger({ className, children, ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Trigger>): JSX.Element;
+
+export { }

package/dist/accordion.mjs

@@ -0,0 +1,64 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import * as n from "@radix-ui/react-accordion";
+import { ChevronDownIcon as s } from "lucide-react";
+import { c as i } from "./utils-B7J70Nno.js";
+function m({
+  ...t
+}) {
+  return /* @__PURE__ */ e(n.Root, { "data-slot": "accordion", ...t });
+}
+function f({
+  className: t,
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    n.Item,
+    {
+      "data-slot": "accordion-item",
+      className: i("border-b last:border-b-0", t),
+      ...o
+    }
+  );
+}
+function u({
+  className: t,
+  children: o,
+  ...r
+}) {
+  return /* @__PURE__ */ e(n.Header, { className: "flex", children: /* @__PURE__ */ a(
+    n.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: i(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        t
+      ),
+      ...r,
+      children: [
+        o,
+        /* @__PURE__ */ e(s, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+      ]
+    }
+  ) });
+}
+function p({
+  className: t,
+  children: o,
+  ...r
+}) {
+  return /* @__PURE__ */ e(
+    n.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...r,
+      children: /* @__PURE__ */ e("div", { className: i("pt-0 pb-4", t), children: o })
+    }
+  );
+}
+export {
+  m as Accordion,
+  p as AccordionContent,
+  f as AccordionItem,
+  u as AccordionTrigger
+};

package/dist/alert-dialog.d.ts

@@ -0,0 +1,27 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export declare function AlertDialog({ ...props }: React_2.ComponentProps<typeof AlertDialogPrimitive.Root>): JSX.Element;
+
+export declare function AlertDialogAction({ className, ...props }: React_2.ComponentProps<typeof AlertDialogPrimitive.Action>): JSX.Element;
+
+export declare function AlertDialogCancel({ className, ...props }: React_2.ComponentProps<typeof AlertDialogPrimitive.Cancel>): JSX.Element;
+
+export declare function AlertDialogContent({ className, ...props }: React_2.ComponentProps<typeof AlertDialogPrimitive.Content>): JSX.Element;
+
+export declare function AlertDialogDescription({ className, ...props }: React_2.ComponentProps<typeof AlertDialogPrimitive.Description>): JSX.Element;
+
+export declare function AlertDialogFooter({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+export declare function AlertDialogHeader({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+export declare function AlertDialogOverlay({ className, ...props }: React_2.ComponentProps<typeof AlertDialogPrimitive.Overlay>): JSX.Element;
+
+export declare function AlertDialogPortal({ ...props }: React_2.ComponentProps<typeof AlertDialogPrimitive.Portal>): JSX.Element;
+
+export declare function AlertDialogTitle({ className, ...props }: React_2.ComponentProps<typeof AlertDialogPrimitive.Title>): JSX.Element;
+
+export declare function AlertDialogTrigger({ ...props }: React_2.ComponentProps<typeof AlertDialogPrimitive.Trigger>): JSX.Element;
+
+export { }

package/dist/alert-dialog.mjs

@@ -0,0 +1,146 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-alert-dialog";
+import { c as l } from "./utils-B7J70Nno.js";
+import { buttonVariants as r } from "./button.mjs";
+function u({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Root, { "data-slot": "alert-dialog", ...t });
+}
+function f({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Trigger, { "data-slot": "alert-dialog-trigger", ...t });
+}
+function i({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Portal, { "data-slot": "alert-dialog-portal", ...t });
+}
+function s({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    o.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: l(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function m({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ n(i, { children: [
+    /* @__PURE__ */ e(s, {}),
+    /* @__PURE__ */ e(
+      o.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        className: l(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          t
+        ),
+        ...a
+      }
+    )
+  ] });
+}
+function p({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: l("flex flex-col gap-2 text-center sm:text-left", t),
+      ...a
+    }
+  );
+}
+function x({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: l(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function A({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    o.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: l("text-lg font-semibold", t),
+      ...a
+    }
+  );
+}
+function D({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    o.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: l("text-muted-foreground text-sm", t),
+      ...a
+    }
+  );
+}
+function v({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    o.Action,
+    {
+      className: l(r(), t),
+      ...a
+    }
+  );
+}
+function N({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    o.Cancel,
+    {
+      className: l(r({ variant: "outline" }), t),
+      ...a
+    }
+  );
+}
+export {
+  u as AlertDialog,
+  v as AlertDialogAction,
+  N as AlertDialogCancel,
+  m as AlertDialogContent,
+  D as AlertDialogDescription,
+  x as AlertDialogFooter,
+  p as AlertDialogHeader,
+  s as AlertDialogOverlay,
+  i as AlertDialogPortal,
+  A as AlertDialogTitle,
+  f as AlertDialogTrigger
+};

package/dist/alert.d.ts

@@ -0,0 +1,16 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+export declare function Alert({ className, variant, ...props }: React_2.ComponentProps<"div"> & VariantProps<typeof alertVariants>): JSX.Element;
+
+export declare function AlertDescription({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+export declare function AlertTitle({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export { }

package/dist/alert.mjs

@@ -0,0 +1,66 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cva as i } from "class-variance-authority";
+import { c as e } from "./utils-B7J70Nno.js";
+const l = i(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function o({
+  className: t,
+  variant: r,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: e(l({ variant: r }), t),
+      ...s
+    }
+  );
+}
+function g({ className: t, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: e(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        t
+      ),
+      ...r
+    }
+  );
+}
+function u({
+  className: t,
+  ...r
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: e(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        t
+      ),
+      ...r
+    }
+  );
+}
+export {
+  o as Alert,
+  u as AlertDescription,
+  g as AlertTitle
+};

package/dist/aspect-ratio.d.ts

@@ -0,0 +1,6 @@
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+import { JSX } from 'react/jsx-runtime';
+
+export declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): JSX.Element;
+
+export { }

package/dist/aspect-ratio.mjs

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-aspect-ratio";
+function a({
+  ...t
+}) {
+  return /* @__PURE__ */ o(i.Root, { "data-slot": "aspect-ratio", ...t });
+}
+export {
+  a as AspectRatio
+};

package/dist/avatar.d.ts

@@ -0,0 +1,11 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export declare function Avatar({ className, ...props }: React_2.ComponentProps<typeof AvatarPrimitive.Root>): JSX.Element;
+
+export declare function AvatarFallback({ className, ...props }: React_2.ComponentProps<typeof AvatarPrimitive.Fallback>): JSX.Element;
+
+export declare function AvatarImage({ className, ...props }: React_2.ComponentProps<typeof AvatarPrimitive.Image>): JSX.Element;
+
+export { }

package/dist/avatar.mjs

@@ -0,0 +1,53 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-avatar";
+import { c as l } from "./utils-B7J70Nno.js";
+function i({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    r.Root,
+    {
+      "data-slot": "avatar",
+      className: l(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        a
+      ),
+      ...t
+    }
+  );
+}
+function n({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    r.Image,
+    {
+      "data-slot": "avatar-image",
+      className: l("aspect-square size-full", a),
+      ...t
+    }
+  );
+}
+function f({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    r.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: l(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        a
+      ),
+      ...t
+    }
+  );
+}
+export {
+  i as Avatar,
+  f as AvatarFallback,
+  n as AvatarImage
+};

package/dist/badge.d.ts

@@ -0,0 +1,14 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+export declare function Badge({ className, variant, asChild, ...props }: React_2.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): JSX.Element;
+
+export declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export { }

package/dist/badge.mjs

@@ -0,0 +1,39 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Slot as o } from "@radix-ui/react-slot";
+import { cva as n } from "class-variance-authority";
+import { c as s } from "./utils-B7J70Nno.js";
+const d = n(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function b({
+  className: r,
+  variant: e,
+  asChild: t = !1,
+  ...i
+}) {
+  return /* @__PURE__ */ a(
+    t ? o : "span",
+    {
+      "data-slot": "badge",
+      className: s(d({ variant: e }), r),
+      ...i
+    }
+  );
+}
+export {
+  b as Badge,
+  d as badgeVariants
+};

package/dist/breadcrumb.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export declare function Breadcrumb({ ...props }: React_2.ComponentProps<"nav">): JSX.Element;
+
+export declare function BreadcrumbEllipsis({ className, ...props }: React_2.ComponentProps<"span">): JSX.Element;
+
+export declare function BreadcrumbItem({ className, ...props }: React_2.ComponentProps<"li">): JSX.Element;
+
+export declare function BreadcrumbLink({ asChild, className, ...props }: React_2.ComponentProps<"a"> & {
+    asChild?: boolean;
+}): JSX.Element;
+
+export declare function BreadcrumbList({ className, ...props }: React_2.ComponentProps<"ol">): JSX.Element;
+
+export declare function BreadcrumbPage({ className, ...props }: React_2.ComponentProps<"span">): JSX.Element;
+
+export declare function BreadcrumbSeparator({ children, className, ...props }: React_2.ComponentProps<"li">): JSX.Element;
+
+export { }