@usecapsule/core-components 3.2.0-dev.1 → 3.3.0-dev.0

package/dist/types/utils/theme/generatePalette.d.ts

@@ -2,6 +2,8 @@ import { Theme } from '../../interface';
 export type Palette = {
     foregroundColors: string[];
     backgroundColors: string[];
-    isDarkBackground: boolean;
+    accentColors: string[];
 };
-export declare const generatePalette: ({ foregroundColor, backgroundColor, customPalette }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'customPalette'>) => Palette;
+export declare const generatePalette: ({ foregroundColor, backgroundColor, accentColor, isDarkTheme, customPalette, }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'accentColor' | 'customPalette'> & {
+    isDarkTheme: boolean;
+}) => void;

package/dist/types/utils/theme/generateTheme.d.ts

@@ -1,2 +1,6 @@
 import { Theme } from '../../interface';
-export declare const generateTheme: ({ foregroundColor, backgroundColor, font, customPalette, borderRadius, customFontSizes, customBorderRadii, }: Theme) => boolean;
+/**
+ * Generates css theme variables.
+ * @returns @boolean Whether background is dark or not.
+ */
+export declare const generateTheme: ({ foregroundColor, backgroundColor, accentColor, darkForegroundColor, darkBackgroundColor, darkAccentColor, mode, font, customPalette, borderRadius, customFontSizes, customBorderRadii, }: Theme) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecapsule/core-components",
-  "version": "3.2.0-dev.1",
+  "version": "3.3.0-dev.0",
   "description": "Capsule Core Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -21,7 +21,6 @@
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "lint": "eslint src/**/*{.ts,.tsx}",
     "build:css": "sass --embed-sources src/css:./css",
     "build:assets": "ts-node -T ./scripts/buildAssets.ts",
     "storybook": "storybook dev -p 6006",
@@ -32,12 +31,13 @@
     "color-blend": "^4.0.0",
     "color2k": "^2.0.3",
     "gsap": "^3.12.5",
+    "imask": "7.6.1",
     "lottie-web": "^5.12.2",
-    "qr-code-styling": "^1.6.0-rc.1"
+    "qrcode-with-logos": "1.1.1"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.24.7",
-    "@stencil-community/eslint-plugin": "^0.7.2",
+    "@chromatic-com/storybook": "^1.6.0",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.10",
     "@storybook/addon-essentials": "^8.1.11",
@@ -51,20 +51,14 @@
     "@storybook/test": "^8.1.11",
     "@types/jest": "^29.5.6",
     "@types/node": "^16.18.11",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "puppeteer": "^21.9.0",
     "rollup-plugin-dotenv": "^0.5.0",
-    "rollup-plugin-node-polyfills": "^0.2.1",
     "sass": "^1.71.1",
     "stencil-inline-svg": "^1.1.0",
     "storybook": "^8.1.11",
+    "storybook-addon-stencil": "^0.2.1",
     "ts-node": "^10.9.2"
-  },
-  "gitHead": "874b9bff5ee0d0149182ffbe7ea48276a3cd8327"
+  }
 }

package/readme.md

@@ -1,3 +1,48 @@
-# Capsule Core Components
+# component-library
 
-The core stencil library for our common capsule components.
+Cross-framework common component library
+
+## Install
+
+```bash
+yarn install
+```
+
+## Running
+
+The component examples can either be run in React or bare HTML.
+
+### React
+
+```bash
+yarn build
+yarn start-react
+```
+
+### HTML
+
+```bash
+yarn start-html
+```
+
+## Building
+
+This will build the component libraries for both web components and React.
+
+```bash
+yarn build
+```
+
+## Generating New Components
+
+This should be used when adding new components to the library. It will initialize the component, test and styles.
+
+Once run, follow the prompts to name your component.
+
+> **Note** Components **MUST** begin the the `cpsl-` string in order for them to pass linting.
+
+> **Note** The styles should be changed to Sass once the component is generated. Rename the generated `css` file to `scss` and update the import in the component.
+
+```bash
+yarn generate
+```

package/dist/capsule/p-0462f723.js

@@ -1,2 +0,0 @@
-var e=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e["default"]:e}export{e as c,n as g};
-//# sourceMappingURL=p-0462f723.js.map

package/dist/capsule/p-0462f723.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":[],"mappings":""}