@cssui/react 1.0.0 → 1.0.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/toolbars/index.ts"],"sourcesContent":["/**\r\n * Toolbars 工具栏组件 - 逻辑部分\r\n */\r\n\r\nexport type ToolbarPosition = 'top' | 'bottom'\r\nexport type ToolbarType = 'primary' | 'secondary'\r\n\r\nexport interface ToolbarItem {\r\n  label: string\r\n  value: string\r\n  icon?: string\r\n  disabled?: boolean\r\n}\r\n\r\nexport interface ToolbarProps {\r\n  /** 工具栏位置：top（fixed 在顶部，line 在底部） | bottom（fixed 在底部，line 在顶部） */\r\n  position?: ToolbarPosition\r\n  /** 工具栏类型：primary（图标+文字，高 70） | secondary（仅文字，高 52） */\r\n  type?: ToolbarType\r\n  /** 选项数据 */\r\n  items?: ToolbarItem[]\r\n  /** 选中值 */\r\n  value?: string\r\n  /** 类名 */\r\n  className?: string\r\n  /** 变更事件 */\r\n  onChange?: (value: string, item: ToolbarItem) => void\r\n}\r\n\r\nexport function getToolbarClassNames(\r\n  props: Pick<ToolbarProps, 'position' | 'type' | 'className'>\r\n): string {\r\n  const { position = 'top', type = 'primary', className } = props\r\n  const classes = ['css-toolbar']\r\n\r\n  if (position === 'bottom') {\r\n    classes.push('css-toolbar--bottom')\r\n  } else {\r\n    classes.push('css-toolbar--top')\r\n  }\r\n\r\n  if (type === 'secondary') {\r\n    classes.push('css-toolbar--secondary')\r\n  } else {\r\n    classes.push('css-toolbar--primary')\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\r\nexport function getToolbarItemClassNames(props: {\r\n  selected?: boolean\r\n  disabled?: boolean\r\n}): string {\r\n  const { selected, disabled } = props\r\n  const classes = ['css-toolbar__item']\r\n\r\n  if (selected) {\r\n    classes.push('css-toolbar__item--selected')\r\n  }\r\n\r\n  if (disabled) {\r\n    classes.push('css-toolbar__item--disabled')\r\n  }\r\n\r\n  return classes.join(' ')\r\n}\r\n"],"names":[],"mappings":"AA6BO,SAAS,qBACd,KAAA,EACQ;AACR,EAAA,MAAM,EAAE,QAAA,GAAW,KAAA,EAAO,IAAA,GAAO,SAAA,EAAW,WAAU,GAAI,KAAA;AAC1D,EAAA,MAAM,OAAA,GAAU,CAAC,aAAa,CAAA;AAE9B,EAAA,IAAI,aAAa,QAAA,EAAU;AACzB,IAAA,OAAA,CAAQ,KAAK,qBAAqB,CAAA;AAAA,EACpC,CAAA,MAAO;AACL,IAAA,OAAA,CAAQ,KAAK,kBAAkB,CAAA;AAAA,EACjC;AAEA,EAAA,IAAI,SAAS,WAAA,EAAa;AACxB,IAAA,OAAA,CAAQ,KAAK,wBAAwB,CAAA;AAAA,EACvC,CAAA,MAAO;AACL,IAAA,OAAA,CAAQ,KAAK,sBAAsB,CAAA;AAAA,EACrC;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,yBAAyB,KAAA,EAG9B;AACT,EAAA,MAAM,EAAE,QAAA,EAAU,QAAA,EAAS,GAAI,KAAA;AAC/B,EAAA,MAAM,OAAA,GAAU,CAAC,mBAAmB,CAAA;AAEpC,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAA,CAAQ,KAAK,6BAA6B,CAAA;AAAA,EAC5C;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAA,CAAQ,KAAK,6BAA6B,CAAA;AAAA,EAC5C;AAEA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;;;;"}

package/dist/components/toolbars/style.css

@@ -0,0 +1,220 @@
+/**
+ * Toolbars 工具栏组件样式
+ */
+
+/* ========== 基础容器 ========== */
+
+.css-toolbar {
+  --toolbar-bg: var(--color-dark-01);
+  --toolbar-text-color: var(--color-dark-03);
+  --toolbar-text-active-color: var(--color-primary);
+  --toolbar-line-color: var(--color-primary);
+  position: fixed;
+  left: 0;
+  width: 100%;
+  height: 70px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: var(--toolbar-bg);
+  box-sizing: border-box;
+  z-index: var(--z-sticky, 1020);
+}
+
+.css-toolbar--top {
+  top: 0;
+}
+
+.css-toolbar--bottom {
+  bottom: 0;
+  flex-direction: column-reverse;
+}
+
+/* ========== Primary 模式（默认）：图标 + 文字上下排列 ========== */
+
+.css-toolbar--primary .css-toolbar__items {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+}
+
+.css-toolbar--primary .css-toolbar__item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  flex: 1;
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--toolbar-text-color);
+  font-family: var(--font-family-base);
+  font-size: 12px;
+  font-weight: var(--font-weight-regular);
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    color var(--transition-duration-150) var(--transition-timing),
+    background-color var(--transition-duration-150) var(--transition-timing);
+}
+
+.css-toolbar--primary
+  .css-toolbar__item:hover:not(.css-toolbar__item--selected):not(.css-toolbar__item--disabled) {
+  background: color-mix(in srgb, var(--color-primary) 6%, var(--toolbar-bg));
+}
+
+.css-toolbar--primary .css-toolbar__item--selected {
+  color: var(--toolbar-text-active-color);
+  font-weight: var(--font-weight-medium);
+}
+
+.css-toolbar--primary .css-toolbar__item--disabled {
+  color: var(--color-dark-03);
+  cursor: not-allowed;
+}
+
+.css-toolbar--primary .css-toolbar__item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.css-toolbar--primary .css-toolbar__item-label {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  overflow: visible;
+  text-overflow: ellipsis;
+  padding-bottom: 4px;
+}
+
+/* Primary 激活指示线：跟文字宽度一致 */
+
+.css-toolbar--primary .css-toolbar__item-label::after {
+  content: '';
+  position: absolute;
+  bottom: -16px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--toolbar-line-color);
+  transform: scaleX(0);
+  transition: transform var(--transition-duration-150) var(--transition-timing);
+}
+
+.css-toolbar--primary .css-toolbar__item--selected .css-toolbar__item-label::after {
+  transform: scaleX(1);
+}
+
+/* ========== Secondary 模式：仅文字 ========== */
+
+.css-toolbar--secondary {
+  height: 52px;
+}
+
+.css-toolbar--secondary .css-toolbar__items {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.css-toolbar--secondary .css-toolbar__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: 100%;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--toolbar-text-color);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-normal);
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    color var(--transition-duration-150) var(--transition-timing),
+    background-color var(--transition-duration-150) var(--transition-timing);
+}
+
+.css-toolbar--secondary
+  .css-toolbar__item:hover:not(.css-toolbar__item--selected):not(.css-toolbar__item--disabled) {
+  background: color-mix(in srgb, var(--color-primary) 6%, var(--toolbar-bg));
+}
+
+.css-toolbar--secondary .css-toolbar__item--selected {
+  color: var(--toolbar-text-active-color);
+  font-weight: var(--font-weight-medium);
+}
+
+.css-toolbar--secondary .css-toolbar__item--disabled {
+  color: var(--color-dark-03);
+  cursor: not-allowed;
+}
+
+/* Secondary 激活指示线：跟 tab 宽度一致（使用 left:0; right:0） */
+
+.css-toolbar--secondary .css-toolbar__item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--toolbar-line-color);
+  transform: scaleX(0);
+  transition: transform var(--transition-duration-150) var(--transition-timing);
+}
+
+.css-toolbar--secondary .css-toolbar__item--selected::after {
+  transform: scaleX(1);
+}
+
+/* ========== Bottom 模式：指示线在上方 ========== */
+
+.css-toolbar--bottom.css-toolbar--primary .css-toolbar__item-label::after {
+  display: none;
+}
+
+.css-toolbar--bottom.css-toolbar--primary .css-toolbar__item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--toolbar-line-color);
+  transform: scaleX(0);
+  transition: transform var(--transition-duration-150) var(--transition-timing);
+}
+
+.css-toolbar--bottom.css-toolbar--primary .css-toolbar__item--selected::after {
+  transform: scaleX(1);
+}
+
+.css-toolbar--bottom.css-toolbar--secondary .css-toolbar__item::after {
+  bottom: auto;
+  top: 0;
+}
+
+/* ========== Focus 样式 ========== */
+
+.css-toolbar__item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px rgba(158, 138, 87, 0.3);
+}

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

