@cssui/react 1.0.0 → 1.0.2

package/dist/components/button/style.css

@@ -0,0 +1,151 @@
+/**
+ * Button 组件样式
+ * 使用 CSS 变量和 BEM 命名规范
+ */
+
+.css-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-normal);
+  text-align: center;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: var(--spacing-2) var(--spacing-3);
+  transition: all var(--transition-duration-150) var(--transition-timing);
+  outline: none;
+}
+
+.css-button--sm {
+  font-size: var(--button-sm-font-size);
+  height: var(--button-sm-height);
+}
+
+.css-button--md {
+  font-size: var(--button-md-font-size);
+  line-height: var(--button-md-line-height);
+  height: var(--button-md-height);
+}
+
+.css-button--lg {
+  font-size: var(--button-lg-font-size);
+  line-height: var(--button-lg-line-height);
+  height: var(--button-lg-height);
+}
+
+.css-button--primary {
+  background-color: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.css-button--primary:active:not(.css-button--disabled),
+.css-button--primary.active:not(.css-button--disabled) {
+  background-color: var(--color-primary-golden-06);
+  border-color: var(--color-primary-golden-06);
+}
+
+.css-button--outline {
+  background-color: transparent;
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.css-button--outline:active:not(.css-button--disabled),
+.css-button--outline.active:not(.css-button--disabled) {
+  color: var(--color-primary-golden-06);
+  border-color: var(--color-primary-golden-06);
+  background-color: rgba(158, 138, 87, 0.1);
+}
+
+.css-button--text {
+  background-color: transparent;
+  color: var(--color-primary);
+  border-color: transparent;
+}
+
+.css-button--text:active:not(.css-button--disabled),
+.css-button--text.active:not(.css-button--disabled) {
+  color: var(--color-primary-golden-06);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.css-button--disabled {
+  background-color: transparent;
+  color: var(--color-dark-01);
+  border-color: var(--color-dark-01);
+  cursor: not-allowed;
+}
+
+.css-button--primary.css-button--disabled {
+  background-color: var(--color-dark-01);
+  color: white;
+  border-color: var(--color-dark-01);
+}
+
+.css-button--text.css-button--disabled {
+  border-color: transparent;
+}
+
+.css-button:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Icon */
+.css-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.css-button--sm .css-button__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.css-button--md .css-button__icon {
+  width: 26px;
+  height: 30px;
+}
+
+.css-button--lg .css-button__icon {
+  width: 32px;
+  height: 42px;
+}
+
+.css-button__icon + .css-button__text,
+.css-button__text + .css-button__icon {
+  margin-left: var(--spacing-1);
+}
+
+.css-button--text .css-button__icon,
+.css-button--outline .css-button__icon {
+  color: var(--color-primary);
+}
+
+.css-button--primary .css-button__icon {
+  color: white;
+}
+
+.css-button--sm .css-button__icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.css-button--md .css-button__icon svg {
+  width: 26px;
+  height: 26px;
+}
+
+.css-button--lg .css-button__icon svg {
+  width: 32px;
+  height: 32px;
+}

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

@@ -0,0 +1,38 @@
+export type CarouselValue = number;
+export type CarouselType = 'dots' | 'number' | 'thumb' | 'thumn';
+export interface CarouselItem {
+    /** 主图地址 */
+    src: string;
+    /** 缩略图地址，thumb 类型未传时回退到 src */
+    thumbSrc?: string;
+    /** 图片替代文本 */
+    alt?: string;
+    /** 标题文案 */
+    title?: string;
+    /** 描述文案 */
+    description?: string;
+}
+export interface CarouselProps {
+    /** 图片列表 */
+    items: CarouselItem[];
+    /** 当前索引 */
+    value?: CarouselValue;
+    /** 指示器类型 */
+    type?: CarouselType;
+    /** 是否循环 */
+    loop?: boolean;
+    /** 画面宽高比 */
+    aspectRatio?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 变更回调 */
+    onChange?: (value: CarouselValue, item: CarouselItem) => void;
+}
+export declare function normalizeCarouselType(type?: CarouselType): 'dots' | 'number' | 'thumb';
+export declare function getCarouselClassNames(props?: Pick<CarouselProps, 'className' | 'type'>): string;
+export declare function getCarouselIndicatorClassNames(kind: 'dot' | 'thumb', props?: {
+    active?: boolean;
+}): string;
+export declare function getCarouselSafeIndex(value: CarouselValue | undefined, total: number, loop?: boolean): CarouselValue;
+export declare function getCarouselItemAlt(item: CarouselItem, index: number): string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../carousel/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,CAAA;AAClC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAA;AAEhE,MAAM,WAAW,YAAY;IAC3B,WAAW;IACX,GAAG,EAAE,MAAM,CAAA;IACX,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,WAAW;IACX,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,WAAW;IACX,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,YAAY;IACZ,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,WAAW;IACX,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW;IACX,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;CAC9D;AAED,wBAAgB,qBAAqB,CAAC,IAAI,GAAE,YAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAE9F;AAED,wBAAgB,qBAAqB,CACnC,KAAK,GAAE,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,MAAM,CAAM,GACpD,MAAM,CAQR;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,KAAK,GAAG,OAAO,EACrB,KAAK,GAAE;IACL,MAAM,CAAC,EAAE,OAAO,CAAA;CACZ,GACL,MAAM,CAQR;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,KAAK,EAAE,MAAM,EACb,IAAI,UAAO,GACV,aAAa,CAYf;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE5E"}

package/dist/components/carousel/index.js

@@ -0,0 +1,33 @@
+function normalizeCarouselType(type = "dots") {
+  return type === "thumn" ? "thumb" : type;
+}
+function getCarouselClassNames(props = {}) {
+  const classes = ["css-carousel", `css-carousel--${normalizeCarouselType(props.type)}`];
+  if (props.className) {
+    classes.push(props.className);
+  }
+  return classes.join(" ");
+}
+function getCarouselIndicatorClassNames(kind, props = {}) {
+  const classes = [`css-carousel__${kind}`];
+  if (props.active) {
+    classes.push(`css-carousel__${kind}--active`);
+  }
+  return classes.join(" ");
+}
+function getCarouselSafeIndex(value, total, loop = true) {
+  if (total <= 0) {
+    return 0;
+  }
+  const nextValue = Number.isFinite(value) ? Number(value) : 0;
+  if (loop) {
+    return (nextValue % total + total) % total;
+  }
+  return Math.min(Math.max(nextValue, 0), total - 1);
+}
+function getCarouselItemAlt(item, index) {
+  return item.alt ?? item.title ?? `\u8D70\u9A6C\u706F\u56FE\u7247 ${index + 1}`;
+}
+
+export { getCarouselClassNames, getCarouselIndicatorClassNames, getCarouselItemAlt, getCarouselSafeIndex, normalizeCarouselType };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/carousel/index.ts"],"sourcesContent":["export type CarouselValue = number\r\nexport type CarouselType = 'dots' | 'number' | 'thumb' | 'thumn'\r\n\r\nexport interface CarouselItem {\r\n  /** 主图地址 */\r\n  src: string\r\n  /** 缩略图地址，thumb 类型未传时回退到 src */\r\n  thumbSrc?: string\r\n  /** 图片替代文本 */\r\n  alt?: string\r\n  /** 标题文案 */\r\n  title?: string\r\n  /** 描述文案 */\r\n  description?: string\r\n}\r\n\r\nexport interface CarouselProps {\r\n  /** 图片列表 */\r\n  items: CarouselItem[]\r\n  /** 当前索引 */\r\n  value?: CarouselValue\r\n  /** 指示器类型 */\r\n  type?: CarouselType\r\n  /** 是否循环 */\r\n  loop?: boolean\r\n  /** 画面宽高比 */\r\n  aspectRatio?: string\r\n  /** 自定义类名 */\r\n  className?: string\r\n  /** 变更回调 */\r\n  onChange?: (value: CarouselValue, item: CarouselItem) => void\r\n}\r\n\r\nexport function normalizeCarouselType(type: CarouselType = 'dots'): 'dots' | 'number' | 'thumb' {\r\n  return type === 'thumn' ? 'thumb' : type\r\n}\r\n\r\nexport function getCarouselClassNames(\r\n  props: Pick<CarouselProps, 'className' | 'type'> = {}\r\n): string {\r\n  const classes = ['css-carousel', `css-carousel--${normalizeCarouselType(props.type)}`]\r\n\r\n  if (props.className) {\r\n    classes.push(props.className)\r\n  }\r\n\r\n  return classes.join(' ')\r\n}\r\n\r\nexport function getCarouselIndicatorClassNames(\r\n  kind: 'dot' | 'thumb',\r\n  props: {\r\n    active?: boolean\r\n  } = {}\r\n): string {\r\n  const classes = [`css-carousel__${kind}`]\r\n\r\n  if (props.active) {\r\n    classes.push(`css-carousel__${kind}--active`)\r\n  }\r\n\r\n  return classes.join(' ')\r\n}\r\n\r\nexport function getCarouselSafeIndex(\r\n  value: CarouselValue | undefined,\r\n  total: number,\r\n  loop = true\r\n): CarouselValue {\r\n  if (total <= 0) {\r\n    return 0\r\n  }\r\n\r\n  const nextValue = Number.isFinite(value) ? Number(value) : 0\r\n\r\n  if (loop) {\r\n    return ((nextValue % total) + total) % total\r\n  }\r\n\r\n  return Math.min(Math.max(nextValue, 0), total - 1)\r\n}\r\n\r\nexport function getCarouselItemAlt(item: CarouselItem, index: number): string {\r\n  return item.alt ?? item.title ?? `走马灯图片 ${index + 1}`\r\n}\r\n"],"names":[],"mappings":"AAiCO,SAAS,qBAAA,CAAsB,OAAqB,MAAA,EAAqC;AAC9F,EAAA,OAAO,IAAA,KAAS,UAAU,OAAA,GAAU,IAAA;AACtC;AAEO,SAAS,qBAAA,CACd,KAAA,GAAmD,EAAC,EAC5C;AACR,EAAA,MAAM,OAAA,GAAU,CAAC,cAAA,EAAgB,CAAA,cAAA,EAAiB,sBAAsB,KAAA,CAAM,IAAI,CAAC,CAAA,CAAE,CAAA;AAErF,EAAA,IAAI,MAAM,SAAA,EAAW;AACnB,IAAA,OAAA,CAAQ,IAAA,CAAK,MAAM,SAAS,CAAA;AAAA,EAC9B;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;AAEO,SAAS,8BAAA,CACd,IAAA,EACA,KAAA,GAEI,EAAC,EACG;AACR,EAAA,MAAM,OAAA,GAAU,CAAC,CAAA,cAAA,EAAiB,IAAI,CAAA,CAAE,CAAA;AAExC,EAAA,IAAI,MAAM,MAAA,EAAQ;AAChB,IAAA,OAAA,CAAQ,IAAA,CAAK,CAAA,cAAA,EAAiB,IAAI,CAAA,QAAA,CAAU,CAAA;AAAA,EAC9C;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;AAEO,SAAS,oBAAA,CACd,KAAA,EACA,KAAA,EACA,IAAA,GAAO,IAAA,EACQ;AACf,EAAA,IAAI,SAAS,CAAA,EAAG;AACd,IAAA,OAAO,CAAA;AAAA,EACT;AAEA,EAAA,MAAM,YAAY,MAAA,CAAO,QAAA,CAAS,KAAK,CAAA,GAAI,MAAA,CAAO,KAAK,CAAA,GAAI,CAAA;AAE3D,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,OAAA,CAAS,SAAA,GAAY,QAAS,KAAA,IAAS,KAAA;AAAA,EACzC;AAEA,EAAA,OAAO,IAAA,CAAK,IAAI,IAAA,CAAK,GAAA,CAAI,WAAW,CAAC,CAAA,EAAG,QAAQ,CAAC,CAAA;AACnD;AAEO,SAAS,kBAAA,CAAmB,MAAoB,KAAA,EAAuB;AAC5E,EAAA,OAAO,KAAK,GAAA,IAAO,IAAA,CAAK,KAAA,IAAS,CAAA,+BAAA,EAAS,QAAQ,CAAC,CAAA,CAAA;AACrD;;;;"}

package/dist/components/carousel/style.css

@@ -0,0 +1,196 @@
+.css-carousel {
+  --css-carousel-ratio: 1 / 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  min-width: 0;
+}
+
+.css-carousel__viewport {
+  position: relative;
+  overflow: hidden;
+  background: transparent;
+  aspect-ratio: var(--css-carousel-ratio);
+  touch-action: pan-y;
+}
+
+.css-carousel__track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transition: transform 280ms ease;
+}
+
+.css-carousel__slide,
+.css-carousel__empty {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+}
+
+.css-carousel__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-dark-03);
+  font-size: var(--font-size-sm);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(240, 237, 230, 0.95) 100%);
+}
+
+.css-carousel__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.css-carousel__footer {
+  height: 24px;
+  padding: var(--spacing-2);
+}
+
+.css-carousel__dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.css-carousel__dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--color-primary-golden-04);
+  cursor: pointer;
+  transition:
+    width 220ms ease,
+    background-color 220ms ease,
+    transform 220ms ease;
+}
+
+.css-carousel__dot:hover {
+  transform: scale(1.05);
+}
+
+.css-carousel__dot--active {
+  background: var(--color-primary);
+}
+
+.css-carousel__meta {
+  position: relative;
+  min-height: 24px;
+  padding: 0 52px;
+}
+
+.css-carousel__title {
+  margin: 0;
+  text-align: center;
+  font-size: var(--font-size-sm);
+  line-height: 24px;
+  color: var(--color-dark-04);
+}
+
+.css-carousel__count {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: var(--font-size-xs);
+  line-height: 24px;
+  color: rgba(94, 84, 73, 0.62);
+}
+
+.css-carousel__thumbs {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+  scrollbar-width: thin;
+}
+
+.css-carousel__thumbs::-webkit-scrollbar {
+  height: 4px;
+}
+
+.css-carousel__thumbs::-webkit-scrollbar-thumb {
+  background: rgba(94, 84, 73, 0.18);
+  border-radius: 999px;
+}
+
+.css-carousel__thumb {
+  position: relative;
+  flex: 0 0 auto;
+  width: 64px;
+  height: 64px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid rgba(94, 84, 73, 0.12);
+  border-radius: 12px;
+  background: #fff;
+  opacity: 0.72;
+  cursor: pointer;
+  transition:
+    opacity 220ms ease,
+    border-color 220ms ease,
+    box-shadow 220ms ease,
+    transform 220ms ease;
+}
+
+.css-carousel__thumb:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.css-carousel__thumb--active {
+  opacity: 1;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(171, 136, 73, 0.16);
+}
+
+.css-carousel__thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .css-carousel__track,
+  .css-carousel__dot,
+  .css-carousel__thumb {
+    transition: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .css-carousel__dots {
+    gap: 6px;
+  }
+
+  .css-carousel__meta {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+
+  .css-carousel__title {
+    font-size: var(--font-size-xs);
+  }
+
+  .css-carousel__count {
+    font-size: 10px;
+  }
+
+  .css-carousel__thumbs {
+    gap: 8px;
+  }
+
+  .css-carousel__thumb {
+    width: 52px;
+    height: 52px;
+    border-radius: 10px;
+  }
+}

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

@@ -0,0 +1,36 @@
+/**
+ * Checkbox 组件 - 逻辑部分
+ */
+export interface CheckboxProps {
+    checked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    value?: string | number | boolean;
+    children?: any;
+    className?: string;
+    onChange?: (checked: boolean, e: any) => void;
+}
+export type CheckboxValue = string | number | boolean;
+export type CheckboxDirection = 'horizontal' | 'vertical';
+export interface CheckboxGroupOption {
+    label: string;
+    value: CheckboxValue;
+    disabled?: boolean;
+    className?: string;
+}
+export interface CheckboxGroupProps {
+    value?: CheckboxValue[];
+    defaultValue?: CheckboxValue[];
+    disabled?: boolean;
+    error?: boolean;
+    name?: string;
+    label?: string;
+    options?: CheckboxGroupOption[];
+    direction?: CheckboxDirection;
+    className?: string;
+    onChange?: (value: CheckboxValue[], e?: any) => void;
+}
+export declare function getCheckboxClassNames(props: Partial<CheckboxProps>): string;
+export declare function getCheckboxGroupClassNames(props: Partial<CheckboxGroupProps>): string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../checkbox/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,aAAa;IAE5B,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IAEjC,QAAQ,CAAC,EAAE,GAAG,CAAA;IAEd,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC9C;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AACrD,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAA;AAEzD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAA;IACvB,YAAY,CAAC,EAAE,aAAa,EAAE,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAA;IAC/B,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CACrD;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,MAAM,CAe3E;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAqBrF"}

package/dist/components/checkbox/index.js

@@ -0,0 +1,34 @@
+function getCheckboxClassNames(props) {
+  const { disabled, error, className } = props;
+  const classes = ["css-checkbox"];
+  if (disabled) {
+    classes.push("css-checkbox--disabled");
+  }
+  if (error) {
+    classes.push("css-checkbox--error");
+  }
+  if (className) {
+    classes.push(className);
+  }
+  return classes.join(" ");
+}
+function getCheckboxGroupClassNames(props) {
+  const { disabled, error, direction = "horizontal", className } = props;
+  const classes = ["css-checkbox-group"];
+  if (direction === "vertical") {
+    classes.push("css-checkbox-group--vertical");
+  }
+  if (disabled) {
+    classes.push("css-checkbox-group--disabled");
+  }
+  if (error) {
+    classes.push("css-checkbox-group--error");
+  }
+  if (className) {
+    classes.push(className);
+  }
+  return classes.join(" ");
+}
+
+export { getCheckboxClassNames, getCheckboxGroupClassNames };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/checkbox/index.ts"],"sourcesContent":["/**\r\n * Checkbox 组件 - 逻辑部分\r\n */\r\n\r\nexport interface CheckboxProps {\r\n  // 是否选中\r\n  checked?: boolean\r\n  // 是否禁用\r\n  disabled?: boolean\r\n  // 错误状态\r\n  error?: boolean\r\n  // 标签文本\r\n  label?: string\r\n  // 值 (用于 group) - 可选\r\n  value?: string | number | boolean\r\n  // 子元素\r\n  children?: any\r\n  // 类名\r\n  className?: string\r\n  // change 事件\r\n  onChange?: (checked: boolean, e: any) => void\r\n}\r\n\r\nexport type CheckboxValue = string | number | boolean\r\nexport type CheckboxDirection = 'horizontal' | 'vertical'\r\n\r\nexport interface CheckboxGroupOption {\r\n  label: string\r\n  value: CheckboxValue\r\n  disabled?: boolean\r\n  className?: string\r\n}\r\n\r\nexport interface CheckboxGroupProps {\r\n  value?: CheckboxValue[]\r\n  defaultValue?: CheckboxValue[]\r\n  disabled?: boolean\r\n  error?: boolean\r\n  name?: string\r\n  label?: string\r\n  options?: CheckboxGroupOption[]\r\n  direction?: CheckboxDirection\r\n  className?: string\r\n  onChange?: (value: CheckboxValue[], e?: any) => void\r\n}\r\n\r\nexport function getCheckboxClassNames(props: Partial<CheckboxProps>): string {\r\n  const { disabled, error, className } = props\r\n  const classes = ['css-checkbox']\r\n\r\n  if (disabled) {\r\n    classes.push('css-checkbox--disabled')\r\n  }\r\n  if (error) {\r\n    classes.push('css-checkbox--error')\r\n  }\r\n  if (className) {\r\n    classes.push(className)\r\n  }\r\n\r\n  return classes.join(' ')\r\n}\r\n\r\nexport function getCheckboxGroupClassNames(props: Partial<CheckboxGroupProps>): string {\r\n  const { disabled, error, direction = 'horizontal', className } = props\r\n  const classes = ['css-checkbox-group']\r\n\r\n  if (direction === 'vertical') {\r\n    classes.push('css-checkbox-group--vertical')\r\n  }\r\n\r\n  if (disabled) {\r\n    classes.push('css-checkbox-group--disabled')\r\n  }\r\n\r\n  if (error) {\r\n    classes.push('css-checkbox-group--error')\r\n  }\r\n\r\n  if (className) {\r\n    classes.push(className)\r\n  }\r\n\r\n  return classes.join(' ')\r\n}\r\n"],"names":[],"mappings":"AA8CO,SAAS,sBAAsB,KAAA,EAAuC;AAC3E,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAO,SAAA,EAAU,GAAI,KAAA;AACvC,EAAA,MAAM,OAAA,GAAU,CAAC,cAAc,CAAA;AAE/B,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAA,CAAQ,KAAK,wBAAwB,CAAA;AAAA,EACvC;AACA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,OAAA,CAAQ,KAAK,qBAAqB,CAAA;AAAA,EACpC;AACA,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,OAAA,CAAQ,KAAK,SAAS,CAAA;AAAA,EACxB;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;AAEO,SAAS,2BAA2B,KAAA,EAA4C;AACrF,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAO,SAAA,GAAY,YAAA,EAAc,WAAU,GAAI,KAAA;AACjE,EAAA,MAAM,OAAA,GAAU,CAAC,oBAAoB,CAAA;AAErC,EAAA,IAAI,cAAc,UAAA,EAAY;AAC5B,IAAA,OAAA,CAAQ,KAAK,8BAA8B,CAAA;AAAA,EAC7C;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAA,CAAQ,KAAK,8BAA8B,CAAA;AAAA,EAC7C;AAEA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,OAAA,CAAQ,KAAK,2BAA2B,CAAA;AAAA,EAC1C;AAEA,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,OAAA,CAAQ,KAAK,SAAS,CAAA;AAAA,EACxB;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;;;;"}

package/dist/components/checkbox/style.css

@@ -0,0 +1,135 @@
+/**
+ * Checkbox 组件样式
+ * 使用 CSS 变量和 BEM 命名规范
+ */
+
+/* 容器 */
+.css-checkbox {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-normal);
+  cursor: pointer;
+  user-select: none;
+  color: var(--color-dark);
+  position: relative;
+}
+
+.css-checkbox-group {
+  display: inline-flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.css-checkbox-group--vertical {
+  flex-direction: column;
+  gap: 12px;
+}
+
+.css-checkbox-group-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.css-checkbox-group-field__label {
+  color: var(--color-dark);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.css-checkbox-group--disabled {
+  pointer-events: none;
+}
+
+.css-checkbox-group--error .css-checkbox {
+  color: var(--color-error);
+}
+
+.css-checkbox-group--error .css-checkbox .css-checkbox__indicator {
+  border-color: var(--color-error);
+}
+
+/* 隐藏原生 checkbox */
+.css-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+
+/* 自定义复选框指示器 */
+.css-checkbox__indicator {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  background-color: var(--color-background);
+  border: 2px solid var(--color-dark-03);
+  border-radius: var(--radius-sm);
+  margin-right: var(--spacing-2);
+  transition: all var(--transition-duration-200) var(--transition-timing);
+  box-sizing: border-box;
+}
+
+/* 选中状态 */
+.css-checkbox__input:checked + .css-checkbox__indicator {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+/* 选中时的对勾图标 */
+.css-checkbox__icon {
+  width: 100%;
+  height: 100%;
+  color: #ffffff;
+  pointer-events: none;
+}
+
+/* 禁用状态 */
+.css-checkbox--disabled {
+  cursor: not-allowed;
+  color: var(--color-dark-03);
+  pointer-events: none;
+}
+
+.css-checkbox--disabled .css-checkbox__indicator {
+  background-color: var(--color-dark-01);
+  border-color: var(--color-dark-03);
+}
+
+.css-checkbox--disabled .css-checkbox__input:checked + .css-checkbox__indicator {
+  background-color: var(--color-dark-03);
+  border-color: var(--color-dark-03);
+}
+
+.css-checkbox--disabled .css-checkbox__icon {
+  color: var(--color-background);
+}
+
+/* 错误状态 */
+.css-checkbox--error {
+  color: var(--color-error);
+}
+
+.css-checkbox--error .css-checkbox__indicator {
+  border-color: var(--color-error);
+}
+
+.css-checkbox--error .css-checkbox__input:checked + .css-checkbox__indicator {
+  background-color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+/* 焦点样式 (可访问性) */
+.css-checkbox__input:focus-visible + .css-checkbox__indicator {
+  box-shadow:
+    0 0 0 2px var(--color-background),
+    0 0 0 4px var(--color-primary);
+}