one-design-next 0.0.4-alpha.57

package/dist/tabs/style/index.css

@@ -0,0 +1,369 @@
+@charset "UTF-8";
+html {
+  /* 垂直标签项左侧内边距 */
+  --odn-vertical-item-padding-left: 15px;
+  /* 垂直标签项高度 */
+  --odn-vertical-item-height: 30px;
+  /* 垂直标签项字体大小 */
+  --odn-vertical-item-font-size: 18px;
+  /* 垂直标签项文字颜色 */
+  --odn-vertical-item-color: rgba(51, 55, 61, 0.58);
+  /* 垂直标签项图标填充颜色 */
+  --odn-vertical-item-svg-fill: rgba(62, 69, 82, 0.36);
+  /* 垂直标签项激活时文字描边宽度 */
+  --odn-vertical-item-text-stroke: 0.5px;
+  /* 垂直指示器宽度 */
+  --odn-vertical-indicator-width: 3px;
+  /* 垂直指示器背景颜色 */
+  --odn-vertical-indicator-bg: rgba(0, 0, 0, 0.05);
+  /* 垂直指示器圆角 */
+  --odn-vertical-indicator-border-radius: 8px;
+  /* 分隔符宽度 */
+  --odn-divider-divider-width: 1px;
+  /* 分隔符高度 */
+  --odn-divider-divider-height: 12px;
+  /* 分隔符背景颜色 */
+  --odn-divider-divider-bg: rgba(73, 90, 122, 0.12);
+  /* 分隔符标签项字体大小 */
+  --odn-divider-item-font-size: 14px;
+  /* 分隔符标签项文字颜色 */
+  --odn-divider-item-color: rgba(51, 55, 61, 0.58);
+  /* 分隔符标签项图标填充颜色 */
+  --odn-divider-item-svg-fill: rgba(62, 69, 82, 0.36);
+  /* 分隔符标签项激活时文字描边宽度 */
+  --odn-divider-item-text-stroke: 0.1px;
+  /* 按钮组边框宽度 */
+  --odn-button-group-border-width: 1px;
+  /* 按钮组边框颜色 */
+  --odn-button-group-border-color: rgba(73, 90, 122, 0.12);
+  /* 按钮组圆角 */
+  --odn-button-group-border-radius: 6px;
+  /* 按钮组项间隙 */
+  --odn-button-group-item-gap: 4px;
+  /* 按钮组项水平内边距 */
+  --odn-button-group-item-padding-horizontal: 12px;
+  /* 按钮组项高度 */
+  --odn-button-group-item-height: 36px;
+  /* 按钮组项字体大小 */
+  --odn-button-group-item-font-size: 14px;
+  /* 按钮组项文字颜色 */
+  --odn-button-group-item-color: rgba(51, 55, 61, 0.58);
+  /* 按钮组项图标填充颜色 */
+  --odn-button-group-item-svg-fill: rgba(62, 69, 82, 0.36);
+  /* 按钮组项激活时文字描边宽度 */
+  --odn-button-group-item-text-stroke: 0.1px;
+  /* 按钮组指示器宽度 */
+  --odn-button-group-indicator-width: 80px;
+  /* 按钮组指示器背景颜色 */
+  --odn-button-group-indicator-bg: rgba(41, 107, 239, 0.06);
+  /* 按钮组指示器轮廓宽度 */
+  --odn-button-group-indicator-outline-width: 2px;
+  /* 按钮组指示器轮廓颜色 */
+  --odn-button-group-indicator-outline-color: rgba(41, 107, 239, 0.8);
+  /* 按钮组指示器圆角 */
+  --odn-button-group-indicator-border-radius: 6px;
+  /* 标签项底部内边距 */
+  --odn-tabs-item-padding-bottom: 10px;
+  /* 标签项字体大小 */
+  --odn-tabs-item-font-size: 18px;
+  /* 标签项行高 */
+  --odn-tabs-item-line-height: 24px;
+  /* 标签项字重 */
+  --odn-tabs-item-font-weight: 600;
+  /* 标签指示器高度 */
+  --odn-tabs-indicator-height: 3px;
+  /* 标签指示器圆角 */
+  --odn-tabs-indicator-border-radius: 8px;
+  /* 标签项间隙 */
+  --odn-tag-item-gap: 2px;
+  /* 标签项水平内边距 */
+  --odn-tag-item-padding-horizontal: 12px;
+  /* 标签项高度 */
+  --odn-tag-item-height: 30px;
+  /* 标签项字体大小 */
+  --odn-tag-item-font-size: 14px;
+  /* 标签项文字颜色 */
+  --odn-tag-item-color: rgba(51, 55, 61, 0.58);
+  /* 标签项背景颜色 */
+  --odn-tag-item-bg: rgba(73, 90, 122, 0.03);
+  /* 标签项图标填充颜色 */
+  --odn-tag-item-svg-fill: rgba(62, 69, 82, 0.36);
+  /* 标签项圆角 */
+  --odn-tag-item-border-radius: 6px;
+  /* 标签项激活时背景颜色 */
+  --odn-tag-item-layer-bg: #eef3fe;
+}
+
+/* ==========================================================================
+    Vertical
+   ========================================================================== */
+[data-odn-vertical] {
+  position: relative;
+  width: fit-content;
+  white-space: nowrap;
+}
+
+[data-odn-vertical-item] {
+  display: flex;
+  align-items: center;
+  padding-left: var(--odn-vertical-item-padding-left);
+  height: var(--odn-vertical-item-height);
+  font-size: var(--odn-vertical-item-font-size);
+  color: var(--odn-vertical-item-color);
+  cursor: pointer;
+}
+
+[data-odn-vertical-item] svg {
+  flex: none;
+  fill: var(--odn-vertical-item-svg-fill);
+}
+
+[data-odn-vertical-item-layer=true] {
+  -webkit-text-stroke: var(--odn-vertical-item-text-stroke);
+  color: var(--odn-color-primary);
+}
+
+[data-odn-vertical-item-layer=true] svg {
+  fill: var(--odn-color-primary);
+}
+
+[data-odn-vertical-layer] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  will-change: clip-path;
+}
+
+[data-odn-vertical-indicator-wrapper] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--odn-vertical-indicator-width);
+  height: 100%;
+  background-color: var(--odn-vertical-indicator-bg);
+  border-radius: var(--odn-vertical-indicator-border-radius);
+}
+
+[data-odn-vertical-indicator] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--odn-color-primary);
+  border-radius: inherit;
+}
+
+/* ==========================================================================
+      Divider
+     ========================================================================== */
+[data-odn-divider] {
+  position: relative;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+}
+
+[data-odn-divider-divider] {
+  width: var(--odn-divider-divider-width);
+  height: var(--odn-divider-divider-height);
+  background-color: var(--odn-divider-divider-bg);
+}
+
+[data-odn-divider-layer] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  will-change: clip-path;
+}
+
+[data-odn-divider-item] {
+  font-size: var(--odn-divider-item-font-size);
+  cursor: pointer;
+  color: var(--odn-divider-item-color);
+}
+
+[data-odn-divider-item] svg {
+  flex: none;
+  fill: var(--odn-divider-item-svg-fill);
+}
+
+[data-odn-divider-item-layer] {
+  color: var(--odn-color-primary);
+  -webkit-text-stroke: var(--odn-divider-item-text-stroke);
+}
+
+[data-odn-divider-item-disabled=true] {
+  cursor: not-allowed;
+}
+
+/* ==========================================================================
+      ButtonGroup
+     ========================================================================== */
+[data-odn-button-group] {
+  position: relative;
+  width: fit-content;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  border: var(--odn-button-group-border-width) solid var(--odn-button-group-border-color);
+  border-radius: var(--odn-button-group-border-radius);
+}
+
+[data-odn-button-group-item] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--odn-button-group-item-gap);
+  padding: 0 var(--odn-button-group-item-padding-horizontal);
+  height: var(--odn-button-group-item-height);
+  font-size: var(--odn-button-group-item-font-size);
+  cursor: pointer;
+  color: var(--odn-button-group-item-color);
+}
+
+[data-odn-button-group-item] svg {
+  flex: none;
+  fill: var(--odn-button-group-item-svg-fill);
+}
+
+[data-odn-button-group-item-layer] svg {
+  fill: currentcolor;
+}
+
+[data-odn-button-group-layer] {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  will-change: clip-path;
+}
+
+[data-odn-button-group-item-layer] {
+  color: var(--odn-color-primary);
+  -webkit-text-stroke: var(--odn-button-group-item-text-stroke);
+}
+
+[data-odn-button-group-indicator] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--odn-button-group-indicator-width);
+  height: 100%;
+  background-color: var(--odn-button-group-indicator-bg);
+  background-color: color-mix(in srgb, var(--odn-color-primary) 6%, transparent);
+  outline: var(--odn-button-group-indicator-outline-width) solid var(--odn-button-group-indicator-outline-color);
+  outline: var(--odn-button-group-indicator-outline-width) solid color-mix(in srgb, var(--odn-color-primary) 80%, transparent);
+  border-radius: var(--odn-button-group-indicator-border-radius);
+}
+
+/* ==========================================================================
+      Tabs
+     ========================================================================== */
+[data-odn-tabs] {
+  position: relative;
+  white-space: nowrap;
+}
+
+[data-odn-tabs-base] {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+}
+
+[data-odn-tabs-layer] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  will-change: clip-path;
+}
+
+[data-odn-tabs-item] {
+  padding-bottom: var(--odn-tabs-item-padding-bottom);
+  font-size: var(--odn-tabs-item-font-size);
+  line-height: var(--odn-tabs-item-line-height);
+  font-weight: var(--odn-tabs-item-font-weight);
+  cursor: pointer;
+}
+
+[data-odn-tabs-item-layer] {
+  color: var(--odn-color-primary);
+}
+
+[data-odn-tabs-indicator] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: var(--odn-tabs-indicator-height);
+  background-color: var(--odn-color-primary);
+  border-radius: var(--odn-tabs-indicator-border-radius);
+  pointer-events: none;
+}
+
+/* ==========================================================================
+      Tag
+     ========================================================================== */
+[data-odn-tag] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  white-space: nowrap;
+}
+
+[data-odn-tag-layer] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  will-change: clip-path;
+}
+
+[data-odn-tag-item] {
+  display: flex;
+  align-items: center;
+  gap: var(--odn-tag-item-gap);
+  padding: 0 var(--odn-tag-item-padding-horizontal);
+  height: var(--odn-tag-item-height);
+  font-size: var(--odn-tag-item-font-size);
+  color: var(--odn-tag-item-color);
+  background-color: var(--odn-tag-item-bg);
+  cursor: pointer;
+  border-radius: var(--odn-tag-item-border-radius);
+}
+
+[data-odn-tag-item] svg {
+  flex: none;
+  fill: var(--odn-tag-item-svg-fill);
+}
+
+[data-odn-tag-item-layer] {
+  color: var(--odn-color-primary);
+  background-color: var(--odn-tag-item-layer-bg);
+}
+
+[data-odn-tag-item-layer] svg {
+  fill: currentcolor;
+}

