donghy 0.0.1

package/dist/cjs/theme/tokens.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.zIndex = exports.tokens = exports.space = exports.shadow = exports.radius = exports.motion = exports.font = exports.color = exports.breakpoint = void 0;
+var color = exports.color = {
+  primary: '#6C5CE7',
+  primaryHover: '#A29BFE',
+  primaryActive: '#4A3DBF',
+  primaryBg: '#F0EDFF',
+  primaryBorder: '#D5CCFA',
+  success: '#00B894',
+  successHover: '#33c9a5',
+  successActive: '#009975',
+  successBg: '#e8fdf5',
+  successBorder: '#80dbc4',
+  warning: '#FDCB6E',
+  warningHover: '#fdd97d',
+  warningActive: '#e6b800',
+  warningBg: '#fffbeb',
+  warningBorder: '#FFE58F',
+  error: '#FF7675',
+  errorHover: '#ff9493',
+  errorActive: '#e0504f',
+  errorBg: '#fff5f5',
+  errorBorder: '#FFCCC7',
+  info: '#74B9FF',
+  infoHover: '#96ccff',
+  infoActive: '#4da3ff',
+  infoBg: '#e8f4ff',
+  infoBorder: '#91CAFF',
+  link: '#6C5CE7',
+  linkHover: '#A29BFE',
+  text: 'rgba(0, 0, 0, 0.88)',
+  textSecondary: 'rgba(0, 0, 0, 0.65)',
+  textTertiary: 'rgba(0, 0, 0, 0.45)',
+  textQuaternary: 'rgba(0, 0, 0, 0.25)',
+  bg: '#FFFFFF',
+  bgSecondary: '#F5F5F5',
+  bgTertiary: '#FAFAFA',
+  bgElevated: '#FFFFFF',
+  bgSpotlight: 'rgba(0, 0, 0, 0.85)',
+  border: '#D9D9D9',
+  borderSecondary: '#F0F0F0',
+  divider: 'rgba(0, 0, 0, 0.06)',
+  overlay: 'rgba(0, 0, 0, 0.45)',
+  chart: {
+    blue: '#5B8FF9',
+    green: '#5AD8A6',
+    yellow: '#F6BD16',
+    red: '#E86452',
+    purple: '#B37FEB',
+    cyan: '#6DC8EC',
+    orange: '#FF9D4D',
+    pink: '#FF6B9D'
+  }
+};
+var radius = exports.radius = {
+  small: '4px',
+  middle: '8px',
+  large: '12px',
+  full: '9999px'
+};
+var space = exports.space = {
+  small: '8px',
+  middle: '16px',
+  large: '24px'
+};
+var font = exports.font = {
+  family: ['"SF Pro"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"'].join(', '),
+  familyMono: '"SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace',
+  size: {
+    small: '12px',
+    middle: '14px',
+    large: '16px'
+  },
+  weight: {
+    regular: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700'
+  },
+  lineHeight: {
+    small: '20px',
+    middle: '22px',
+    large: '24px'
+  }
+};
+var shadow = exports.shadow = {
+  small: '0 1px 2px rgba(0, 0, 0, 0.05)',
+  middle: '0 4px 8px rgba(0, 0, 0, 0.08)',
+  large: '0 8px 16px rgba(0, 0, 0, 0.12)',
+  focus: '0 0 0 3px rgba(108, 92, 231, 0.2)'
+};
+var motion = exports.motion = {
+  duration: {
+    fast: '0.15s',
+    normal: '0.25s',
+    slow: '0.4s'
+  },
+  easing: {
+    default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+    easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
+    spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
+  }
+};
+var breakpoint = exports.breakpoint = {
+  small: 576,
+  middle: 768,
+  large: 992,
+  xlarge: 1200
+};
+var zIndex = exports.zIndex = {
+  dropdown: 1000,
+  sticky: 1020,
+  fixed: 1030,
+  modal: 1050,
+  popover: 1060,
+  tooltip: 1070,
+  toast: 1080
+};
+var tokens = exports.tokens = {
+  color: color,
+  radius: radius,
+  space: space,
+  font: font,
+  shadow: shadow,
+  motion: motion,
+  breakpoint: breakpoint,
+  zIndex: zIndex
+};

