@cssui/react 1.0.0 → 1.0.2

package/dist/breadcrumb/index.js

@@ -1 +1,34 @@
-export { Breadcrumb } 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';
+export { Breadcrumb } from '../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/breadcrumb/index.js.map

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

package/dist/breadcrumb/style.css

@@ -1 +1,219 @@
-@import '@cssui/components/breadcrumb/style.css';
+/**
+ * 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/button/index.d.ts

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

package/dist/button/index.js

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

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

package/dist/button/style.css

@@ -1 +1,151 @@
-@import '@cssui/components/button/style.css';
+/**
+ * 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/carousel/index.d.ts

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

package/dist/carousel/index.js

@@ -1 +1,34 @@
-export { Carousel } 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';
+export { Carousel } from '../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/carousel/index.js.map

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

package/dist/carousel/style.css

@@ -1 +1,196 @@
-@import '@cssui/components/carousel/style.css';
+.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;
+  }
+}