@cssui/react 1.0.0 → 1.0.2

package/dist/steps/style.css

@@ -1 +1,286 @@
-@import '@cssui/components/steps/style.css';
+/**
+ * Steps 步骤条组件样式
+ */
+
+/* ==================== 横向步骤条 ==================== */
+.css-steps {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  box-sizing: border-box;
+  padding: var(--spacing-4) 0;
+}
+
+.css-steps::-webkit-scrollbar {
+  height: 4px;
+}
+
+.css-steps::-webkit-scrollbar-thumb {
+  background: var(--color-primary-golden-04);
+  border-radius: var(--radius-full);
+}
+
+.css-steps__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  min-width: 100px;
+  position: relative;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+/* 连接线 */
+.css-steps__item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: calc(50% + 10px);
+  width: calc(100% - 18px);
+  height: 2px;
+  background: var(--color-primary-golden-04);
+  transition: background var(--transition-duration-300) var(--transition-timing);
+}
+
+.css-steps__item--done:not(:last-child)::after,
+.css-steps__item--active:not(:last-child)::after {
+  background: var(--color-primary);
+}
+
+/* 数字圆圈 */
+.css-steps__circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin: 4px;
+  border-radius: var(--radius-full);
+  background: var(--color-primary-golden-05);
+  color: var(--color-primary);
+  font-size: 10px;
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-base);
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  transition:
+    background var(--transition-duration-200) var(--transition-timing),
+    border-color var(--transition-duration-200) var(--transition-timing),
+    color var(--transition-duration-200) var(--transition-timing);
+}
+
+.css-steps__item--active .css-steps__circle {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  color: #ffffff;
+  box-shadow: 0 0 0 4px var(--color-primary-golden-05);
+}
+
+.css-steps__item--done .css-steps__circle {
+  color: #ffffff;
+}
+
+.css-steps__circle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: inherit;
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  border-radius: var(--radius-full);
+}
+
+/* 标题 */
+.css-steps__title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-dark);
+  line-height: var(--line-height-normal);
+  text-align: center;
+  word-break: break-word;
+  transition: color var(--transition-duration-200) var(--transition-timing);
+}
+
+.css-steps__item--active .css-steps__title,
+.css-steps__item--done .css-steps__title {
+  color: var(--color-dark-04);
+}
+
+/* 禁用 */
+.css-steps__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ==================== 竖向步骤条 ==================== */
+.css-steps--vertical {
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.css-steps--vertical .css-steps__item {
+  flex-direction: row;
+  align-items: flex-start;
+  min-width: unset;
+  padding-bottom: var(--spacing-6);
+}
+
+.css-steps--vertical .css-steps__item:last-child {
+  padding-bottom: 0;
+}
+
+/* 竖向连接线 */
+.css-steps--vertical .css-steps__item:not(:last-child)::after {
+  top: 20px;
+  left: 10px;
+  width: 2px;
+  height: calc(100% - 16px);
+}
+
+/* 竖向内容区 */
+.css-steps__content {
+  display: flex;
+  flex-direction: column;
+  margin-left: var(--spacing-3);
+  min-width: 0;
+  flex: 1;
+}
+
+.css-steps--vertical .css-steps__title {
+  margin-top: 0;
+  text-align: left;
+  line-height: 16px;
+}
+
+.css-steps__description {
+  margin-top: var(--spacing-1);
+  font-size: var(--font-size-caption);
+  color: var(--color-dark-03);
+  line-height: var(--line-height-caption);
+}
+
+/* ==================== Task 变体（竖向步骤条 + 操作按钮） ==================== */
+/* Task 变体本质上是竖向步骤条 + description 下方增加操作按钮 */
+.css-steps--task {
+  flex-direction: column;
+  overflow: unset;
+}
+
+/* Task 操作按钮 */
+.css-steps__action {
+  margin-top: var(--spacing-2);
+}
+
+.css-steps__action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 12px;
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-primary);
+  background: transparent;
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-duration-200) var(--transition-timing);
+  white-space: nowrap;
+}
+
+.css-steps__action-btn:hover {
+  color: #fff;
+  background: var(--color-primary);
+}
+
+.css-steps__action-btn:disabled,
+.css-steps__item--disabled .css-steps__action-btn {
+  color: var(--color-dark-02);
+  border-color: var(--color-dark-02);
+  cursor: not-allowed;
+}
+
+.css-steps__action-btn:disabled:hover,
+.css-steps__item--disabled .css-steps__action-btn:hover {
+  color: var(--color-dark-02);
+  background: transparent;
+}
+
+/* ==================== 移动端圆环进度条（仅移动端显示） ==================== */
+.css-steps--circle {
+  flex-direction: column;
+  overflow: unset;
+  padding: var(--spacing-4);
+}
+
+.css-steps__task-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+/* 圆环进度条 */
+.css-steps__progress-ring {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+}
+
+.css-steps__progress-ring svg {
+  transform: rotate(-90deg);
+  width: 48px;
+  height: 48px;
+  overflow: hidden;
+}
+
+.css-steps__progress-ring-bg {
+  fill: none;
+  stroke: var(--color-primary-golden-04);
+  stroke-width: 4;
+}
+
+.css-steps__progress-ring-fill {
+  fill: none;
+  stroke: var(--color-primary);
+  stroke-width: 4;
+  stroke-linecap: round;
+  transition: stroke-dasharray var(--transition-duration-300) var(--transition-timing);
+}
+
+.css-steps__progress-ring-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-primary);
+  white-space: nowrap;
+}
+
+.css-steps__task-info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.css-steps__task-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-dark-04);
+  margin-bottom: var(--spacing-1);
+}
+
+.css-steps__task-next {
+  font-size: var(--font-size-caption);
+  color: var(--color-dark-03);
+}