package/dist/esm/components/Button/Button.js

@@ -0,0 +1,60 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["variant", "size", "loading", "icon", "iconPosition", "fullWidth", "children", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 React from 'react';
+import styles from "./Button.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var LOADING_MAP = {
+  solid: styles.solid,
+  outline: styles.outline,
+  ghost: styles.ghost,
+  glass: styles.glass
+};
+export var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    icon = _ref.icon,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cls = [styles.btn, LOADING_MAP[variant], className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({
+    ref: ref,
+    className: cls,
+    "data-variant": variant,
+    "data-size": size,
+    "data-loading": loading || undefined,
+    "data-full-width": fullWidth || undefined,
+    disabled: loading || rest.disabled
+  }, rest), {}, {
+    children: [loading ? /*#__PURE__*/_jsx("span", {
+      className: styles.spinner,
+      "aria-hidden": true
+    }) : icon && iconPosition === 'left' && /*#__PURE__*/_jsx("span", {
+      className: styles.iconLeft,
+      children: icon
+    }), children && /*#__PURE__*/_jsx("span", {
+      className: styles.text,
+      children: children
+    }), icon && iconPosition === 'right' && !loading && /*#__PURE__*/_jsx("span", {
+      className: styles.iconRight,
+      children: icon
+    })]
+  }));
+});
+Button.displayName = 'Button';

package/dist/esm/components/Button/Button.module.css

