@cssui/react 1.0.0 → 1.0.2

package/dist/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-export { Checkbox } from '@cssui/adapter-react';
-export { CheckboxGroup } from '@cssui/adapter-react';
-export type { CheckboxProps, CheckboxGroupOption, CheckboxGroupProps } from '@cssui/adapter-react';
+export { Checkbox } from '../adapter-react/index';
+export { CheckboxGroup } from '../adapter-react/index';
+export type { CheckboxProps, CheckboxGroupOption, CheckboxGroupProps } from '../adapter-react/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/checkbox/index.js

@@ -1,2 +1,34 @@
-export { Checkbox } from '@cssui/adapter-react';
-export { CheckboxGroup } from '@cssui/adapter-react';
+import 'react';
+import '../adapter-react/components/button/Button.js';
+import '../adapter-react/components/input/Input.js';
+export { Checkbox } from '../adapter-react/components/checkbox/Checkbox.js';
+export { CheckboxGroup } from '../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';
+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/checkbox/index.js.map

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

package/dist/checkbox/style.css

@@ -1 +1,135 @@
-@import '@cssui/components/checkbox/style.css';
+/**
+ * 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);
+}

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

@@ -0,0 +1,61 @@
+/**
+ * Breadcrumb 面包屑组件 - 框架无关逻辑
+ */
+export interface BreadcrumbItem {
+    /** 唯一标识 */
+    key?: string | number;
+    /** 显示文字 */
+    label?: string;
+    /** 链接地址 */
+    href?: string;
+    /** 图标名称 */
+    icon?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否为当前页 */
+    current?: boolean;
+    /** 无文字时的可访问名称 */
+    ariaLabel?: string;
+}
+export interface BreadcrumbProps {
+    /** 面包屑项 */
+    items: BreadcrumbItem[];
+    /** 自定义类名 */
+    className?: string;
+    /** 桌面端最多显示多少项，超过后折叠 */
+    maxItems?: number;
+    /** 桌面端折叠前保留的前置项数量 */
+    itemsBeforeCollapse?: number;
+    /** 桌面端折叠后保留的末尾项数量 */
+    itemsAfterCollapse?: number;
+    /** 移动端最多显示多少项，超过后折叠 */
+    mobileMaxItems?: number;
+    /** 移动端折叠前保留的前置项数量 */
+    mobileItemsBeforeCollapse?: number;
+    /** 移动端折叠后保留的末尾项数量 */
+    mobileItemsAfterCollapse?: number;
+    /** 折叠节点是否高亮 */
+    ellipsisActive?: boolean;
+    /** 分隔符图标 */
+    separatorIcon?: string;
+}
+export interface BreadcrumbDisplayNodeItem {
+    type: 'item';
+    item: BreadcrumbItem;
+    index: number;
+    key: string;
+}
+export interface BreadcrumbDisplayNodeEllipsis {
+    type: 'ellipsis';
+    key: string;
+    items: BreadcrumbDisplayNodeItem[];
+}
+export type BreadcrumbDisplayNode = BreadcrumbDisplayNodeItem | BreadcrumbDisplayNodeEllipsis;
+export declare function getBreadcrumbClassNames(props?: Pick<BreadcrumbProps, 'className'>): string;
+export declare function getBreadcrumbCurrentIndex(items: BreadcrumbItem[]): number;
+export declare function getBreadcrumbDisplayItems(items: BreadcrumbItem[], options?: {
+    maxItems?: number;
+    itemsBeforeCollapse?: number;
+    itemsAfterCollapse?: number;
+}): BreadcrumbDisplayNode[];
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../breadcrumb/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,cAAc;IAC7B,WAAW;IACX,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW;IACX,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,YAAY;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qBAAqB;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,qBAAqB;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,uBAAuB;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qBAAqB;IACrB,yBAAyB,CAAC,EAAE,MAAM,CAAA;IAClC,qBAAqB;IACrB,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,eAAe;IACf,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,cAAc,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,UAAU,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,yBAAyB,EAAE,CAAA;CACnC;AAED,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG,6BAA6B,CAAA;AAE7F,wBAAgB,uBAAuB,CAAC,KAAK,GAAE,IAAI,CAAC,eAAe,EAAE,WAAW,CAAM,GAAG,MAAM,CAQ9F;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,MAAM,CAGzE;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,cAAc,EAAE,EACvB,OAAO,GAAE;IACP,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAA;CACvB,GACL,qBAAqB,EAAE,CAkCzB"}

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,49 @@
+function getBreadcrumbClassNames(props = {}) {
+  const classes = ["css-breadcrumb"];
+  if (props.className) {
+    classes.push(props.className);
+  }
+  return classes.join(" ");
+}
+function getBreadcrumbCurrentIndex(items) {
+  const currentIndex = items.findIndex((item) => item.current);
+  return currentIndex >= 0 ? currentIndex : Math.max(items.length - 1, 0);
+}
+function getBreadcrumbDisplayItems(items, options = {}) {
+  const { maxItems = 6, itemsBeforeCollapse = 1, itemsAfterCollapse = 4 } = options;
+  if (items.length === 0) {
+    return [];
+  }
+  if (items.length <= maxItems) {
+    return items.map((item, index) => createItemNode(item, index));
+  }
+  const beforeCount = Math.max(0, itemsBeforeCollapse);
+  const afterCount = Math.max(1, itemsAfterCollapse);
+  if (beforeCount + afterCount >= items.length) {
+    return items.map((item, index) => createItemNode(item, index));
+  }
+  const head = items.slice(0, beforeCount).map((item, index) => createItemNode(item, index));
+  const tailStart = Math.max(items.length - afterCount, beforeCount);
+  const hidden = items.slice(beforeCount, tailStart).map((item, index) => createItemNode(item, beforeCount + index));
+  const tail = items.slice(tailStart).map((item, index) => createItemNode(item, tailStart + index));
+  return [
+    ...head,
+    {
+      type: "ellipsis",
+      key: `breadcrumb-ellipsis-${beforeCount}-${afterCount}-${items.length}`,
+      items: hidden
+    },
+    ...tail
+  ];
+}
+function createItemNode(item, index) {
+  return {
+    type: "item",
+    item,
+    index,
+    key: item.key != null ? String(item.key) : `breadcrumb-item-${index}`
+  };
+}
+
+export { getBreadcrumbClassNames, getBreadcrumbCurrentIndex, getBreadcrumbDisplayItems };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/breadcrumb/index.ts"],"sourcesContent":["/**\r\n * Breadcrumb 面包屑组件 - 框架无关逻辑\r\n */\r\n\r\nexport interface BreadcrumbItem {\r\n  /** 唯一标识 */\r\n  key?: string | number\r\n  /** 显示文字 */\r\n  label?: string\r\n  /** 链接地址 */\r\n  href?: string\r\n  /** 图标名称 */\r\n  icon?: string\r\n  /** 是否禁用 */\r\n  disabled?: boolean\r\n  /** 是否为当前页 */\r\n  current?: boolean\r\n  /** 无文字时的可访问名称 */\r\n  ariaLabel?: string\r\n}\r\n\r\nexport interface BreadcrumbProps {\r\n  /** 面包屑项 */\r\n  items: BreadcrumbItem[]\r\n  /** 自定义类名 */\r\n  className?: string\r\n  /** 桌面端最多显示多少项，超过后折叠 */\r\n  maxItems?: number\r\n  /** 桌面端折叠前保留的前置项数量 */\r\n  itemsBeforeCollapse?: number\r\n  /** 桌面端折叠后保留的末尾项数量 */\r\n  itemsAfterCollapse?: number\r\n  /** 移动端最多显示多少项，超过后折叠 */\r\n  mobileMaxItems?: number\r\n  /** 移动端折叠前保留的前置项数量 */\r\n  mobileItemsBeforeCollapse?: number\r\n  /** 移动端折叠后保留的末尾项数量 */\r\n  mobileItemsAfterCollapse?: number\r\n  /** 折叠节点是否高亮 */\r\n  ellipsisActive?: boolean\r\n  /** 分隔符图标 */\r\n  separatorIcon?: string\r\n}\r\n\r\nexport interface BreadcrumbDisplayNodeItem {\r\n  type: 'item'\r\n  item: BreadcrumbItem\r\n  index: number\r\n  key: string\r\n}\r\n\r\nexport interface BreadcrumbDisplayNodeEllipsis {\r\n  type: 'ellipsis'\r\n  key: string\r\n  items: BreadcrumbDisplayNodeItem[]\r\n}\r\n\r\nexport type BreadcrumbDisplayNode = BreadcrumbDisplayNodeItem | BreadcrumbDisplayNodeEllipsis\r\n\r\nexport function getBreadcrumbClassNames(props: Pick<BreadcrumbProps, 'className'> = {}): string {\r\n  const classes = ['css-breadcrumb']\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 getBreadcrumbCurrentIndex(items: BreadcrumbItem[]): number {\r\n  const currentIndex = items.findIndex(item => item.current)\r\n  return currentIndex >= 0 ? currentIndex : Math.max(items.length - 1, 0)\r\n}\r\n\r\nexport function getBreadcrumbDisplayItems(\r\n  items: BreadcrumbItem[],\r\n  options: {\r\n    maxItems?: number\r\n    itemsBeforeCollapse?: number\r\n    itemsAfterCollapse?: number\r\n  } = {}\r\n): BreadcrumbDisplayNode[] {\r\n  const { maxItems = 6, itemsBeforeCollapse = 1, itemsAfterCollapse = 4 } = options\r\n\r\n  if (items.length === 0) {\r\n    return []\r\n  }\r\n\r\n  if (items.length <= maxItems) {\r\n    return items.map((item, index) => createItemNode(item, index))\r\n  }\r\n\r\n  const beforeCount = Math.max(0, itemsBeforeCollapse)\r\n  const afterCount = Math.max(1, itemsAfterCollapse)\r\n\r\n  if (beforeCount + afterCount >= items.length) {\r\n    return items.map((item, index) => createItemNode(item, index))\r\n  }\r\n\r\n  const head = items.slice(0, beforeCount).map((item, index) => createItemNode(item, index))\r\n  const tailStart = Math.max(items.length - afterCount, beforeCount)\r\n  const hidden = items\r\n    .slice(beforeCount, tailStart)\r\n    .map((item, index) => createItemNode(item, beforeCount + index))\r\n  const tail = items.slice(tailStart).map((item, index) => createItemNode(item, tailStart + index))\r\n\r\n  return [\r\n    ...head,\r\n    {\r\n      type: 'ellipsis',\r\n      key: `breadcrumb-ellipsis-${beforeCount}-${afterCount}-${items.length}`,\r\n      items: hidden,\r\n    },\r\n    ...tail,\r\n  ]\r\n}\r\n\r\nfunction createItemNode(item: BreadcrumbItem, index: number): BreadcrumbDisplayNodeItem {\r\n  return {\r\n    type: 'item',\r\n    item,\r\n    index,\r\n    key: item.key != null ? String(item.key) : `breadcrumb-item-${index}`,\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/components/breadcrumb/style.css

@@ -0,0 +1,219 @@
+/**
+ * Breadcrumb 面包屑组件样式
+ */
+
+.css-breadcrumb {
+  display: block;
+  width: 100%;
+  height: 36px;
+  padding: var(--spacing-2) var(--spacing-6);
+  color: var(--color-dark-04);
+  font-family: var(--font-family-base);
+}
+
+.css-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.css-breadcrumb__list--mobile {
+  display: none;
+}
+
+.css-breadcrumb__segment {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.css-breadcrumb__segment--ellipsis {
+  position: relative;
+}
+
+.css-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.css-breadcrumb__link,
+.css-breadcrumb__current,
+.css-breadcrumb__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: 14px;
+  line-height: 20px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.css-breadcrumb__link {
+  color: var(--color-dark-04);
+  cursor: pointer;
+  transition: color var(--transition-duration-150) var(--transition-timing);
+}
+
+.css-breadcrumb__link:hover {
+  color: var(--color-primary);
+}
+
+.css-breadcrumb__link--disabled {
+  color: var(--color-dark-03);
+  cursor: not-allowed;
+}
+
+.css-breadcrumb__current {
+  color: var(--color-dark-03);
+}
+
+.css-breadcrumb__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-primary);
+}
+
+.css-breadcrumb__icon + .css-breadcrumb__label {
+  margin-left: 4px;
+}
+
+.css-breadcrumb__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.css-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: 0 10px;
+  color: var(--color-primary);
+}
+
+.css-breadcrumb__ellipsis {
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  color: var(--color-dark-03);
+  transition:
+    color var(--transition-duration-150) var(--transition-timing),
+    background-color var(--transition-duration-150) var(--transition-timing);
+}
+
+.css-breadcrumb__ellipsis--active {
+  color: var(--color-dark);
+  background: var(--color-primary-golden-04);
+}
+
+.css-breadcrumb__ellipsis-trigger {
+  cursor: pointer;
+}
+
+.css-breadcrumb__dropdown {
+  position: absolute;
+  top: calc(100% + 12px);
+  left: -12px;
+  z-index: var(--z-popover);
+  min-width: 150px;
+  border: 1px solid var(--color-dark-02);
+  border-radius: 8px;
+  background: var(--color-background);
+  box-shadow: 0px 0px 8px 0px #9e9e9e52;
+  overflow: hidden;
+}
+
+.css-breadcrumb__dropdown-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.css-breadcrumb__dropdown-item {
+  border-bottom: 1px solid var(--color-dark-02);
+}
+
+.css-breadcrumb__dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.css-breadcrumb__dropdown-link,
+.css-breadcrumb__dropdown-current {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: var(--spacing-2);
+  box-sizing: border-box;
+  color: var(--color-dark);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-h4);
+  text-decoration: none;
+  background: var(--color-background);
+}
+
+.css-breadcrumb__dropdown-link:hover {
+  background: var(--color-primary-golden-05);
+}
+
+.css-breadcrumb__dropdown-link--disabled {
+  color: var(--color-dark-03);
+  cursor: not-allowed;
+}
+
+.css-breadcrumb__dropdown-current {
+  color: var(--color-dark-03);
+}
+
+@media (max-width: 767px) {
+  .css-breadcrumb .css-breadcrumb__list--desktop {
+    display: none;
+  }
+
+  .css-breadcrumb .css-breadcrumb__list--mobile {
+    display: flex;
+  }
+
+  .css-breadcrumb__link,
+  .css-breadcrumb__current,
+  .css-breadcrumb__ellipsis {
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  .css-breadcrumb__separator {
+    margin: 0 16px;
+  }
+
+  .css-breadcrumb__ellipsis {
+    width: 20px;
+    height: 20px;
+  }
+
+  .css-breadcrumb__dropdown {
+    min-width: 180px;
+    left: 0;
+  }
+
+  .css-breadcrumb__dropdown-link,
+  .css-breadcrumb__dropdown-current {
+    min-height: 52px;
+    padding: 14px 16px;
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-body);
+  }
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Button 组件 - 逻辑部分
+ */
+export interface ButtonProps {
+    size?: 'sm' | 'md' | 'lg';
+    type?: 'primary' | 'outline' | 'text';
+    disabled?: boolean;
+    htmlType?: 'button' | 'submit' | 'reset';
+    icon?: string;
+    onClick?: (event: Event) => void;
+    children?: any;
+    className?: string;
+}
+export declare function getButtonClassNames(props: ButtonProps): string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../button/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,WAAW;IAE1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAEzB,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;IAErC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IAExC,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEhC,QAAQ,CAAC,EAAE,GAAG,CAAA;IAEd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAGD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAU9D"}

package/dist/components/button/index.js

@@ -0,0 +1,11 @@
+function getButtonClassNames(props) {
+  const { size = "sm", type = "primary", disabled = false } = props;
+  const classes = ["css-button", `css-button--${size}`, `css-button--${type}`];
+  if (disabled) {
+    classes.push("css-button--disabled");
+  }
+  return classes.join(" ");
+}
+
+export { getButtonClassNames };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/button/index.ts"],"sourcesContent":["/**\n * Button 组件 - 逻辑部分\n */\n\nexport interface ButtonProps {\n  // 尺寸\n  size?: 'sm' | 'md' | 'lg'\n  // 按钮风格\n  type?: 'primary' | 'outline' | 'text'\n  // 是否禁用\n  disabled?: boolean\n  // HTML 类型\n  htmlType?: 'button' | 'submit' | 'reset'\n  // 图标\n  icon?: string\n  // 点击事件\n  onClick?: (event: Event) => void\n  // 子元素\n  children?: any\n  // 类名\n  className?: string\n}\n\n// 获取按钮类名\nexport function getButtonClassNames(props: ButtonProps): string {\n  const { size = 'sm', type = 'primary', disabled = false } = props\n\n  const classes = ['css-button', `css-button--${size}`, `css-button--${type}`]\n\n  if (disabled) {\n    classes.push('css-button--disabled')\n  }\n\n  return classes.join(' ')\n}\n"],"names":[],"mappings":"AAwBO,SAAS,oBAAoB,KAAA,EAA4B;AAC9D,EAAA,MAAM,EAAE,IAAA,GAAO,IAAA,EAAM,OAAO,SAAA,EAAW,QAAA,GAAW,OAAM,GAAI,KAAA;AAE5D,EAAA,MAAM,OAAA,GAAU,CAAC,YAAA,EAAc,CAAA,YAAA,EAAe,IAAI,CAAA,CAAA,EAAI,CAAA,YAAA,EAAe,IAAI,CAAA,CAAE,CAAA;AAE3E,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAA,CAAQ,KAAK,sBAAsB,CAAA;AAAA,EACrC;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;;;;"}