gold-on-frontend-common 0.1.0

package/dist/styles/globals.css

@@ -0,0 +1,222 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../components/**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  /* Brand aliases retained for existing `primary` and `secondary` utilities. */
+  --color-primary: #1f3a5f;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #d5af34;
+  --color-secondary-foreground: #1f3a5f;
+
+  /* Brand scales */
+  --color-primary-lighter: #ecf1f9;
+  --color-primary-light: #8696ac;
+  --color-primary-main: #1f3a5f;
+  --color-primary-dark: #132339;
+  --color-primary-darker: #060c13;
+  --color-secondary-lighter: #fbf7ea;
+  --color-secondary-light: #e8d38f;
+  --color-secondary-main: #d5af34;
+  --color-secondary-dark: #9b7f22;
+  --color-secondary-darker: #69530a;
+
+  /* Feedback aliases and scales */
+  --color-info: #00b8d9;
+  --color-info-lighter: #cafdf5;
+  --color-info-light: #61f3f3;
+  --color-info-main: #00b8d9;
+  --color-info-dark: #006c9c;
+  --color-info-darker: #003768;
+  --color-success: #22c55e;
+  --color-success-lighter: #d3fcd2;
+  --color-success-light: #77ed8b;
+  --color-success-main: #22c55e;
+  --color-success-dark: #118d57;
+  --color-success-darker: #065e49;
+  --color-warning: #ffab00;
+  --color-warning-lighter: #fff5cc;
+  --color-warning-light: #ffd666;
+  --color-warning-main: #ffab00;
+  --color-warning-dark: #b76e00;
+  --color-warning-darker: #7a4100;
+  --color-error: #e72b1b;
+  --color-error-lighter: #fdeae8;
+  --color-error-light: #f28b82;
+  --color-error-main: #e72b1b;
+  --color-error-dark: #a11e12;
+  --color-error-darker: #5c110a;
+
+  /* Neutral action colors used by interactive and disabled states. */
+  --color-grey-500: #919eab;
+  --color-grey-600: #637381;
+  --color-action-active: var(--action-active);
+
+  /* Semantic text colors switch values in `.dark`. */
+  --color-ink-primary: var(--ink-primary);
+  --color-ink-secondary: var(--ink-secondary);
+  --color-ink-disabled: var(--ink-disabled);
+
+  --shadow-card: 0px 12px 24px -4px #919eab1f, 0px 0px 2px 0px #919eab33;
+  --ease-luxury-ease: cubic-bezier(0.25, 1, 0.5, 1);
+  --ease-luxury-slow: cubic-bezier(0.33, 1, 0.68, 1);
+  --duration-600: 600ms;
+  --duration-800: 800ms;
+
+  /* Main gradients transition light -> main; bold gradients transition main -> dark. */
+  --background-image-primary-gradient: linear-gradient(135deg, #8696ac 0%, #1f3a5f 100%);
+  --background-image-primary-gradient-bold: linear-gradient(135deg, #1f3a5f 0%, #132339 100%);
+  --background-image-secondary-gradient: linear-gradient(135deg, #e8d38f 0%, #d5af34 100%);
+  --background-image-secondary-gradient-bold: linear-gradient(135deg, #d5af34 0%, #9b7f22 100%);
+  --background-image-info-gradient: linear-gradient(135deg, #61f3f3 0%, #00b8d9 100%);
+  --background-image-info-gradient-bold: linear-gradient(135deg, #00b8d9 0%, #006c9c 100%);
+  --background-image-success-gradient: linear-gradient(135deg, #77ed8b 0%, #22c55e 100%);
+  --background-image-success-gradient-bold: linear-gradient(135deg, #22c55e 0%, #118d57 100%);
+  --background-image-warning-gradient: linear-gradient(135deg, #ffd666 0%, #ffab00 100%);
+  --background-image-warning-gradient-bold: linear-gradient(135deg, #ffab00 0%, #b76e00 100%);
+  --background-image-error-gradient: linear-gradient(135deg, #f28b82 0%, #e72b1b 100%);
+  --background-image-error-gradient-bold: linear-gradient(135deg, #e72b1b 0%, #a11e12 100%);
+
+  /* Existing decorative gradients retained for compatibility. */
+  --background-image-gold-fade: linear-gradient(
+    270deg,
+    rgba(240, 200, 84, 0.2) 0%,
+    rgba(240, 200, 84, 0.04) 99.11%
+  );
+  --background-image-gold-fade-reverse: linear-gradient(
+    90deg,
+    rgba(240, 200, 84, 0.2) 0%,
+    rgba(240, 200, 84, 0.04) 99.11%
+  );
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.5rem;
+  --ink-primary: #151104;
+  --ink-secondary: #637381;
+  --ink-disabled: #919eab;
+  --action-active: #637381;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: #e72b1b;
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --ink-primary: #ffffff;
+  --ink-secondary: #919eab;
+  --ink-disabled: #637381;
+  --action-active: #919eab;
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: #f28b82;
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  button {
+    @apply cursor-pointer;
+  }
+
+  a {
+    @apply transition-colors duration-300;
+  }
+}

package/dist/tokens.d.ts

@@ -0,0 +1,118 @@
+export declare const colors: {
+    readonly primary: {
+        readonly lighter: "#ecf1f9";
+        readonly light: "#8696ac";
+        readonly main: "#1f3a5f";
+        readonly dark: "#132339";
+        readonly darker: "#060c13";
+    };
+    readonly secondary: {
+        readonly lighter: "#fbf7ea";
+        readonly light: "#e8d38f";
+        readonly main: "#d5af34";
+        readonly dark: "#9b7f22";
+        readonly darker: "#69530a";
+    };
+    readonly info: {
+        readonly lighter: "#cafdf5";
+        readonly light: "#61f3f3";
+        readonly main: "#00b8d9";
+        readonly dark: "#006c9c";
+        readonly darker: "#003768";
+    };
+    readonly success: {
+        readonly lighter: "#d3fcd2";
+        readonly light: "#77ed8b";
+        readonly main: "#22c55e";
+        readonly dark: "#118d57";
+        readonly darker: "#065e49";
+    };
+    readonly warning: {
+        readonly lighter: "#fff5cc";
+        readonly light: "#ffd666";
+        readonly main: "#ffab00";
+        readonly dark: "#b76e00";
+        readonly darker: "#7a4100";
+    };
+    readonly error: {
+        readonly lighter: "#fdeae8";
+        readonly light: "#f28b82";
+        readonly main: "#e72b1b";
+        readonly dark: "#a11e12";
+        readonly darker: "#5c110a";
+    };
+    readonly grey: {
+        readonly 500: "#919eab";
+        readonly 600: "#637381";
+    };
+};
+export declare const radii: {
+    readonly base: "0.5rem";
+};
+export declare const motion: {
+    readonly luxuryEase: "cubic-bezier(0.25, 1, 0.5, 1)";
+    readonly luxurySlow: "cubic-bezier(0.33, 1, 0.68, 1)";
+    readonly duration600: "600ms";
+    readonly duration800: "800ms";
+};
+export declare const tokens: {
+    readonly colors: {
+        readonly primary: {
+            readonly lighter: "#ecf1f9";
+            readonly light: "#8696ac";
+            readonly main: "#1f3a5f";
+            readonly dark: "#132339";
+            readonly darker: "#060c13";
+        };
+        readonly secondary: {
+            readonly lighter: "#fbf7ea";
+            readonly light: "#e8d38f";
+            readonly main: "#d5af34";
+            readonly dark: "#9b7f22";
+            readonly darker: "#69530a";
+        };
+        readonly info: {
+            readonly lighter: "#cafdf5";
+            readonly light: "#61f3f3";
+            readonly main: "#00b8d9";
+            readonly dark: "#006c9c";
+            readonly darker: "#003768";
+        };
+        readonly success: {
+            readonly lighter: "#d3fcd2";
+            readonly light: "#77ed8b";
+            readonly main: "#22c55e";
+            readonly dark: "#118d57";
+            readonly darker: "#065e49";
+        };
+        readonly warning: {
+            readonly lighter: "#fff5cc";
+            readonly light: "#ffd666";
+            readonly main: "#ffab00";
+            readonly dark: "#b76e00";
+            readonly darker: "#7a4100";
+        };
+        readonly error: {
+            readonly lighter: "#fdeae8";
+            readonly light: "#f28b82";
+            readonly main: "#e72b1b";
+            readonly dark: "#a11e12";
+            readonly darker: "#5c110a";
+        };
+        readonly grey: {
+            readonly 500: "#919eab";
+            readonly 600: "#637381";
+        };
+    };
+    readonly radii: {
+        readonly base: "0.5rem";
+    };
+    readonly motion: {
+        readonly luxuryEase: "cubic-bezier(0.25, 1, 0.5, 1)";
+        readonly luxurySlow: "cubic-bezier(0.33, 1, 0.68, 1)";
+        readonly duration600: "600ms";
+        readonly duration800: "800ms";
+    };
+};
+export type GoldOnTokens = typeof tokens;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CT,CAAC;AAEX,eAAO,MAAM,KAAK;;CAER,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;CAKT,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIT,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC"}

package/dist/tokens.js

@@ -0,0 +1,63 @@
+export const colors = {
+    primary: {
+        lighter: "#ecf1f9",
+        light: "#8696ac",
+        main: "#1f3a5f",
+        dark: "#132339",
+        darker: "#060c13"
+    },
+    secondary: {
+        lighter: "#fbf7ea",
+        light: "#e8d38f",
+        main: "#d5af34",
+        dark: "#9b7f22",
+        darker: "#69530a"
+    },
+    info: {
+        lighter: "#cafdf5",
+        light: "#61f3f3",
+        main: "#00b8d9",
+        dark: "#006c9c",
+        darker: "#003768"
+    },
+    success: {
+        lighter: "#d3fcd2",
+        light: "#77ed8b",
+        main: "#22c55e",
+        dark: "#118d57",
+        darker: "#065e49"
+    },
+    warning: {
+        lighter: "#fff5cc",
+        light: "#ffd666",
+        main: "#ffab00",
+        dark: "#b76e00",
+        darker: "#7a4100"
+    },
+    error: {
+        lighter: "#fdeae8",
+        light: "#f28b82",
+        main: "#e72b1b",
+        dark: "#a11e12",
+        darker: "#5c110a"
+    },
+    grey: {
+        500: "#919eab",
+        600: "#637381"
+    }
+};
+export const radii = {
+    base: "0.5rem"
+};
+export const motion = {
+    luxuryEase: "cubic-bezier(0.25, 1, 0.5, 1)",
+    luxurySlow: "cubic-bezier(0.33, 1, 0.68, 1)",
+    duration600: "600ms",
+    duration800: "800ms"
+};
+export const tokens = {
+    colors,
+    radii,
+    motion
+};
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE;QACP,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KAClB;IACD,SAAS,EAAE;QACT,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KAClB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KAClB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KAClB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KAClB;IACD,KAAK,EAAE;QACL,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KAClB;IACD,IAAI,EAAE;QACJ,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;KACf;CACO,CAAC;AAEX,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE,QAAQ;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,UAAU,EAAE,+BAA+B;IAC3C,UAAU,EAAE,gCAAgC;IAC5C,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,OAAO;CACZ,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM;IACN,KAAK;IACL,MAAM;CACE,CAAC"}

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "gold-on-frontend-common",
+  "version": "0.1.0",
+  "description": "Shared Gold On React components, Tailwind design tokens, and frontend configuration.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Gold-On/fontend-common-package.git"
+  },
+  "homepage": "https://github.com/Gold-On/fontend-common-package#readme",
+  "bugs": {
+    "url": "https://github.com/Gold-On/fontend-common-package/issues"
+  },
+  "files": [
+    "dist",
+    "config/eslint/*.mjs",
+    "config/typescript/*.json",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.js"
+    },
+    "./tokens.css": "./dist/styles/globals.css",
+    "./styles.css": "./dist/styles/globals.css",
+    "./utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    },
+    "./eslint/react-library": "./config/eslint/react-library.mjs",
+    "./eslint/next-js": "./config/eslint/next-js.mjs",
+    "./tsconfig/base.json": "./config/typescript/base.json",
+    "./tsconfig/react-library.json": "./config/typescript/react-library.json",
+    "./tsconfig/nextjs.json": "./config/typescript/nextjs.json",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "clean": "node scripts/clean.mjs",
+    "build": "npm run clean && tsc -p tsconfig.build.json && node scripts/copy-assets.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "eslint src",
+    "check": "npm run typecheck && npm run lint && npm run build",
+    "prepack": "npm run build",
+    "publish:npm": "npm publish"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "eslint-config-next": "16.2.9",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "lucide-react": "^0.548.0",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react-hook-form": "^7.65.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "eslint": "^9.0.0",
+    "next": "^15.0.0 || ^16.0.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "eslint": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@emnapi/core": "^1.11.1",
+    "@emnapi/runtime": "^1.11.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.0"
+  }
+}