@ambersecurityinc/ui 0.1.0

package/dist/tokens.css

@@ -0,0 +1,125 @@
+/* Amber Security Design Tokens */
+/* Single source of truth — never hardcode colors/fonts/spacing */
+
+:root,
+[data-theme="light"] {
+  /* Background */
+  --bg: #F5F3EE;
+  --surface: #FFFFFF;
+  --surface-alt: #EEEAE4;
+  --surface-hover: #E8E4DE;
+
+  /* Sidebar */
+  --sidebar: #0B1120;
+  --sidebar-hover: rgba(255, 255, 255, 0.06);
+  --sidebar-active: rgba(212, 136, 14, 0.12);
+
+  /* Text */
+  --text: #1A1A1A;
+  --text-secondary: #4A4A4A;
+  --text-muted: #8A8A8A;
+  --text-sidebar: #E0E0E0;
+  --text-sidebar-muted: #7A8294;
+
+  /* Accent */
+  --accent: #D4880E;
+  --accent-hover: #B8740C;
+  --accent-soft: rgba(212, 136, 14, 0.10);
+  --accent-text: #FFFFFF;
+
+  /* Status */
+  --success: #2D8A4E;
+  --success-soft: rgba(45, 138, 78, 0.10);
+  --warning: #C47F17;
+  --warning-soft: rgba(196, 127, 23, 0.10);
+  --error: #C93B3B;
+  --error-soft: rgba(201, 59, 59, 0.10);
+  --info: #2B7CB8;
+  --info-soft: rgba(43, 124, 184, 0.10);
+
+  /* Border */
+  --border: #DDD9D2;
+  --border-sidebar: rgba(255, 255, 255, 0.08);
+
+  /* Shadow */
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
+
+  /* Typography */
+  --font-display: 'Outfit', sans-serif;
+  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;
+
+  /* Radius */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+
+  /* Spacing (Tailwind 4px base) */
+  --space-0: 0px;
+  --space-0-5: 2px;
+  --space-1: 4px;
+  --space-1-5: 6px;
+  --space-2: 8px;
+  --space-2-5: 10px;
+  --space-3: 12px;
+  --space-3-5: 14px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-9: 36px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-14: 56px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+}
+
+[data-theme="dark"] {
+  /* Background */
+  --bg: #0A0A0A;
+  --surface: #161616;
+  --surface-alt: #1C1C1C;
+  --surface-hover: #222222;
+
+  /* Sidebar */
+  --sidebar: #070B14;
+  --sidebar-hover: rgba(255, 255, 255, 0.06);
+  --sidebar-active: rgba(245, 166, 35, 0.12);
+
+  /* Text */
+  --text: #F2F2F2;
+  --text-secondary: #B0B0B0;
+  --text-muted: #707070;
+  --text-sidebar: #D4D4D4;
+  --text-sidebar-muted: #6B7280;
+
+  /* Accent */
+  --accent: #F5A623;
+  --accent-hover: #E09510;
+  --accent-soft: rgba(245, 166, 35, 0.12);
+  --accent-text: #0A0A0A;
+
+  /* Status */
+  --success: #3DB868;
+  --success-soft: rgba(61, 184, 104, 0.12);
+  --warning: #E0A830;
+  --warning-soft: rgba(224, 168, 48, 0.12);
+  --error: #E85C5C;
+  --error-soft: rgba(232, 92, 92, 0.12);
+  --info: #4DA3E0;
+  --info-soft: rgba(77, 163, 224, 0.12);
+
+  /* Border */
+  --border: #262626;
+  --border-sidebar: rgba(255, 255, 255, 0.06);
+
+  /* Shadow */
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18);
+}

package/dist/tokens.d.mts

