draft-components 2.10.3 → 3.0.0

package/dist/components/text-input/text-input.css

@@ -0,0 +1,146 @@
+.dc-text-input {
+  --dc-input-font-size: 14px;
+  --dc-input-height: 36px;
+  --dc-input-padding-x: 12px;
+  --dc-input-border-radius: 7px;
+  --dc-input-text-color: var(--dc-control-primary-text-color);
+  --dc-input-border-color: var(--dc-control-border-color);
+  --dc-input-border-color-error: var(--dc-control-error-color);
+  --dc-input-bg: var(--dc-control-bg);
+  --dc-input-add-on-color: var(--dc-control-secondary-text-color);
+  --dc-input-add-on-bg: none;
+  --dc-input-focus-ring-color: var(--dc-control-primary-color);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 0;
+  max-width: 100%;
+  height: var(--dc-input-height);
+  font-family: var(--dc-primary-font);
+  font-size: var(--dc-input-font-size);
+  font-weight: 400;
+  line-height: 1;
+  color: var(--dc-input-text-color);
+  vertical-align: middle;
+  color-scheme: light;
+  background: var(--dc-input-bg);
+  border: 1px solid var(--dc-input-border-color);
+  border-radius: var(--dc-input-border-radius);
+}
+
+.dc-text-input > :first-child {
+  border-top-left-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-bottom-left-radius: calc(var(--dc-input-border-radius) - 1px);
+}
+
+.dc-text-input > :last-child {
+  border-top-right-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-bottom-right-radius: calc(var(--dc-input-border-radius) - 1px);
+}
+
+.dc-text-input:focus-within {
+  border-color: var(--dc-input-focus-ring-color);
+  box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
+}
+
+.dc-text-input_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-text-input_invalid {
+  border-color: var(--dc-input-border-color-error);
+}
+
+.dc-text-input_full-width {
+  display: flex;
+  width: 100%;
+}
+
+.dc-text-input_sm {
+  --dc-input-font-size: 13px;
+  --dc-input-height: 32px;
+  --dc-input-padding-x: 8px;
+  --dc-input-border-radius: 6px;
+}
+
+.dc-text-input_lg {
+  --dc-input-font-size: 15px;
+  --dc-input-height: 40px;
+  --dc-input-padding-x: 16px;
+  --dc-input-border-radius: 8px;
+}
+
+.dc-text-input__native {
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0 var(--dc-input-padding-x);
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+}
+
+.dc-text-input__native::-moz-placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-text-input__native::placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-text-input__native:focus {
+  outline: none;
+}
+
+.dc-text-input__slot-left,
+.dc-text-input__slot-right {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--dc-input-add-on-color);
+  background: var(--dc-input-add-on-bg);
+}
+
+.dc-text-input__slot-left {
+  padding-left: var(--dc-input-padding-x);
+}
+
+.dc-text-input__slot-right {
+  padding-right: var(--dc-input-padding-x);
+}
+
+.dc-text-input_has_slot-left:not(.dc-text-input_slot_tinted) .dc-text-input__native {
+  padding-left: calc(var(--dc-input-padding-x) / 2);
+}
+
+.dc-text-input_has_slot-right:not(.dc-text-input_slot_tinted) .dc-text-input__native {
+  padding-right: calc(var(--dc-input-padding-x) / 2);
+}
+
+.dc-text-input_slot_tinted {
+  --dc-input-add-on-bg: rgb(var(--dc-gray-400-rgb) / 10%);
+}
+
+.dc-text-input_slot_tinted .dc-text-input__slot-left {
+  padding-right: var(--dc-input-padding-x);
+  border-right: 1px solid var(--dc-input-border-color);
+}
+
+.dc-text-input_slot_tinted .dc-text-input__slot-right {
+  padding-left: var(--dc-input-padding-x);
+  border-left: 1px solid var(--dc-input-border-color);
+}
+
+.dark .dc-text-input,
+.dark.dc-text-input {
+  color-scheme: dark;
+}

package/dist/components/textarea/textarea.css

