seven-design-ui 0.0.1

package/packages/components/src/pagination/pagination.css

@@ -0,0 +1,225 @@
+/* Pagination 组件样式 */
+.sd-pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--sd-font-size-base);
+  color: var(--sd-text-color-regular);
+  user-select: none;
+}
+
+/* 大小样式 */
+.sd-pagination--s {
+  font-size: var(--sd-font-size-small);
+}
+
+.sd-pagination--s .sd-pagination__item {
+  min-width: 28px;
+  height: 28px;
+  padding: 0 8px;
+}
+
+.sd-pagination--s .sd-pagination__size-select,
+.sd-pagination--s .sd-pagination__jumper-input {
+  height: 28px;
+  font-size: var(--sd-font-size-small);
+}
+
+.sd-pagination--m .sd-pagination__item {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 10px;
+}
+
+.sd-pagination--m .sd-pagination__size-select,
+.sd-pagination--m .sd-pagination__jumper-input {
+  height: 32px;
+}
+
+/* 基础按钮样式 */
+.sd-pagination__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 10px;
+  font-size: inherit;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: var(--sd-fill-color-blank);
+  border: 1px solid var(--sd-border-color);
+  border-radius: var(--sd-border-radius-base);
+  color: var(--sd-text-color-regular);
+  transition: all var(--sd-transition-duration-fast) var(--sd-transition-function-ease-in-out-bezier);
+  outline: none;
+  user-select: none;
+}
+
+.sd-pagination__item:hover,
+.sd-pagination__item:focus {
+  color: var(--sd-color-primary);
+  border-color: var(--sd-color-primary-light-7);
+  background-color: var(--sd-color-primary-light-9);
+}
+
+.sd-pagination__item:active {
+  color: var(--sd-color-primary-dark-2);
+  border-color: var(--sd-color-primary-dark-2);
+}
+
+.sd-pagination__item.is-disabled {
+  color: var(--sd-text-color-disabled);
+  cursor: not-allowed;
+  background-color: var(--sd-fill-color-disabled);
+  border-color: var(--sd-border-color-light);
+}
+
+.sd-pagination__item.is-disabled:hover,
+.sd-pagination__item.is-disabled:focus,
+.sd-pagination__item.is-disabled:active {
+  color: var(--sd-text-color-disabled);
+  background-color: var(--sd-fill-color-disabled);
+  border-color: var(--sd-border-color-light);
+}
+
+/* 页码按钮 */
+.sd-pagination__page.is-active {
+  color: var(--sd-color-white);
+  background-color: var(--sd-color-primary);
+  border-color: var(--sd-color-primary);
+  cursor: default;
+}
+
+.sd-pagination__page.is-active:hover,
+.sd-pagination__page.is-active:focus,
+.sd-pagination__page.is-active:active {
+  color: var(--sd-color-white);
+  background-color: var(--sd-color-primary);
+  border-color: var(--sd-color-primary);
+}
+
+/* 上一页/下一页按钮 */
+.sd-pagination__prev,
+.sd-pagination__next {
+  font-weight: 600;
+}
+
+/* 省略号样式 */
+.sd-pagination__more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 4px;
+  color: var(--sd-text-color-regular);
+  cursor: default;
+  user-select: none;
+}
+
+/* 每页容量选择器 */
+.sd-pagination__size-changer {
+  display: flex;
+  align-items: center;
+  margin-left: 12px;
+}
+
+.sd-pagination__size-select {
+  padding: 4px 8px;
+  font-size: inherit;
+  border: 1px solid var(--sd-border-color);
+  border-radius: var(--sd-border-radius-base);
+  background-color: var(--sd-fill-color-blank);
+  color: var(--sd-text-color-regular);
+  cursor: pointer;
+  outline: none;
+  transition: border-color var(--sd-transition-duration-fast) var(--sd-transition-function-ease-in-out-bezier);
+}
+
+.sd-pagination__size-select:hover,
+.sd-pagination__size-select:focus {
+  border-color: var(--sd-color-primary);
+}
+
+.sd-pagination__size-select:focus {
+  outline: 2px solid var(--sd-color-primary-light-9);
+  outline-offset: -1px;
+}
+
+/* 跳转输入框 */
+.sd-pagination__jumper {
+  display: flex;
+  align-items: center;
+  margin-left: 12px;
+  gap: 4px;
+}
+
+.sd-pagination__jumper-text {
+  color: var(--sd-text-color-regular);
+  font-size: inherit;
+}
+
+.sd-pagination__jumper-input {
+  width: 50px;
+  padding: 4px 8px;
+  font-size: inherit;
+  border: 1px solid var(--sd-border-color);
+  border-radius: var(--sd-border-radius-base);
+  background-color: var(--sd-fill-color-blank);
+  color: var(--sd-text-color-regular);
+  text-align: center;
+  outline: none;
+  transition: border-color var(--sd-transition-duration-fast) var(--sd-transition-function-ease-in-out-bezier);
+}
+
+.sd-pagination__jumper-input:hover,
+.sd-pagination__jumper-input:focus {
+  border-color: var(--sd-color-primary);
+}
+
+.sd-pagination__jumper-input:focus {
+  outline: 2px solid var(--sd-color-primary-light-9);
+  outline-offset: -1px;
+}
+
+.sd-pagination__jumper-input::-webkit-outer-spin-button,
+.sd-pagination__jumper-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.sd-pagination__jumper-input[type=number] {
+  -moz-appearance: textfield;
+}
+
+/* 总数信息 */
+.sd-pagination__total {
+  margin-left: 12px;
+  color: var(--sd-text-color-secondary);
+  font-size: inherit;
+  white-space: nowrap;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .sd-pagination {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .sd-pagination__size-changer,
+  .sd-pagination__jumper,
+  .sd-pagination__total {
+    margin-left: 0;
+    margin-top: 8px;
+  }
+
+  .sd-pagination__item {
+    min-width: 28px;
+    height: 28px;
+    padding: 0 6px;
+  }
+}

package/packages/components/src/switch/Switch.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import React from "react"
+
+import { forwardRef } from 'react'
+import { classnames } from '@seven-design-ui/core'
+import './switch.css'
+
+export interface SwitchProps {
+  /** 是否选中 */
+  checked?: boolean
+  /** 默认是否选中 */
+  defaultChecked?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否加载中 */
+  loading?: boolean
+  /** 选中状态显示的内容 */
+  checkedNode?: React.ReactNode
+  /** 未选中状态显示的内容 */
+  unCheckedNode?: React.ReactNode
+  /** 选中状态的背景色 */
+  checkedColor?: string
+  /** 未选中状态的背景色 */
+  unCheckedColor?: string
+  /** 自定义类名 */
+  className?: string
+  /** 值改变时的回调 */
+  onChange?: (checked: boolean) => void
+  /** 原生 input 的 name 属性 */
+  name?: string
+  /** 原生 input 的 id 属性 */
+  id?: string
+}
+
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
+  const {
+    checked,
+    defaultChecked = false,
+    disabled = false,
+    loading = false,
+    checkedNode,
+    unCheckedNode,
+    checkedColor,
+    unCheckedColor,
+    className,
+    onChange,
+    name,
+    id,
+  } = props
+
+  // 内部状态管理 - 只在非受控模式下使用
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
+
+  // 判断是否为受控模式
+  const isControlled = checked !== undefined
+
+  // 当前的开关状态
+  const currentChecked = isControlled ? checked : internalChecked
+
+  const handleChange = () => {
+    if (disabled || loading) return
+
+    const newChecked = !currentChecked
+
+    // 如果是非受控模式，更新内部状态
+    if (!isControlled) {
+      setInternalChecked(newChecked)
+    }
+
+    // 调用onChange回调，传递boolean值
+    if (onChange) {
+      onChange(newChecked)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      handleChange()
+    }
+  }
+
+  const classes = classnames(
+    'sd-switch',
+    {
+      'is-checked': currentChecked,
+      'is-disabled': disabled || loading,
+      'is-loading': loading,
+    },
+    className
+  )
+
+  // 计算背景色样式
+  const coreStyle: React.CSSProperties = {}
+  if (currentChecked && checkedColor) {
+    coreStyle.backgroundColor = checkedColor
+  } else if (!currentChecked && unCheckedColor) {
+    coreStyle.backgroundColor = unCheckedColor
+  }
+
+  return (
+    <div
+      className={classes}
+      role="switch"
+      aria-checked={currentChecked}
+      aria-disabled={disabled || loading}
+      tabIndex={disabled || loading ? -1 : 0}
+      onClick={handleChange}
+      onKeyDown={handleKeyDown}
+    >
+      <input
+        ref={ref}
+        type="checkbox"
+        className="sd-switch__input"
+        checked={currentChecked}
+        disabled={disabled || loading}
+        onChange={handleChange}
+        name={name}
+        id={id}
+        aria-hidden="true"
+      />
+      <span className="sd-switch__core" style={coreStyle}>
+        {loading && (
+          <span className="sd-switch__loading">
+            <svg viewBox="0 0 1024 1024" className="sd-switch__spinner">
+              <path
+                fill="currentColor"
+                d="M512 64a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32z"
+              />
+            </svg>
+          </span>
+        )}
+        <span className="sd-switch__action" />
+        {(currentChecked ? checkedNode : unCheckedNode) && (
+          <span className="sd-switch__content">
+            {currentChecked ? checkedNode : unCheckedNode}
+          </span>
+        )}
+      </span>
+    </div>
+  )
+})
+
+Switch.displayName = 'Switch'