@@ -0,0 +1,116 @@
+import { ReactNode } from 'react';
+
+/** Amber Security Design Tokens — TypeScript constants */
+declare const LIGHT: {
+    readonly bg: "#F5F3EE";
+    readonly surface: "#FFFFFF";
+    readonly surfaceAlt: "#EEEAE4";
+    readonly surfaceHover: "#E8E4DE";
+    readonly sidebar: "#0B1120";
+    readonly sidebarHover: "rgba(255,255,255,0.06)";
+    readonly sidebarActive: "rgba(212,136,14,0.12)";
+    readonly text: "#1A1A1A";
+    readonly textSecondary: "#4A4A4A";
+    readonly textMuted: "#8A8A8A";
+    readonly textSidebar: "#E0E0E0";
+    readonly textSidebarMuted: "#7A8294";
+    readonly accent: "#D4880E";
+    readonly accentHover: "#B8740C";
+    readonly accentSoft: "rgba(212,136,14,0.10)";
+    readonly accentText: "#FFFFFF";
+    readonly success: "#2D8A4E";
+    readonly successSoft: "rgba(45,138,78,0.10)";
+    readonly warning: "#C47F17";
+    readonly warningSoft: "rgba(196,127,23,0.10)";
+    readonly error: "#C93B3B";
+    readonly errorSoft: "rgba(201,59,59,0.10)";
+    readonly info: "#2B7CB8";
+    readonly infoSoft: "rgba(43,124,184,0.10)";
+    readonly border: "#DDD9D2";
+    readonly borderSidebar: "rgba(255,255,255,0.08)";
+    readonly shadow: "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)";
+    readonly shadowMd: "0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03)";
+    readonly shadowLg: "0 8px 30px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.03)";
+};
+declare const DARK: {
+    readonly bg: "#0A0A0A";
+    readonly surface: "#161616";
+    readonly surfaceAlt: "#1C1C1C";
+    readonly surfaceHover: "#222222";
+    readonly sidebar: "#070B14";
+    readonly sidebarHover: "rgba(255,255,255,0.06)";
+    readonly sidebarActive: "rgba(245,166,35,0.12)";
+    readonly text: "#F2F2F2";
+    readonly textSecondary: "#B0B0B0";
+    readonly textMuted: "#707070";
+    readonly textSidebar: "#D4D4D4";
+    readonly textSidebarMuted: "#6B7280";
+    readonly accent: "#F5A623";
+    readonly accentHover: "#E09510";
+    readonly accentSoft: "rgba(245,166,35,0.12)";
+    readonly accentText: "#0A0A0A";
+    readonly success: "#3DB868";
+    readonly successSoft: "rgba(61,184,104,0.12)";
+    readonly warning: "#E0A830";
+    readonly warningSoft: "rgba(224,168,48,0.12)";
+    readonly error: "#E85C5C";
+    readonly errorSoft: "rgba(232,92,92,0.12)";
+    readonly info: "#4DA3E0";
+    readonly infoSoft: "rgba(77,163,224,0.12)";
+    readonly border: "#262626";
+    readonly borderSidebar: "rgba(255,255,255,0.06)";
+    readonly shadow: "0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.12)";
+    readonly shadowMd: "0 4px 12px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15)";
+    readonly shadowLg: "0 8px 30px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.18)";
+};
+declare const FONTS: {
+    readonly display: "'Outfit', sans-serif";
+    readonly body: "'Manrope', -apple-system, BlinkMacSystemFont, sans-serif";
+    readonly mono: "'IBM Plex Mono', 'SF Mono', monospace";
+};
+declare const RADIUS: {
+    readonly sm: 6;
+    readonly md: 10;
+    readonly lg: 14;
+};
+declare const SPACING: {
+    readonly 0: 0;
+    readonly 0.5: 2;
+    readonly 1: 4;
+    readonly 1.5: 6;
+    readonly 2: 8;
+    readonly 2.5: 10;
+    readonly 3: 12;
+    readonly 3.5: 14;
+    readonly 4: 16;
+    readonly 5: 20;
+    readonly 6: 24;
+    readonly 7: 28;
+    readonly 8: 32;
+    readonly 9: 36;
+    readonly 10: 40;
+    readonly 12: 48;
+    readonly 14: 56;
+    readonly 16: 64;
+    readonly 20: 80;
+    readonly 24: 96;
+};
+type Theme = "light" | "dark";
+type TokenKey = keyof typeof LIGHT;
+/** Helper to get a token value for the given theme */
+declare function T(theme: Theme, key: TokenKey): string;
+
+interface ThemeContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+}
+interface ThemeProviderProps {
+    defaultTheme?: Theme;
+    storageKey?: string;
+    children: ReactNode;
+}
+declare function ThemeProvider({ defaultTheme, storageKey, children, }: ThemeProviderProps): JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { DARK, FONTS, LIGHT, RADIUS, SPACING, T, type Theme, ThemeProvider, type TokenKey, useTheme };