@@ -0,0 +1,31 @@
+/**
+ * Tooltip 组件 - 框架无关逻辑
+ */
+export interface TooltipProps {
+    /** 提示内容 */
+    content?: string;
+    /** 标题（弹层模式下使用） */
+    title?: string;
+    /** 显示位置 */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** 是否显示 */
+    visible?: boolean;
+    /** 触发方式 */
+    trigger?: 'hover' | 'click';
+    /** 延迟显示（毫秒） */
+    showDelay?: number;
+    /** 延迟隐藏（毫秒） */
+    hideDelay?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 最大宽度（弹层模式），默认 280px */
+    maxWidth?: number | string;
+    /** 是否使用弹层模式（白底标题+内容+关闭按钮） */
+    rich?: boolean;
+    /** 类名 */
+    className?: string;
+    /** 关闭回调（弹层模式） */
+    onClose?: () => void;
+}
+export declare function getTooltipClassNames(props: TooltipProps): string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../tooltip/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,YAAY;IAC3B,WAAW;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC/C,WAAW;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAC3B,eAAe;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS;IACT,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CAiBhE"}

package/dist/components/tooltip/index.js

@@ -0,0 +1,17 @@
+function getTooltipClassNames(props) {
+  const { placement = "top", rich = false } = props;
+  const classes = ["css-tooltip"];
+  if (rich) {
+    classes.push("css-tooltip--rich");
+  }
+  if (!rich) {
+    classes.push(`css-tooltip--${placement}`);
+  }
+  if (props.className) {
+    classes.push(props.className);
+  }
+  return classes.join(" ");
+}
+
+export { getTooltipClassNames };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/tooltip/index.ts"],"sourcesContent":["/**\n * Tooltip 组件 - 框架无关逻辑\n */\n\nexport interface TooltipProps {\n  /** 提示内容 */\n  content?: string\n  /** 标题（弹层模式下使用） */\n  title?: string\n  /** 显示位置 */\n  placement?: 'top' | 'bottom' | 'left' | 'right'\n  /** 是否显示 */\n  visible?: boolean\n  /** 触发方式 */\n  trigger?: 'hover' | 'click'\n  /** 延迟显示（毫秒） */\n  showDelay?: number\n  /** 延迟隐藏（毫秒） */\n  hideDelay?: number\n  /** 是否禁用 */\n  disabled?: boolean\n  /** 最大宽度（弹层模式），默认 280px */\n  maxWidth?: number | string\n  /** 是否使用弹层模式（白底标题+内容+关闭按钮） */\n  rich?: boolean\n  /** 类名 */\n  className?: string\n  /** 关闭回调（弹层模式） */\n  onClose?: () => void\n}\n\nexport function getTooltipClassNames(props: TooltipProps): string {\n  const { placement = 'top', rich = false } = props\n  const classes = ['css-tooltip']\n\n  if (rich) {\n    classes.push('css-tooltip--rich')\n  }\n\n  if (!rich) {\n    classes.push(`css-tooltip--${placement}`)\n  }\n\n  if (props.className) {\n    classes.push(props.className)\n  }\n\n  return classes.join(' ')\n}\n"],"names":[],"mappings":"AA+BO,SAAS,qBAAqB,KAAA,EAA6B;AAChE,EAAA,MAAM,EAAE,SAAA,GAAY,KAAA,EAAO,IAAA,GAAO,OAAM,GAAI,KAAA;AAC5C,EAAA,MAAM,OAAA,GAAU,CAAC,aAAa,CAAA;AAE9B,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,OAAA,CAAQ,KAAK,mBAAmB,CAAA;AAAA,EAClC;AAEA,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAA,CAAQ,IAAA,CAAK,CAAA,aAAA,EAAgB,SAAS,CAAA,CAAE,CAAA;AAAA,EAC1C;AAEA,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;;;;"}

