draft-components 3.5.0 → 3.6.0

package/css/draft-components.css

@@ -953,6 +953,8 @@
 .dc-button {
   --dc-button-height: 36px;
   --dc-button-radius: 9px;
+  --dc-button-padding-left: 16px;
+  --dc-button-padding-right: 16px;
   --dc-button-text-color: var(--dc-button-gray-text-color);
   --dc-button-border-color: var(--dc-button-gray-border-color);
   --dc-button-bg: var(--dc-button-gray-bg);
@@ -967,7 +969,7 @@
   place-items: center;
   justify-content: center;
   height: var(--dc-button-height);
-  padding: 0 16px;
+  padding: 0 var(--dc-button-padding-right) 0 var(--dc-button-padding-left);
   font: 500 var(--dc-text-sm);
   color: var(--dc-button-text-color);
   text-align: center;
@@ -1043,6 +1045,14 @@
   grid-template-columns: repeat(3, auto);
 }
 
+.dc-button_has_icon-left {
+  padding-left: calc(var(--dc-button-padding-left) / 1.6);
+}
+
+.dc-button_has_icon-right {
+  padding-right: calc(var(--dc-button-padding-right) / 1.6);
+}
+
 .dc-button_style_tinted {
   --dc-button-text-color: var(--dc-button-gray-tinted-text-color);
   --dc-button-bg: var(--dc-button-gray-tinted-bg);
@@ -1064,36 +1074,36 @@
 .dc-button_xs {
   --dc-button-height: 28px;
   --dc-button-radius: 7px;
+  --dc-button-padding-left: 8px;
+  --dc-button-padding-right: 8px;
 
-  padding-right: 8px;
-  padding-left: 8px;
   font: 500 var(--dc-text-xs);
 }
 
 .dc-button_sm {
   --dc-button-height: 32px;
   --dc-button-radius: 8px;
+  --dc-button-padding-left: 12px;
+  --dc-button-padding-right: 12px;
 
-  padding-right: 12px;
-  padding-left: 12px;
   font: 500 var(--dc-text-sm);
 }
 
 .dc-button_lg {
   --dc-button-height: 40px;
   --dc-button-radius: 10px;
+  --dc-button-padding-left: 18px;
+  --dc-button-padding-right: 18px;
 
-  padding-right: 18px;
-  padding-left: 18px;
   font: 500 var(--dc-text-md);
 }
 
 .dc-button_xl {
   --dc-button-height: 44px;
   --dc-button-radius: 11px;
+  --dc-button-padding-left: 20px;
+  --dc-button-padding-right: 20px;
 
-  padding-right: 20px;
-  padding-left: 20px;
   font: 500 var(--dc-text-md);
 }
 
@@ -1687,14 +1697,17 @@
   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_full-width {
+  display: flex;
+  width: 100%;
 }
 
-.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_invalid {
+  border-color: var(--dc-input-border-color-error);
+}
+
+.dc-text-input_disabled {
+  opacity: var(--dc-disabled-state-opacity);
 }
 
 .dc-text-input_focused {
@@ -1702,17 +1715,14 @@
   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 > :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_full-width {
-  display: flex;
-  width: 100%;
+.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_sm {
@@ -3521,9 +3531,9 @@
   box-sizing: border-box;
   width: 100%;
   overflow-x: auto;
+  scroll-snap-type: x mandatory;
   border: 0 solid var(--dc-table-border-color);
   scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
 }
 
 .dc-table-container_border_all {
@@ -3560,9 +3570,9 @@
   padding:
     var(--dc-table-cell-padding-y)
     var(--dc-table-cell-padding-x);
+  scroll-snap-align: start;
   background: var(--dc-table-bg);
   border-bottom: 1px solid var(--dc-table-border-color);
-  scroll-snap-align: start;
 }
 
 .dc-table-cell_head {
@@ -4106,6 +4116,10 @@
   color-scheme: light;
 }
 
+.dc-empty-state_full_height {
+  height: 100%;
+}
+
 .dc-empty-state__image {
   color: var(--dc-empty-state-secondary-color);
 }
@@ -4644,9 +4658,9 @@
 
 .dc-filter-value-list > li {
   display: flex;
-  scroll-snap-align: start;
   align-items: center;
   min-height: 32px;
+  scroll-snap-align: start;
 }
 
 .dc-filter-popover {

package/dist/components/button/button.css

@@ -1,6 +1,8 @@
 .dc-button {
   --dc-button-height: 36px;
   --dc-button-radius: 9px;
+  --dc-button-padding-left: 16px;
+  --dc-button-padding-right: 16px;
   --dc-button-text-color: var(--dc-button-gray-text-color);
   --dc-button-border-color: var(--dc-button-gray-border-color);
   --dc-button-bg: var(--dc-button-gray-bg);
@@ -15,7 +17,7 @@
   place-items: center;
   justify-content: center;
   height: var(--dc-button-height);
-  padding: 0 16px;
+  padding: 0 var(--dc-button-padding-right) 0 var(--dc-button-padding-left);
   font: 500 var(--dc-text-sm);
   color: var(--dc-button-text-color);
   text-align: center;
@@ -91,6 +93,14 @@
   grid-template-columns: repeat(3, auto);
 }
 
+.dc-button_has_icon-left {
+  padding-left: calc(var(--dc-button-padding-left) / 1.6);
+}
+
+.dc-button_has_icon-right {
+  padding-right: calc(var(--dc-button-padding-right) / 1.6);
+}
+
 .dc-button_style_tinted {
   --dc-button-text-color: var(--dc-button-gray-tinted-text-color);
   --dc-button-bg: var(--dc-button-gray-tinted-bg);
@@ -112,36 +122,36 @@
 .dc-button_xs {
   --dc-button-height: 28px;
   --dc-button-radius: 7px;
+  --dc-button-padding-left: 8px;
+  --dc-button-padding-right: 8px;
 
-  padding-right: 8px;
-  padding-left: 8px;
   font: 500 var(--dc-text-xs);
 }
 
 .dc-button_sm {
   --dc-button-height: 32px;
   --dc-button-radius: 8px;
+  --dc-button-padding-left: 12px;
+  --dc-button-padding-right: 12px;
 
-  padding-right: 12px;
-  padding-left: 12px;
   font: 500 var(--dc-text-sm);
 }
 
 .dc-button_lg {
   --dc-button-height: 40px;
   --dc-button-radius: 10px;
+  --dc-button-padding-left: 18px;
+  --dc-button-padding-right: 18px;
 
-  padding-right: 18px;
-  padding-left: 18px;
   font: 500 var(--dc-text-md);
 }
 
 .dc-button_xl {
   --dc-button-height: 44px;
   --dc-button-radius: 11px;
+  --dc-button-padding-left: 20px;
+  --dc-button-padding-right: 20px;
 
-  padding-right: 20px;
-  padding-left: 20px;
   font: 500 var(--dc-text-md);
 }
 

package/dist/components/empty-state/empty-state.css

@@ -14,6 +14,10 @@
   color-scheme: light;
 }
 
+.dc-empty-state_full_height {
+  height: 100%;
+}
+
 .dc-empty-state__image {
   color: var(--dc-empty-state-secondary-color);
 }

package/dist/components/empty-state/empty-state.d.ts

@@ -7,6 +7,7 @@ export type EmptyStateProps = {
     message?: ReactNode;
     primaryAction?: ReactNode;
     secondaryAction?: ReactNode;
+    fullHeight?: boolean;
 } & EmptyStateBaseProps;
-export declare function EmptyState({ className, image, title, message, primaryAction, secondaryAction, children, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyState({ className, image, title, message, primaryAction, secondaryAction, fullHeight, children, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/empty-state/empty-state.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from '../../lib/react-helpers.js';
-export function EmptyState({ className, image, title, message, primaryAction, secondaryAction, children, ...props }) {
-    return (_jsxs("div", { ...props, className: classNames('dc-empty-state', className), children: [image
+export function EmptyState({ className, image, title, message, primaryAction, secondaryAction, fullHeight, children, ...props }) {
+    return (_jsxs("div", { ...props, className: classNames(className, {
+            'dc-empty-state': true,
+            'dc-empty-state_full_height': fullHeight,
+        }), children: [image
                 ? _jsx("div", { className: "dc-empty-state__image", children: image })
                 : null, title
                 ? _jsx("h2", { className: "dc-empty-state__title", children: title })

package/dist/components/filtered-search/filter-value-list.css

@@ -11,7 +11,7 @@
 
 .dc-filter-value-list > li {
   display: flex;
-  scroll-snap-align: start;
   align-items: center;
   min-height: 32px;
+  scroll-snap-align: start;
 }

package/dist/components/filtered-search/filtered-search.css

@@ -94,9 +94,9 @@
 
 .dc-filter-value-list > li {
   display: flex;
-  scroll-snap-align: start;
   align-items: center;
   min-height: 32px;
+  scroll-snap-align: start;
 }
 
 .dc-filter-popover {

package/dist/components/table/table.css

@@ -19,9 +19,9 @@
   box-sizing: border-box;
   width: 100%;
   overflow-x: auto;
+  scroll-snap-type: x mandatory;
   border: 0 solid var(--dc-table-border-color);
   scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
 }
 
 .dc-table-container_border_all {
@@ -58,9 +58,9 @@
   padding:
     var(--dc-table-cell-padding-y)
     var(--dc-table-cell-padding-x);
+  scroll-snap-align: start;
   background: var(--dc-table-bg);
   border-bottom: 1px solid var(--dc-table-border-color);
-  scroll-snap-align: start;
 }
 
 .dc-table-cell_head {

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

@@ -29,14 +29,17 @@
   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_full-width {
+  display: flex;
+  width: 100%;
 }
 
-.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_invalid {
+  border-color: var(--dc-input-border-color-error);
+}
+
+.dc-text-input_disabled {
+  opacity: var(--dc-disabled-state-opacity);
 }
 
 .dc-text-input_focused {
@@ -44,17 +47,14 @@
   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 > :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_full-width {
-  display: flex;
-  width: 100%;
+.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_sm {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -26,7 +26,7 @@
     "test": "vitest run",
     "coverage": "vitest run --coverage",
     "lint": "npm run lint-js && npm run lint-css",
-    "lint-js": "eslint '**/*.[jt]s?(x)'",
+    "lint-js": "eslint",
     "lint-css": "stylelint 'src/**/*.css'",
     "typecheck": "tsc --project 'tsconfig.json' --noEmit",
     "prebuild": "npm run typecheck && npm run lint && npm run test",
@@ -55,49 +55,50 @@
     "react-dom": ">= 18"
   },
   "devDependencies": {
-    "@heroicons/react": "2.1.5",
-    "@storybook/addon-actions": "^8.2.7",
-    "@storybook/addon-essentials": "^8.2.7",
-    "@storybook/addon-links": "^8.2.7",
-    "@storybook/addon-themes": "^8.2.7",
-    "@storybook/core-common": "^8.2.7",
-    "@storybook/react": "^8.2.7",
-    "@storybook/react-vite": "^8.2.7",
-    "@stylistic/eslint-plugin": "2.6.1",
+    "@eslint/js": "9.16.0",
+    "@heroicons/react": "2.2.0",
+    "@storybook/addon-actions": "8.4.7",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/addon-themes": "8.4.7",
+    "@storybook/core-common": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-vite": "8.4.7",
+    "@stylistic/eslint-plugin": "2.12.1",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.4.8",
-    "@testing-library/react": "16.0.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.14.13",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.0.0",
-    "@typescript-eslint/parser": "8.0.0",
-    "@vitejs/plugin-react": "4.3.1",
-    "@vitest/coverage-istanbul": "2.0.5",
-    "autoprefixer": "10.4.19",
+    "@types/node": "20.17.10",
+    "@types/react": "18.3.16",
+    "@types/react-dom": "18.3.5",
+    "@vitejs/plugin-react": "4.3.4",
+    "@vitest/coverage-istanbul": "2.1.8",
+    "autoprefixer": "10.4.20",
     "color": "4.2.3",
-    "eslint": "8.57.0",
-    "eslint-plugin-jsx-a11y": "6.9.0",
-    "eslint-plugin-react": "7.35.0",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-testing-library": "6.2.2",
+    "eslint": "9.16.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.1.0",
+    "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-testing-library": "7.1.1",
     "glob": "11.0.0",
-    "husky": "9.1.4",
-    "jsdom": "24.1.1",
-    "lint-staged": "15.2.7",
-    "postcss": "8.4.40",
+    "globals": "15.13.0",
+    "husky": "9.1.7",
+    "jsdom": "25.0.1",
+    "lint-staged": "15.2.11",
+    "postcss": "8.4.49",
     "postcss-import": "16.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "storybook": "^8.2.7",
-    "stylelint": "16.8.1",
-    "stylelint-config-recess-order": "5.0.1",
+    "storybook": "^8.4.7",
+    "stylelint": "16.11.0",
+    "stylelint-config-recess-order": "5.1.1",
     "stylelint-config-standard": "36.0.1",
-    "typescript": "5.5.4",
-    "vite": "5.3.5",
-    "vitest": "2.0.5"
+    "typescript": "5.7.2",
+    "typescript-eslint": "8.18.0",
+    "vite": "6.0.3",
+    "vitest": "2.1.8"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint-js",