package/dist/style.css

@@ -0,0 +1,2 @@
+@import './theme.css';
+@import './index.css';

package/dist/switch/index.d.ts

@@ -1,3 +1,3 @@
-export { Switch } from '@cssui/adapter-react';
-export type { SwitchProps } from '@cssui/adapter-react';
+export { Switch } from '../adapter-react/index';
+export type { SwitchProps } from '../adapter-react/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/switch/index.js

@@ -1 +1,34 @@
-export { Switch } from '@cssui/adapter-react';
+import 'react';
+import '../adapter-react/components/button/Button.js';
+import '../adapter-react/components/input/Input.js';
+import '../adapter-react/components/checkbox/Checkbox.js';
+import '../adapter-react/components/checkbox/CheckboxGroup.js';
+import '../adapter-react/components/radio/Radio.js';
+import '../adapter-react/components/radio/RadioGroup.js';
+export { Switch } from '../adapter-react/components/switch/Switch.js';
+import '../adapter-react/components/divider/Divider.js';
+import '../adapter-react/components/modal/Modal.js';
+import '../adapter-react/components/toast/Toast.js';
+import '../adapter-react/components/icon/Icon.js';
+import '../adapter-react/components/slider/Slider.js';
+import 'react/jsx-runtime';
+import '../adapter-react/components/breadcrumb/Breadcrumb.js';
+import '../adapter-react/components/carousel/Carousel.js';
+import '../adapter-react/components/float-button/FloatButton.js';
+import '../adapter-react/components/float-button/FloatButtonGroup.js';
+import '../adapter-react/components/nav-menu/NavMenu.js';
+import '../adapter-react/components/sidebar/Sidebar.js';
+import '../adapter-react/components/input-number/InputNumber.js';
+import '../adapter-react/components/tooltip/Tooltip.js';
+import '../adapter-react/components/select/Select.js';
+import '../adapter-react/components/steps/Steps.js';
+import '../adapter-react/components/toolbars/Toolbar.js';
+import '../adapter-react/components/input-bar/InputBar.js';
+import '../adapter-react/components/date-picker/DatePicker.js';
+import '../adapter-react/components/time-picker/TimePicker.js';
+import '../adapter-react/components/pagination/Pagination.js';
+import '../adapter-react/components/table/Table.js';
+import '../adapter-react/components/form/Form.js';
+import '../adapter-react/components/grid/Grid.js';
+import '../adapter-react/components/grid/GridItem.js';
+//# sourceMappingURL=index.js.map

