@dinofront/design_system 0.1.0

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Component-level sizing tokens (control heights, icon sizes).
+ * General layout spacing intentionally reuses Tailwind's default 4px scale
+ * rather than redefining it here — same convention as the People Space
+ * design system (packages/design-system/src/tokens/spacing.css), which
+ * documents an 8px rhythm (p-2, p-4, p-6, p-8...) on top of that scale
+ * without overriding any token.
+ */
+export declare const controlHeight: {
+    readonly sm: "2rem";
+    readonly md: "2.5rem";
+    readonly lg: "3rem";
+};
+export declare const iconSize: {
+    readonly sm: "0.875rem";
+    readonly md: "1rem";
+    readonly lg: "1.25rem";
+};

package/dist/tokens/typography.d.ts

@@ -0,0 +1,161 @@
+/**
+ * Typography tokens, mirrored as `--text-*` / `--font-*` in
+ * src/styles/tokens.css. Ported from the People Space design system
+ * (packages/design-system/src/tokens/typography.css). Sizes are paired
+ * with their line-height; weight is composed separately via Tailwind's
+ * default `font-*` utilities.
+ */
+export declare const fontFamily: {
+    readonly ps: readonly ["Noto Sans Armenian", "Noto Sans", "ui-sans-serif", "system-ui", "sans-serif"];
+    readonly sans: readonly ["Noto Sans Armenian", "Noto Sans", "ui-sans-serif", "system-ui", "sans-serif"];
+};
+export declare const headline: {
+    readonly xl: {
+        readonly fontSize: "64px";
+        readonly lineHeight: "72px";
+    };
+    readonly lg: {
+        readonly fontSize: "48px";
+        readonly lineHeight: "56px";
+    };
+    readonly md: {
+        readonly fontSize: "40px";
+        readonly lineHeight: "48px";
+    };
+    readonly std: {
+        readonly fontSize: "36px";
+        readonly lineHeight: "44px";
+    };
+    readonly sm: {
+        readonly fontSize: "32px";
+        readonly lineHeight: "40px";
+    };
+    readonly xs: {
+        readonly fontSize: "24px";
+        readonly lineHeight: "32px";
+    };
+};
+export declare const paragraph: {
+    readonly lg: {
+        readonly fontSize: "20px";
+        readonly lineHeight: "28px";
+    };
+    readonly md: {
+        readonly fontSize: "16px";
+        readonly lineHeight: "24px";
+    };
+    readonly std: {
+        readonly fontSize: "14px";
+        readonly lineHeight: "20px";
+    };
+    readonly sm: {
+        readonly fontSize: "12px";
+        readonly lineHeight: "16px";
+    };
+    readonly xs: {
+        readonly fontSize: "10px";
+        readonly lineHeight: "14px";
+    };
+};
+export declare const label: {
+    readonly lg: {
+        readonly fontSize: "20px";
+        readonly lineHeight: "28px";
+    };
+    readonly md: {
+        readonly fontSize: "16px";
+        readonly lineHeight: "24px";
+    };
+    readonly std: {
+        readonly fontSize: "14px";
+        readonly lineHeight: "20px";
+    };
+    readonly sm: {
+        readonly fontSize: "12px";
+        readonly lineHeight: "16px";
+    };
+    readonly xs: {
+        readonly fontSize: "10px";
+        readonly lineHeight: "14px";
+    };
+    readonly xxs: {
+        readonly fontSize: "6px";
+        readonly lineHeight: "6px";
+    };
+};
+export declare const typography: {
+    readonly headline: {
+        readonly xl: {
+            readonly fontSize: "64px";
+            readonly lineHeight: "72px";
+        };
+        readonly lg: {
+            readonly fontSize: "48px";
+            readonly lineHeight: "56px";
+        };
+        readonly md: {
+            readonly fontSize: "40px";
+            readonly lineHeight: "48px";
+        };
+        readonly std: {
+            readonly fontSize: "36px";
+            readonly lineHeight: "44px";
+        };
+        readonly sm: {
+            readonly fontSize: "32px";
+            readonly lineHeight: "40px";
+        };
+        readonly xs: {
+            readonly fontSize: "24px";
+            readonly lineHeight: "32px";
+        };
+    };
+    readonly paragraph: {
+        readonly lg: {
+            readonly fontSize: "20px";
+            readonly lineHeight: "28px";
+        };
+        readonly md: {
+            readonly fontSize: "16px";
+            readonly lineHeight: "24px";
+        };
+        readonly std: {
+            readonly fontSize: "14px";
+            readonly lineHeight: "20px";
+        };
+        readonly sm: {
+            readonly fontSize: "12px";
+            readonly lineHeight: "16px";
+        };
+        readonly xs: {
+            readonly fontSize: "10px";
+            readonly lineHeight: "14px";
+        };
+    };
+    readonly label: {
+        readonly lg: {
+            readonly fontSize: "20px";
+            readonly lineHeight: "28px";
+        };
+        readonly md: {
+            readonly fontSize: "16px";
+            readonly lineHeight: "24px";
+        };
+        readonly std: {
+            readonly fontSize: "14px";
+            readonly lineHeight: "20px";
+        };
+        readonly sm: {
+            readonly fontSize: "12px";
+            readonly lineHeight: "16px";
+        };
+        readonly xs: {
+            readonly fontSize: "10px";
+            readonly lineHeight: "14px";
+        };
+        readonly xxs: {
+            readonly fontSize: "6px";
+            readonly lineHeight: "6px";
+        };
+    };
+};

package/dist/types/base.d.ts

@@ -0,0 +1,5 @@
+/** Shared props every component accepts for QA/e2e hooks. */
+export interface BaseProps {
+    /** Rendered as `data-test-id` for test selectors. */
+    dataTestId?: string;
+}

package/dist/types/index.d.ts

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

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@dinofront/design_system",
+  "version": "0.1.0",
+  "description": "Enterprise React component library and design system built on Tailwind CSS.",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./preset": {
+      "types": "./dist/tailwind/preset.d.ts",
+      "import": "./dist/tailwind/preset.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6008",
+    "build": "tsc -p tsconfig.build.json --noEmit && vite build --config vite.lib.config.ts && npm run build:css",
+    "build:css": "tailwindcss -i ./src/styles/globals.css -o ./dist/styles.css",
+    "build:storybook": "storybook build",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "publish": "npm run build && npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.25.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^10.5.2",
+    "@storybook/react-vite": "^10.5.2",
+    "@eslint/js": "^9.39.5",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.7.0",
+    "prettier": "^3.9.5",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "storybook": "^10.5.2",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.64.0",
+    "vite": "^8.1.5",
+    "vite-plugin-dts": "^5.0.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}