package/dist/tokens.d.ts

@@ -0,0 +1,116 @@
+import { ReactNode } from 'react';
+
+/** Amber Security Design Tokens — TypeScript constants */
+declare const LIGHT: {
+    readonly bg: "#F5F3EE";
+    readonly surface: "#FFFFFF";
+    readonly surfaceAlt: "#EEEAE4";
+    readonly surfaceHover: "#E8E4DE";
+    readonly sidebar: "#0B1120";
+    readonly sidebarHover: "rgba(255,255,255,0.06)";
+    readonly sidebarActive: "rgba(212,136,14,0.12)";
+    readonly text: "#1A1A1A";
+    readonly textSecondary: "#4A4A4A";
+    readonly textMuted: "#8A8A8A";
+    readonly textSidebar: "#E0E0E0";
+    readonly textSidebarMuted: "#7A8294";
+    readonly accent: "#D4880E";
+    readonly accentHover: "#B8740C";
+    readonly accentSoft: "rgba(212,136,14,0.10)";
+    readonly accentText: "#FFFFFF";
+    readonly success: "#2D8A4E";
+    readonly successSoft: "rgba(45,138,78,0.10)";
+    readonly warning: "#C47F17";
+    readonly warningSoft: "rgba(196,127,23,0.10)";
+    readonly error: "#C93B3B";
+    readonly errorSoft: "rgba(201,59,59,0.10)";
+    readonly info: "#2B7CB8";
+    readonly infoSoft: "rgba(43,124,184,0.10)";
+    readonly border: "#DDD9D2";
+    readonly borderSidebar: "rgba(255,255,255,0.08)";
+    readonly shadow: "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)";
+    readonly shadowMd: "0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03)";
+    readonly shadowLg: "0 8px 30px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.03)";
+};
+declare const DARK: {
+    readonly bg: "#0A0A0A";
+    readonly surface: "#161616";
+    readonly surfaceAlt: "#1C1C1C";
+    readonly surfaceHover: "#222222";
+    readonly sidebar: "#070B14";
+    readonly sidebarHover: "rgba(255,255,255,0.06)";
+    readonly sidebarActive: "rgba(245,166,35,0.12)";
+    readonly text: "#F2F2F2";
+    readonly textSecondary: "#B0B0B0";
+    readonly textMuted: "#707070";
+    readonly textSidebar: "#D4D4D4";
+    readonly textSidebarMuted: "#6B7280";
+    readonly accent: "#F5A623";
+    readonly accentHover: "#E09510";
+    readonly accentSoft: "rgba(245,166,35,0.12)";
+    readonly accentText: "#0A0A0A";
+    readonly success: "#3DB868";
+    readonly successSoft: "rgba(61,184,104,0.12)";
+    readonly warning: "#E0A830";
+    readonly warningSoft: "rgba(224,168,48,0.12)";
+    readonly error: "#E85C5C";
+    readonly errorSoft: "rgba(232,92,92,0.12)";
+    readonly info: "#4DA3E0";
+    readonly infoSoft: "rgba(77,163,224,0.12)";
+    readonly border: "#262626";
+    readonly borderSidebar: "rgba(255,255,255,0.06)";
+    readonly shadow: "0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.12)";
+    readonly shadowMd: "0 4px 12px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15)";
+    readonly shadowLg: "0 8px 30px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.18)";
+};
+declare const FONTS: {
+    readonly display: "'Outfit', sans-serif";
+    readonly body: "'Manrope', -apple-system, BlinkMacSystemFont, sans-serif";
+    readonly mono: "'IBM Plex Mono', 'SF Mono', monospace";
+};
+declare const RADIUS: {
+    readonly sm: 6;
+    readonly md: 10;
+    readonly lg: 14;
+};
+declare const SPACING: {
+    readonly 0: 0;
+    readonly 0.5: 2;
+    readonly 1: 4;
+    readonly 1.5: 6;
+    readonly 2: 8;
+    readonly 2.5: 10;
+    readonly 3: 12;
+    readonly 3.5: 14;
+    readonly 4: 16;
+    readonly 5: 20;
+    readonly 6: 24;
+    readonly 7: 28;
+    readonly 8: 32;
+    readonly 9: 36;
+    readonly 10: 40;
+    readonly 12: 48;
+    readonly 14: 56;
+    readonly 16: 64;
+    readonly 20: 80;
+    readonly 24: 96;
+};
+type Theme = "light" | "dark";
+type TokenKey = keyof typeof LIGHT;
+/** Helper to get a token value for the given theme */
+declare function T(theme: Theme, key: TokenKey): string;
+
+interface ThemeContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+}
+interface ThemeProviderProps {
+    defaultTheme?: Theme;
+    storageKey?: string;
+    children: ReactNode;
+}
+declare function ThemeProvider({ defaultTheme, storageKey, children, }: ThemeProviderProps): JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { DARK, FONTS, LIGHT, RADIUS, SPACING, T, type Theme, ThemeProvider, type TokenKey, useTheme };