package/packages/components/src/switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch'
+export type { SwitchProps } from './Switch'

package/packages/components/src/switch/switch.css

@@ -0,0 +1,119 @@
+/* Switch 组件样式 */
+.sd-switch {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.sd-switch:focus-visible .sd-switch__core {
+  outline: 2px solid var(--sd-color-primary);
+  outline-offset: 1px;
+}
+
+.sd-switch__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+}
+
+.sd-switch__core {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 24px;
+  border: 1px solid var(--sd-border-color);
+  border-radius: 12px;
+  background-color: var(--sd-border-color-darker);
+  transition: all var(--sd-transition-duration-fast);
+}
+
+.sd-switch__action {
+  position: absolute;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  transition: all var(--sd-transition-duration-fast);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+.sd-switch__content {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  font-weight: 600;
+  color: #333333;
+  z-index: 3;
+  pointer-events: none;
+  transition: all var(--sd-transition-duration-fast);
+  line-height: 1;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  left: 6px;
+}
+
+/* 选中状态 */
+.sd-switch.is-checked .sd-switch__core {
+  background-color: var(--sd-color-primary);
+  border-color: var(--sd-color-primary);
+}
+
+.sd-switch.is-checked .sd-switch__action {
+  left: calc(100% - 22px);
+}
+
+.sd-switch.is-checked .sd-switch__content {
+  left: calc(100% - 18px);
+}
+
+/* 加载状态 */
+.sd-switch__loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+  align-items: center;
+  color: var(--sd-color-white);
+}
+
+.sd-switch__spinner {
+  width: 12px;
+  height: 12px;
+  animation: sd-switch-spin 2s linear infinite;
+}
+
+@keyframes sd-switch-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sd-switch.is-loading .sd-switch__action {
+  opacity: 0;
+}
+
+/* 禁用状态 */
+.sd-switch.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sd-switch.is-disabled .sd-switch__core {
+  background-color: var(--sd-disabled-bg-color);
+  border-color: var(--sd-disabled-border-color);
+}

