@grasp-labs/ds-react-components 0.13.0

package/dist/index.js

@@ -0,0 +1,92 @@
+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";
+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
+};

package/dist/tailwind-styles.css

@@ -0,0 +1,229 @@
+@import "tailwindcss";
+
+@theme {
+  --text-3xs: 0.625rem; /* 10px */
+  --text-xxs: 0.75rem; /* 12px */
+  --text-xs: 0.875rem; /* 14px */
+  --text-sm: 1rem; /* 16px */
+  --text-md: 1.125rem; /* 18px */
+  --text-lg: 1.5625rem; /* 25px */
+  --text-xl: 1.875rem; /* 30px */
+  --text-2xl: 3.75rem; /* 60px */
+  --text-3xl: 4.6875rem; /* 75px */
+  --text-4xl: 5rem; /* 80px */
+
+  --spacing-0: 0;
+  --spacing-0_5: 0.125rem; /* 2px */
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-7: 1.75rem; /* 28px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-9: 2.25rem; /* 36px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-11: 2.75rem; /* 44px */
+  --spacing-12: 3rem; /* 48px */
+  --spacing-13: 3.25rem; /* 52px */
+  --spacing-14: 3.5rem; /* 56px */
+  --spacing-15: 3.75rem; /* 60px */
+  --spacing-16: 4rem; /* 64px */
+  --spacing-17: 4.25rem; /* 68px */
+  --spacing-18: 4.5rem; /* 72px */
+  --spacing-19: 4.75rem; /* 76px */
+  --spacing-20: 5rem; /* 80px */
+  --spacing-full: 100%;
+
+  --shadow-md: 0 0 12px 2px rgba(100, 103, 198, 0.25);
+
+  --animate-fadeIn: fadeIn;
+}
+
+@theme inline {
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-primary-super-light: var(--primary-super-light);
+  --color-secondary: var(--secondary);
+  --color-text: var(--text);
+  --color-text-contrast: var(--text-contrast);
+  --color-text-disabled: var(--text-disabled);
+  --color-background: var(--background);
+  --color-background-disabled: var(--background-disabled);
+  --color-background-success: var(--background-success);
+  --color-background-error: var(--background-error);
+  --color-background-warning: var(--background-warning);
+  --color-contrast: var(--contrast);
+  --color-error: var(--error);
+  --color-error-light: var(--error-light);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-shade: var(--shade);
+  --color-shade-light: var(--shade-light);
+  --color-mask: var(--mask);
+
+  --font-inter: var(--inter);
+}
+
+@font-face {
+  font-family: Inter;
+  src: url("./assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+: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;
+  --secondary: #8b8b8b;
+  --text: #2b292a;
+  --text-contrast: #f8f7f6;
+  --text-disabled: #acaaa9;
+  --background: #f5f4f3;
+  --background-disabled: #eaeaea;
+  --background-error: #ff4d4f4d;
+  --background-success: #52c41a33;
+  --background-warning: #ffa50033;
+  --contrast: #ffffff;
+  --error: #ff4d4f;
+  --error-light: #ff9495;
+  --mask: #2a2a2a73;
+  --shade: #d1d1d1;
+  --shade-light: #f3f2f4;
+  --success: #52c41a;
+  --warning: #ffa500;
+}
+
+body {
+  background: var(--background);
+  color: var(--text);
+  font-size: var(--font-base);
+  font-family: var(--font-inter);
+}
+
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    padding: 0;
+  }
+
+  h1 {
+    font-size: var(--text-4xl);
+    line-height: var(--text-4xl);
+  }
+
+  h2 {
+    font-size: var(--text-3xl);
+    line-height: var(--text-3xl);
+  }
+
+  h3 {
+    font-size: var(--text-xxl);
+    line-height: var(--text-xxl);
+  }
+
+  h4 {
+    font-size: var(--text-xl);
+    line-height: var(--text-xl);
+  }
+
+  h5 {
+    font-size: var(--text-lg);
+    line-height: var(--text-lg);
+  }
+
+  h6 {
+    font-size: var(--text-md);
+    line-height: var(--text-md);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/types/BaseOption.d.ts

@@ -0,0 +1,5 @@
+export type BaseOption = {
+    id: string | number;
+    label: string;
+    disabled?: boolean;
+};

package/dist/types/IconComponent.d.ts

@@ -0,0 +1,6 @@
+import { FC, SVGProps } from 'react';
+export type IconProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+    titleId?: string;
+};
+export type IconComponent = FC<IconProps>;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './BaseOption';

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@grasp-labs/ds-react-components",
+  "version": "0.13.0",
+  "private": false,
+  "license": "Apache-2.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/index.css",
+    "./tailwind-styles.css": "./dist/tailwind-styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "dev": "npm run build -- --watch",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:storybook": "vitest --project=storybook run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "peerDependencies": {
+    "@tanstack/react-table": "^8.0.0",
+    "@xyflow/react": "^12.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@storybook/addon-a11y": "^10.0.1",
+    "@storybook/addon-themes": "^10.0.1",
+    "@storybook/addon-vitest": "^10.0.1",
+    "@storybook/react-vite": "^10.0.1",
+    "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-table": "^8.21.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.16.5",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@vitest/browser": "4.0.5",
+    "@vitest/browser-playwright": "^4.0.5",
+    "@vitest/coverage-v8": "4.0.5",
+    "@xyflow/react": "^12.8.6",
+    "downshift": "^9.0.10",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^10.0.1",
+    "globals": "^16.2.0",
+    "jsdom": "^27.0.1",
+    "playwright": "^1.54.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.7.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router": "^7.8.2",
+    "storybook": "^10.0.1",
+    "tailwindcss": "^4.1.11",
+    "tailwind-merge": "^3.3.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.35.0",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.1",
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.5",
+    "json-edit-react": "^1.29.0",
+    "nanoid": "^5.1.5"
+  }
+}