@@ -0,0 +1,82 @@
+.dc-textarea {
+  --dc-textarea-font-size: 14px;
+  --dc-textarea-leading: 20px;
+  --dc-textarea-padding-y: 8px;
+  --dc-textarea-padding-x: 12px;
+  --dc-textarea-radius: 7px;
+  --dc-textarea-text-color: var(--dc-primary-text-color);
+  --dc-textarea-border-color: var(--dc-control-border-color);
+  --dc-textarea-border-color-error: var(--dc-control-error-color);
+  --dc-textarea-bg: var(--dc-control-bg);
+  --dc-textarea-focus-ring-color: var(--dc-control-primary-color);
+
+  box-sizing: border-box;
+  display: inline-block;
+  flex-direction: column;
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  min-height: calc(var(--dc-textarea-leading) + var(--dc-textarea-padding-y) * 2);
+  padding: var(--dc-textarea-padding-y) var(--dc-textarea-padding-x);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: var(--dc-primary-font);
+  font-size: var(--dc-textarea-font-size);
+  line-height: var(--dc-textarea-leading);
+  color: var(--dc-textarea-text-color);
+  color-scheme: light;
+  background: var(--dc-textarea-bg);
+  border: 1px solid var(--dc-textarea-border-color);
+  border-radius: var(--dc-textarea-radius);
+}
+
+.dc-textarea::-moz-placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-textarea::placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-textarea:focus {
+  border-color: var(--dc-textarea-focus-ring-color);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--dc-textarea-focus-ring-color);
+}
+
+.dc-textarea_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-textarea_invalid {
+  border-color: var(--dc-textarea-border-color-error);
+}
+
+.dc-textarea_full-width {
+  display: block;
+  width: 100%;
+  resize: vertical;
+}
+
+.dc-textarea_sm {
+  --dc-textarea-font-size: 13px;
+  --dc-textarea-leading: 16px;
+  --dc-textarea-padding-y: 8px;
+  --dc-textarea-padding-x: 8px;
+  --dc-textarea-radius: 6px;
+}
+
+.dc-textarea_lg {
+  --dc-textarea-font-size: 15px;
+  --dc-textarea-leading: 24px;
+  --dc-textarea-padding-y: 12px;
+  --dc-textarea-padding-x: 16px;
+  --dc-textarea-radius: 8px;
+}
+
+.dark .dc-textarea,
+.dark.dc-textarea {
+  color-scheme: dark;
+}

package/dist/components/toast/toast.css

@@ -0,0 +1,154 @@
+.dc-toast {
+  --dc-toast-text-color: var(--dc-gray-100);
+  --dc-toast-secondary-text-color: var(--dc-gray-300);
+  --dc-toast-icon-color: var(--dc-gray-200);
+  --dc-toast-bg: var(--dc-gray-700);
+  --dc-toast-padding: 16px;
+  --dc-toast-close-btn-color: var(--dc-gray-50);
+  --dc-toast-close-btn-bg: var(--dc-gray-500);
+  --dc-toast-btn-text-color: var(--dc-gray-100);
+  --dc-toast-btn-bg: rgb(var(--dc-gray-50-rgb) / 15%);
+  --dc-toast-btn-bg-hover: rgb(var(--dc-gray-50-rgb) / 30%);
+  --dc-toast-btn-focus-ring-color: var(--dc-gray-200);
+
+  position: relative;
+  display: inline-flex;
+  min-width: 256px;
+  font: var(--dc-text-sm);
+  color: var(--dc-toast-text-color);
+  text-align: left;
+  color-scheme: light;
+  background: var(--dc-toast-bg);
+  border-radius: 10px;
+  box-shadow: var(--dc-shadow-lg);
+}
+
+.dc-toast__close-btn {
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  color: var(--dc-toast-close-btn-color);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  pointer-events: none;
+  cursor: pointer;
+  background: var(--dc-toast-close-btn-bg);
+  border: none;
+  border-radius: 50%;
+  box-shadow:
+    var(--dc-shadow-sm),
+    var(--dc-shadow-md);
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.dc-toast:hover .dc-toast__close-btn {
+  pointer-events: all;
+  opacity: 1;
+}
+
+.dc-toast__btn {
+  box-sizing: border-box;
+  padding: 4px 12px;
+  font: var(--dc-text-xs);
+  color: var(--dc-toast-btn-text-color);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  background: var(--dc-toast-btn-bg);
+  border: none;
+  border-radius: 6px;
+  transition: 100ms ease;
+  transition-property: background-color, box-shadow;
+}
+
+.dc-toast__btn:hover {
+  background: var(--dc-toast-btn-bg-hover);
+}
+
+.dc-toast__btn:focus {
+  background: var(--dc-toast-btn-bg-hover);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--dc-toast-btn-focus-ring-color);
+}
+
+.dc-toast__btn:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.dc-toast__btn:focus:not(:focus-visible, :hover) {
+  background: var(--dc-toast-btn-bg);
+}
+
+.dc-toast__body {
+  display: flex;
+  flex-grow: 1;
+  align-items: flex-start;
+  padding: 12px 16px;
+}
+
+.dc-toast__actions {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+}
+
+.dc-toast__actions > * + * {
+  margin-top: 2px;
+}
+
+.dc-toast__content {
+  box-sizing: border-box;
+}
+
+.dc-toast__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-right: 12px;
+  color: var(--dc-toast-icon-color);
+}
+
+.dc-toast__title {
+  margin: 0;
+  font: inherit;
+  font-weight: 500;
+}
+
+.dc-toast__message {
+  margin-top: 0.25em;
+  color: var(--dc-toast-secondary-text-color);
+}
+
+.dark .dc-toast,
+.dark.dc-toast {
+  --dc-toast-text-color: var(--dc-gray-800);
+  --dc-toast-secondary-text-color: var(--dc-gray-600);
+  --dc-toast-icon-color: var(--dc-gray-700);
+  --dc-toast-bg: var(--dc-gray-100);
+  --dc-toast-close-btn-color: var(--dc-gray-800);
+  --dc-toast-close-btn-bg: var(--dc-gray-100);
+  --dc-toast-btn-text-color: var(--dc-gray-800);
+  --dc-toast-btn-bg: rgb(var(--dc-gray-900-rgb) / 10%);
+  --dc-toast-btn-bg-hover: rgb(var(--dc-gray-900-rgb) / 20%);
+  --dc-toast-btn-focus-ring-color: var(--dc-gray-700);
+
+  color-scheme: dark;
+}
+
+.dark .dc-toast .dc-toast__close-btn,
+.dark.dc-toast .dc-toast__close-btn {
+  box-shadow:
+    0 0 0 1px rgb(var(--dc-black-rgb) / 10%),
+    var(--dc-shadow-sm),
+    var(--dc-shadow-md);
+}