package/packages/components/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*", "../core/src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/packages/components/vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'SevenDesign',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format === 'es' ? 'esm' : 'cjs'}.js`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@seven-design-ui/core'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@seven-design-ui/core': 'SevenDesignCore',
+        },
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'style.css') return 'style.css'
+          return assetInfo.name as string
+        },
+      },
+    },
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+})

package/packages/core/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@seven-design-ui/core",
+  "version": "0.1.0",
+  "description": "SevenDesign 核心工具和 Hooks",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/core/src/hooks/useControllableState.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import { useCallback, useRef, useState } from 'react'
+
+/**
+ * 受控/非受控状态 Hook
+ * 支持组件同时支持受控和非受控模式
+ */
+export function useControllableState<T>(
+  value?: T,
+  defaultValue?: T,
+  onChange?: (value: T) => void
+): [T | undefined, (value: T) => void] {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue)
+  const isControlled = value !== undefined
+  const stateValue = isControlled ? value : uncontrolledValue
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+
+  const setState = useCallback(
+    (newValue: T) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue)
+      }
+      onChangeRef.current?.(newValue)
+    },
+    [isControlled]
+  )
+
+  return [stateValue, setState]
+}

package/packages/core/src/hooks/useEventListener.ts

@@ -0,0 +1,37 @@
+'use client';
+
+import { useEffect, useRef } from 'react'
+
+/**
+ * 事件监听 Hook
+ */
+export function useEventListener<K extends keyof WindowEventMap>(
+  eventName: K,
+  handler: (event: WindowEventMap[K]) => void,
+  element?: HTMLElement | Window | null,
+  options?: boolean | AddEventListenerOptions
+) {
+  const savedHandler = useRef<(event: WindowEventMap[K]) => void>()
+
+  useEffect(() => {
+    savedHandler.current = handler
+  }, [handler])
+
+  useEffect(() => {
+    const targetElement = element ?? window
+
+    if (!targetElement || !targetElement.addEventListener) {
+      return
+    }
+
+    const eventListener = (event: Event) => {
+      savedHandler.current?.(event as WindowEventMap[K])
+    }
+
+    targetElement.addEventListener(eventName, eventListener, options)
+
+    return () => {
+      targetElement.removeEventListener(eventName, eventListener, options)
+    }
+  }, [eventName, element, options])
+}

package/packages/core/src/index.ts

@@ -0,0 +1,7 @@
+// Utils
+export { classnames, createBEM } from './utils/classnames'
+export type { ClassValue } from './utils/classnames'
+
+// Hooks
+export { useControllableState } from './hooks/useControllableState'
+export { useEventListener } from './hooks/useEventListener'

package/packages/core/src/utils/classnames.ts

@@ -0,0 +1,48 @@
+/**
+ * 类名合并工具
+ */
+export type ClassValue = 
+  | string 
+  | number 
+  | boolean 
+  | undefined 
+  | null 
+  | ClassValue[]
+  | Record<string, boolean | undefined | null>
+
+export function classnames(...classes: ClassValue[]): string {
+  const result: string[] = []
+  
+  for (const cls of classes) {
+    if (!cls) continue
+    
+    if (typeof cls === 'string' && cls.trim()) {
+      result.push(cls.trim())
+    } else if (typeof cls === 'number') {
+      result.push(String(cls))
+    } else if (Array.isArray(cls)) {
+      const inner = classnames(...cls)
+      if (inner) result.push(inner)
+    } else if (typeof cls === 'object') {
+      for (const key in cls) {
+        if (cls[key]) {
+          result.push(key)
+        }
+      }
+    }
+  }
+  
+  return result.join(' ')
+}
+
+/**
+ * 创建 BEM 风格的类名生成器
+ */
+export function createBEM(block: string) {
+  const b = () => block
+  const e = (element: string) => `${block}__${element}`
+  const m = (modifier: string) => `${block}--${modifier}`
+  const em = (element: string, modifier: string) => `${block}__${element}--${modifier}`
+
+  return { b, e, m, em }
+}

package/packages/core/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}