@@ -0,0 +1,137 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1;
+  transition:
+    background 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.15s ease;
+  user-select: none;
+}
+
+.btn:active {
+  transform: scale(0.97);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* sizes */
+.btn[data-size='xs'] {
+  height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
+  border-radius: 4px;
+}
+.btn[data-size='sm'] {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 13px;
+  border-radius: 6px;
+}
+.btn[data-size='md'] {
+  height: 40px;
+  padding: 0 16px;
+  font-size: 14px;
+  border-radius: 8px;
+}
+.btn[data-size='lg'] {
+  height: 48px;
+  padding: 0 24px;
+  font-size: 16px;
+  border-radius: 10px;
+}
+.btn[data-size='xl'] {
+  height: 56px;
+  padding: 0 32px;
+  font-size: 18px;
+  border-radius: 12px;
+}
+
+/* variants */
+.solid {
+  background: #6c5ce7;
+  color: #fff;
+}
+.solid:hover:not(:disabled) {
+  background: #a29bfe;
+}
+.solid:active:not(:disabled) {
+  background: #4a3dbf;
+}
+
+.outline {
+  background: transparent;
+  color: #6c5ce7;
+  border: 1.5px solid #6c5ce7;
+}
+.outline:hover:not(:disabled) {
+  background: rgba(108, 92, 231, 0.06);
+}
+.outline:active:not(:disabled) {
+  background: rgba(108, 92, 231, 0.12);
+}
+
+.ghost {
+  background: transparent;
+  color: #6c5ce7;
+}
+.ghost:hover:not(:disabled) {
+  background: rgba(108, 92, 231, 0.06);
+}
+.ghost:active:not(:disabled) {
+  background: rgba(108, 92, 231, 0.12);
+}
+
+.glass {
+  background: rgba(108, 92, 231, 0.1);
+  color: #6c5ce7;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(108, 92, 231, 0.2);
+}
+.glass:hover:not(:disabled) {
+  background: rgba(108, 92, 231, 0.18);
+}
+
+/* full width */
+.btn[data-full-width] {
+  width: 100%;
+}
+
+/* icon */
+.iconLeft,
+.iconRight {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* text */
+.text {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* spinner */
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/esm/components/Button/index.js

@@ -0,0 +1,3 @@
+import { Button } from "./Button";
+export default Button;
+export { Button };

package/dist/esm/components/common/Affix/Affix.js

@@ -0,0 +1,146 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useScrollListener } from "../../shared/hooks/useScrollListener";
+import styles from "./Affix.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function getOffsetTop(el) {
+  var offset = 0;
+  var current = el;
+  while (current && current !== document.documentElement) {
+    offset += current.offsetTop;
+    current = current.offsetParent;
+  }
+  return offset;
+}
+function getScrollTop(el) {
+  if (el === window) {
+    return window.scrollY || document.documentElement.scrollTop;
+  }
+  return el.scrollTop;
+}
+var Affix = function Affix(_ref) {
+  var children = _ref.children,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    target = _ref.target,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top' : _ref$position,
+    className = _ref.className,
+    style = _ref.style,
+    onChange = _ref.onChange;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    affixed = _useState2[0],
+    setAffixed = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    width = _useState4[0],
+    setWidth = _useState4[1];
+  var _useState5 = useState(undefined),
+    _useState6 = _slicedToArray(_useState5, 2),
+    height = _useState6[0],
+    setHeight = _useState6[1];
+  var placeholderRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var getTarget = useCallback(function () {
+    var _target;
+    return (_target = target === null || target === void 0 ? void 0 : target()) !== null && _target !== void 0 ? _target : window;
+  }, [target]);
+  var handleScroll = useCallback(function () {
+    var container = getTarget();
+    if (!container) return;
+    var scrollTop = getScrollTop(container);
+    var wrapperEl = wrapperRef.current;
+    var placeholderEl = placeholderRef.current;
+    if (!wrapperEl || !placeholderEl) return;
+    if (position === 'top') {
+      var elementTop = getOffsetTop(placeholderEl);
+      var shouldAffixByPosition = elementTop - offset <= scrollTop;
+      if (shouldAffixByPosition && !affixed) {
+        setAffixed(true);
+        onChange === null || onChange === void 0 || onChange(true);
+      } else if (!shouldAffixByPosition && affixed) {
+        setAffixed(false);
+        onChange === null || onChange === void 0 || onChange(false);
+      }
+    } else {
+      var viewportHeight = window.innerHeight;
+      var placeholderBottom = getOffsetTop(placeholderEl) + placeholderEl.offsetHeight;
+      if (placeholderBottom - offset <= scrollTop + viewportHeight && !affixed) {
+        setAffixed(true);
+        onChange === null || onChange === void 0 || onChange(true);
+      } else if (placeholderBottom - offset > scrollTop + viewportHeight && affixed) {
+        setAffixed(false);
+        onChange === null || onChange === void 0 || onChange(false);
+      }
+    }
+  }, [getTarget, position, offset, affixed, onChange]);
+  useScrollListener({
+    target: getTarget,
+    onScroll: handleScroll
+  });
+  useEffect(function () {
+    var wrapperEl = wrapperRef.current;
+    if (wrapperEl) {
+      setWidth(wrapperEl.offsetWidth);
+      setHeight(wrapperEl.offsetHeight);
+    }
+  }, []);
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      var wrapperEl = wrapperRef.current;
+      if (wrapperEl) {
+        setWidth(wrapperEl.offsetWidth);
+        setHeight(wrapperEl.offsetHeight);
+      }
+      handleScroll();
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, [handleScroll]);
+  var rootCls = [styles.affix, affixed ? styles.affixFixed : '', className].filter(Boolean).join(' ');
+  var affixedStyle = affixed ? position === 'top' ? {
+    position: 'fixed',
+    top: offset,
+    width: width,
+    height: height
+  } : {
+    position: 'fixed',
+    bottom: offset,
+    width: width,
+    height: height
+  } : {};
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: placeholderRef,
+      className: styles.placeholder,
+      style: {
+        width: width,
+        height: height
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      ref: wrapperRef,
+      className: rootCls,
+      style: _objectSpread(_objectSpread({}, style), affixedStyle),
+      "data-affixed": affixed || undefined,
+      children: children
+    })]
+  });
+};
+export { Affix };
+export default Affix;

package/dist/esm/components/common/Affix/Affix.module.css

@@ -0,0 +1,11 @@
+.affix {
+  z-index: 10;
+}
+
+.placeholder {
+  display: inline-block;
+}
+
+.affixFixed {
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08);
+}

package/dist/esm/components/common/Affix/index.js

@@ -0,0 +1 @@
+export { Affix, default } from "./Affix";