@cssui/react 1.0.0 → 1.0.2

package/dist/sidebar/style.css

@@ -1 +1,270 @@
-@import '@cssui/components/sidebar/style.css';
+.css-sidebar {
+  width: 280px;
+  max-width: 100%;
+  background: var(--color-background);
+  box-shadow: 0px 0px 8px 0px #9e9e9e52;
+}
+
+.css-sidebar--collapsed {
+  display: inline-flex;
+  width: auto;
+  align-items: flex-start;
+  gap: 12px;
+  background: transparent;
+  box-shadow: none;
+}
+
+.css-sidebar__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.css-sidebar--collapsed > .css-sidebar__list {
+  width: 72px;
+  flex-shrink: 0;
+  background: var(--color-background);
+  box-shadow: 0px 0px 8px 0px #9e9e9e52;
+}
+
+.css-sidebar__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: var(--color-dark-04);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body);
+  line-height: 28px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    color var(--transition-duration-150) var(--transition-timing),
+    background-color var(--transition-duration-150) var(--transition-timing);
+}
+
+.css-sidebar > .css-sidebar__list > li > .css-sidebar__item {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+.css-sidebar__item:hover:not(.css-sidebar__item--disabled) {
+  color: var(--color-primary);
+  background: rgba(158, 138, 87, 0.08);
+}
+
+.css-sidebar__item--active {
+  color: var(--color-primary);
+  background: rgba(158, 138, 87, 0.12);
+}
+
+.css-sidebar__item--disabled {
+  color: var(--color-dark-02);
+  cursor: not-allowed;
+}
+
+.css-sidebar__item-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.css-sidebar__item-icon,
+.css-sidebar__item-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.css-sidebar__item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.css-sidebar__item-arrow {
+  transition: transform var(--transition-duration-150) var(--transition-timing);
+}
+
+.css-sidebar__item--icon-only {
+  justify-content: center;
+  min-height: 52px;
+}
+
+.css-sidebar__item--icon-only.css-sidebar__item--expanded,
+.css-sidebar__item--icon-only.css-sidebar__item--active {
+  background: rgba(158, 138, 87, 0.12);
+}
+
+.css-sidebar__item--icon-only .css-sidebar__item-main {
+  justify-content: center;
+  width: 100%;
+}
+
+.css-sidebar__item--icon-only .css-sidebar__item-label,
+.css-sidebar__item--icon-only .css-sidebar__item-arrow {
+  display: none;
+}
+
+.css-sidebar__item-symbol {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+.css-sidebar__item--expanded .css-sidebar__item-arrow {
+  transform: rotate(90deg);
+}
+
+.css-sidebar__panel {
+  width: 280px;
+  min-width: 280px;
+  overflow: hidden;
+  background: var(--color-background);
+  box-shadow: 0px 0px 8px 0px #9e9e9e52;
+}
+
+.css-sidebar__panel-header {
+  border-bottom: 1px solid rgba(31, 31, 31, 0.12);
+}
+
+.css-sidebar__panel-header-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  color: var(--color-dark-04);
+  font-family: var(--font-family-base);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.css-sidebar__panel-header-button:hover {
+  color: var(--color-primary);
+}
+
+.css-sidebar__panel-header-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-dark-02);
+}
+
+.css-sidebar__panel-header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.css-sidebar__panel-body {
+  /* padding: 12px 0; */
+}
+
+.css-sidebar__panel-list,
+.css-sidebar__panel-sublist {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.css-sidebar__panel-group + .css-sidebar__panel-group,
+.css-sidebar__panel-group + .css-sidebar__panel-entry,
+.css-sidebar__panel-entry + .css-sidebar__panel-group,
+.css-sidebar__panel-entry + .css-sidebar__panel-entry {
+  margin-top: 2px;
+}
+.css-sidebar__panel-group .css-sidebar__panel-section {
+  line-height: 28px;
+}
+.css-sidebar__panel-section,
+.css-sidebar__panel-link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 16px;
+  border: none;
+  background: transparent;
+  color: var(--color-dark-04);
+  font-family: var(--font-family-base);
+  font-size: 14px;
+  line-height: 24px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.css-sidebar__panel-section {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.css-sidebar__panel-link {
+  font-weight: 400;
+  text-decoration: none;
+}
+
+.css-sidebar__panel-section:hover,
+.css-sidebar__panel-link:hover {
+  color: var(--color-primary);
+}
+
+.css-sidebar__panel-section--expanded {
+  color: var(--color-dark-04);
+}
+
+.css-sidebar__panel-link--active {
+  color: var(--color-primary);
+  font-weight: 700;
+}
+
+.css-sidebar__panel-link--nested {
+  padding-left: 28px;
+}
+
+.css-sidebar__panel-link--deep {
+  padding-left: 40px;
+}
+
+.css-sidebar__submenu {
+  margin: 4px 0 8px;
+  padding: 0;
+  list-style: none;
+}
+
+@media (max-width: 767px) {
+  .css-sidebar {
+    width: 100%;
+  }
+
+  .css-sidebar--collapsed {
+    display: flex;
+    width: 100%;
+  }
+
+  .css-sidebar--collapsed > .css-sidebar__list {
+    width: 64px;
+  }
+
+  .css-sidebar__panel {
+    min-width: 0;
+    width: calc(100vw - 108px);
+  }
+}

package/dist/slider/index.d.ts

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

package/dist/slider/index.js

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

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

package/dist/slider/style.css

@@ -1 +1,206 @@
-@import '@cssui/components/slider/style.css';
+/**
+ * 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/src/index.js

@@ -1,31 +1,33 @@
-/**
- * 周生生 UI React 组件库
- */
-export * from '../button';
-export * from '../input';
-export * from '../checkbox';
-export * from '../radio';
-export * from '../divider';
-export * from '../modal';
-export * from '../switch';
-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';
-export * from '../grid';
+export { default as Icon } from '../adapter-react/components/icon/Icon.js';
+export { RadioGroup } from '../adapter-react/components/radio/RadioGroup.js';
+export { Breadcrumb } from '../adapter-react/components/breadcrumb/Breadcrumb.js';
+export { Button } from '../adapter-react/components/button/Button.js';
+export { Carousel } from '../adapter-react/components/carousel/Carousel.js';
+export { Checkbox } from '../adapter-react/components/checkbox/Checkbox.js';
+export { CheckboxGroup } from '../adapter-react/components/checkbox/CheckboxGroup.js';
+export { DatePicker } from '../adapter-react/components/date-picker/DatePicker.js';
+export { Divider } from '../adapter-react/components/divider/Divider.js';
+export { FloatButton } from '../adapter-react/components/float-button/FloatButton.js';
+export { FloatButtonGroup } from '../adapter-react/components/float-button/FloatButtonGroup.js';
+export { Form } from '../adapter-react/components/form/Form.js';
+export { Grid } from '../adapter-react/components/grid/Grid.js';
+export { GridItem } from '../adapter-react/components/grid/GridItem.js';
+export { Input } from '../adapter-react/components/input/Input.js';
+export { InputBar } from '../adapter-react/components/input-bar/InputBar.js';
+export { InputNumber } from '../adapter-react/components/input-number/InputNumber.js';
+export { Modal } from '../adapter-react/components/modal/Modal.js';
+export { NavMenu } from '../adapter-react/components/nav-menu/NavMenu.js';
+export { Pagination } from '../adapter-react/components/pagination/Pagination.js';
+export { Radio } from '../adapter-react/components/radio/Radio.js';
+export { Select } from '../adapter-react/components/select/Select.js';
+export { Sidebar } from '../adapter-react/components/sidebar/Sidebar.js';
+export { Slider } from '../adapter-react/components/slider/Slider.js';
+export { Steps } from '../adapter-react/components/steps/Steps.js';
+export { Switch } from '../adapter-react/components/switch/Switch.js';
+export { Table } from '../adapter-react/components/table/Table.js';
+export { Tabs } from '../adapter-react/components/tabs/Tabs.js';
+export { TimePicker } from '../adapter-react/components/time-picker/TimePicker.js';
+export { Toast } from '../adapter-react/components/toast/Toast.js';
+export { Toolbars } from '../adapter-react/components/toolbars/Toolbar.js';
+export { Tooltip } from '../adapter-react/components/tooltip/Tooltip.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

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

package/dist/steps/index.d.ts

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

package/dist/steps/index.js

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

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