package/dist/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/switch/style.css

@@ -1 +1,160 @@
-@import '@cssui/components/switch/style.css';
+/**
+ * Switch 组件样式
+ * 使用 CSS 变量和 BEM 命名规范
+ */
+
+.css-switch-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  max-width: 100%;
+}
+
+.css-switch-field__label {
+  min-width: 94px;
+  color: var(--color-dark);
+  font-family: var(--font-family-base);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.css-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  width: 44px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background-color: var(--color-dark-03);
+  border-radius: 100px;
+  cursor: pointer;
+  transition: background-color var(--transition-duration-200) var(--transition-timing);
+  user-select: none;
+  box-sizing: border-box;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+/* 隐藏原生 input */
+.css-switch__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+  pointer-events: none;
+}
+
+/* 圆形滑块 */
+.css-switch__handle {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background-color: #ffffff;
+  border-radius: 50%;
+  transition: all var(--transition-duration-200) var(--transition-timing);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+/* 选中状态 */
+.css-switch--checked {
+  background-color: var(--color-primary);
+}
+
+.css-switch--checked .css-switch__handle {
+  left: calc(100% - 22px);
+}
+
+/* 尺寸: small */
+.css-switch--sm {
+  width: 28px;
+  height: 16px;
+}
+
+.css-switch--sm .css-switch__handle {
+  width: 12px;
+  height: 12px;
+  top: 2px;
+  left: 2px;
+}
+
+.css-switch--sm.css-switch--checked .css-switch__handle {
+  left: calc(100% - 14px);
+}
+
+/* 尺寸: large */
+.css-switch--lg {
+  width: 56px;
+  height: 28px;
+}
+
+.css-switch--lg .css-switch__handle {
+  width: 24px;
+  height: 24px;
+  top: 2px;
+  left: 2px;
+}
+
+.css-switch--lg.css-switch--checked .css-switch__handle {
+  left: calc(100% - 26px);
+}
+
+/* 禁用状态 */
+.css-switch--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.css-switch--disabled .css-switch__handle {
+  box-shadow: none;
+}
+
+/* 加载状态 */
+.css-switch--loading {
+  cursor: wait;
+}
+
+.css-switch__loading-icon {
+  width: 14px;
+  height: 14px;
+  color: var(--color-primary);
+  animation: css-switch-spin 1s linear infinite;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+}
+
+.css-switch--checked .css-switch__loading-icon {
+  color: var(--color-primary);
+}
+
+@keyframes css-switch-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 聚焦样式 */
+.css-switch:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--color-background),
+    0 0 0 4px var(--color-primary-golden-03);
+}
+
+@media (max-width: 767px) {
+  .css-switch-field {
+    width: 100%;
+  }
+}

package/dist/table/index.d.ts

@@ -1,2 +1,2 @@
-export { Table, type TableProps, type TableColumn } from '@cssui/adapter-react';
+export { Table, type TableProps, type TableColumn } from '../adapter-react/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/table/index.js

