gd-design-library 0.3.2 → 0.3.3

package/README.md

@@ -21,12 +21,16 @@ It provides a set of reusable, accessible, and themeable React UI components des
 
 ## 📦 Installation
 
+Start by ensuring that you already have `@emotion/react` and `@emotion/styled` installed. Then, run one of the following commands to install the dependencies:
+
 ```bash
-npm install gd-design-library
+npm install gd-design-library @emotion/styled @emotion/react
 # or
-yarn add gd-design-library
+yarn add gd-design-library @emotion/styled @emotion/react
 ```
 
+Make sure you're using Node.js **version ≥22.17.0**.
+
 Note: Since this package is private, you need to configure your `.npmrc` with a valid auth token:
 
 ```bash
@@ -39,7 +43,7 @@ Note: Since this package is private, you need to configure your `.npmrc` with a
 
 ### Prerequisites
 
-- Node.js (v18 or higher)
+- Node.js (22.17.0 or higher)
 - Yarn or npm
 
 ### Clone & Install
@@ -144,26 +148,52 @@ The script will generate boilerplate files and update exports automatically.
 
 ## 🧩 Usage
 
-Wrap your app with the `ThemeProvider`:
+Wrap your app in the `ThemeProvider` with `isDefault` to apply default GD global styles and tokens:
 
 ```tsx
 import { ThemeProvider } from 'gd-design-library';
 
 function App() {
   return (
-    <ThemeProvider>
-      <YourApp />
+    <ThemeProvider isDefault>
+      <YourAppRoutes />
     </ThemeProvider>
   );
 }
 ```
 
-Use components like:
+or `initialTheme` to install custom one as default initially
+
+```json
+{
+  "name": "myCustomTheme",
+  "componentAStyles": {
+    "style": "value"
+  }
+}
+```
+
+```tsx
+import { ThemeProvider, defaultTheme } from 'gd-design-library';
+import myCustomTheme from 'PROJECT_PATH/myCustomTheme'; // JSON or any js/ts and similliar with object return
+
+const App = () => {
+  // In case you want extend default theme, by overwriting only particular components
+  const initialTheme = Object.assign({}, defaultTheme, myCustomTheme);
+  return (
+    <ThemeProvider initialTheme={initialTheme}>
+      <YourAppRoutes />
+    </ThemeProvider>
+  );
+};
+```
+
+You can now use components like this:
 
 ```tsx
 import { Button } from 'gd-design-library';
 
-<Button variant="primary">Click Me</Button>;
+<Button variant="primary">Click me</Button>;
 ```
 
 ---

package/components/domainSpecific/Stepper/StepperStyled.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("@emotion/react/jsx-runtime"),S=require("react"),t=require("../../../utils/helpers.js"),d=S.forwardRef(n=>{const{theme:{stepper:c}={},styles:o={},...r}=n,e=[t.get(c,"default",{}),o];return p.jsx("div",{css:e,...r})}),a=n=>{const{theme:{stepper:c}={},$status:o,...r}=n,e=t.get(c,"separator",{}),s=[t.get(e,"default",{}),t.get(e,o,{})];return p.jsx("div",{css:s,...r})},u=n=>{const{theme:{stepper:c}={},$status:o,...r}=n,e=t.get(c,"step",{}),s=[t.get(e,"default",{}),t.get(e,o,{})];return p.jsx("div",{css:s,...r})},y=n=>{const{theme:{stepper:c}={},$status:o,$validationStatus:r,...e}=n,s=t.get(c,"stepIcon",{}),l=[t.get(s,"default",{}),t.get(s,[o,"default"],{}),t.get(s,[o,r],{})];return p.jsx("div",{css:l,...e})},g=n=>{const{theme:{stepper:c}={},$status:o,$validationStatus:r,...e}=n,s=t.get(c,"stepLabel",{}),l=[t.get(s,"default",{}),t.get(s,o,{}),t.get(s,r,{})];return p.jsx("div",{css:l,...e})};exports.SeparatorStyled=a;exports.StepIconStyled=y;exports.StepLabelStyled=g;exports.StepStyled=u;exports.StepperStyled=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("@emotion/react/jsx-runtime"),S=require("react"),t=require("../../../utils/helpers.js"),d=S.forwardRef((n,c)=>{const{theme:{stepper:o}={},styles:r={},...s}=n,e=[t.get(o,"default",{}),r];return p.jsx("div",{css:e,...s})}),a=n=>{const{theme:{stepper:c}={},$status:o,...r}=n,s=t.get(c,"separator",{}),e=[t.get(s,"default",{}),t.get(s,o,{})];return p.jsx("div",{css:e,...r})},u=n=>{const{theme:{stepper:c}={},$status:o,...r}=n,s=t.get(c,"step",{}),e=[t.get(s,"default",{}),t.get(s,o,{})];return p.jsx("div",{css:e,...r})},y=n=>{const{theme:{stepper:c}={},$status:o,$validationStatus:r,...s}=n,e=t.get(c,"stepIcon",{}),l=[t.get(e,"default",{}),t.get(e,[o,"default"],{}),t.get(e,[o,r],{})];return p.jsx("div",{css:l,...s})},g=n=>{const{theme:{stepper:c}={},$status:o,$validationStatus:r,...s}=n,e=t.get(c,"stepLabel",{}),l=[t.get(e,"default",{}),t.get(e,o,{}),t.get(e,r,{})];return p.jsx("div",{css:l,...s})};exports.SeparatorStyled=a;exports.StepIconStyled=y;exports.StepLabelStyled=g;exports.StepStyled=u;exports.StepperStyled=d;

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "gd-design-library",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "license": "MIT",
-  "main": "./index.cjs.js",
+  "main": "./index.js",
   "types": "./index.d.ts",
   "module": "./index.js",
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
     "embla-carousel-react": "^8.6.0",
     "uuid": "^11.1.0"
   },
-  "dependencies": {},
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0"