package/dist/tokens.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var chunkE4FQ57CA_js = require('./chunk-E4FQ57CA.js');
+
+
+
+Object.defineProperty(exports, "DARK", {
+  enumerable: true,
+  get: function () { return chunkE4FQ57CA_js.DARK; }
+});
+Object.defineProperty(exports, "FONTS", {
+  enumerable: true,
+  get: function () { return chunkE4FQ57CA_js.FONTS; }
+});
+Object.defineProperty(exports, "LIGHT", {
+  enumerable: true,
+  get: function () { return chunkE4FQ57CA_js.LIGHT; }
+});
+Object.defineProperty(exports, "RADIUS", {
+  enumerable: true,
+  get: function () { return chunkE4FQ57CA_js.RADIUS; }
+});
+Object.defineProperty(exports, "SPACING", {
+  enumerable: true,
+  get: function () { return chunkE4FQ57CA_js.SPACING; }
+});
+Object.defineProperty(exports, "T", {
+  enumerable: true,
+  get: function () { return chunkE4FQ57CA_js.T; }
+});
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () { return chunkE4FQ57CA_js.ThemeProvider; }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () { return chunkE4FQ57CA_js.useTheme; }
+});
+//# sourceMappingURL=tokens.js.map
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

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

package/dist/tokens.mjs

@@ -0,0 +1,3 @@
+export { DARK, FONTS, LIGHT, RADIUS, SPACING, T, ThemeProvider, useTheme } from './chunk-I5MLI7LI.mjs';
+//# sourceMappingURL=tokens.mjs.map
+//# sourceMappingURL=tokens.mjs.map

package/dist/tokens.mjs.map

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

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@ambersecurityinc/ui",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Amber Security shared UI library — design tokens, React components, and brand assets",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.mjs",
+      "require": "./dist/tokens.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.mjs",
+      "require": "./dist/components.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "_temp_note": "Revert publishConfig to GitHub Packages (@ambersecurityinc:registry https://npm.pkg.github.com, access restricted) after April 1 2026 billing reset",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ambersecurityinc/ui.git"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "typescript": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0"
+  },
+  "license": "UNLICENSED",
+  "scripts": {
+    "build": "tsup && cp src/tokens/tokens.css dist/tokens.css",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}