donghy 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 FoxD Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,422 @@
+# FoxD
+
+A modern React component library.
+
+## Install
+
+```bash
+npm install @wentian/foxd
+```
+
+```bash
+pnpm add @wentian/foxd
+```
+
+```bash
+yarn add @wentian/foxd
+```
+
+## Usage
+
+```tsx
+import { Button, Input, Modal } from '@wentian/foxd'
+import '@wentian/foxd/styles'
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary">Click Me</Button>
+      <Input placeholder="Type something..." />
+    </div>
+  )
+}
+```
+
+## Theme
+
+FoxD supports light and dark themes via `ConfigProvider`:
+
+```tsx
+import { ConfigProvider } from '@wentian/foxd'
+
+function App() {
+  return (
+    <ConfigProvider theme="dark">
+      {/* your app */}
+    </ConfigProvider>
+  )
+}
+```
+
+## Components
+
+### Common
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Button component with multiple variants and sizes |
+| `Icon` | Icon component with 100+ built-in icons |
+| `Typography` | Typography with Text, Title, Paragraph, Link |
+| `Affix` | Affix component to fix element on scroll |
+| `Anchor` | Anchor navigation with links |
+| `App` | App wrapper providing Message, Modal, Notification context |
+| `BackTop` | Back to top button |
+| `ConfigProvider` | Global configuration provider for theme and locale |
+| `FloatButton` | Floating action button with group support |
+| `Watermark` | Watermark overlay |
+
+### Layout
+
+| Component | Description |
+|-----------|-------------|
+| `Layout` | Page layout with Header, Footer, Content, Sider |
+| `Divider` | Divider line |
+| `Flex` | Flexbox layout |
+| `HStack` | Horizontal stack layout |
+| `VStack` | Vertical stack layout |
+| `Row` / `Col` | Grid system with 24 columns |
+| `Masonry` | Masonry/waterfall layout |
+| `Space` | Consistent spacing between elements |
+| `Splitter` | Resizable split panels |
+| `Stack` | Stack layout |
+
+### Navigation
+
+| Component | Description |
+|-----------|-------------|
+| `Breadcrumb` | Breadcrumb navigation |
+| `Dropdown` | Dropdown menu |
+| `Menu` | Navigation menu |
+| `Pagination` | Pagination controls |
+| `Steps` | Step-by-step navigation |
+| `Tabs` | Tabbed content |
+
+### Data Entry
+
+| Component | Description |
+|-----------|-------------|
+| `Form` | Form with validation support |
+| `Input` | Text input with password and search variants |
+| `TextArea` | Multi-line text input |
+| `InputNumber` | Numeric input with step controls |
+| `AutoComplete` | Input with autocomplete suggestions |
+| `Select` | Dropdown selector |
+| `Cascader` | Cascading selector |
+| `TreeSelect` | Tree-structured selector |
+| `Checkbox` | Checkbox with group support |
+| `Radio` | Radio button with group support |
+| `Switch` | Toggle switch |
+| `Slider` | Slider input |
+| `Transfer` | Dual-list transfer |
+| `DatePicker` | Date picker |
+| `RangePicker` | Date range picker |
+| `TimePicker` | Time picker |
+| `Upload` | File upload with drag support |
+| `Rate` | Star rating |
+| `Mention` | @ mention input |
+
+### Feedback
+
+| Component | Description |
+|-----------|-------------|
+| `Alert` | Alert banner |
+| `Drawer` | Side drawer panel |
+| `Message` | Global message toast |
+| `Modal` | Dialog modal |
+| `Notification` | Notification notification box |
+| `Popconfirm` | Popover confirmation |
+| `Progress` | Progress indicator |
+| `Result` | Result page |
+| `Skeleton` | Content placeholder skeleton |
+| `Spin` | Loading spinner |
+
+### Display
+
+| Component | Description |
+|-----------|-------------|
+| `Avatar` / `AvatarGroup` | User avatar with group |
+| `Badge` / `BadgeRibbon` | Status badge and ribbon |
+| `Tag` / `CheckableTag` | Tag label |
+| `Tooltip` | Tooltip on hover |
+| `Popover` | Popover card |
+| `Card` / `CardGrid` / `CardMeta` | Content card |
+| `Empty` | Empty state placeholder |
+| `Statistic` / `StatisticTimer` | Statistic number display |
+| `Collapse` | Collapsible panels |
+| `Timeline` | Timeline display |
+| `Descriptions` | Key-value description list |
+| `Segmented` | Segmented control |
+| `Table` | Data table with sorting, filtering, selection |
+| `Tree` | Tree view |
+| `Carousel` | Image/content carousel |
+| `Image` / `ImagePreviewGroup` | Image with preview |
+| `Calendar` | Calendar view |
+| `QRCode` | QR code generator |
+| `Tour` | Guided tour |
+| `List` | Data list |
+
+## API Reference
+
+### Button
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'primary' \| 'default' \| 'dashed' \| 'text' \| 'link'` | `'default'` | Button style variant |
+| `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Button size |
+| `disabled` | `boolean` | `false` | Whether the button is disabled |
+| `loading` | `boolean` | `false` | Show loading spinner |
+| `danger` | `boolean` | `false` | Danger style |
+| `block` | `boolean` | `false` | Full width button |
+| `icon` | `ReactNode` | - | Icon element |
+| `onClick` | `(e: MouseEvent) => void` | - | Click handler |
+
+### Input
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | - | Input value (controlled) |
+| `defaultValue` | `string` | - | Default value |
+| `placeholder` | `string` | - | Placeholder text |
+| `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Input size |
+| `status` | `'default' \| 'error' \| 'warning'` | `'default'` | Validation status |
+| `disabled` | `boolean` | `false` | Whether the input is disabled |
+| `readOnly` | `boolean` | `false` | Read only |
+| `prefix` | `ReactNode` | - | Prefix icon/element |
+| `suffix` | `ReactNode` | - | Suffix icon/element |
+| `onChange` | `(e: ChangeEvent) => void` | - | Change handler |
+
+### Modal
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | `false` | Whether the modal is visible |
+| `title` | `ReactNode` | - | Modal title |
+| `footer` | `ReactNode \| null` | - | Footer content, `null` to hide |
+| `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Modal size |
+| `closable` | `boolean` | `true` | Show close button |
+| `centered` | `boolean` | `false` | Vertically center the modal |
+| `mask` | `boolean` | `true` | Show mask overlay |
+| `maskClosable` | `boolean` | `true` | Close on mask click |
+| `keyboard` | `boolean` | `true` | Close on ESC key |
+| `confirmLoading` | `boolean` | `false` | Loading state for confirm button |
+| `okText` | `ReactNode` | - | Confirm button text |
+| `cancelText` | `ReactNode` | - | Cancel button text |
+| `onOk` | `(e: MouseEvent) => void` | - | Confirm handler |
+| `onCancel` | `(e: MouseEvent) => void` | - | Cancel handler |
+
+### Form
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `initialValues` | `Record<string, any>` | - | Initial form values |
+| `onFinish` | `(values: Record<string, any>) => void` | - | Submit handler (validation passed) |
+| `onFinishFailed` | `(errors: FormErrorInfo) => void` | - | Submit handler (validation failed) |
+| `layout` | `'horizontal' \| 'vertical' \| 'inline'` | `'horizontal'` | Form layout |
+
+#### Form.Item
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | - | Field name |
+| `label` | `ReactNode` | - | Field label |
+| `rules` | `ValidationRule[]` | - | Validation rules |
+| `required` | `boolean` | `false` | Whether the field is required |
+
+### Select
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string \| string[]` | - | Selected value (controlled) |
+| `options` | `SelectOption[]` | - | Options list |
+| `mode` | `'single' \| 'multiple' \| 'tags'` | `'single'` | Selection mode |
+| `placeholder` | `string` | - | Placeholder text |
+| `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Select size |
+| `disabled` | `boolean` | `false` | Whether the select is disabled |
+| `showSearch` | `boolean` | `false` | Enable search filtering |
+| `showClear` | `boolean` | `false` | Show clear button |
+| `onChange` | `(value, option) => void` | - | Change handler |
+
+### Table
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dataSource` | `T[]` | `[]` | Data array |
+| `columns` | `ColumnType<T>[]` | - | Column definitions |
+| `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Table size |
+| `variant` | `'bordered' \| 'borderless'` | `'bordered'` | Table variant |
+| `loading` | `boolean` | `false` | Loading state |
+| `rowKey` | `string \| ((record) => string)` | - | Row key field |
+| `rowSelection` | `RowSelectionConfig` | - | Row selection config |
+| `pagination` | `PaginationConfig \| false` | - | Pagination config |
+
+### Message
+
+```tsx
+import { Message } from '@wentian/foxd'
+
+Message.success('Operation completed')
+Message.error('Something went wrong')
+Message.warning('Warning message')
+Message.info('Info message')
+Message.loading('Loading...')
+```
+
+| Method | Description |
+|--------|-------------|
+| `Message.success(content, duration?)` | Success message |
+| `Message.error(content, duration?)` | Error message |
+| `Message.warning(content, duration?)` | Warning message |
+| `Message.info(content, duration?)` | Info message |
+| `Message.loading(content, duration?)` | Loading message |
+
+### Notification
+
+```tsx
+import { Notification } from '@wentian/foxd'
+
+Notification.open({ message: 'Title', description: 'Description' })
+Notification.success({ message: 'Success', description: 'Operation completed' })
+```
+
+### Icon
+
+FoxD includes 100+ built-in icons. All icons follow the `XxxOutlined` / `XxxFilled` / `XxxTwoTone` naming convention:
+
+```tsx
+import { SearchOutlined, StarFilled, HeartTwoTone } from '@wentian/foxd'
+
+<SearchOutlined />
+<StarFilled style={{ color: 'gold' }} />
+<HeartTwoTone twoToneColor="#eb2f96" />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `spin` | `boolean` | `false` | Rotate icon animation |
+| `rotate` | `number` | `0` | Rotation degrees |
+| `style` | `CSSProperties` | - | Custom styles |
+| `onClick` | `(e: MouseEvent) => void` | - | Click handler |
+
+Custom icon from SVG:
+
+```tsx
+import { Icon } from '@wentian/foxd'
+
+const SvgIcon = () => (
+  <Icon component={() => <svg>...</svg>} />
+)
+```
+
+Icon from iconfont:
+
+```tsx
+import { createFromIconfontCN } from '@wentian/foxd'
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_xxx.js'
+})
+```
+
+### ConfigProvider
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `theme` | `'light' \| 'dark'` | `'light'` | Theme mode |
+| `locale` | `Locale` | - | Locale configuration |
+| `prefixCls` | `string` | - | CSS class prefix |
+
+### DatePicker
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string \| null` | - | Selected date value (controlled), format `YYYY-MM-DD` |
+| `defaultValue` | `string \| null` | - | Default date value |
+| `placeholder` | `string` | `'选择日期'` | Placeholder text |
+| `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Picker size |
+| `status` | `'default' \| 'error' \| 'warning'` | `'default'` | Validation status |
+| `disabled` | `boolean` | `false` | Whether the picker is disabled |
+| `showTime` | `boolean` | `false` | Show time selection |
+| `disabledDate` | `(date: Date) => boolean` | - | Disable specific dates |
+| `onChange` | `(value: string, date: Date) => void` | - | Date change handler |
+
+### Upload
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `action` | `string` | - | Upload URL |
+| `method` | `string` | `'post'` | HTTP method |
+| `accept` | `string` | - | Accepted file types |
+| `multiple` | `boolean` | `false` | Allow multiple file selection |
+| `draggable` | `boolean` | `false` | Enable drag-and-drop upload |
+| `disabled` | `boolean` | `false` | Whether the upload is disabled |
+| `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Upload area size |
+| `showUploadList` | `boolean` | `true` | Show file list |
+| `fileList` | `UploadFile[]` | - | File list (controlled) |
+| `defaultFileList` | `UploadFile[]` | `[]` | Default file list |
+| `maxCount` | `number` | - | Max upload count |
+| `onChange` | `(file: UploadFile, fileList: UploadFile[]) => void` | - | File status change handler |
+| `onRemove` | `(file: UploadFile) => boolean \| void` | - | File remove handler, return `false` to prevent |
+| `beforeUpload` | `(file: File, fileList: File[]) => boolean \| void \| Promise<boolean \| void>` | - | Pre-upload hook, return `false` to cancel |
+
+#### UploadFile
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `uid` | `string` | Unique file identifier |
+| `name` | `string` | File name |
+| `status` | `'pending' \| 'uploading' \| 'success' \| 'error'` | Upload status |
+| `percent` | `number` | Upload progress (0-100) |
+| `url` | `string` | File access URL |
+| `response` | `unknown` | Upload response data |
+| `error` | `string` | Error message |
+
+### Drawer
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | `false` | Whether the drawer is visible |
+| `title` | `ReactNode` | - | Drawer title |
+| `footer` | `ReactNode \| null` | - | Footer content, `null` to hide |
+| `placement` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Drawer placement |
+| `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Drawer size (378/480/736px) |
+| `width` | `number \| string` | - | Custom width (for left/right placement) |
+| `height` | `number \| string` | - | Custom height (for top/bottom placement) |
+| `closable` | `boolean` | `true` | Show close button |
+| `closeIcon` | `ReactNode` | - | Custom close icon |
+| `mask` | `boolean` | `true` | Show mask overlay |
+| `maskClosable` | `boolean` | `true` | Close on mask click |
+| `keyboard` | `boolean` | `true` | Close on ESC key |
+| `loading` | `boolean` | `false` | Loading state |
+| `extra` | `ReactNode` | - | Extra content in header |
+| `destroyOnClose` | `boolean` | `false` | Destroy content when closed |
+| `forceRender` | `boolean` | `false` | Force render content even when hidden |
+| `push` | `boolean \| { distance?: number \| string }` | `false` | Push behavior when nested drawers |
+| `zIndex` | `number` | - | Z-index of the drawer |
+| `onClose` | `(e: MouseEvent) => void` | - | Close handler |
+| `afterOpenChange` | `(open: boolean) => void` | - | Callback after open state changed |
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm dev
+
+# Build
+pnpm build
+
+# Run tests
+pnpm test
+
+# Lint
+pnpm lint
+
+# Format
+pnpm format
+```
+
+## License
+
+MIT