package/dist/components/toaster/toaster.css

@@ -0,0 +1,95 @@
+.dc-toasts-list {
+  --dc-toaster-padding: 16px;
+  --dc-toaster-animation: 200ms ease;
+
+  position: fixed;
+  right: var(--dc-toaster-padding);
+  left: var(--dc-toaster-padding);
+  z-index: var(--dc-toaster-z-index);
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  color-scheme: light;
+  pointer-events: none;
+}
+
+.dc-toasts-list_top-left,
+.dc-toasts-list_top-center,
+.dc-toasts-list_top-right {
+  top: var(--dc-toaster-padding);
+}
+
+.dc-toasts-list_bottom-left,
+.dc-toasts-list_bottom-center,
+.dc-toasts-list_bottom-right {
+  bottom: var(--dc-toaster-padding);
+}
+
+.dc-toasts-list > * {
+  position: absolute;
+  right: 0;
+  left: 0;
+  transition: transform var(--dc-toaster-animation);
+}
+
+.dc-toasts-list_top-left > *,
+.dc-toasts-list_bottom-left > * {
+  text-align: left;
+}
+
+.dc-toasts-list_top-center > *,
+.dc-toasts-list_bottom-center > * {
+  text-align: center;
+}
+
+.dc-toasts-list_top-right > *,
+.dc-toasts-list_bottom-right > * {
+  text-align: right;
+}
+
+.dc-toasts-list__toast {
+  pointer-events: all;
+  animation: var(--dc-toaster-animation) forwards;
+}
+
+@keyframes dc-toast-slide-top {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dc-toasts-list_top-left .dc-toasts-list__toast,
+.dc-toasts-list_top-center .dc-toasts-list__toast,
+.dc-toasts-list_top-right .dc-toasts-list__toast {
+  animation-name: dc-toast-slide-top;
+}
+
+@keyframes dc-toast-slide-bottom {
+  0% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(-100%);
+  }
+}
+
+.dc-toasts-list_bottom-left .dc-toasts-list__toast,
+.dc-toasts-list_bottom-center .dc-toasts-list__toast,
+.dc-toasts-list_bottom-right .dc-toasts-list__toast {
+  animation-name: dc-toast-slide-bottom;
+}
+
+.dark .dc-toaster,
+.dark.dc-toaster {
+  color-scheme: dark;
+}

package/dist/components/toaster/toaster.js

