sonahang-ui 1.0.0

package/dist/tokens/colors.d.ts

@@ -0,0 +1,167 @@
+/**
+ * TS mirror of colors.css / colors.semantic.css, for places that need
+ * the raw values in JS (Storybook docs, color pickers, tests) rather
+ * than a CSS var. Keep in sync with the .css files by hand — there's
+ * no build step generating one from the other; `__test__/colors.test.ts`
+ * parses the stylesheets and fails if the two drift apart.
+ *
+ * In app code prefer the CSS vars (or `colorVar()`), so colors follow
+ * the active theme. The hex values here are per-theme snapshots and
+ * don't flip on their own.
+ */
+export declare const accent: {
+    readonly 50: "#f6f0ff";
+    readonly 100: "#ece0ff";
+    readonly 200: "#d9c2ff";
+    readonly 300: "#c19dff";
+    readonly 400: "#a672ff";
+    readonly 500: "#8b47fa";
+    readonly 600: "#7429e0";
+    readonly 700: "#5d1fb8";
+    readonly 800: "#461890";
+    readonly 900: "#331269";
+    readonly 950: "#1f0b40";
+};
+export declare const neutral: {
+    readonly 0: "#ffffff";
+    readonly 50: "#f8f7fa";
+    readonly 100: "#efedf3";
+    readonly 200: "#e2dfe8";
+    readonly 300: "#cac6d3";
+    readonly 400: "#a29cae";
+    readonly 500: "#79728a";
+    readonly 600: "#5a5468";
+    readonly 700: "#423d4d";
+    readonly 800: "#2c2836";
+    readonly 900: "#1a1720";
+    readonly 950: "#0d0b12";
+};
+export declare const danger: {
+    readonly 50: "#fef3f2";
+    readonly 100: "#fee4e2";
+    readonly 200: "#fecdca";
+    readonly 300: "#fda29b";
+    readonly 400: "#f97066";
+    readonly 500: "#f04438";
+    readonly 600: "#d92d20";
+    readonly 700: "#b42318";
+    readonly 800: "#912018";
+    readonly 900: "#7a271a";
+    readonly 950: "#55160c";
+};
+export type AccentStep = keyof typeof accent;
+export type NeutralStep = keyof typeof neutral;
+export type DangerStep = keyof typeof danger;
+/** Every primitive scale, keyed by name — for iterating over the whole palette. */
+export declare const palette: {
+    readonly accent: {
+        readonly 50: "#f6f0ff";
+        readonly 100: "#ece0ff";
+        readonly 200: "#d9c2ff";
+        readonly 300: "#c19dff";
+        readonly 400: "#a672ff";
+        readonly 500: "#8b47fa";
+        readonly 600: "#7429e0";
+        readonly 700: "#5d1fb8";
+        readonly 800: "#461890";
+        readonly 900: "#331269";
+        readonly 950: "#1f0b40";
+    };
+    readonly neutral: {
+        readonly 0: "#ffffff";
+        readonly 50: "#f8f7fa";
+        readonly 100: "#efedf3";
+        readonly 200: "#e2dfe8";
+        readonly 300: "#cac6d3";
+        readonly 400: "#a29cae";
+        readonly 500: "#79728a";
+        readonly 600: "#5a5468";
+        readonly 700: "#423d4d";
+        readonly 800: "#2c2836";
+        readonly 900: "#1a1720";
+        readonly 950: "#0d0b12";
+    };
+    readonly danger: {
+        readonly 50: "#fef3f2";
+        readonly 100: "#fee4e2";
+        readonly 200: "#fecdca";
+        readonly 300: "#fda29b";
+        readonly 400: "#f97066";
+        readonly 500: "#f04438";
+        readonly 600: "#d92d20";
+        readonly 700: "#b42318";
+        readonly 800: "#912018";
+        readonly 900: "#7a271a";
+        readonly 950: "#55160c";
+    };
+};
+export type PaletteName = keyof typeof palette;
+/** Fixed across themes — see colors.semantic.css for why. */
+export declare const accentFill: {
+    readonly bg: "#5d1fb8";
+    readonly text: "#ece0ff";
+};
+export declare const semanticColors: {
+    readonly light: {
+        readonly danger: "#b42318";
+        readonly 'danger-border': "#f04438";
+        readonly scrim: "rgb(0 0 0 / 0.45)";
+        readonly 'accent-tint-1': "#f6f0ff";
+        readonly 'accent-tint-2': "#ece0ff";
+        readonly 'accent-tint-3': "#d9c2ff";
+        readonly 'accent-tint-4': "#c19dff";
+        readonly 'accent-on-tint': "#331269";
+        readonly 'accent-fill-bg': "#5d1fb8";
+        readonly 'accent-fill-text': "#ece0ff";
+        readonly 'bg-canvas': "#ffffff";
+        readonly 'bg-surface': "#f8f7fa";
+        readonly 'bg-subtle': "#efedf3";
+        readonly text: "#1a1720";
+        readonly 'text-subtle': "#5a5468";
+        readonly 'text-inverse': "#ffffff";
+        readonly border: "#e2dfe8";
+        readonly 'border-strong': "#cac6d3";
+        readonly accent: "#7429e0";
+        readonly 'accent-hover': "#5d1fb8";
+        readonly 'accent-subtle-bg': "#f6f0ff";
+        readonly 'accent-subtle-text': "#5d1fb8";
+    };
+    readonly dark: {
+        readonly danger: "#fda29b";
+        readonly 'danger-border': "#f97066";
+        readonly scrim: "rgb(0 0 0 / 0.65)";
+        readonly 'accent-tint-1': "#1f0b40";
+        readonly 'accent-tint-2': "#331269";
+        readonly 'accent-tint-3': "#461890";
+        readonly 'accent-tint-4': "#5d1fb8";
+        readonly 'accent-on-tint': "#ece0ff";
+        readonly 'accent-fill-bg': "#5d1fb8";
+        readonly 'accent-fill-text': "#ece0ff";
+        readonly 'bg-canvas': "#0d0b12";
+        readonly 'bg-surface': "#1a1720";
+        readonly 'bg-subtle': "#2c2836";
+        readonly text: "#f8f7fa";
+        readonly 'text-subtle': "#a29cae";
+        readonly 'text-inverse': "#0d0b12";
+        readonly border: "#423d4d";
+        readonly 'border-strong': "#5a5468";
+        readonly accent: "#a672ff";
+        readonly 'accent-hover': "#c19dff";
+        readonly 'accent-subtle-bg': "#331269";
+        readonly 'accent-subtle-text': "#d9c2ff";
+    };
+};
+export type ColorTheme = keyof typeof semanticColors;
+export type SemanticColorName = keyof typeof semanticColors.light;
+/**
+ * The CSS var for a semantic token, ready to drop into an inline style or a
+ * styled-component. Unlike the hex values above it stays theme-aware:
+ *
+ *   <div style={{ background: colorVar('bg-surface') }} />
+ */
+export declare function colorVar(name: SemanticColorName): `var(--color-${SemanticColorName})`;
+/**
+ * The CSS var for a primitive step, e.g. `paletteVar('accent', 600)`. Reach for
+ * `colorVar()` first — primitives carry no meaning and don't respond to theme.
+ */
+export declare function paletteVar<S extends PaletteName>(scale: S, step: keyof (typeof palette)[S]): string;

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "sonahang-ui",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React component library and design system, documented in Storybook.",
+  "keywords": [
+    "react",
+    "component-library",
+    "design-system",
+    "ui-components",
+    "storybook",
+    "accessible",
+    "typescript",
+    "design-tokens"
+  ],
+  "homepage": "https://github.com/sonangrai/sonahang-ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sonangrai/sonahang-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sonangrai/sonahang-ui/issues"
+  },
+  "files": [
+    "dist",
+    "style.css.d.ts"
+  ],
+  "main": "./dist/sonahang-ui.cjs",
+  "module": "./dist/sonahang-ui.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "author": {
+    "name": "Sonahang Rai",
+    "url": "https://www.sonahangrai.com.np",
+    "email": "shonahangrae@gmail.com"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/sonahang-ui.js",
+      "require": "./dist/sonahang-ui.cjs"
+    },
+    "./style.css": {
+      "types": "./style.css.d.ts",
+      "default": "./dist/sonahang-ui.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "dev:all": "concurrently --kill-others-on-fail -n vite,storybook -c cyan,magenta \"pnpm dev\" \"pnpm storybook --no-open\"",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json",
+    "build:site": "tsc -b && vite build && storybook build -o site-dist/storybook",
+    "prepublishOnly": "pnpm build:lib",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.2.1",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^10.5.5",
+    "@storybook/addon-docs": "^10.5.5",
+    "@storybook/addon-mcp": "^0.7.0",
+    "@storybook/addon-themes": "10.5.5",
+    "@storybook/react-vite": "^10.5.5",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.4",
+    "concurrently": "^10.0.4",
+    "eslint": "^10.8.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "eslint-plugin-storybook": "^10.5.5",
+    "globals": "^17.7.0",
+    "jsdom": "^30.0.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "storybook": "^10.5.5",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10"
+  }
+}

package/style.css.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Declaration for the `sonahang-ui/style.css` subpath export.
+ *
+ * TypeScript 6 raises TS2882 for a side-effect import that resolves to no
+ * declarations, and not every consumer pulls in a bundler's ambient CSS module
+ * types (`vite/client`, `next-env.d.ts`, …). Shipping this means
+ * `import 'sonahang-ui/style.css'` typechecks anywhere.
+ *
+ * Deliberately empty: the stylesheet has no runtime exports, it is only ever
+ * imported for its side effect.
+ *
+ * Lives at the repo root rather than in `dist/` because the library build runs
+ * with `emptyOutDir`, which would wipe it on every rebuild. It's listed in
+ * `files` so it still ships.
+ */
+
+export {};