@@ -1 +1,34 @@
-export { Table } from '@cssui/adapter-react';
+import 'react';
+import '../adapter-react/components/button/Button.js';
+import '../adapter-react/components/input/Input.js';
+import '../adapter-react/components/checkbox/Checkbox.js';
+import '../adapter-react/components/checkbox/CheckboxGroup.js';
+import '../adapter-react/components/radio/Radio.js';
+import '../adapter-react/components/radio/RadioGroup.js';
+import '../adapter-react/components/switch/Switch.js';
+import '../adapter-react/components/divider/Divider.js';
+import '../adapter-react/components/modal/Modal.js';
+import '../adapter-react/components/toast/Toast.js';
+import '../adapter-react/components/icon/Icon.js';
+import '../adapter-react/components/slider/Slider.js';
+import 'react/jsx-runtime';
+import '../adapter-react/components/breadcrumb/Breadcrumb.js';
+import '../adapter-react/components/carousel/Carousel.js';
+import '../adapter-react/components/float-button/FloatButton.js';
+import '../adapter-react/components/float-button/FloatButtonGroup.js';
+import '../adapter-react/components/nav-menu/NavMenu.js';
+import '../adapter-react/components/sidebar/Sidebar.js';
+import '../adapter-react/components/input-number/InputNumber.js';
+import '../adapter-react/components/tooltip/Tooltip.js';
+import '../adapter-react/components/select/Select.js';
+import '../adapter-react/components/steps/Steps.js';
+import '../adapter-react/components/toolbars/Toolbar.js';
+import '../adapter-react/components/input-bar/InputBar.js';
+import '../adapter-react/components/date-picker/DatePicker.js';
+import '../adapter-react/components/time-picker/TimePicker.js';
+import '../adapter-react/components/pagination/Pagination.js';
+export { Table } from '../adapter-react/components/table/Table.js';
+import '../adapter-react/components/form/Form.js';
+import '../adapter-react/components/grid/Grid.js';
+import '../adapter-react/components/grid/GridItem.js';
+//# sourceMappingURL=index.js.map

package/dist/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/table/style.css

@@ -1 +1,131 @@
-@import '@cssui/components/table/style.css';
+/**
+ * Table 表格组件样式
+ */
+
+.css-table {
+  display: grid;
+  gap: 16px;
+  width: 100%;
+}
+
+.css-table__container {
+  width: 100%;
+  overflow-x: auto;
+  background: #ffffff;
+}
+
+.css-table__table {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+.css-table__cell {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-dark-01, #ececec);
+  background: #ffffff;
+  color: var(--color-dark, #333333);
+  font-size: var(--font-size-body, 14px);
+  line-height: var(--line-height-body, 1.5);
+  text-align: left;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.css-table__cell--header {
+  height: 36px;
+  padding: 0 16px;
+  background: var(--color-primary, #9e8a57);
+  color: #ffffff;
+  font-weight: var(--font-weight-bold, 700);
+  white-space: nowrap;
+}
+
+.css-table__cell--align-center {
+  text-align: center;
+}
+
+.css-table__cell--align-right {
+  text-align: right;
+}
+
+.css-table__cell--fixed-left,
+.css-table__cell--fixed-right {
+  position: sticky;
+  z-index: 2;
+}
+
+.css-table__cell--header.css-table__cell--fixed-left,
+.css-table__cell--header.css-table__cell--fixed-right {
+  z-index: 3;
+}
+
+.css-table__body-row:last-child .css-table__cell {
+  border-bottom: none;
+}
+
+.css-table__body-row:nth-child(even) .css-table__cell {
+  background: var(--color-primary-golden-05);
+}
+
+.css-table__body-row:nth-child(even) .css-table__cell--fixed-left,
+.css-table__body-row:nth-child(even) .css-table__cell--fixed-right {
+  background: var(--color-primary-golden-05);
+}
+
+.css-table__cell-content {
+  min-width: 0;
+}
+
+.css-table__cell-content--ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.css-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.css-table__sort-title {
+  min-width: 0;
+}
+
+.css-table__sort-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+  flex-shrink: 0;
+  opacity: 0.72;
+}
+
+.css-table__sort-icon--active {
+  opacity: 1;
+}
+
+.css-table__empty {
+  padding: 28px 16px;
+  color: var(--color-dark-03, #999999);
+  text-align: center;
+}
+
+.css-table__pagination {
+  width: 100%;
+}
+
+@media (max-width: 767px) {
+  .css-table__cell {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+
+  .css-table__empty {
+    padding: 24px 12px;
+  }
+}

package/dist/tabs/index.d.ts

@@ -1,3 +1,3 @@
-export { Tabs } from '@cssui/adapter-react';
-export type { TabsProps } from '@cssui/adapter-react';
+export { Tabs } from '../adapter-react/index';
+export type { TabsProps } from '../adapter-react/index';
 //# sourceMappingURL=index.d.ts.map