@ntbjs/react-components 2.0.14 → 3.0.0-rc.2

package/build/widgets/SummaryCard/SummaryCard.styled.js

@@ -7,137 +7,82 @@ const shouldForwardProp = prop => {
 };
 const SummaryCard = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  flex-direction: column;
-  border-radius: 4px;
-  ${props => props.view === 'compact' && css`
-      overflow: hidden;
-      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-    `}
-  width: ${props => props.width ? `${props.width}px` : '100%'};
-  ${props => props.view === 'compact' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent'};
-
-  ${props => props.$useBorder ? props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-500')}`, `1px solid ${props.theme.getColor('gray-300')}`) : null}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__SummaryCard",
+  componentId: "sc-80dyqg-0"
+})(["display:flex;flex-direction:column;border-radius:4px;", " width:", ";", ";", ""], props => props.view === 'compact' && css(["overflow:hidden;box-shadow:0px 3px 6px rgba(0,0,0,0.16);"]), props => props.width ? `${props.width}px` : '100%', props => props.view === 'compact' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent', props => props.$useBorder ? props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-500')}`, `1px solid ${props.theme.getColor('gray-300')}`) : null);
 const Gutter = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  ${props => {
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__Gutter",
+  componentId: "sc-80dyqg-1"
+})(["", " padding-bottom:", "px;"], props => {
   if (props.renderAsMargin) {
-    return css`
-        margin-bottom: ${props.$gutter || 8}px;
-      `;
+    return css(["margin-bottom:", "px;"], props.$gutter || 8);
   } else {
-    return css`
-        padding-bottom: ${props.$gutter || 8}px;
-      `;
+    return css(["padding-bottom:", "px;"], props.$gutter || 8);
   }
-}}
-  padding-bottom: ${props => props.$gutter || 8}px;
-`;
+}, props => props.$gutter || 8);
 const Header = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__Header",
+  componentId: "sc-80dyqg-2"
+})(["display:flex;align-items:center;justify-content:space-between;padding:0 16px;"]);
 const HeaderLeft = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  > * {
-    margin-right: 4px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__HeaderLeft",
+  componentId: "sc-80dyqg-3"
+})(["display:flex;align-items:center;justify-content:flex-start;> *{margin-right:4px;}"]);
 const HeaderRight = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-
-  > * {
-    margin-left: 4px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__HeaderRight",
+  componentId: "sc-80dyqg-4"
+})(["display:flex;align-items:center;justify-content:flex-end;> *{margin-left:4px;}"]);
 const Title = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: inline-block;
-  padding: 0 16px;
-  font: normal normal 500 14px/19px Roboto;
-  letter-spacing: 0.28px;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__Title",
+  componentId: "sc-80dyqg-5"
+})(["display:inline-block;padding:0 16px;font:normal normal 500 14px/19px Roboto;letter-spacing:0.28px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;", ";"], props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
 const Description = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  padding: 0 16px;
-  text-align: left;
-  font: normal normal normal 12px/16px Roboto;
-  letter-spacing: 0.24px;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-  overflow-wrap: break-word;
-  word-break: break-word;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__Description",
+  componentId: "sc-80dyqg-6"
+})(["padding:0 16px;text-align:left;font:normal normal normal 12px/16px Roboto;letter-spacing:0.24px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;overflow-wrap:break-word;word-break:break-word;", ";"], props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
 styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)``;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__Instruction",
+  componentId: "sc-80dyqg-7"
+})([""]);
 const Footer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__Footer",
+  componentId: "sc-80dyqg-8"
+})(["display:flex;align-items:center;justify-content:space-between;padding:0 16px;"]);
 const FooterLeft = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  > * {
-    margin-right: 4px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__FooterLeft",
+  componentId: "sc-80dyqg-9"
+})(["display:flex;align-items:center;justify-content:flex-start;> *{margin-right:4px;}"]);
 const FooterRight = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-