package/dist/cjs/components/Button/Button.js

@@ -0,0 +1,66 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["variant", "size", "loading", "icon", "iconPosition", "fullWidth", "children", "className"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var LOADING_MAP = {
+  solid: _ButtonModule.default.solid,
+  outline: _ButtonModule.default.outline,
+  ghost: _ButtonModule.default.ghost,
+  glass: _ButtonModule.default.glass
+};
+var Button = exports.Button = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    icon = _ref.icon,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cls = [_ButtonModule.default.btn, LOADING_MAP[variant], className].filter(Boolean).join(' ');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({
+    ref: ref,
+    className: cls,
+    "data-variant": variant,
+    "data-size": size,
+    "data-loading": loading || undefined,
+    "data-full-width": fullWidth || undefined,
+    disabled: loading || rest.disabled
+  }, rest), {}, {
+    children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: _ButtonModule.default.spinner,
+      "aria-hidden": true
+    }) : icon && iconPosition === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: _ButtonModule.default.iconLeft,
+      children: icon
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: _ButtonModule.default.text,
+      children: children
+    }), icon && iconPosition === 'right' && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: _ButtonModule.default.iconRight,
+      children: icon
+    })]
+  }));
+});
+Button.displayName = 'Button';

package/dist/cjs/components/Button/Button.module.css