package/dist/components/tooltip/style.css

@@ -0,0 +1,138 @@
+/* Tooltip Component Styles */
+
+/* ========== 基础提示（轻量 tooltip） ========== */
+
+.css-tooltip {
+  position: fixed;
+  z-index: var(--z-tooltip, 1070);
+  box-sizing: border-box;
+  pointer-events: auto;
+  white-space: nowrap;
+}
+
+/* 主色调底 + 白字 */
+.css-tooltip__inner {
+  background-color: var(--color-primary-golden-02);
+  color: #ffffff;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-body);
+  border-radius: var(--radius-base);
+  padding: var(--spacing-2);
+  text-align: center;
+}
+
+/* 箭头 */
+.css-tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* top - arrow at bottom */
+.css-tooltip--top .css-tooltip__arrow {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px 6px 0;
+  border-color: var(--color-primary-golden-02) transparent transparent transparent;
+}
+
+/* bottom - arrow at top */
+.css-tooltip--bottom .css-tooltip__arrow {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 6px 6px;
+  border-color: transparent transparent var(--color-primary-golden-02) transparent;
+}
+
+/* left - arrow at right */
+.css-tooltip--left .css-tooltip__arrow {
+  right: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent var(--color-primary-golden-02);
+}
+
+/* right - arrow at left */
+.css-tooltip--right .css-tooltip__arrow {
+  left: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 6px 6px 6px 0;
+  border-color: transparent var(--color-primary-golden-02) transparent transparent;
+}
+
+/* ========== 弹层模式（白底 + 标题 + 内容 + 关闭按钮） ========== */
+
+.css-tooltip--rich {
+  white-space: normal;
+  bottom: auto;
+  left: auto;
+  right: auto;
+  top: auto;
+  transform: none;
+  padding: 0;
+}
+
+.css-tooltip--rich .css-tooltip__inner {
+  background-color: #ffffff;
+  color: var(--color-dark);
+  padding: var(--spacing-5);
+  box-shadow: 0px 4px 4px 0px #33333340;
+  white-space: normal;
+  text-align: left;
+}
+
+.css-tooltip--rich .css-tooltip__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-2);
+}
+
+.css-tooltip--rich .css-tooltip__title {
+  font-size: 16px;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-dark);
+  line-height: var(--line-height-tight);
+  flex: 1;
+}
+
+.css-tooltip--rich .css-tooltip__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  margin-left: var(--spacing-2);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--color-dark-03);
+  padding: 0;
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-duration-150, 150ms)
+    var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.css-tooltip--rich .css-tooltip__close:hover {
+  color: var(--color-dark);
+}
+
+.css-tooltip--rich .css-tooltip__close svg {
+  width: 16px;
+  height: 16px;
+}
+
+.css-tooltip--rich .css-tooltip__body {
+  font-size: 14px;
+  font-weight: var(--font-weight-regular);
+  color: var(--color-dark);
+  line-height: var(--line-height-body);
+}

package/dist/date-picker/index.d.ts

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

package/dist/date-picker/index.js

@@ -1 +1,34 @@
-export { DatePicker } 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';
+import '../adapter-react/components/steps/Steps.js';
+import '../adapter-react/components/toolbars/Toolbar.js';
+import '../adapter-react/components/input-bar/InputBar.js';
+export { DatePicker } from '../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/date-picker/index.js.map

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