-  > * {
-    margin-left: 4px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__FooterRight",
+  componentId: "sc-80dyqg-10"
+})(["display:flex;align-items:center;justify-content:flex-end;> *{margin-left:4px;}"]);
 styled(FloatingArrow).withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  ${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "SummaryCardstyled__StyledFloatingArrow",
+  componentId: "sc-80dyqg-11"
+})(["", ""], props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white')));
 
 export { Description, Footer, FooterLeft, FooterRight, Gutter, Header, HeaderLeft, HeaderRight, SummaryCard, Title };
 //# sourceMappingURL=SummaryCard.styled.js.map

package/build/widgets/SummaryCard/SummaryCard.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryCard.styled.js","sources":["../../../src/components/widgets/SummaryCard/SummaryCard.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { FloatingArrow } from '@floating-ui/react';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const SummaryCard = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  border-radius: 4px;\n  ${props =>\n    props.view === 'compact' &&\n    css`\n      overflow: hidden;\n      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);\n    `}\n  width: ${props => (props.width ? `${props.width}px` : '100%')};\n  ${props =>\n    props.view === 'compact'\n      ? props.theme.themeProp(\n          'background',\n          props.theme.getColor('gray-700'),\n          props.theme.getColor('white')\n        )\n      : 'background: transparent'};\n\n  ${props =>\n    props.$useBorder\n      ? props.theme.themeProp(\n          'border',\n          `1px solid ${props.theme.getColor('gray-500')}`,\n          `1px solid ${props.theme.getColor('gray-300')}`\n        )\n      : null}\n`;\n\nexport const Gutter = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${props => {\n    if (props.renderAsMargin) {\n      return css`\n        margin-bottom: ${props.$gutter || 8}px;\n      `;\n    } else {\n      return css`\n        padding-bottom: ${props.$gutter || 8}px;\n      `;\n    }\n  }}\n  padding-bottom: ${props => props.$gutter || 8}px;\n`;\n\nexport const Header = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n`;\n\nexport const HeaderLeft = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > * {\n    margin-right: 4px;\n  }\n`;\n\nexport const HeaderRight = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n`;\n\nexport const Title = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: inline-block;\n  padding: 0 16px;\n  font: normal normal 500 14px/19px Roboto;\n  letter-spacing: 0.28px;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n`;\n\nexport const Description = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding: 0 16px;\n  text-align: left;\n  font: normal normal normal 12px/16px Roboto;\n  letter-spacing: 0.24px;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  word-break: break-word;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n`;\n\nexport const Instruction = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)``;\n\nexport const Footer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n`;\n\nexport const FooterLeft = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > * {\n    margin-right: 4px;\n  }\n`;\n\nexport const FooterRight = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n`;\n\nexport const StyledFloatingArrow = styled(FloatingArrow)\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","SummaryCard","styled","div","withConfig","attrs","applyDefaultTheme","props","view","css","width","theme","themeProp","getColor","$useBorder","Gutter","renderAsMargin","$gutter","Header","HeaderLeft","HeaderRight","Title","span","Description","Footer","FooterLeft","FooterRight","FloatingArrow"],"mappings":"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"}
+{"version":3,"file":"SummaryCard.styled.js","sources":["../../../src/components/widgets/SummaryCard/SummaryCard.styled.ts"],"sourcesContent":["// $-prefixed props are transient and never reach the DOM.\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { FloatingArrow } from '@floating-ui/react';\n\n/** Card root props; what `SummaryCard.tsx` passes to `<S.SummaryCard>`. */\nexport interface SummaryCardStyleProps {\n  /** `view` as string (not narrowed to 'compact'|'grid'); NO `$` to preserve existing DOM baseline. */\n  view?: string;\n  /** `width` as number (px); NO `$` to preserve existing DOM baseline. */\n  width?: number;\n  /** `useBorder` — optional here even though component defaults to false. */\n  $useBorder?: boolean;\n}\n\n/** Gutter spacer component; rendered seven times by `SummaryCard.tsx`. */\ninterface SummaryCardGutterStyleProps {\n  /** `$gutter` — always a literal (4, 8, or 16) at the call sites; number. */\n  $gutter?: number;\n  /** `renderAsMargin` — read but never passed; conditional here is dead code. */\n  renderAsMargin?: boolean;\n}\n\n// Single-argument (styled-components 5 compat); prop needs annotation because withConfig takes by reference.\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const SummaryCard = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<SummaryCardStyleProps>(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  border-radius: 4px;\n  ${props =>\n    props.view === 'compact' &&\n    css`\n      overflow: hidden;\n      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);\n    `}\n  width: ${props => (props.width ? `${props.width}px` : '100%')};\n  ${props =>\n    props.view === 'compact'\n      ? props.theme.themeProp(\n          'background',\n          props.theme.getColor('gray-700'),\n          props.theme.getColor('white')\n        )\n      : 'background: transparent'};\n\n  ${props =>\n    props.$useBorder\n      ? props.theme.themeProp(\n          'border',\n          `1px solid ${props.theme.getColor('gray-500')}`,\n          `1px solid ${props.theme.getColor('gray-300')}`\n        )\n      : null}\n`;\n\nexport const Gutter = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<SummaryCardGutterStyleProps>(applyDefaultTheme)`\n  ${props => {\n    if (props.renderAsMargin) {\n      return css`\n        margin-bottom: ${props.$gutter || 8}px;\n      `;\n    } else {\n      return css`\n        padding-bottom: ${props.$gutter || 8}px;\n      `;\n    }\n  }}\n  padding-bottom: ${props => props.$gutter || 8}px;\n`;\n\nexport const Header = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n`;\n\nexport const HeaderLeft = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > * {\n    margin-right: 4px;\n  }\n`;\n\nexport const HeaderRight = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n`;\n\nexport const Title = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: inline-block;\n  padding: 0 16px;\n  font: normal normal 500 14px/19px Roboto;\n  letter-spacing: 0.28px;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n`;\n\nexport const Description = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding: 0 16px;\n  text-align: left;\n  font: normal normal normal 12px/16px Roboto;\n  letter-spacing: 0.24px;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  word-break: break-word;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n`;\n\nexport const Instruction = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)``;\n\nexport const Footer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n`;\n\nexport const FooterLeft = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > * {\n    margin-right: 4px;\n  }\n`;\n\nexport const FooterRight = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n`;\n\nexport const StyledFloatingArrow = styled(FloatingArrow)\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","SummaryCard","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","view","css","width","theme","themeProp","getColor","$useBorder","Gutter","renderAsMargin","$gutter","Header","HeaderLeft","HeaderRight","Title","span","Description","Footer","FooterLeft","FooterRight","FloatingArrow"],"mappings":"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"}

package/package.json

@@ -1,36 +1,82 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "2.0.14",
+  "version": "3.0.0-rc.2",
   "publishConfig": {
     "access": "public"
   },
   "description": "NTBs common front-end design utilities and React components.",
   "main": "./build/index.js",
   "module": "./build/index.js",
+  "types": "./types/components/index.d.ts",
   "exports": {
-    "./inputs": "./build/inputs/index.js",
-    "./inputs/*": "./build/inputs/*/index.js",
-    "./data": "./build/data/index.js",
-    "./data/*": "./build/data/*/index.js",
-    "./layout": "./build/layout/index.js",
-    "./layout/*": "./build/layout/*/index.js",
-    "./widgets": "./build/widgets/index.js",
-    "./widgets/*": "./build/widgets/*/index.js",
-    "./widgets/*/*": "./build/widgets/*/*/index.js",
-    "./ssr": "./build/ssr/index.js",
+    ".": {
+      "types": "./types/components/index.d.ts",
+      "default": "./build/index.js"
+    },
+    "./inputs": {
+      "types": "./types/components/inputs/index.d.ts",
+      "default": "./build/inputs/index.js"
+    },
+    "./inputs/*": {
+      "types": "./types/components/inputs/*/index.d.ts",
+      "default": "./build/inputs/*/index.js"
+    },
+    "./data": {
+      "types": "./types/components/data/index.d.ts",
+      "default": "./build/data/index.js"
+    },
+    "./data/*": {
+      "types": "./types/components/data/*/index.d.ts",
+      "default": "./build/data/*/index.js"
+    },
+    "./layout": {
+      "types": "./types/components/layout/index.d.ts",
+      "default": "./build/layout/index.js"
+    },
+    "./layout/*": {
+      "types": "./types/components/layout/*/index.d.ts",
+      "default": "./build/layout/*/index.js"
+    },
+    "./widgets": {
+      "types": "./types/components/widgets/index.d.ts",
+      "default": "./build/widgets/index.js"
+    },
+    "./widgets/*": {
+      "types": "./types/components/widgets/*/index.d.ts",
+      "default": "./build/widgets/*/index.js"
+    },
+    "./widgets/*/*": {
+      "types": "./types/components/widgets/*/*/index.d.ts",
+      "default": "./build/widgets/*/*/index.js"
+    },
+    "./ssr": {
+      "types": "./types/ssr/index.d.ts",
+      "default": "./build/ssr/index.js"
+    },
+    "./styles/utils/colors-export": {
+      "types": "./styles/utils/colors-export.d.ts",
+      "default": "./styles/utils/colors-export.js"
+    },
     "./styles/*": "./styles/*",
     "./icons/*": "./icons/*",
     "./build/*": "./build/*"
   },
   "files": [
     "build",
+    "types",
     "styles",
     "icons"
   ],
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "test:watch": "jest --watch",
+    "typecheck": "tsc -p tsconfig.check.json",
+    "types": "tsc -p tsconfig.json",
+    "types:emit": "node scripts/emit-types.cjs",
+    "prepack": "npm run types:emit",
+    "verify:visual:baseline": "node scripts/visual-gate/ensure-storybook.cjs && playwright test --update-snapshots",
+    "verify:visual:compare": "node scripts/visual-gate/compare.cjs",
     "lint": "eslint .",
     "storybook": "storybook dev -p 6006",
     "storybook:export": "storybook build",
@@ -50,66 +96,68 @@
     "npm": ">=10.0.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "styled-components": ">=5.0.0"
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0",
+    "styled-components": ">=5.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
     "@babel/eslint-parser": "^7.13.14",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@babel/preset-typescript": "^7.28.5",
+    "@eslint/js": "^9.39.5",
+    "@playwright/test": "^1.62.1",
+    "@rollup/plugin-babel": "^7.1.0",
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@storybook/addon-docs": "^10.1.11",
     "@storybook/addon-links": "^10.1.11",
-    "@storybook/addon-themes": "^10.1.11",
+    "@storybook/cli": "^10.1.11",
     "@storybook/react-webpack5": "^10.1.11",
-    "@svgr/rollup": "^5.5.0",
-    "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
+    "@svgr/rollup": "^8.1.0",
+    "@svgr/webpack": "^8.1.0",
+    "@types/prop-types": "^15.7.12",
+    "@typescript-eslint/eslint-plugin": "^8.66.0",
+    "@typescript-eslint/parser": "^8.66.0",
     "babel-loader": "^8.1.0",
-    "babel-plugin-styled-components": "^1.12.0",
+    "babel-plugin-styled-components": "^2.3.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "colors": "^1.4.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.24.0",
-    "eslint-plugin-react": "^7.24.0",
+    "esbuild": "^0.27.7",
+    "eslint": "^9.39.5",
+    "eslint-plugin-react": "^7.35.0",
+    "globals": "^17.9.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.0.4",
-    "madge": "^8.0.0",
+    "jsdom": "^16.7.0",
     "postcss": "^8.3.0",
-    "prop-types": "^15.7.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "rollup": "^2.50.6",
+    "rollup": "^4.62.4",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-multi-input": "^1.3.1",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-url": "^3.0.1",
     "sass": "^1.97.2",
     "sass-loader": "^10.1.1",
     "storybook": "^10.1.11",
     "styled-components": "^6.1.19",
+    "ts-migrate-plugins": "0.1.35",
+    "ts-migrate-server": "0.1.33",
+    "typescript": "6.0.3",
     "url-loader": "^4.1.1"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.28",
     "@restart/hooks": "^0.6.2",
-    "@storybook/cli": "^10.1.11",
-    "@tippyjs/react": "^4.2.6",
     "lodash": "^4.17.21",
     "nanoid": "^3.3.8",
     "polished": "^4.1.3",
-    "popper-max-size-modifier": "^0.2.0",
+    "prop-types": "^15.7.2",
     "react-lazy-load-image-component": "^1.5.1",
     "react-select": "^5.10.2",
     "react-select-async-paginate": "^0.7.11",

package/styles/utils/colors-export.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Hand-written types for colors-export.js.
+ *
+ * Do not derive this from the .js with `keyof typeof`: it works here because the library
+ * compiles with `allowJs`, but a consumer without it degrades the key to
+ * `string | number | symbol` silently and then emits TS2731 in their build, not ours.
+ * The cost is a third hand-maintained copy of the palette beside .config.scss and
+ * colors-export.js, so drift is caught by a build gate rather than at runtime.
+ * It must stay a `.d.ts` — a `.ts` would ship raw TypeScript in the published package.
+ */
+
+/**
+ * Every registered design-token colour name.
+ *
+ * `theme.getColor` takes this union, so `getColor('emerald-999')` is a compile
+ * error instead of a `throw` from inside a styled template at runtime.
+ */
+export type ColorName =
+  | 'orange-600'
+  | 'orange-500'
+  | 'orange-400'
+  | 'emerald-600'
+  | 'emerald-500'
+  | 'emerald-400'
+  | 'emerald-300'
+  | 'emerald-200'
+  | 'gray-900'
+  | 'gray-800'
+  | 'gray-700'
+  | 'gray-600'
+  | 'gray-500'
+  | 'gray-400'
+  | 'gray-300'
+  | 'gray-200'
+  | 'gray-100'
+  | 'gray-50'
+  | 'cercise-500'
+  | 'cercise-400'
+  | 'cercise-300'
+  | 'cercise-200'
+  | 'cercise-100'
+  | 'red-600'
+  | 'red-500'
+  | 'red-200'
+  | 'brown-500'
+  | 'signal-yellow-500'
+  | 'signal-yellow-400'
+  | 'signal-green-500'
+  | 'signal-green-400'
+  | 'black'
+  | 'white';
+
+/** The palette itself: every `ColorName` mapped to a `#rrggbb` string. */
+export declare const colors: Record<ColorName, string>;

package/types/components/data/Alert/Alert.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import * as S from './Alert.styled';
+type AlertOwnProps = {
+    /**
+     * Type of alert that will be reflected by the background color of it.
+     */
+    type?: 'warning' | 'error' | 'info';
+    /**
+     * Icon that will be displayed on the left of the alert message.
+     */
+    icon?: React.ReactElement<any>;
+    /**
+     * Alignment of the alert message.
+     */
+    align?: 'left' | 'center';
+    /**
+     * Message that will be displayed on the alert.
+     */
+    alertMessage?: string;
+    /**
+     * Font size of the alert message in pixel.
+     */
+    fontSize?: number;
+    /**
+     * Line height of the alert message in pixel.
+     */
+    lineHeight?: number;
+    /**
+     * Number of lines that will be displayed before the message will be truncated and replaced with ellipsis.
+     */
+    lineClamp?: number;
+    /**
+     * The top and bottom padding of the alert in pixel.
+     */
+    verticalPadding?: number;
+    /**
+     * The left and right padding of the alert in pixel.
+     */
+    horizontalPadding?: number;
+    /**
+     * Custom width of the alert in pixel.
+     */
+    width?: number;
+};
+/**
+ * Alert display warnings or errors.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { Alert } from '@ntbjs/react-components/data'
+ * // or
+ * import Alert from '@ntbjs/react-components/data/Alert'
+ * ```
+ * ## Props
+ * ```
+ * Pass one of `warning`, `error` or `info` to the `type` prop to render the right Alert.
+ * Pass `align={left}`or `align={center}` to align content.
+ * Pass `icon={<svg></svg>}` to display an icon.
+ * Pass `alertMessage={'message'} to display the message
+ * Pass `fontSize={number}` to set the font size of the message in pixel
+ * Pass `lineHeight={number}` to set the line height of the message in pixel
+ * Pass `lineClamp={number}` to set the number of lines before the message will be truncated
+ * Pass `verticalPadding={number}` to set the top and bottom padding of the alert in pixel
+ * Pass `horizontalPadding={number}` to set the left and right padding of the alert in pixel
+ * Pass `width={number}` to set the width of the alert in pixel
+ *  ```
+ * ### Warning / Error / Info
+ * ```
+ * <Alert type={"warning"} />
+ * <Alert type={"error"} />
+ * <Alert type={"info"} />
+ * ```
+ */
+declare const Alert: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, S.AlertStyleProps>, never>, "ref">, keyof AlertOwnProps> & AlertOwnProps & React.RefAttributes<any>>;
+export default Alert;

package/types/components/data/Alert/Alert.styled.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Props of the `Alert` root, i.e. what `Alert.tsx` passes to `S.Alert`. Value types come
+ * from that file's propTypes; all optional.
+ */
+export interface AlertStyleProps {
+    /** `isWarning` — derived in the component from `type === 'warning'`, so `boolean`. */
+    $warning?: boolean;
+    /** `isError` — derived from `type === 'error'`. */
+    $error?: boolean;
+    /** `isInfo` — derived; the component initialises it `true`. */
+    $info?: boolean;
+    /**
+     * `verticalPadding` — `PropTypes.number`, px. `number` and not `number | string`: the
+     * template interpolates `${…}px`, so a string would already emit `padding: 17pxpx`.
+     */
+    $verticalPadding?: number;
+    /** `horizontalPadding` — `PropTypes.number`, px, interpolated the same way. */
+    $horizontalPadding?: number;
+    /**
+     * `alertMessage` — `PropTypes.string`. Component passes it; nothing reads it. Harmless; `$` filters it.
+     */
+    $alertMessage?: string;
+    /**
+     * `align` — `PropTypes.oneOf(['left', 'center'])`. Defect: component passes `$align`; template reads plain `align` instead. No-op; every Alert is left-aligned.
+     */
+    $align?: 'left' | 'center';
+    /**
+     * `width` — `PropTypes.number`, px. Defect: no `$` means it leaks to DOM as invalid `width="480"` attribute.
+     */
+    width?: number;
+    /**
+     * `align` in its non-`$` form — read but never passed; comparison always false.
+     */
+    align?: 'left' | 'center';
+}
+/** Props of `AlertRender`, i.e. what `Alert.tsx` passes to `S.AlertRender`. */
+interface AlertRenderStyleProps {
+    /** `lineHeight` — `PropTypes.number`, px, interpolated as `${…}px`. */
+    $lineHeight?: number;
+    /**
+     * `lineClamp` — `PropTypes.number`, the `-webkit-line-clamp` count. The component
+     * defaults it to `0`, which is falsy, so the clamp block is opt-in.
+     */
+    $lineClamp?: number;
+    /**
+     * `fontSize` — `PropTypes.number`, px. Defect: no `$` means it leaks to DOM as `font-size="12"` attribute.
+     */
+    fontSize?: number;
+}
+export declare const Alert: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, AlertStyleProps>, never>> & string;
+export declare const AlertRender: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, AlertRenderStyleProps>, never>> & string;
+export {};

package/types/components/data/Alert/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Alert';