package/dist/tabs/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/tabs/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/text-swap/index.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+import './style';
+export interface TextSwapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onDragCapture' | 'onDragStartCapture' | 'onDragEndCapture' | 'onAnimationStart' | 'onAnimationStartCapture'> {
+    /**
+     * @description 子元素
+     */
+    children: string | number;
+    /**
+     * @description 方向，默认从下至上
+     * @default 'up'
+     */
+    direction?: 'up' | 'down';
+}
+export interface TextSwapFlipProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @description 字符动画延迟(ms)
+     * @default 30
+     */
+    delay?: number;
+    /**
+     * @description 动画持续时间(ms)
+     * @default 700
+     */
+    duration?: number;
+    /**
+     * @description 原始文字
+     */
+    originalText: string;
+    /**
+     * @description 替换文字
+     */
+    swappedText: string;
+    /**
+     * @description 是否翻转
+     * @default false
+     */
+    flipped?: boolean;
+    /**
+     * @description 是否反向
+     * @default false
+     */
+    reversed?: boolean;
+    /**
+     * @description 模糊程度
+     * @default 3
+     */
+    blur?: number;
+    /**
+     * @description 偏移量
+     * @default 13
+     */
+    y?: number;
+}
+export declare const Flip: React.FC<TextSwapFlipProps>;
+declare const TextSwap: React.FC<TextSwapProps> & {
+    Flip: typeof Flip;
+};
+export default TextSwap;