one-design-next 0.0.4-alpha.100

package/dist/avatar/primitive.js

@@ -0,0 +1,23 @@
+'use client';
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+var AvatarRoot = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Root, _extends({
+    ref: ref,
+    "data-slot": "avatar"
+  }, props));
+});
+AvatarRoot.displayName = 'AvatarRoot';
+function AvatarImage(props) {
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Image, _extends({
+    "data-slot": "avatar-image"
+  }, props));
+}
+function AvatarFallback(props) {
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Fallback, _extends({
+    "data-slot": "avatar-fallback"
+  }, props));
+}
+export { AvatarFallback, AvatarImage, AvatarRoot };

package/dist/avatar/style/index.css

@@ -0,0 +1,74 @@
+html {
+  --odn-avatar-size: 32px;
+}
+
+@layer components {
+  [data-odn-avatar] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    user-select: none;
+  }
+  [data-odn-avatar-shape=circle] {
+    border-radius: 100%;
+  }
+  [data-odn-avatar-shape=square] {
+    border-radius: 4px;
+  }
+  [data-odn-avatar-image] {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+    transition: 0.35s ease all;
+  }
+  [data-odn-avatar-fallback] {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--odn-color-black-6);
+    color: var(--odn-color-white);
+    font-size: 13px;
+    font-weight: 500;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+  [data-odn-avatar-badge] {
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0%;
+    padding: 0 8px;
+    min-width: 20px;
+    height: 20px;
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--odn-color-white);
+    text-align: center;
+    border-radius: 20px;
+    background-color: var(--odn-primary-color);
+    box-shadow: 0 0 0 var(--odn-line-width) var(--odn-color-white);
+  }
+  [data-odn-avatar-badge-dot] {
+    padding: 0;
+    min-width: 6px;
+    width: 6px;
+    height: 6px;
+    border-radius: 100%;
+    background-color: var(--odn-primary-color);
+  }
+  [data-odn-avatar-group] {
+    display: flex;
+  }
+  [data-odn-avatar-group] > *:not(:first-child) {
+    margin-inline-start: var(--odn-avatar-group-gap);
+  }
+  [data-odn-avatar-group] [data-odn-avatar-image] {
+    box-shadow: 0 0 0 var(--odn-line-width) var(--odn-color-white);
+  }
+}

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

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

package/dist/avatar/style/index.js

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

package/dist/button/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IconProps } from '../icon';
+import './style';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    intent?: 'normal' | 'danger' | 'primary';
+    light?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: IconProps['name'];
+    rightIcon?: IconProps['name'];
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/button/index.js

@@ -0,0 +1,64 @@
+var _excluded = ["className", "size", "intent", "light", "asChild", "disabled", "loading", "icon", "rightIcon", "children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import HoverFill from "../hover-fill";
+import Icon from "../icon";
+import "./style";
+var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$intent = _ref.intent,
+    intent = _ref$intent === void 0 ? 'normal' : _ref$intent,
+    _ref$light = _ref.light,
+    light = _ref$light === void 0 ? false : _ref$light,
+    _ref$asChild = _ref.asChild,
+    asChild = _ref$asChild === void 0 ? false : _ref$asChild,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    icon = _ref.icon,
+    rightIcon = _ref.rightIcon,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var Comp = asChild ? Slot : 'button';
+  var dom = /*#__PURE__*/React.createElement(Comp, _extends({
+    "data-odn-button": true,
+    "data-odn-button-size": size,
+    "data-odn-button-intent": intent,
+    "data-odn-button-light": light,
+    "data-odn-button-disabled": disabled,
+    "data-odn-button-loading": loading,
+    className: light ? undefined : className,
+    ref: ref,
+    disabled: disabled
+  }, props), !!icon && /*#__PURE__*/React.createElement(Icon, {
+    "data-odn-button-icon": true,
+    name: icon
+  }), !!children && /*#__PURE__*/React.createElement("span", {
+    "data-odn-button-content": true
+  }, children), !!rightIcon && /*#__PURE__*/React.createElement(Icon, {
+    "data-odn-button-right-icon": true,
+    name: rightIcon
+  }), loading && /*#__PURE__*/React.createElement("div", {
+    "data-odn-button-loading-icon-wrapper": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "loading",
+    spin: true
+  })));
+  if (light) {
+    return /*#__PURE__*/React.createElement(HoverFill, {
+      disabled: disabled,
+      "data-odn-button-hover-fill": true,
+      className: className,
+      bgClassName: "odn-button-hover-fill-".concat(size)
+    }, dom);
+  }
+  return dom;
+});
+Button.displayName = 'Button';
+export default Button;