@@ -9,6 +9,10 @@ const isToastShowEvent = (event) => (event instanceof CustomEvent && event.type
 const TOAST_HIDE_EVENT = 'toast_hide';
 const isToastHideEvent = (event) => (event instanceof CustomEvent && event.type === TOAST_HIDE_EVENT);
 export class Toaster {
+    _id;
+    timeoutMs;
+    onShow;
+    onHide;
     constructor(params) {
         this._id = 0;
         this.timeoutMs = params?.timeoutMs || 10000;
@@ -82,9 +86,9 @@ function ToastsList({ toaster, toastGap = 12, toastPosition = 'top-center', toas
             if (item instanceof HTMLLIElement) {
                 item.style.transform = `translateY(${offset}px)`;
                 const d = item.offsetHeight + toastGap;
-                if (toastPosition === 'top-right' ||
-                    toastPosition === 'top-center' ||
-                    toastPosition === 'top-left') {
+                if (toastPosition === 'top-right'
+                    || toastPosition === 'top-center'
+                    || toastPosition === 'top-left') {
                     offset += d;
                 }
                 else {

package/dist/components/tooltip/tooltip.css

@@ -0,0 +1,34 @@
+.dc-tooltip {
+  --dc-tooltip-text-color: var(--dc-gray-50);
+  --dc-tooltip-bg: var(--dc-gray-700);
+  --dc-tooltip-transition-duration: 100ms;
+
+  top: 0;
+  left: 0;
+  z-index: var(--dc-overlay-z-index);
+  box-sizing: border-box;
+  padding: 4px 8px;
+  font: var(--dc-text-xs);
+  color: var(--dc-tooltip-text-color);
+  color-scheme: light;
+  background: var(--dc-tooltip-bg);
+  border-radius: 6px;
+  box-shadow: var(--dc-shadow-md);
+}
+
+.dc-tooltip_hidden {
+  opacity: 0;
+  transition: opacity var(--dc-tooltip-transition-duration) ease;
+}
+
+.dc-tooltip_visible {
+  opacity: 1;
+}
+
+.dark .dc-tooltip,
+.dark.dc-tooltip {
+  --dc-tooltip-text-color: var(--dc-gray-800);
+  --dc-tooltip-bg: var(--dc-gray-100);
+
+  color-scheme: dark;
+}

package/dist/hooks/use-mount-transition.js

@@ -8,8 +8,8 @@ export function useMountTransition({ animateFirstMount = false, isShown, duratio
     const [hasEnterToClass, setHasEnterToClass] = useState(false);
     const firstMount = useRef(true);
     const prefersReducedMotion = useMemo(() => window.matchMedia('(prefers-reduced-motion: reduce)'), []);
-    const disableTransition = (prefersReducedMotion.matches ||
-        (!animateFirstMount && firstMount.current));
+    const disableTransition = (prefersReducedMotion.matches
+        || (!animateFirstMount && firstMount.current));
     if (disableTransition) {
         durationMs = 0;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "2.10.3",
+  "version": "3.0.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -8,11 +8,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./components/*": "./dist/components/*",
+    "./hooks/*": "./dist/hooks/*",
+    "./lib/*": "./dist/lib/*",
     "./css/*": "./css/*"
   },
   "types": "./dist/index.d.ts",
   "engines": {
-    "node": ">= 16"
+    "node": ">= 18"
   },
   "files": [
     "dist",
@@ -23,7 +26,7 @@
     "test": "vitest run",
     "coverage": "vitest run --coverage",
     "lint": "npm run lint-js && npm run lint-css",
-    "lint-js": "eslint '**/*.{js,ts,tsx}'",
+    "lint-js": "eslint '**/*.[jt]s?(x)'",
     "lint-css": "stylelint 'src/**/*.css'",
     "typecheck": "tsc --project 'tsconfig.json' --noEmit",
     "prebuild": "npm run typecheck && npm run lint && npm run test",
@@ -52,7 +55,6 @@
     "react-dom": ">= 18"
   },
   "devDependencies": {
-    "@alexzimakov/eslint-config": "1.8.0",
     "@heroicons/react": "2.1.1",
     "@storybook/addon-actions": "7.6.7",
     "@storybook/addon-essentials": "7.6.7",
@@ -60,37 +62,40 @@
     "@storybook/addon-themes": "7.6.7",
     "@storybook/react": "7.6.7",
     "@storybook/react-vite": "7.6.7",
+    "@stylistic/eslint-plugin": "1.6.3",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.10.6",
-    "@types/react": "18.2.46",
+    "@types/node": "20.10.7",
+    "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.17.0",
-    "@typescript-eslint/parser": "6.17.0",
-    "@vitest/coverage-istanbul": "1.1.2",
+    "@typescript-eslint/eslint-plugin": "7.1.1",
+    "@typescript-eslint/parser": "7.1.1",
+    "@vitest/coverage-istanbul": "1.1.3",
     "autoprefixer": "10.4.16",
-    "eslint": "8.56.0",
+    "color": "4.2.3",
+    "eslint": "8.57.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.34.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.15",
+    "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-testing-library": "6.2.0",
+    "glob": "10.3.10",
     "husky": "8.0.3",
-    "jsdom": "23.0.1",
+    "jsdom": "23.2.0",
     "lint-staged": "15.2.0",
-    "postcss": "8.4.32",
+    "postcss": "8.4.33",
     "postcss-import": "16.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "storybook": "7.6.7",
-    "stylelint": "16.1.0",
+    "stylelint": "16.2.1",
+    "stylelint-config-recess-order": "5.0.0",
     "stylelint-config-standard": "36.0.0",
-    "stylelint-order": "6.0.4",
     "typescript": "5.3.3",
-    "vite": "5.0.10",
-    "vitest": "1.1.2"
+    "vite": "5.0.11",
+    "vitest": "1.1.3"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint-js",