seven-design-ui 0.0.1

package/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/components/ui/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

package/components/ui/use-toast.ts

@@ -0,0 +1,191 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  }
+}
+
+export { useToast, toast }

package/components.json

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

package/docs/components/button.mdx

@@ -0,0 +1,155 @@
+import { Button } from '@seven-design-ui/components'
+import React from 'react'
+
+# Button 按钮
+
+常用的操作按钮。
+
+## 基础用法
+
+使用 `type`、`plain`、`round` 和 `circle` 来定义按钮的样式。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+      <Button>默认按钮</Button>
+      <Button type="primary">主要按钮</Button>
+      <Button type="success">成功按钮</Button>
+      <Button type="warning">警告按钮</Button>
+      <Button type="danger">危险按钮</Button>
+      <Button type="info">信息按钮</Button>
+    </div>
+  )
+}
+```
+
+## 朴素按钮
+
+使用 `plain` 属性来创建朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+      <Button plain>朴素按钮</Button>
+      <Button type="primary" plain>
+        主要按钮
+      </Button>
+      <Button type="success" plain>
+        成功按钮
+      </Button>
+      <Button type="warning" plain>
+        警告按钮
+      </Button>
+      <Button type="danger" plain>
+        危险按钮
+      </Button>
+      <Button type="info" plain>
+        信息按钮
+      </Button>
+    </div>
+  )
+}
+```
+
+## 圆角按钮
+
+使用 `round` 属性来创建圆角按钮。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+      <Button round>圆角按钮</Button>
+      <Button type="primary" round>
+        主要按钮
+      </Button>
+      <Button type="success" round>
+        成功按钮
+      </Button>
+    </div>
+  )
+}
+```
+
+## 不同尺寸
+
+Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+      <Button size="large">大型按钮</Button>
+      <Button>默认按钮</Button>
+      <Button size="small">小型按钮</Button>
+    </div>
+  )
+}
+```
+
+## 禁用状态
+
+你可以使用 `disabled` 属性来定义按钮是否被禁用。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+      <Button disabled>默认按钮</Button>
+      <Button type="primary" disabled>
+        主要按钮
+      </Button>
+      <Button type="success" disabled>
+        成功按钮
+      </Button>
+    </div>
+  )
+}
+```
+
+## 加载状态
+
+通过设置 `loading` 属性为 `true` 来显示加载中状态。
+
+```tsx preview
+export default function LoadingButton() {
+  const [loading, setLoading] = React.useState(false)
+
+  const handleClick = () => {
+    setLoading(true)
+    setTimeout(() => setLoading(false), 2000)
+  }
+
+  return (
+    <Button type="primary" loading={loading} onClick={handleClick}>
+      {loading ? '加载中...' : '点击加载'}
+    </Button>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 属性        | 说明                 | 类型                                                           | 默认值    |
+| ----------- | -------------------- | -------------------------------------------------------------- | --------- |
+| type        | 按钮类型             | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `default` |
+| size        | 按钮尺寸             | `'large' \| 'default' \| 'small'`                              | `default` |
+| plain       | 是否为朴素按钮       | `boolean`                                                      | `false`   |
+| round       | 是否为圆角按钮       | `boolean`                                                      | `false`   |
+| circle      | 是否为圆形按钮       | `boolean`                                                      | `false`   |
+| loading     | 是否为加载中状态     | `boolean`                                                      | `false`   |
+| disabled    | 是否禁用             | `boolean`                                                      | `false`   |
+| nativeType  | 原生 type 属性       | `'button' \| 'submit' \| 'reset'`                              | `button`  |
+| icon        | 图标组件             | `React.ReactNode`                                              | -         |
+| className   | 自定义类名           | `string`                                                       | -         |
+| onClick     | 点击事件回调         | `(e: React.MouseEvent) => void`                                | -         |
+
+### Events
+
+| 事件名  | 说明           | 类型                                |
+| ------- | -------------- | ----------------------------------- |
+| onClick | 点击按钮时触发 | `(e: React.MouseEvent) => void`     |

package/docs/components/input.mdx

@@ -0,0 +1,157 @@
+import { Input } from '@seven-design-ui/components'
+import React from 'react'
+
+# Input 输入框
+
+通过鼠标或键盘输入内容，是最基础的表单域的包装。
+
+## 基础用法
+
+基本的输入框用法。
+
+```tsx preview
+export default function BasicInput() {
+  const [value, setValue] = React.useState('')
+
+  return (
+    <div>
+      <Input
+        placeholder="请输入内容"
+        value={value}
+        onInput={setValue}
+        style={{ width: '300px' }}
+      />
+      <p style={{ marginTop: '12px', color: '#606266' }}>输入的内容：{value}</p>
+    </div>
+  )
+}
+```
+
+## 禁用状态
+
+通过 `disabled` 属性指定是否禁用 input 组件。
+
+```tsx preview
+export default function Demo() {
+  return <Input placeholder="禁用状态" disabled style={{ width: '300px' }} />
+}
+```
+
+## 可清空
+
+使用 `clearable` 属性即可得到一个可清空的输入框。
+
+```tsx preview
+export default function ClearableInput() {
+  const [value, setValue] = React.useState('可以清空的内容')
+
+  return (
+    <Input
+      placeholder="请输入内容"
+      value={value}
+      onInput={setValue}
+      clearable
+      style={{ width: '300px' }}
+    />
+  )
+}
+```
+
+## 密码输入框
+
+使用 `showPassword` 属性即可得到一个可切换显示隐藏的密码框。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <Input
+      placeholder="请输入密码"
+      type="password"
+      showPassword
+      style={{ width: '300px' }}
+    />
+  )
+}
+```
+
+## 不同尺寸
+
+使用 `size` 属性改变输入框大小。除了默认大小外，还有另外两个选项：`large`、`small`。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Input placeholder="大尺寸" size="large" style={{ width: '300px' }} />
+      <Input placeholder="默认尺寸" style={{ width: '300px' }} />
+      <Input placeholder="小尺寸" size="small" style={{ width: '300px' }} />
+    </div>
+  )
+}
+```
+
+## 带图标的输入框
+
+使用 `prefixIcon` 和 `suffixIcon` 属性在 input 组件首部和尾部增加显示图标。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Input
+        placeholder="请输入内容"
+        prefixIcon={
+          <svg viewBox="0 0 1024 1024" width="14" height="14">
+            <path
+              fill="currentColor"
+              d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-11.776 14.08-30.272 34.496c-52.8 59.136-75.328 102.4-75.328 133.376v20.224h80.96V608c0-22.528 1.408-36.608 4.928-47.68 2.816-12.672 15.488-28.864 37.376-48.576l23.232-27.392c12.672-14.08 24.64-28.16 35.2-43.648 23.936-35.904 35.2-71.104 35.2-107.712 0-52.096-17.6-93.632-51.904-123.904-32.896-30.272-78.08-45.056-133.376-45.056zM512 704a48 48 0 1 0 0 96 48 48 0 0 0 0-96z"
+            />
+          </svg>
+        }
+        style={{ width: '300px' }}
+      />
+      <Input
+        placeholder="请输入内容"
+        suffixIcon={
+          <svg viewBox="0 0 1024 1024" width="14" height="14">
+            <path
+              fill="currentColor"
+              d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"
+            />
+          </svg>
+        }
+        style={{ width: '300px' }}
+      />
+    </div>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 属性         | 说明                 | 类型              | 默认值    |
+| ------------ | -------------------- | ----------------- | --------- |
+| type         | 输入框类型           | `string`          | `text`    |
+| size         | 输入框尺寸           | `'large' \| 'default' \| 'small'` | `default` |
+| disabled     | 是否禁用             | `boolean`         | `false`   |
+| readOnly     | 是否只读             | `boolean`         | `false`   |
+| clearable    | 是否可清空           | `boolean`         | `false`   |
+| showPassword | 是否显示密码切换按钮 | `boolean`         | `false`   |
+| prefixIcon   | 前置图标             | `React.ReactNode` | -         |
+| suffixIcon   | 后置图标             | `React.ReactNode` | -         |
+| placeholder  | 输入框占位文本       | `string`          | -         |
+| value        | 输入框值（受控）     | `string`          | -         |
+| defaultValue | 默认值（非受控）     | `string`          | -         |
+| className    | 自定义类名           | `string`          | -         |
+
+### Events
+
+| 事件名   | 说明                   | 类型                                    |
+| -------- | ---------------------- | --------------------------------------- |
+| onInput  | 输入时触发             | `(value: string) => void`               |
+| onChange | 值改变时触发           | `(e: React.ChangeEvent) => void`        |
+| onClear  | 点击清空按钮时触发     | `() => void`                            |
+| onFocus  | 获得焦点时触发         | `(e: React.FocusEvent) => void`         |
+| onBlur   | 失去焦点时触发         | `(e: React.FocusEvent) => void`         |