package/dist/button/style/index.css

@@ -0,0 +1,338 @@
+html {
+  --odn-button-small-padding-inline: 8px;
+  --odn-button-small-height: 30px;
+  --odn-button-small-font-size: 12px;
+  --odn-button-small-icon-size: 14px;
+  --odn-button-small-icon-gap: 2px;
+  --odn-button-small-border-radius: 6px;
+  --odn-button-medium-padding-inline: 12px;
+  --odn-button-medium-height: 36px;
+  --odn-button-medium-font-size: 14px;
+  --odn-button-medium-icon-size: 16px;
+  --odn-button-medium-icon-gap: 4px;
+  --odn-button-medium-border-radius: 6px;
+  --odn-button-large-padding-inline: 16px;
+  --odn-button-large-height: 40px;
+  --odn-button-large-font-size: 16px;
+  --odn-button-large-icon-size: 18px;
+  --odn-button-large-icon-gap: 6px;
+  --odn-button-large-border-radius: 6px;
+  --odn-button-normal-font-weight: 400;
+  --odn-button-normal-color: var(--odn-color-black-12);
+  --odn-button-normal-bg: var(--odn-color-white);
+  --odn-button-normal-border-width: 1px;
+  --odn-button-normal-border-style: solid;
+  --odn-button-normal-border-color: var(--odn-color-black-6);
+  --odn-button-normal-loading-icon-color: var(--odn-color-blue-6);
+  --odn-button-normal-color-light: var(--odn-color-black-12);
+  --odn-button-normal-bg-hover: var(--odn-color-black-1);
+  --odn-button-normal-border-width-hover: 1px;
+  --odn-button-normal-border-style-hover: solid;
+  --odn-button-normal-border-color-hover: var(--odn-color-black-7);
+  --odn-button-normal-bg-active: var(--odn-color-black-4);
+  --odn-button-normal-border-width-active: 1px;
+  --odn-button-normal-border-style-active: solid;
+  --odn-button-normal-border-color-active: var(--odn-color-black-7);
+  --odn-button-normal-color-disabled: var(--odn-color-black-8);
+  --odn-button-normal-color-light-disabled: var(--odn-color-black-8);
+  --odn-button-normal-bg-disabled: var(--odn-color-black-3);
+  --odn-button-normal-border-width-disabled: 1px;
+  --odn-button-normal-border-style-disabled: solid;
+  --odn-button-normal-border-color-disabled: var(--odn-color-black-6);
+  --odn-button-normal-outline-width-focus: 2px;
+  --odn-button-normal-outline-style-focus: solid;
+  --odn-button-normal-outline-color-focus: var(--odn-color-black-2);
+  --odn-button-primary-font-weight: 400;
+  --odn-button-primary-color: var(--odn-color-white);
+  --odn-button-primary-bg: var(--odn-color-blue-6);
+  --odn-button-primary-border-width: 1px;
+  --odn-button-primary-border-style: solid;
+  --odn-button-primary-border-color: var(--odn-color-blue-6);
+  --odn-button-primary-loading-icon-color: var(--odn-color-white);
+  --odn-button-primary-color-light: var(--odn-color-blue-6);
+  --odn-button-primary-bg-hover: var(--odn-color-blue-7);
+  --odn-button-primary-border-width-hover: 1px;
+  --odn-button-primary-border-style-hover: solid;
+  --odn-button-primary-border-color-hover: var(--odn-color-blue-7);
+  --odn-button-primary-bg-active: var(--odn-color-blue-8);
+  --odn-button-primary-border-width-active: 1px;
+  --odn-button-primary-border-style-active: solid;
+  --odn-button-primary-border-color-active: var(--odn-color-blue-8);
+  --odn-button-primary-color-disabled: var(--odn-color-white);
+  --odn-button-primary-color-light-disabled: var(--odn-color-blue-3);
+  --odn-button-primary-bg-disabled: var(--odn-color-blue-3);
+  --odn-button-primary-border-width-disabled: 1px;
+  --odn-button-primary-border-style-disabled: solid;
+  --odn-button-primary-border-color-disabled: var(--odn-color-blue-3);
+  --odn-button-primary-outline-width-focus: 2px;
+  --odn-button-primary-outline-style-focus: solid;
+  --odn-button-primary-outline-color-focus: var(--odn-color-blue-2);
+  --odn-button-danger-font-weight: 400;
+  --odn-button-danger-color: var(--odn-color-white);
+  --odn-button-danger-bg: var(--odn-color-red-6);
+  --odn-button-danger-border-width: 1px;
+  --odn-button-danger-border-style: solid;
+  --odn-button-danger-border-color: var(--odn-color-red-6);
+  --odn-button-danger-loading-icon-color: var(--odn-color-white);
+  --odn-button-danger-color-light: var(--odn-color-red-6);
+  --odn-button-danger-bg-hover: var(--odn-color-red-7);
+  --odn-button-danger-border-width-hover: 1px;
+  --odn-button-danger-border-style-hover: solid;
+  --odn-button-danger-border-color-hover: var(--odn-color-red-7);
+  --odn-button-danger-bg-active: var(--odn-color-red-8);
+  --odn-button-danger-border-width-active: 1px;
+  --odn-button-danger-border-style-active: solid;
+  --odn-button-danger-border-color-active: var(--odn-color-red-8);
+  --odn-button-danger-color-disabled: var(--odn-color-white);
+  --odn-button-danger-color-light-disabled: var(--odn-color-red-3);
+  --odn-button-danger-bg-disabled: var(--odn-color-red-3);
+  --odn-button-danger-border-width-disabled: 1px;
+  --odn-button-danger-border-style-disabled: solid;
+  --odn-button-danger-border-color-disabled: var(--odn-color-red-3);
+  --odn-button-danger-outline-width-focus: 2px;
+  --odn-button-danger-outline-style-focus: solid;
+  --odn-button-danger-outline-color-focus: var(--odn-color-red-2);
+}
+
+@layer components {
+  [data-odn-button] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-button]:disabled, [data-odn-button][data-odn-button-loading=true] {
+    cursor: not-allowed;
+  }
+  [data-odn-button][data-odn-button-loading=true] [data-odn-button-content],
+  [data-odn-button][data-odn-button-loading=true] [data-odn-button-icon],
+  [data-odn-button][data-odn-button-loading=true] [data-odn-button-right-icon] {
+    opacity: 0;
+  }
+  [data-odn-button-loading-icon-wrapper] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    border-radius: inherit;
+  }
+  [data-odn-button-hover-fill] {
+    display: inline-block;
+  }
+  [data-odn-button-size=small] {
+    padding: 0 var(--odn-button-small-padding-inline);
+    height: var(--odn-button-small-height);
+    font-size: var(--odn-button-small-font-size);
+    border-radius: var(--odn-button-small-border-radius);
+  }
+  [data-odn-button-size=small] [data-odn-button-icon],
+  [data-odn-button-size=small] [data-odn-button-loading-icon],
+  [data-odn-button-size=small] [data-odn-button-right-icon] {
+    width: var(--odn-button-small-icon-size);
+    height: var(--odn-button-small-icon-size);
+  }
+  [data-odn-button-size=small] [data-odn-button-icon]:not(:only-child) {
+    margin-right: var(--odn-button-small-icon-gap);
+  }
+  [data-odn-button-size=small] [data-odn-button-right-icon]:not(:only-child) {
+    margin-left: var(--odn-button-small-icon-gap);
+  }
+  [data-odn-button-size=small]:has([data-odn-button-icon]:only-child), [data-odn-button-size=small]:has([data-odn-button-right-icon]:only-child) {
+    padding: 0 calc(var(--odn-button-small-height) / 2 - var(--odn-button-small-icon-size) / 2 - var(--odn-button-normal-border-width));
+  }
+  .odn-button-hover-fill-small {
+    border-radius: var(--odn-button-small-border-radius);
+  }
+  [data-odn-button-size=medium] {
+    padding: 0 var(--odn-button-medium-padding-inline);
+    height: var(--odn-button-medium-height);
+    font-size: var(--odn-button-medium-font-size);
+    border-radius: var(--odn-button-medium-border-radius);
+  }
+  [data-odn-button-size=medium] [data-odn-button-icon],
+  [data-odn-button-size=medium] [data-odn-button-loading-icon],
+  [data-odn-button-size=medium] [data-odn-button-right-icon] {
+    width: var(--odn-button-medium-icon-size);
+    height: var(--odn-button-medium-icon-size);
+  }
+  [data-odn-button-size=medium] [data-odn-button-icon]:not(:only-child) {
+    margin-right: var(--odn-button-medium-icon-gap);
+  }
+  [data-odn-button-size=medium] [data-odn-button-right-icon]:not(:only-child) {
+    margin-left: var(--odn-button-medium-icon-gap);
+  }
+  [data-odn-button-size=medium]:has([data-odn-button-icon]:only-child), [data-odn-button-size=medium]:has([data-odn-button-right-icon]:only-child) {
+    padding: 0 calc(var(--odn-button-medium-height) / 2 - var(--odn-button-medium-icon-size) / 2 - var(--odn-button-normal-border-width));
+  }
+  .odn-button-hover-fill-medium {
+    border-radius: var(--odn-button-medium-border-radius);
+  }
+  [data-odn-button-size=large] {
+    padding: 0 var(--odn-button-large-padding-inline);
+    height: var(--odn-button-large-height);
+    font-size: var(--odn-button-large-font-size);
+    border-radius: var(--odn-button-large-border-radius);
+  }
+  [data-odn-button-size=large] [data-odn-button-icon],
+  [data-odn-button-size=large] [data-odn-button-loading-icon],
+  [data-odn-button-size=large] [data-odn-button-right-icon] {
+    width: var(--odn-button-large-icon-size);
+    height: var(--odn-button-large-icon-size);
+  }
+  [data-odn-button-size=large] [data-odn-button-icon]:not(:only-child) {
+    margin-right: var(--odn-button-large-icon-gap);
+  }
+  [data-odn-button-size=large] [data-odn-button-right-icon]:not(:only-child) {
+    margin-left: var(--odn-button-large-icon-gap);
+  }
+  [data-odn-button-size=large]:has([data-odn-button-icon]:only-child), [data-odn-button-size=large]:has([data-odn-button-right-icon]:only-child) {
+    padding: 0 calc(var(--odn-button-large-height) / 2 - var(--odn-button-large-icon-size) / 2 - var(--odn-button-normal-border-width));
+  }
+  .odn-button-hover-fill-large {
+    border-radius: var(--odn-button-large-border-radius);
+  }
+  [data-odn-button-intent=normal] {
+    font-weight: var(--odn-button-normal-font-weight);
+    color: var(--odn-button-normal-color);
+  }
+  [data-odn-button-intent=normal][data-odn-button-light=true] {
+    color: var(--odn-button-normal-color-light);
+    background: transparent;
+  }
+  [data-odn-button-intent=normal]:not([data-odn-button-light=true]) {
+    background: var(--odn-button-normal-bg);
+    border: var(--odn-button-normal-border-width) var(--odn-button-normal-border-style) var(--odn-button-normal-border-color);
+    outline: 0 var(--odn-button-normal-outline-style) var(--odn-button-normal-outline-color);
+  }
+  [data-odn-button-intent=normal]:not([data-odn-button-light=true]):disabled {
+    color: var(--odn-button-normal-color-disabled);
+    background: var(--odn-button-normal-bg-disabled);
+    border: var(--odn-button-normal-border-width-disabled) var(--odn-button-normal-border-style-disabled) var(--odn-button-normal-border-color-disabled);
+  }
+  [data-odn-button-intent=normal][data-odn-button-light=true]:disabled {
+    color: var(--odn-button-normal-color-light-disabled);
+    background: transparent;
+  }
+  [data-odn-button-intent=normal][data-odn-button-loading=true] {
+    background: var(--odn-button-normal-bg-active);
+    border: var(--odn-button-normal-border-width-active) var(--odn-button-normal-border-style-active) var(--odn-button-normal-border-color-active);
+  }
+  [data-odn-button-intent=normal]:not(:disabled,
+  [data-odn-button-loading=true],
+  [data-odn-button-light=true]):hover {
+    background: var(--odn-button-normal-bg-hover);
+    border: var(--odn-button-normal-border-width-hover) var(--odn-button-normal-border-style-hover) var(--odn-button-normal-border-color-hover);
+  }
+  [data-odn-button-intent=normal]:not(:disabled,
+  [data-odn-button-loading=true],
+  [data-odn-button-light=true]):active {
+    background: var(--odn-button-normal-bg-active);
+    border: var(--odn-button-normal-border-width-active) var(--odn-button-normal-border-style-active) var(--odn-button-normal-border-color-active);
+  }
+  [data-odn-button-intent=normal]:not(:disabled,
+  [data-odn-button-loading=true],
+  [data-odn-button-light=true]):focus-visible {
+    outline: var(--odn-button-normal-outline-width-focus) var(--odn-button-normal-outline-style-focus) var(--odn-button-normal-outline-color-focus);
+  }
+  [data-odn-button-intent=normal] [data-odn-button-loading-icon-wrapper] {
+    color: var(--odn-button-normal-loading-icon-color);
+  }
+  [data-odn-button-intent=danger] {
+    font-weight: var(--odn-button-danger-font-weight);
+    color: var(--odn-button-danger-color);
+  }
+  [data-odn-button-intent=danger][data-odn-button-light=true] {
+    color: var(--odn-button-danger-color-light);
+    background: transparent;
+  }
+  [data-odn-button-intent=danger]:not([data-odn-button-light=true]) {
+    background: var(--odn-button-danger-bg);
+    border: var(--odn-button-danger-border-width) var(--odn-button-danger-border-style) var(--odn-button-danger-border-color);
+    outline: 0 var(--odn-button-danger-outline-style) var(--odn-button-danger-outline-color);
+  }
+  [data-odn-button-intent=danger]:not([data-odn-button-light=true]):disabled {
+    color: var(--odn-button-danger-color-disabled);
+    background: var(--odn-button-danger-bg-disabled);
+    border: var(--odn-button-danger-border-width-disabled) var(--odn-button-danger-border-style-disabled) var(--odn-button-danger-border-color-disabled);
+  }
+  [data-odn-button-intent=danger][data-odn-button-light=true]:disabled {
+    color: var(--odn-button-danger-color-light-disabled);
+    background: transparent;
+  }
+  [data-odn-button-intent=danger][data-odn-button-loading=true] {
+    background: var(--odn-button-danger-bg-active);
+    border: var(--odn-button-danger-border-width-active) var(--odn-button-danger-border-style-active) var(--odn-button-danger-border-color-active);
+  }
+  [data-odn-button-intent=danger]:not(:disabled,
+  [data-odn-button-loading=true],
+  [data-odn-button-light=true]):hover {
+    background: var(--odn-button-danger-bg-hover);
+    border: var(--odn-button-danger-border-width-hover) var(--odn-button-danger-border-style-hover) var(--odn-button-danger-border-color-hover);
+  }
+  [data-odn-button-intent=danger]:not(:disabled,
+  [data-odn-button-loading=true],
+  [data-odn-button-light=true]):active {
+    background: var(--odn-button-danger-bg-active);
+    border: var(--odn-button-danger-border-width-active) var(--odn-button-danger-border-style-active) var(--odn-button-danger-border-color-active);
+  }
+  [data-odn-button-intent=danger]:not(:disabled,
+  [data-odn-button-loading=true],
+  [data-odn-button-light=true]):focus-visible {
+    outline: var(--odn-button-danger-outline-width-focus) var(--odn-button-danger-outline-style-focus) var(--odn-button-danger-outline-color-focus);
+  }
+  [data-odn-button-intent=danger] [data-odn-button-loading-icon-wrapper] {
+    color: var(--odn-button-danger-loading-icon-color);
+  }
+  [data-odn-button-intent=primary] {
+    font-weight: var(--odn-button-primary-font-weight);
+    color: var(--odn-button-primary-color);
+  }
+  [data-odn-button-intent=primary][data-odn-button-light=true] {
+    color: var(--odn-button-primary-color-light);
+    background: transparent;
+  }
+  [data-odn-button-intent=primary]:not([data-odn-button-light=true]) {
+    background: var(--odn-button-primary-bg);
+    border: var(--odn-button-primary-border-width) var(--odn-button-primary-border-style) var(--odn-button-primary-border-color);
+    outline: 0 var(--odn-button-primary-outline-style) var(--odn-button-primary-outline-color);
+  }
+  [data-odn-button-intent=primary]:not([data-odn-button-light=true]):disabled {
+    color: var(--odn-button-primary-color-disabled);
+    background: var(--odn-button-primary-bg-disabled);
+    border: var(--odn-button-primary-border-width-disabled) var(--odn-button-primary-border-style-disabled) var(--odn-button-primary-border-color-disabled);
+  }
+  [data-odn-button-intent=primary][data-odn-button-light=true]:disabled {
+    color: var(--odn-button-primary-color-light-disabled);
+    background: transparent;
+  }
+  [data-odn-button-intent=primary][data-odn-button-loading=true] {
+    background: var(--odn-button-primary-bg-active);
+    border: var(--odn-button-primary-border-width-active) var(--odn-button-primary-border-style-active) var(--odn-button-primary-border-color-active);
+  }
+  [data-odn-button-intent=primary]:not(:disabled,
+  [data-odn-button-loading=true],
+  [data-odn-button-light=true]):hover {
+    background: var(--odn-button-primary-bg-hover);
+    border: var(--odn-button-primary-border-width-hover) var(--odn-button-primary-border-style-hover) var(--odn-button-primary-border-color-hover);
+  }
+  [data-odn-button-intent=primary]:not(:disabled,
+  [data-odn-button-loading=true],
+  [data-odn-button-light=true]):active {
+    background: var(--odn-button-primary-bg-active);
+    border: var(--odn-button-primary-border-width-active) var(--odn-button-primary-border-style-active) var(--odn-button-primary-border-color-active);
+  }
+  [data-odn-button-intent=primary]:not(:disabled,
+  [data-odn-button-loading=true],
+  [data-odn-button-light=true]):focus-visible {
+    outline: var(--odn-button-primary-outline-width-focus) var(--odn-button-primary-outline-style-focus) var(--odn-button-primary-outline-color-focus);
+  }
+  [data-odn-button-intent=primary] [data-odn-button-loading-icon-wrapper] {
+    color: var(--odn-button-primary-loading-icon-color);
+  }
+}

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

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

package/dist/button/style/index.js

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

package/dist/calendar/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DayPicker } from 'react-day-picker';
+import '../date-picker/style';
+import './style';
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+    /**
+     * @description 语言
+     * @default 'zhCN'
+     */
+    lang?: 'zhCN' | 'enUS';
+    /**
+     * @description 最小日期
+     */
+    minDate?: Date;
+    /**
+     * @description 最大日期
+     */
+    maxDate?: Date;
+    /**
+     * @description 禁用日期
+     */
+    disabledDays?: (date: Date) => boolean;
+};
+declare const Calendar: React.FC<CalendarProps>;
+export default Calendar;