@@ -0,0 +1,137 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1;
+  transition:
+    background 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.15s ease;
+  user-select: none;
+}
+
+.btn:active {
+  transform: scale(0.97);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* sizes */
+.btn[data-size='xs'] {
+  height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
+  border-radius: 4px;
+}
+.btn[data-size='sm'] {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 13px;
+  border-radius: 6px;
+}
+.btn[data-size='md'] {
+  height: 40px;
+  padding: 0 16px;
+  font-size: 14px;
+  border-radius: 8px;
+}
+.btn[data-size='lg'] {
+  height: 48px;
+  padding: 0 24px;
+  font-size: 16px;
+  border-radius: 10px;
+}
+.btn[data-size='xl'] {
+  height: 56px;
+  padding: 0 32px;
+  font-size: 18px;
+  border-radius: 12px;
+}
+
+/* variants */
+.solid {
+  background: #6c5ce7;
+  color: #fff;
+}
+.solid:hover:not(:disabled) {
+  background: #a29bfe;
+}
+.solid:active:not(:disabled) {
+  background: #4a3dbf;
+}
+
+.outline {
+  background: transparent;
+  color: #6c5ce7;
+  border: 1.5px solid #6c5ce7;
+}
+.outline:hover:not(:disabled) {
+  background: rgba(108, 92, 231, 0.06);
+}
+.outline:active:not(:disabled) {
+  background: rgba(108, 92, 231, 0.12);
+}
+
+.ghost {
+  background: transparent;
+  color: #6c5ce7;
+}
+.ghost:hover:not(:disabled) {
+  background: rgba(108, 92, 231, 0.06);
+}
+.ghost:active:not(:disabled) {
+  background: rgba(108, 92, 231, 0.12);
+}
+
+.glass {
+  background: rgba(108, 92, 231, 0.1);
+  color: #6c5ce7;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(108, 92, 231, 0.2);
+}
+.glass:hover:not(:disabled) {
+  background: rgba(108, 92, 231, 0.18);
+}
+
+/* full width */
+.btn[data-full-width] {
+  width: 100%;
+}
+
+/* icon */
+.iconLeft,
+.iconRight {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* text */
+.text {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* spinner */
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/cjs/components/Button/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.Button;
+  }
+});
+exports.default = void 0;
+var _Button = require("./Button");
+var _default = exports.default = _Button.Button;