@juspay/blend-design-system 0.0.1

package/dist/tokens/border.tokens.d.ts

@@ -0,0 +1,29 @@
+import { CSSObject } from 'styled-components';
+type BorderWidthType = Readonly<{
+    0: CSSObject['borderWidth'];
+    1: CSSObject['borderWidth'];
+    1.5: CSSObject['borderWidth'];
+    2: CSSObject['borderWidth'];
+    3: CSSObject['borderWidth'];
+    4: CSSObject['borderWidth'];
+    [key: string]: CSSObject['borderWidth'];
+}>;
+type BorderRadiusType = Readonly<{
+    0: CSSObject['borderRadius'];
+    2: CSSObject['borderRadius'];
+    4: CSSObject['borderRadius'];
+    6: CSSObject['borderRadius'];
+    8: CSSObject['borderRadius'];
+    10: CSSObject['borderRadius'];
+    12: CSSObject['borderRadius'];
+    16: CSSObject['borderRadius'];
+    20: CSSObject['borderRadius'];
+    full: CSSObject['borderRadius'];
+    [key: string]: CSSObject['borderRadius'];
+}>;
+export type BorderTokensType = Readonly<{
+    width: BorderWidthType;
+    radius: BorderRadiusType;
+}>;
+declare const borderTokens: BorderTokensType;
+export default borderTokens;

package/dist/tokens/color.tokens.d.ts

@@ -0,0 +1,16 @@
+import { CSSObject } from 'styled-components';
+type ColorGroupType = Readonly<{
+    [key: string]: CSSObject['color'];
+}>;
+export type ColorTokensType = {
+    gray: ColorGroupType;
+    primary: ColorGroupType;
+    purple: ColorGroupType;
+    orange: ColorGroupType;
+    red: ColorGroupType;
+    green: ColorGroupType;
+    yellow: ColorGroupType;
+    [key: string]: ColorGroupType;
+};
+declare const colorTokens: ColorTokensType;
+export default colorTokens;

package/dist/tokens/font.tokens.d.ts

@@ -0,0 +1,72 @@
+import { CSSObject } from 'styled-components';
+type FontWeightType = Readonly<{
+    100: CSSObject['fontWeight'];
+    200: CSSObject['fontWeight'];
+    300: CSSObject['fontWeight'];
+    400: CSSObject['fontWeight'];
+    500: CSSObject['fontWeight'];
+    600: CSSObject['fontWeight'];
+    700: CSSObject['fontWeight'];
+    800: CSSObject['fontWeight'];
+    900: CSSObject['fontWeight'];
+}>;
+type FontFamilyType = Readonly<{
+    display: CSSObject['fontFamily'];
+    body: CSSObject['fontFamily'];
+    heading: CSSObject['fontFamily'];
+    mono: CSSObject['fontFamily'];
+}>;
+type LetterSpacingType = Readonly<{
+    compressed: CSSObject['letterSpacing'];
+    condensed: CSSObject['letterSpacing'];
+    normal: CSSObject['letterSpacing'];
+    expanded: CSSObject['letterSpacing'];
+    extended: CSSObject['letterSpacing'];
+}>;
+export type FontGroupType = Readonly<{
+    fontSize: CSSObject['fontSize'];
+    lineHeight: CSSObject['lineHeight'];
+    letterSpacing: CSSObject['letterSpacing'];
+}>;
+type FontSizeType = Readonly<{
+    base: CSSObject['fontSize'];
+    body: {
+        xs: FontGroupType;
+        sm: FontGroupType;
+        md: FontGroupType;
+        lg: FontGroupType;
+    };
+    heading: {
+        sm: FontGroupType;
+        md: FontGroupType;
+        lg: FontGroupType;
+        xl: FontGroupType;
+        '2xl': FontGroupType;
+    };
+    display: {
+        sm: FontGroupType;
+        md: FontGroupType;
+        lg: FontGroupType;
+        xl: FontGroupType;
+    };
+    code: {
+        sm: FontGroupType;
+        md: FontGroupType;
+        lg: FontGroupType;
+    };
+}>;
+export type FontTokensType = Readonly<{
+    family: FontFamilyType;
+    weight: FontWeightType;
+    letterSpacing: LetterSpacingType;
+    size: FontSizeType;
+}>;
+/**
+ * Font tokens
+ * @description
+ * Font tokens are used to define the font family, weight, size, and letter spacing.
+ * @warning
+ * Whenever changing the font tokens, make sure to handle it in the Text   Component as well.
+ */
+declare const fontTokens: FontTokensType;
+export default fontTokens;

package/dist/tokens/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FOUNDATION_THEME } from './theme.token';
+export type { FoundationTokenType as ThemeType } from './theme.token';

package/dist/tokens/opacity.tokens.d.ts

@@ -0,0 +1,18 @@
+import { CSSObject } from 'styled-components';
+export type OpacityTokensType = Readonly<{
+    0: CSSObject['opacity'];
+    5: CSSObject['opacity'];
+    10: CSSObject['opacity'];
+    20: CSSObject['opacity'];
+    30: CSSObject['opacity'];
+    40: CSSObject['opacity'];
+    50: CSSObject['opacity'];
+    60: CSSObject['opacity'];
+    70: CSSObject['opacity'];
+    80: CSSObject['opacity'];
+    90: CSSObject['opacity'];
+    100: CSSObject['opacity'];
+    [key: string]: CSSObject['opacity'];
+}>;
+declare const opacityTokens: OpacityTokensType;
+export default opacityTokens;

package/dist/tokens/shadows.tokens.d.ts

