@cssui/react 1.0.0 → 1.0.1

package/dist/components/slider/style.css

@@ -0,0 +1,206 @@
+/**
+ * Slider 组件样式
+ */
+
+.css-slider {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 0 28px;
+  user-select: none;
+}
+
+.css-slider-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.css-slider-field__label {
+  color: var(--color-dark);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+/* ===== input 类型：输入框在上，滑块在下 ===== */
+.css-slider--input {
+  gap: 12px;
+}
+
+.css-slider__input-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-height: 36px;
+  padding: 8px;
+  border: 1px solid #c2c2c2;
+  border-radius: 4px;
+  background: #ffffff;
+  box-sizing: border-box;
+  transition: border-color var(--transition-duration-150) var(--transition-timing);
+}
+
+.css-slider--disabled .css-slider__input-wrapper {
+  border-color: #c2c2c2;
+  background: var(--color-dark-01);
+  cursor: not-allowed;
+}
+
+.css-slider__input-wrapper:focus-within:not(.css-slider--disabled .css-slider__input-wrapper) {
+  border-color: var(--color-dark);
+}
+
+.css-slider__input-box {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--color-dark);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.css-slider__input-box::-webkit-outer-spin-button,
+.css-slider__input-box::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.css-slider__input-box::placeholder {
+  color: var(--color-dark-03);
+}
+
+.css-slider__input-box:disabled {
+  color: var(--color-dark-03);
+  cursor: not-allowed;
+}
+
+.css-slider__input-unit {
+  margin-left: 6px;
+  font-size: var(--font-size-sm);
+  color: var(--color-dark-03);
+}
+
+/* ===== 轨道 ===== */
+.css-slider__track {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  background: var(--color-primary-golden-05);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  touch-action: none;
+}
+
+.css-slider__fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--color-primary);
+  border-radius: var(--radius-full);
+  pointer-events: none;
+}
+
+/* ===== 滑块 ===== */
+.css-slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  background: var(--color-primary);
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  transition:
+    box-shadow var(--transition-duration-150) var(--transition-timing),
+    transform var(--transition-duration-100) var(--transition-timing);
+  z-index: 1;
+}
+
+.css-slider__thumb:hover {
+  box-shadow: 0 0 0 4px rgba(158, 138, 87, 0.2);
+  transform: translate(-50%, -50%) scale(1.15);
+}
+
+.css-slider__thumb--dragging {
+  cursor: grabbing;
+  box-shadow: 0 0 0 6px rgba(158, 138, 87, 0.25);
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+/* 移动端触摸区域扩大 */
+.css-slider__thumb::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 36px;
+  height: 36px;
+  transform: translate(-50%, -50%);
+}
+
+/* 轨道触摸区域扩大 */
+.css-slider__track::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 20px;
+  transform: translateY(-50%);
+}
+
+/* ===== min/max 标签 ===== */
+.css-slider__labels {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--font-size-caption);
+  color: var(--color-dark-03);
+  line-height: var(--line-height-caption);
+  pointer-events: none;
+}
+
+.css-slider__label--min {
+  text-align: left;
+}
+
+.css-slider__label--max {
+  text-align: right;
+}
+
+/* ===== 禁用状态 ===== */
+.css-slider--disabled .css-slider__track {
+  background: var(--color-dark-01);
+  cursor: not-allowed;
+}
+
+.css-slider--disabled .css-slider__fill {
+  background: var(--color-dark-03);
+}
+
+.css-slider--disabled .css-slider__thumb {
+  background: var(--color-dark-03);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.css-slider--disabled .css-slider__thumb:hover,
+.css-slider--disabled .css-slider__thumb--dragging {
+  box-shadow: none;
+  transform: translate(-50%, -50%);
+}

package/dist/components/src/index.d.ts

@@ -0,0 +1,28 @@
+export * from '../button';
+export * from '../input';
+export * from '../checkbox';
+export * from '../radio';
+export * from '../divider';
+export * from '../switch';
+export * from '../modal';
+export * from '../icon';
+export * from '../toast';
+export * from '../slider';
+export * from '../tabs';
+export * from '../breadcrumb';
+export * from '../carousel';
+export * from '../float-button';
+export * from '../nav-menu';
+export * from '../sidebar';
+export * from '../input-number';
+export * from '../tooltip';
+export * from '../select';
+export * from '../steps';
+export * from '../toolbars';
+export * from '../input-bar';
+export * from '../date-picker';
+export * from '../time-picker';
+export * from '../pagination';
+export * from '../table';
+export * from '../form';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA"}

package/dist/components/steps/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Steps 步骤条组件 - 逻辑部分
+ */
+export type StepsDirection = 'horizontal' | 'vertical';
+export type StepsVariant = 'default' | 'task' | 'circle';
+export interface StepItem {
+    /** 步骤标题 */
+    title: string;
+    /** 步骤描述（竖向步骤条显示在标题下方） */
+    description?: string;
+    /** 操作按钮文字（Task 变体中显示在描述下方） */
+    action?: string;
+    /** 操作按钮图标（Task 变体中显示在按钮内） */
+    icon?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+export interface StepsProps {
+    /** 步骤数据 */
+    steps: StepItem[];
+    /** 当前步骤索引（0-based），受控 */
+    current?: number;
+    /** 默认当前步骤索引 */
+    defaultCurrent?: number;
+    /** 方向：横向 | 竖向 */
+    direction?: StepsDirection;
+    /** 变体：默认 | 任务（移动端圆环进度条） */
+    variant?: StepsVariant;
+    /** 自定义类名 */
+    className?: string;
+}
+export declare function getStepsClassNames(props: {
+    direction?: StepsDirection;
+    variant?: StepsVariant;
+    className?: string;
+}): string;
+export declare function getStepItemClassNames(props: {
+    status: 'wait' | 'active' | 'done';
+    disabled?: boolean;
+}): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/steps/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../steps/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,CAAA;AACtD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAA;AAExD,MAAM,WAAW,QAAQ;IACvB,WAAW;IACX,KAAK,EAAE,MAAM,CAAA;IACb,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,WAAW;IACX,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,eAAe;IACf,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB;IACjB,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,2BAA2B;IAC3B,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,YAAY;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CAmBT;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE;IAC3C,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,MAAM,CAeT"}

package/dist/components/steps/index.js

@@ -0,0 +1,32 @@
+function getStepsClassNames(props) {
+  const { direction = "horizontal", variant = "default", className } = props;
+  const classes = ["css-steps"];
+  if (direction === "vertical") {
+    classes.push("css-steps--vertical");
+  }
+  if (variant === "task") {
+    classes.push("css-steps--task");
+  } else if (variant === "circle") {
+    classes.push("css-steps--circle");
+  }
+  if (className) {
+    classes.push(className);
+  }
+  return classes.join(" ");
+}
+function getStepItemClassNames(props) {
+  const { status, disabled } = props;
+  const classes = ["css-steps__item"];
+  if (status === "active") {
+    classes.push("css-steps__item--active");
+  } else if (status === "done") {
+    classes.push("css-steps__item--done");
+  }
+  if (disabled) {
+    classes.push("css-steps__item--disabled");
+  }
+  return classes.join(" ");
+}
+
+export { getStepItemClassNames, getStepsClassNames };
+//# sourceMappingURL=index.js.map

package/dist/components/steps/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/steps/index.ts"],"sourcesContent":["/**\n * Steps 步骤条组件 - 逻辑部分\n */\n\nexport type StepsDirection = 'horizontal' | 'vertical'\nexport type StepsVariant = 'default' | 'task' | 'circle'\n\nexport interface StepItem {\n  /** 步骤标题 */\n  title: string\n  /** 步骤描述（竖向步骤条显示在标题下方） */\n  description?: string\n  /** 操作按钮文字（Task 变体中显示在描述下方） */\n  action?: string\n  /** 操作按钮图标（Task 变体中显示在按钮内） */\n  icon?: string\n  /** 是否禁用 */\n  disabled?: boolean\n}\n\nexport interface StepsProps {\n  /** 步骤数据 */\n  steps: StepItem[]\n  /** 当前步骤索引（0-based），受控 */\n  current?: number\n  /** 默认当前步骤索引 */\n  defaultCurrent?: number\n  /** 方向：横向 | 竖向 */\n  direction?: StepsDirection\n  /** 变体：默认 | 任务（移动端圆环进度条） */\n  variant?: StepsVariant\n  /** 自定义类名 */\n  className?: string\n}\n\nexport function getStepsClassNames(props: {\n  direction?: StepsDirection\n  variant?: StepsVariant\n  className?: string\n}): string {\n  const { direction = 'horizontal', variant = 'default', className } = props\n  const classes = ['css-steps']\n\n  if (direction === 'vertical') {\n    classes.push('css-steps--vertical')\n  }\n\n  if (variant === 'task') {\n    classes.push('css-steps--task')\n  } else if (variant === 'circle') {\n    classes.push('css-steps--circle')\n  }\n\n  if (className) {\n    classes.push(className)\n  }\n\n  return classes.join(' ')\n}\n\nexport function getStepItemClassNames(props: {\n  status: 'wait' | 'active' | 'done'\n  disabled?: boolean\n}): string {\n  const { status, disabled } = props\n  const classes = ['css-steps__item']\n\n  if (status === 'active') {\n    classes.push('css-steps__item--active')\n  } else if (status === 'done') {\n    classes.push('css-steps__item--done')\n  }\n\n  if (disabled) {\n    classes.push('css-steps__item--disabled')\n  }\n\n  return classes.join(' ')\n}\n"],"names":[],"mappings":"AAmCO,SAAS,mBAAmB,KAAA,EAIxB;AACT,EAAA,MAAM,EAAE,SAAA,GAAY,YAAA,EAAc,OAAA,GAAU,SAAA,EAAW,WAAU,GAAI,KAAA;AACrE,EAAA,MAAM,OAAA,GAAU,CAAC,WAAW,CAAA;AAE5B,EAAA,IAAI,cAAc,UAAA,EAAY;AAC5B,IAAA,OAAA,CAAQ,KAAK,qBAAqB,CAAA;AAAA,EACpC;AAEA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,OAAA,CAAQ,KAAK,iBAAiB,CAAA;AAAA,EAChC,CAAA,MAAA,IAAW,YAAY,QAAA,EAAU;AAC/B,IAAA,OAAA,CAAQ,KAAK,mBAAmB,CAAA;AAAA,EAClC;AAEA,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,OAAA,CAAQ,KAAK,SAAS,CAAA;AAAA,EACxB;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;AAEO,SAAS,sBAAsB,KAAA,EAG3B;AACT,EAAA,MAAM,EAAE,MAAA,EAAQ,QAAA,EAAS,GAAI,KAAA;AAC7B,EAAA,MAAM,OAAA,GAAU,CAAC,iBAAiB,CAAA;AAElC,EAAA,IAAI,WAAW,QAAA,EAAU;AACvB,IAAA,OAAA,CAAQ,KAAK,yBAAyB,CAAA;AAAA,EACxC,CAAA,MAAA,IAAW,WAAW,MAAA,EAAQ;AAC5B,IAAA,OAAA,CAAQ,KAAK,uBAAuB,CAAA;AAAA,EACtC;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAA,CAAQ,KAAK,2BAA2B,CAAA;AAAA,EAC1C;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;;;;"}

package/dist/components/steps/style.css

@@ -0,0 +1,286 @@
+/**
+ * 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/components/switch/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Switch 组件 - 逻辑部分
+ */
+export interface SwitchProps {
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    activeColor?: string;
+    inactiveColor?: string;
+    className?: string;
+    onChange?: (checked: boolean, event?: Event) => void;
+}
+export declare function getSwitchClassNames(props: SwitchProps): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../switch/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,WAAW;IAE1B,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAEzB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;CACrD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAkB9D"}

package/dist/components/switch/index.js

@@ -0,0 +1,17 @@
+function getSwitchClassNames(props) {
+  const { size = "md", disabled = false, loading = false, checked = false } = props;
+  const classes = ["css-switch", `css-switch--${size}`];
+  if (checked) {
+    classes.push("css-switch--checked");
+  }
+  if (disabled) {
+    classes.push("css-switch--disabled");
+  }
+  if (loading) {
+    classes.push("css-switch--loading");
+  }
+  return classes.join(" ");
+}
+
+export { getSwitchClassNames };
+//# sourceMappingURL=index.js.map

package/dist/components/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/switch/index.ts"],"sourcesContent":["/**\n * Switch 组件 - 逻辑部分\n */\n\nexport interface SwitchProps {\n  // 标签\n  label?: string\n  // 是否选中\n  checked?: boolean\n  // 是否禁用\n  disabled?: boolean\n  // 尺寸\n  size?: 'sm' | 'md' | 'lg'\n  // 加载状态\n  loading?: boolean\n  // 选中时的背景色\n  activeColor?: string\n  // 未选中时的背景色\n  inactiveColor?: string\n  // 类名\n  className?: string\n  // 变更事件\n  onChange?: (checked: boolean, event?: Event) => void\n}\n\nexport function getSwitchClassNames(props: SwitchProps): string {\n  const { size = 'md', disabled = false, loading = false, checked = false } = props\n\n  const classes = ['css-switch', `css-switch--${size}`]\n\n  if (checked) {\n    classes.push('css-switch--checked')\n  }\n\n  if (disabled) {\n    classes.push('css-switch--disabled')\n  }\n\n  if (loading) {\n    classes.push('css-switch--loading')\n  }\n\n  return classes.join(' ')\n}\n"],"names":[],"mappings":"AAyBO,SAAS,oBAAoB,KAAA,EAA4B;AAC9D,EAAA,MAAM,EAAE,OAAO,IAAA,EAAM,QAAA,GAAW,OAAO,OAAA,GAAU,KAAA,EAAO,OAAA,GAAU,KAAA,EAAM,GAAI,KAAA;AAE5E,EAAA,MAAM,OAAA,GAAU,CAAC,YAAA,EAAc,CAAA,YAAA,EAAe,IAAI,CAAA,CAAE,CAAA;AAEpD,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAA,CAAQ,KAAK,qBAAqB,CAAA;AAAA,EACpC;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAA,CAAQ,KAAK,sBAAsB,CAAA;AAAA,EACrC;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAA,CAAQ,KAAK,qBAAqB,CAAA;AAAA,EACpC;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;;;;"}