one-design-next 0.0.4-alpha.100

package/dist/input/style/index.css

@@ -0,0 +1,244 @@
+html {
+  --odn-input-padding-block-medium: 6px;
+  --odn-input-padding-inline-medium: 12px;
+  --odn-input-font-size-medium: 14px;
+  --odn-input-line-height-medium: 1.5714285714285714;
+  --odn-input-border-radius-medium: 6px;
+  --odn-input-icon-size-medium: 16px;
+  --odn-input-icon-margin-inline-medium: 4px;
+  --odn-input-padding-block-small: 4px;
+  --odn-input-padding-inline-small: 12px;
+  --odn-input-font-size-small: 12px;
+  --odn-input-line-height-small: 1.6666666666666667;
+  --odn-input-border-radius-small: 6px;
+  --odn-input-icon-size-small: 14px;
+  --odn-input-icon-margin-inline-small: 4px;
+  --odn-input-padding-block-large: 8px;
+  --odn-input-padding-inline-large: 12px;
+  --odn-input-font-size-large: 16px;
+  --odn-input-line-height-large: 1.5;
+  --odn-input-border-radius-large: 6px;
+  --odn-input-icon-size-large: 18px;
+  --odn-input-icon-margin-inline-large: 4px;
+  --odn-input-bg-normal: #fff;
+  --odn-input-bg-normal-hover: var(--odn-color-black-1);
+  --odn-input-bg-normal-focus: #fff;
+  --odn-input-bg-danger: #fff;
+  --odn-input-bg-danger-hover: var(--odn-color-black-1);
+  --odn-input-bg-danger-focus: #fff;
+  --odn-input-bg-disabled: var(--odn-color-black-3);
+  --odn-input-color-normal: var(--odn-color-black-12);
+  --odn-input-color-normal-hover: var(--odn-color-black-12);
+  --odn-input-color-normal-focus: var(--odn-color-black-12);
+  --odn-input-color-danger: var(--odn-color-black-12);
+  --odn-input-color-danger-hover: var(--odn-color-black-12);
+  --odn-input-color-danger-focus: var(--odn-color-black-12);
+  --odn-input-color-disabled: var(--odn-color-black-8);
+  --odn-input-border-width: 1px;
+  --odn-input-border-style: solid;
+  --odn-input-border-normal: var(--odn-color-black-6);
+  --odn-input-border-normal-hover: var(--odn-color-black-7);
+  --odn-input-border-normal-focus: var(--odn-color-blue-6);
+  --odn-input-border-danger: var(--odn-color-red-6);
+  --odn-input-border-danger-hover: var(--odn-color-red-6);
+  --odn-input-border-danger-focus: var(--odn-color-red-6);
+  --odn-input-border-disabled: var(--odn-color-black-6);
+  --odn-input-shadow-normal: none;
+  --odn-input-shadow-normal-hover: none;
+  --odn-input-shadow-normal-focus: 0 0 0 2px var(--odn-color-blue-2);
+  --odn-input-shadow-danger: none;
+  --odn-input-shadow-danger-hover: none;
+  --odn-input-shadow-danger-focus: 0 0 0 2px var(--odn-color-red-2);
+  --odn-input-shadow-disabled: none;
+}
+
+@layer components {
+  [data-odn-input] {
+    list-style: none;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+    transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-input-el] {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    font-size: inherit;
+    border: none;
+    border-radius: 0;
+    outline: none;
+    background: transparent !important;
+    color: inherit;
+  }
+  [data-odn-input-el]::-webkit-search-decoration, [data-odn-input-el]::-webkit-search-cancel-button {
+    appearance: none;
+  }
+  [data-odn-input-size=small] {
+    font-size: var(--odn-input-font-size-small);
+    line-height: var(--odn-input-line-height-small);
+    border-radius: var(--odn-input-border-radius-small);
+  }
+  [data-odn-input-size=small] [data-odn-input-left-element] > svg:only-child {
+    margin-inline-end: var(--odn-input-icon-margin-inline-small);
+    width: var(--odn-input-icon-size-small);
+    height: var(--odn-input-icon-size-small);
+  }
+  [data-odn-input-size=small] [data-odn-input-right-element] > svg:only-child {
+    margin-inline-start: var(--odn-input-icon-margin-inline-small);
+    width: var(--odn-input-icon-size-small);
+    height: var(--odn-input-icon-size-small);
+  }
+  [data-odn-input-size=small]:not([data-odn-input-textarea=true]) {
+    padding: var(--odn-input-padding-block-small) var(--odn-input-padding-inline-small);
+  }
+  [data-odn-input-size=small][data-odn-input-textarea=true] [data-odn-input-el] {
+    padding: var(--odn-input-padding-block-small) var(--odn-input-padding-inline-small);
+  }
+  [data-odn-input-size=medium] {
+    font-size: var(--odn-input-font-size-medium);
+    line-height: var(--odn-input-line-height-medium);
+    border-radius: var(--odn-input-border-radius-medium);
+  }
+  [data-odn-input-size=medium] [data-odn-input-left-element] > svg:only-child {
+    margin-inline-end: var(--odn-input-icon-margin-inline-medium);
+    width: var(--odn-input-icon-size-medium);
+    height: var(--odn-input-icon-size-medium);
+  }
+  [data-odn-input-size=medium] [data-odn-input-right-element] > svg:only-child {
+    margin-inline-start: var(--odn-input-icon-margin-inline-medium);
+    width: var(--odn-input-icon-size-medium);
+    height: var(--odn-input-icon-size-medium);
+  }
+  [data-odn-input-size=medium]:not([data-odn-input-textarea=true]) {
+    padding: var(--odn-input-padding-block-medium) var(--odn-input-padding-inline-medium);
+  }
+  [data-odn-input-size=medium][data-odn-input-textarea=true] [data-odn-input-el] {
+    padding: var(--odn-input-padding-block-medium) var(--odn-input-padding-inline-medium);
+  }
+  [data-odn-input-size=large] {
+    font-size: var(--odn-input-font-size-large);
+    line-height: var(--odn-input-line-height-large);
+    border-radius: var(--odn-input-border-radius-large);
+  }
+  [data-odn-input-size=large] [data-odn-input-left-element] > svg:only-child {
+    margin-inline-end: var(--odn-input-icon-margin-inline-large);
+    width: var(--odn-input-icon-size-large);
+    height: var(--odn-input-icon-size-large);
+  }
+  [data-odn-input-size=large] [data-odn-input-right-element] > svg:only-child {
+    margin-inline-start: var(--odn-input-icon-margin-inline-large);
+    width: var(--odn-input-icon-size-large);
+    height: var(--odn-input-icon-size-large);
+  }
+  [data-odn-input-size=large]:not([data-odn-input-textarea=true]) {
+    padding: var(--odn-input-padding-block-large) var(--odn-input-padding-inline-large);
+  }
+  [data-odn-input-size=large][data-odn-input-textarea=true] [data-odn-input-el] {
+    padding: var(--odn-input-padding-block-large) var(--odn-input-padding-inline-large);
+  }
+  [data-odn-input-intent=normal]:not([data-odn-input-disabled=true]) {
+    color: var(--odn-input-color-normal);
+    background: var(--odn-input-bg-normal);
+    border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal);
+    box-shadow: var(--odn-input-shadow-normal);
+  }
+  [data-odn-input-intent=normal]:not([data-odn-input-disabled=true]):not([data-odn-input-light=true]):hover {
+    color: var(--odn-input-color-normal-hover);
+    background: var(--odn-input-bg-normal-hover);
+    border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal-hover);
+    box-shadow: var(--odn-input-shadow-normal-hover);
+  }
+  [data-odn-input-intent=normal]:not([data-odn-input-disabled=true]):not([data-odn-input-light=true])[data-odn-input-focused=true] {
+    color: var(--odn-input-color-normal-focus);
+    background: var(--odn-input-bg-normal-focus);
+    border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal-focus);
+    box-shadow: var(--odn-input-shadow-normal-focus);
+  }
+  [data-odn-input-intent=danger]:not([data-odn-input-disabled=true]) {
+    color: var(--odn-input-color-danger);
+    background: var(--odn-input-bg-danger);
+    border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-danger);
+    box-shadow: var(--odn-input-shadow-danger);
+  }
+  [data-odn-input-intent=danger]:not([data-odn-input-disabled=true]):not([data-odn-input-light=true]):hover {
+    color: var(--odn-input-color-danger-hover);
+    background: var(--odn-input-bg-danger-hover);
+    border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-danger-hover);
+    box-shadow: var(--odn-input-shadow-danger-hover);
+  }
+  [data-odn-input-intent=danger]:not([data-odn-input-disabled=true]):not([data-odn-input-light=true])[data-odn-input-focused=true] {
+    color: var(--odn-input-color-danger-focus);
+    background: var(--odn-input-bg-danger-focus);
+    border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-danger-focus);
+    box-shadow: var(--odn-input-shadow-danger-focus);
+  }
+  [data-odn-input-disabled=true] {
+    color: var(--odn-input-color-disabled);
+    background: var(--odn-input-bg-disabled);
+    border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-disabled);
+    box-shadow: var(--odn-input-shadow-disabled);
+    cursor: not-allowed;
+  }
+  [data-odn-input-disabled=true] [data-odn-input-el] {
+    cursor: not-allowed;
+  }
+  [data-odn-input-disabled=true] [data-odn-input-clear-icon] {
+    pointer-events: none;
+  }
+  [data-odn-input-over-limit=true] [data-odn-input-count] {
+    color: var(--odn-color-red-6);
+  }
+  [data-odn-input-light=true]:not([data-odn-input-disabled=true]) {
+    background: transparent;
+    border: var(--odn-input-border-width) var(--odn-input-border-style) transparent;
+    box-shadow: none;
+  }
+  [data-odn-input-left-element],
+  [data-odn-input-right-element] {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  [data-odn-input-left-element] [data-odn-icon],
+  [data-odn-input-right-element] [data-odn-icon] {
+    color: var(--odn-color-black-9);
+  }
+  [data-odn-input-right-element] [data-odn-input-clear-icon] {
+    color: var(--odn-color-black-7);
+    cursor: pointer;
+  }
+  [data-odn-input-right-element] [data-odn-input-clear-icon]:hover {
+    color: var(--odn-color-black-8);
+  }
+  [data-odn-input-count] {
+    margin-left: 4px;
+    color: var(--odn-color-black-9);
+    font-size: 12px;
+    white-space: nowrap;
+  }
+  [data-odn-input-textarea] {
+    flex-direction: column;
+  }
+  [data-odn-input-textarea] [data-odn-input-el] {
+    resize: none;
+    transition: height 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-input-textarea]:not([data-odn-input-textarea-auto-size=true]) {
+    flex: 1;
+  }
+  [data-odn-input-textarea] [data-odn-input-right-element] {
+    display: flex;
+    padding-right: 12px;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-end;
+    height: 28px;
+  }
+  [data-odn-input-textarea] [data-odn-input-top-element],
+  [data-odn-input-textarea] [data-odn-input-bottom-element] {
+    width: 100%;
+  }
+}

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

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

package/dist/input/style/index.js

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

package/dist/input-number/index.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { InputProps, InputRef } from '../input';
+import './style';
+export interface InputNumberProps extends Omit<InputProps, 'value' | 'onChange'> {
+    /**
+     * @description 值
+     * @default undefined
+     */
+    value?: number | null;
+    /**
+     * @description 默认值
+     * @default undefined
+     */
+    defaultValue?: number;
+    /**
+     * @description 最小值
+     * @default 0
+     */
+    min?: number;
+    /**
+     * @description 最大值
+     * @default undefined
+     */
+    max?: number;
+    /**
+     * @description 步长
+     * @default 1
+     */
+    step?: number;
+    /**
+     * @description 变化时回调
+     */
+    onChange?: (value: number | null) => void;
+    /**
+     * @description 是否显示上下按钮
+     * @default true
+     */
+    showButtons?: boolean;
+}
+declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<InputRef>>;
+export default InputNumber;