@@ -0,0 +1,15 @@
+import { CSSObject } from 'styled-components';
+export type ShadowTokensType = Readonly<{
+    xs: CSSObject['boxShadow'];
+    sm: CSSObject['boxShadow'];
+    md: CSSObject['boxShadow'];
+    lg: CSSObject['boxShadow'];
+    xl: CSSObject['boxShadow'];
+    '2xl': CSSObject['boxShadow'];
+    full: CSSObject['boxShadow'];
+    focusPrimary: CSSObject['boxShadow'];
+    focusError: CSSObject['boxShadow'];
+    [key: string]: CSSObject['boxShadow'];
+}>;
+declare const shadowTokens: ShadowTokensType;
+export default shadowTokens;

package/dist/tokens/theme.token.d.ts

@@ -0,0 +1,16 @@
+import { ShadowTokensType } from './shadows.tokens';
+import { BorderTokensType } from './border.tokens';
+import { FontTokensType } from './font.tokens';
+import { OpacityTokensType } from './opacity.tokens';
+import { UnitTokensType } from './unit.tokens';
+import { ColorTokensType } from './color.tokens';
+export type FoundationTokenType = {
+    shadows: ShadowTokensType;
+    border: BorderTokensType;
+    font: FontTokensType;
+    opacity: OpacityTokensType;
+    unit: UnitTokensType;
+    colors: ColorTokensType;
+};
+declare const FOUNDATION_THEME: FoundationTokenType;
+export default FOUNDATION_THEME;

package/dist/tokens/unit.tokens.d.ts

@@ -0,0 +1,34 @@
+import { CSSObject } from 'styled-components';
+type UnitType = CSSObject['width'] | CSSObject['height'] | CSSObject['gap'] | CSSObject['padding'] | CSSObject['margin'];
+export type UnitTokensType = Readonly<{
+    0: UnitType;
+    1: UnitType;
+    2: UnitType;
+    3: UnitType;
+    4: UnitType;
+    5: UnitType;
+    6: UnitType;
+    7: UnitType;
+    8: UnitType;
+    9: UnitType;
+    10: UnitType;
+    12: UnitType;
+    14: UnitType;
+    16: UnitType;
+    18: UnitType;
+    20: UnitType;
+    22: UnitType;
+    24: UnitType;
+    28: UnitType;
+    32: UnitType;
+    36: UnitType;
+    40: UnitType;
+    48: UnitType;
+    52: UnitType;
+    56: UnitType;
+    64: UnitType;
+    auto: UnitType;
+    [key: string]: UnitType;
+}>;
+declare const unitTokens: UnitTokensType;
+export default unitTokens;

package/package.json

@@ -0,0 +1,99 @@
+{
+    "name": "@juspay/blend-design-system",
+    "private": false,
+    "version": "0.0.1",
+    "description": "A comprehensive React component library and design system by Juspay",
+    "type": "module",
+    "main": "./dist/main.js",
+    "module": "./dist/main.js",
+    "types": "./dist/main.d.ts",
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "sideEffects": false,
+    "exports": {
+        ".": {
+            "import": "./dist/main.js",
+            "types": "./dist/main.d.ts"
+        },
+        "./style.css": "./dist/style.css"
+    },
+    "scripts": {
+        "lint": "eslint .",
+        "build": "pnpm lint && tsc --p ./tsconfig.json && vite build",
+        "prepublishOnly": "pnpm run build"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.3",
+        "@radix-ui/react-checkbox": "^1.3.2",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-popover": "^1.1.14",
+        "@radix-ui/react-slider": "^1.2.3",
+        "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-tooltip": "^1.2.7",
+        "@types/styled-components": "^5.1.34",
+        "lucide-react": "^0.511.0",
+        "radix-ui": "^1.1.3",
+        "recharts": "^2.15.3",
+        "sonner": "^2.0.3",
+        "styled-components": "^6.1.18",
+        "vaul": "^1.1.2"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.25.0",
+        "@storybook/addon-essentials": "^8.6.12",
+        "@storybook/addon-interactions": "^8.6.12",
+        "@storybook/addon-onboarding": "^8.6.12",
+        "@storybook/blocks": "^8.6.12",
+        "@storybook/react": "^8.6.12",
+        "@storybook/react-vite": "^8.6.12",
+        "@storybook/test": "^8.6.12",
+        "@types/node": "^22.15.21",
+        "@types/react": "^19.1.2",
+        "@types/react-dom": "^19.1.2",
+        "@vitejs/plugin-react": "^4.4.1",
+        "eslint": "^9.25.0",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.19",
+        "eslint-plugin-storybook": "^0.12.0",
+        "globals": "^16.0.0",
+        "prettier": "^3.1.0",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "storybook": "^8.6.12",
+        "typescript": "~5.8.3",
+        "typescript-eslint": "^8.30.1",
+        "vite": "^6.3.5",
+        "vite-plugin-dts": "^4.5.4",
+        "vite-plugin-lib-inject-css": "^2.2.2"
+    },
+    "keywords": [
+        "react",
+        "ui",
+        "components",
+        "design-system",
+        "blend",
+        "juspay"
+    ],
+    "author": "Juspay",
+    "license": "MIT",
+    "homepage": "https://juspay.design/",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/juspay/blend-design-system.git"
+    },
+    "bugs": {
+        "url": "https://github.com/juspay/blend-design-system/issues"
+    },
+    "eslintConfig": {
+        "extends": [
+            "plugin:storybook/recommended"
+        ]
+    },
+    "packageManager": "pnpm@10.11.0"
+}