@grasp-labs/ds-react-components 0.13.0 → 0.14.0

package/dist/index.d.ts

@@ -7,7 +7,10 @@ export * from './components/button';
 export * from './components/card';
 export * from './components/checkbox';
 export * from './components/dialog';
+export * from './components/drawer';
 export * from './components/dynamicIcon';
+export * from './components/errorBoundary';
+export * from './components/errorPage';
 export * from './components/field';
 export * from './components/flow';
 export * from './components/iconButton';
@@ -17,8 +20,10 @@ export * from './components/logo';
 export * from './components/menu';
 export * from './components/multiSelect';
 export * from './components/popover';
+export * from './components/portal';
 export * from './components/radioButton';
 export * from './components/select';
+export * from './components/spinner';
 export * from './components/table';
 export * from './components/tabPanel';
 export * from './components/tag';

package/dist/{index.esm-DgyjJxy1.js → index.esm-BRuCtMqY.js}

@@ -1,4 +1,4 @@
-import { j as o } from "./index-CQ7w5dl6.js";
+import { j as o } from "./index-CDEDmkC7.js";
 import { useState as G, useEffect as Oe, createContext as Xt, useRef as ce, useContext as Zt, useMemo as le, useCallback as Ie } from "react";
 const Be = (e, t, n, r, a) => {
   if (!r) throw new Error(a ?? `Invalid property path: ${t}

package/dist/index.js

@@ -1,92 +1,99 @@
-import { A as o, b as e, B as n, a as l, c, d as t, $ as i, C as I, a0 as r, e as d, f as u, a1 as C, a2 as g, a3 as b, a4 as T, a5 as h, a6 as F, a7 as x, g as D, a8 as B, a9 as L, aa as p, ab as H, D as E, h as S, E as m, ac as v, ad as P, ae as f, af as O, ah as R, ag as w, F as y, k, o as M, i as A, n as W, l as _, p as q, m as z, ai as G, q as J, O as N, Q as U, U as V, V as Y, W as j, X as K, aj as Q, ak as X, I as Z, al as $, am as aa, J as sa, Y as oa, L as ea, r as na, s as la, M as ca, t as ta, w as ia, an as Ia, ao as ra, P as da, R as ua, ap as Ca, aq as ga, ar as ba, as as Ta, S as ha, at as Fa, au as xa, x as Da, y as Ba, T as La, av as pa, u as Ha, v as Ea, aw as Sa, z as ma, G as va, H as Pa, K as fa, N as Oa, Z as Ra, ax as wa, ay as ya, _ as ka, az as Ma } from "./index-CQ7w5dl6.js";
+import { A as o, b as e, B as n, a as l, c, d as r, a5 as t, C as i, y as I, a6 as d, e as u, f as C, a7 as g, a8 as b, a9 as T, aa as h, ab as F, ac as D, ad as p, g as B, ae as x, af as E, ag as L, ah as P, D as S, h as H, i as m, t as v, ai as w, E as f, aj as y, ak as O, k as R, al as k, an as A, am as M, F as W, m as G, q as _, l as q, p as z, n as J, r as N, o as U, ao as V, s as Y, Y as j, Z as K, _ as Q, $ as X, a0 as Z, a1 as $, ap as aa, aq as sa, I as oa, ar as ea, as as na, J as la, a2 as ca, L as ra, u as ta, v as ia, M as Ia, w as da, G as ua, at as Ca, au as ga, P as ba, x as Ta, R as ha, av as Fa, aw as Da, ax as pa, ay as Ba, S as xa, z as Ea, az as La, aA as Pa, N as Sa, O as Ha, T as ma, aB as va, H as wa, K as fa, aC as ya, Q as Oa, U as Ra, V as ka, W as Aa, X as Ma, a3 as Wa, aD as Ga, aE as _a, a4 as qa, aF as za, aG as Ja } from "./index-CDEDmkC7.js";
 export {
   o as Alert,
   e as AnimatedList,
   n as BaseButton,
   l as BaseTextBox,
   c as Breadcrumb,
-  t as Button,
-  i as CalendarIcon,
-  I as Card,
-  r as CheckIcon,
-  d as Checkbox,
-  u as CheckboxIcon,
-  C as ChevronDoubleLeftIcon,
-  g as ChevronDoubleRightIcon,
-  b as ChevronLeftIcon,
-  T as ChevronRightIcon,
-  h as CircleIcon,
-  F as CloseIcon,
-  x as CogWheelIcon,
-  D as ConfirmationDialog,
-  B as DashIcon,
-  L as DatabaseIcon,
-  p as DeleteIcon,
-  H as DetailsIcon,
-  E as Dialog,
-  S as DynamicIcon,
-  m as EMPTY_OPTION_ID,
-  v as EarthIcon,
-  P as ErrorFilledIcon,
-  f as ErrorOutlinedIcon,
-  O as ExpandDownIcon,
-  R as ExpandIcon,
-  w as ExpandRightIcon,
-  y as Field,
-  k as FieldContent,
-  M as FieldGroup,
-  A as FieldLabel,
-  W as FieldLegend,
-  _ as FieldMessage,
-  q as FieldSeparator,
-  z as FieldSet,
-  G as FilterIcon,
-  J as FlowTile,
-  N as H1,
-  U as H2,
-  V as H3,
-  Y as H4,
-  j as H5,
-  K as H6,
-  Q as HourglassCircleIcon,
-  X as HourglassFilledIcon,
-  Z as IconButton,
-  $ as IdeaIcon,
-  aa as InfoOutlinedIcon,
-  sa as JsonEditor,
-  oa as Label,
-  ea as List,
-  na as ListItem,
-  la as Logo,
-  ca as Menu,
-  ta as MultiSelect,
-  ia as Pagination,
-  Ia as PlayIcon,
-  ra as PlusIcon,
-  da as Popover,
-  ua as RadioButton,
-  Ca as RecycleIcon,
-  ga as ReloadIcon,
-  ba as SaveIcon,
-  Ta as SearchIcon,
-  ha as Select,
-  Fa as SuccessFilledIcon,
-  xa as SuccessOutlinedIcon,
-  Da as Tab,
-  Ba as TabPanel,
-  La as Table,
-  pa as TableArrowIcon,
-  Ha as TableCell,
-  Ea as TableHeaderCell,
-  Sa as TableIcon,
-  ma as Tag,
-  va as TagList,
-  Pa as TextBox,
-  fa as Toast,
-  Oa as Toaster,
-  Ra as UnstyledButton,
-  wa as WarningFilledIcon,
-  ya as WarningOutlinedIcon,
-  ka as icons,
-  Ma as useViewportCollision
+  r as Button,
+  t as CalendarIcon,
+  i as Card,
+  I as CenteredSpinner,
+  d as CheckIcon,
+  u as Checkbox,
+  C as CheckboxIcon,
+  g as ChevronDoubleLeftIcon,
+  b as ChevronDoubleRightIcon,
+  T as ChevronLeftIcon,
+  h as ChevronRightIcon,
+  F as CircleIcon,
+  D as CloseIcon,
+  p as CogWheelIcon,
+  B as ConfirmationDialog,
+  x as DashIcon,
+  E as DatabaseIcon,
+  L as DeleteIcon,
+  P as DetailsIcon,
+  S as Dialog,
+  H as Drawer,
+  m as DynamicIcon,
+  v as EMPTY_OPTION_ID,
+  w as EarthIcon,
+  f as ErrorBoundary,
+  y as ErrorFilledIcon,
+  O as ErrorOutlinedIcon,
+  R as ErrorPage,
+  k as ExpandDownIcon,
+  A as ExpandIcon,
+  M as ExpandRightIcon,
+  W as Field,
+  G as FieldContent,
+  _ as FieldGroup,
+  q as FieldLabel,
+  z as FieldLegend,
+  J as FieldMessage,
+  N as FieldSeparator,
+  U as FieldSet,
+  V as FilterIcon,
+  Y as FlowTile,
+  j as H1,
+  K as H2,
+  Q as H3,
+  X as H4,
+  Z as H5,
+  $ as H6,
+  aa as HourglassCircleIcon,
+  sa as HourglassFilledIcon,
+  oa as IconButton,
+  ea as IdeaIcon,
+  na as InfoOutlinedIcon,
+  la as JsonEditor,
+  ca as Label,
+  ra as List,
+  ta as ListItem,
+  ia as Logo,
+  Ia as Menu,
+  da as MultiSelect,
+  ua as Pagination,
+  Ca as PlayIcon,
+  ga as PlusIcon,
+  ba as Popover,
+  Ta as Portal,
+  ha as RadioButton,
+  Fa as RecycleIcon,
+  Da as ReloadIcon,
+  pa as SaveIcon,
+  Ba as SearchIcon,
+  xa as Select,
+  Ea as Spinner,
+  La as SuccessFilledIcon,
+  Pa as SuccessOutlinedIcon,
+  Sa as Tab,
+  Ha as TabPanel,
+  ma as Table,
+  va as TableArrowIcon,
+  wa as TableCell,
+  fa as TableHeaderCell,
+  ya as TableIcon,
+  Oa as Tag,
+  Ra as TagList,
+  ka as TextBox,
+  Aa as Toast,
+  Ma as Toaster,
+  Wa as UnstyledButton,
+  Ga as WarningFilledIcon,
+  _a as WarningOutlinedIcon,
+  qa as icons,
+  za as useDropdownPosition,
+  Ja as useViewportCollision
 };

package/dist/tailwind-styles.css

@@ -39,6 +39,12 @@
   --shadow-md: 0 0 12px 2px rgba(100, 103, 198, 0.25);
 
   --animate-fadeIn: fadeIn;
+
+  --z-index-toast: 70;
+  --z-index-dropdown: 60;
+  --z-index-drawer: 50;
+  --z-index-popover: 50;
+  --z-index-dialog: 50;
 }
 
 @theme inline {
@@ -77,77 +83,6 @@
 :root {
   --inter: Inter, sans-serif;
   --font-base: 16px;
-  --primary: rgba(100, 103, 198, 1);
-  --primary-light: rgba(167, 164, 224, 1);
-  --primary-super-light: rgba(239, 240, 249, 1);
-  --secondary: rgba(217, 217, 217, 1);
-  --text: rgba(34, 28, 53, 1);
-  --text-contrast: rgba(247, 246, 247, 1);
-  --text-disabled: rgba(191, 191, 191, 1);
-  --background: rgba(247, 246, 247, 1);
-  --background-disabled: rgba(240, 240, 240, 1);
-  --background-success: rgba(82, 196, 26, 0.20000000298023224);
-  --background-error: rgba(255, 77, 79, 0.30000001192092896);
-  --background-warning: rgba(255, 165, 0, 0.20000000298023224);
-  --contrast: rgba(255, 255, 255, 1);
-  --error: rgba(255, 77, 79, 1);
-  --error-light: rgba(255, 148, 149, 1);
-  --success: rgba(82, 196, 26, 1);
-  --warning: rgba(255, 165, 0, 1);
-  --shade: rgba(240, 240, 240, 1);
-  --shade-light: rgba(252, 252, 254, 1);
-  --mask: rgba(0, 0, 0, 0.44999998807907104);
-  --elevation-dialog: 9999;
-  --elevation-toast: 99999;
-}
-
-.dark {
-  --primary: rgba(100, 103, 198, 1);
-  --primary-light: rgba(167, 164, 224, 1);
-  --primary-super-light: rgba(70, 58, 109, 1);
-  --secondary: rgba(79, 78, 78, 1);
-  --text: rgba(247, 246, 247, 1);
-  --text-contrast: rgba(34, 28, 53, 1);
-  --text-disabled: rgba(100, 100, 100, 1);
-  --background: rgba(34, 28, 53, 1);
-  --background-disabled: rgba(65, 65, 65, 1);
-  --background-success: rgba(82, 196, 26, 0.2);
-  --background-error: rgba(255, 77, 79, 0.3);
-  --background-warning: rgba(255, 165, 0, 0.2);
-  --contrast: rgba(34, 28, 53, 1);
-  --error: rgba(255, 77, 79, 1);
-  --error-light: rgba(255, 148, 149, 1);
-  --success: rgba(82, 196, 26, 1);
-  --warning: rgba(255, 165, 0, 1);
-  --shade: rgba(52, 43, 81, 1);
-  --shade-light: rgba(43, 35, 67, 1);
-  --mask: rgba(255, 255, 255, 0.45);
-}
-
-.alt1 {
-  --primary: #1c1c1e;
-  --primary-light: #8e8e93;
-  --primary-super-light: #f2f2f5;
-  --secondary: #c7c7cc;
-  --text: #1c1c1e;
-  --text-contrast: #fafafa;
-  --text-disabled: #8e8e93;
-  --background: #fcfcfc;
-  --background-disabled: #f5f5f5;
-  --background-error: #dc354533;
-  --background-success: #28a74533;
-  --background-warning: #ffc10733;
-  --contrast: #ffffff;
-  --error: #dc3545;
-  --error-light: #edb3b8;
-  --success: #28a745;
-  --warning: #ffc107;
-  --shade: #e5e5ea;
-  --shade-light: #f2f2f5;
-  --mask: #00000073;
-}
-
-.alt2 {
   --primary: #2a2a2a;
   --primary-light: #5c5c5c;
   --primary-super-light: #e0e0df;
@@ -157,17 +92,40 @@
   --text-disabled: #acaaa9;
   --background: #f5f4f3;
   --background-disabled: #eaeaea;
-  --background-error: #ff4d4f4d;
-  --background-success: #52c41a33;
-  --background-warning: #ffa50033;
+  --background-error: #ff4d4f1a;
+  --background-success: #52c41a1a;
+  --background-warning: #ffa5001a;
   --contrast: #ffffff;
   --error: #ff4d4f;
   --error-light: #ff9495;
-  --mask: #2a2a2a73;
-  --shade: #d1d1d1;
-  --shade-light: #f3f2f4;
   --success: #52c41a;
   --warning: #ffa500;
+  --shade: #d1d1d1;
+  --shade-light: #f3f2f4;
+  --mask: #2a2a2a73;
+}
+
+.dark {
+  --primary: #e0e0df;
+  --primary-light: #b8b8b8;
+  --primary-super-light: #3a3a3a;
+  --secondary: #8b8b8b;
+  --text: #f8f7f6;
+  --text-contrast: #2b292a;
+  --text-disabled: #6b6b6b;
+  --background: #1a1a1a;
+  --background-disabled: #2a2a2a;
+  --background-error: #ff4d4f1a;
+  --background-success: #52c41a1a;
+  --background-warning: #ffa5001a;
+  --contrast: #2a2a2a;
+  --error: #ff6b6d;
+  --error-light: #ff4d4f;
+  --success: #6fdb3f;
+  --warning: #ffb733;
+  --shade: #3f3f3f;
+  --shade-light: #2f2f2f;
+  --mask: #ffffff73;
 }
 
 body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grasp-labs/ds-react-components",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "private": false,
   "license": "Apache-2.0",
   "type": "module",
@@ -24,7 +24,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "tsc -b --noEmit && vite build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "storybook": "storybook dev -p 6006",
@@ -59,9 +59,9 @@
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.1.0",
-    "@vitest/browser": "4.0.5",
+    "@vitest/browser": "^4.0.5",
     "@vitest/browser-playwright": "^4.0.5",
-    "@vitest/coverage-v8": "4.0.5",
+    "@vitest/coverage-v8": "^4.0.5",
     "@xyflow/react": "^12.8.6",
     "downshift": "^9.0.10",
     "eslint": "^9.32.0",