twico-ui 0.1.0 → 1.0.0

package/dist/colors.d.cts

@@ -0,0 +1,181 @@
+/** Indigo — the brand scale. Remap `--brand-*` (CSS) to reskin the library. */
+declare const indigo: {
+    readonly 50: "#eef2ff";
+    readonly 100: "#e0e7ff";
+    readonly 200: "#c7d2fe";
+    readonly 300: "#a5b4fc";
+    readonly 400: "#818cf8";
+    readonly 500: "#6366f1";
+    readonly 600: "#4f46e5";
+    readonly 700: "#4338ca";
+    readonly 800: "#3730a3";
+    readonly 900: "#312e81";
+    readonly 950: "#1e1b4b";
+};
+/** Slate — the neutral scale (surfaces, borders, text). */
+declare const slate: {
+    readonly 50: "#f8fafc";
+    readonly 100: "#f1f5f9";
+    readonly 200: "#e2e8f0";
+    readonly 300: "#cbd5e1";
+    readonly 400: "#94a3b8";
+    readonly 500: "#64748b";
+    readonly 600: "#475569";
+    readonly 700: "#334155";
+    readonly 800: "#1e293b";
+    readonly 900: "#0f172a";
+    readonly 950: "#020617";
+};
+/** Emerald — the success hue. */
+declare const emerald: {
+    readonly 50: "#ecfdf5";
+    readonly 100: "#d1fae5";
+    readonly 200: "#a7f3d0";
+    readonly 300: "#6ee7b7";
+    readonly 400: "#34d399";
+    readonly 500: "#10b981";
+    readonly 600: "#059669";
+    readonly 700: "#047857";
+    readonly 800: "#065f46";
+    readonly 900: "#064e3b";
+    readonly 950: "#022c22";
+};
+/** Amber — the warning hue. */
+declare const amber: {
+    readonly 50: "#fffbeb";
+    readonly 100: "#fef3c7";
+    readonly 200: "#fde68a";
+    readonly 300: "#fcd34d";
+    readonly 400: "#fbbf24";
+    readonly 500: "#f59e0b";
+    readonly 600: "#d97706";
+    readonly 700: "#b45309";
+    readonly 800: "#92400e";
+    readonly 900: "#78350f";
+    readonly 950: "#451a03";
+};
+/** Rose — the danger hue. */
+declare const rose: {
+    readonly 50: "#fff1f2";
+    readonly 100: "#ffe4e6";
+    readonly 200: "#fecdd3";
+    readonly 300: "#fda4af";
+    readonly 400: "#fb7185";
+    readonly 500: "#f43f5e";
+    readonly 600: "#e11d48";
+    readonly 700: "#be123c";
+    readonly 800: "#9f1239";
+    readonly 900: "#881337";
+    readonly 950: "#4c0519";
+};
+/** Sky — the info hue. */
+declare const sky: {
+    readonly 50: "#f0f9ff";
+    readonly 100: "#e0f2fe";
+    readonly 200: "#bae6fd";
+    readonly 300: "#7dd3fc";
+    readonly 400: "#38bdf8";
+    readonly 500: "#0ea5e9";
+    readonly 600: "#0284c7";
+    readonly 700: "#0369a1";
+    readonly 800: "#075985";
+    readonly 900: "#0c4a6e";
+    readonly 950: "#082f49";
+};
+/** Alias of {@link indigo} — mirrors the CSS `--brand-*` → `--indigo-*` aliasing. */
+declare const brand: {
+    readonly 50: "#eef2ff";
+    readonly 100: "#e0e7ff";
+    readonly 200: "#c7d2fe";
+    readonly 300: "#a5b4fc";
+    readonly 400: "#818cf8";
+    readonly 500: "#6366f1";
+    readonly 600: "#4f46e5";
+    readonly 700: "#4338ca";
+    readonly 800: "#3730a3";
+    readonly 900: "#312e81";
+    readonly 950: "#1e1b4b";
+};
+/** Every primitive scale, keyed by hue name. */
+declare const colors: {
+    readonly indigo: {
+        readonly 50: "#eef2ff";
+        readonly 100: "#e0e7ff";
+        readonly 200: "#c7d2fe";
+        readonly 300: "#a5b4fc";
+        readonly 400: "#818cf8";
+        readonly 500: "#6366f1";
+        readonly 600: "#4f46e5";
+        readonly 700: "#4338ca";
+        readonly 800: "#3730a3";
+        readonly 900: "#312e81";
+        readonly 950: "#1e1b4b";
+    };
+    readonly slate: {
+        readonly 50: "#f8fafc";
+        readonly 100: "#f1f5f9";
+        readonly 200: "#e2e8f0";
+        readonly 300: "#cbd5e1";
+        readonly 400: "#94a3b8";
+        readonly 500: "#64748b";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1e293b";
+        readonly 900: "#0f172a";
+        readonly 950: "#020617";
+    };
+    readonly emerald: {
+        readonly 50: "#ecfdf5";
+        readonly 100: "#d1fae5";
+        readonly 200: "#a7f3d0";
+        readonly 300: "#6ee7b7";
+        readonly 400: "#34d399";
+        readonly 500: "#10b981";
+        readonly 600: "#059669";
+        readonly 700: "#047857";
+        readonly 800: "#065f46";
+        readonly 900: "#064e3b";
+        readonly 950: "#022c22";
+    };
+    readonly amber: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+        readonly 950: "#451a03";
+    };
+    readonly rose: {
+        readonly 50: "#fff1f2";
+        readonly 100: "#ffe4e6";
+        readonly 200: "#fecdd3";
+        readonly 300: "#fda4af";
+        readonly 400: "#fb7185";
+        readonly 500: "#f43f5e";
+        readonly 600: "#e11d48";
+        readonly 700: "#be123c";
+        readonly 800: "#9f1239";
+        readonly 900: "#881337";
+        readonly 950: "#4c0519";
+    };
+    readonly sky: {
+        readonly 50: "#f0f9ff";
+        readonly 100: "#e0f2fe";
+        readonly 200: "#bae6fd";
+        readonly 300: "#7dd3fc";
+        readonly 400: "#38bdf8";
+        readonly 500: "#0ea5e9";
+        readonly 600: "#0284c7";
+        readonly 700: "#0369a1";
+        readonly 800: "#075985";
+        readonly 900: "#0c4a6e";
+        readonly 950: "#082f49";
+    };
+};
+
+export { amber, brand, colors, colors as default, emerald, indigo, rose, sky, slate };

package/dist/colors.d.ts

@@ -0,0 +1,181 @@
+/** Indigo — the brand scale. Remap `--brand-*` (CSS) to reskin the library. */
+declare const indigo: {
+    readonly 50: "#eef2ff";
+    readonly 100: "#e0e7ff";
+    readonly 200: "#c7d2fe";
+    readonly 300: "#a5b4fc";
+    readonly 400: "#818cf8";
+    readonly 500: "#6366f1";
+    readonly 600: "#4f46e5";
+    readonly 700: "#4338ca";
+    readonly 800: "#3730a3";
+    readonly 900: "#312e81";
+    readonly 950: "#1e1b4b";
+};
+/** Slate — the neutral scale (surfaces, borders, text). */
+declare const slate: {
+    readonly 50: "#f8fafc";
+    readonly 100: "#f1f5f9";
+    readonly 200: "#e2e8f0";
+    readonly 300: "#cbd5e1";
+    readonly 400: "#94a3b8";
+    readonly 500: "#64748b";
+    readonly 600: "#475569";
+    readonly 700: "#334155";
+    readonly 800: "#1e293b";
+    readonly 900: "#0f172a";
+    readonly 950: "#020617";
+};
+/** Emerald — the success hue. */
+declare const emerald: {
+    readonly 50: "#ecfdf5";
+    readonly 100: "#d1fae5";
+    readonly 200: "#a7f3d0";
+    readonly 300: "#6ee7b7";
+    readonly 400: "#34d399";
+    readonly 500: "#10b981";
+    readonly 600: "#059669";
+    readonly 700: "#047857";
+    readonly 800: "#065f46";
+    readonly 900: "#064e3b";
+    readonly 950: "#022c22";
+};
+/** Amber — the warning hue. */
+declare const amber: {
+    readonly 50: "#fffbeb";
+    readonly 100: "#fef3c7";
+    readonly 200: "#fde68a";
+    readonly 300: "#fcd34d";
+    readonly 400: "#fbbf24";
+    readonly 500: "#f59e0b";
+    readonly 600: "#d97706";
+    readonly 700: "#b45309";
+    readonly 800: "#92400e";
+    readonly 900: "#78350f";
+    readonly 950: "#451a03";
+};
+/** Rose — the danger hue. */
+declare const rose: {
+    readonly 50: "#fff1f2";
+    readonly 100: "#ffe4e6";
+    readonly 200: "#fecdd3";
+    readonly 300: "#fda4af";
+    readonly 400: "#fb7185";
+    readonly 500: "#f43f5e";
+    readonly 600: "#e11d48";
+    readonly 700: "#be123c";
+    readonly 800: "#9f1239";
+    readonly 900: "#881337";
+    readonly 950: "#4c0519";
+};
+/** Sky — the info hue. */
+declare const sky: {
+    readonly 50: "#f0f9ff";
+    readonly 100: "#e0f2fe";
+    readonly 200: "#bae6fd";
+    readonly 300: "#7dd3fc";
+    readonly 400: "#38bdf8";
+    readonly 500: "#0ea5e9";
+    readonly 600: "#0284c7";
+    readonly 700: "#0369a1";
+    readonly 800: "#075985";
+    readonly 900: "#0c4a6e";
+    readonly 950: "#082f49";
+};
+/** Alias of {@link indigo} — mirrors the CSS `--brand-*` → `--indigo-*` aliasing. */
+declare const brand: {
+    readonly 50: "#eef2ff";
+    readonly 100: "#e0e7ff";
+    readonly 200: "#c7d2fe";
+    readonly 300: "#a5b4fc";
+    readonly 400: "#818cf8";
+    readonly 500: "#6366f1";
+    readonly 600: "#4f46e5";
+    readonly 700: "#4338ca";
+    readonly 800: "#3730a3";
+    readonly 900: "#312e81";
+    readonly 950: "#1e1b4b";
+};
+/** Every primitive scale, keyed by hue name. */
+declare const colors: {
+    readonly indigo: {
+        readonly 50: "#eef2ff";
+        readonly 100: "#e0e7ff";
+        readonly 200: "#c7d2fe";
+        readonly 300: "#a5b4fc";
+        readonly 400: "#818cf8";
+        readonly 500: "#6366f1";
+        readonly 600: "#4f46e5";
+        readonly 700: "#4338ca";
+        readonly 800: "#3730a3";
+        readonly 900: "#312e81";
+        readonly 950: "#1e1b4b";
+    };
+    readonly slate: {
+        readonly 50: "#f8fafc";
+        readonly 100: "#f1f5f9";
+        readonly 200: "#e2e8f0";
+        readonly 300: "#cbd5e1";
+        readonly 400: "#94a3b8";
+        readonly 500: "#64748b";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1e293b";
+        readonly 900: "#0f172a";
+        readonly 950: "#020617";
+    };
+    readonly emerald: {
+        readonly 50: "#ecfdf5";
+        readonly 100: "#d1fae5";
+        readonly 200: "#a7f3d0";
+        readonly 300: "#6ee7b7";
+        readonly 400: "#34d399";
+        readonly 500: "#10b981";
+        readonly 600: "#059669";
+        readonly 700: "#047857";
+        readonly 800: "#065f46";
+        readonly 900: "#064e3b";
+        readonly 950: "#022c22";
+    };
+    readonly amber: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+        readonly 950: "#451a03";
+    };
+    readonly rose: {
+        readonly 50: "#fff1f2";
+        readonly 100: "#ffe4e6";
+        readonly 200: "#fecdd3";
+        readonly 300: "#fda4af";
+        readonly 400: "#fb7185";
+        readonly 500: "#f43f5e";
+        readonly 600: "#e11d48";
+        readonly 700: "#be123c";
+        readonly 800: "#9f1239";
+        readonly 900: "#881337";
+        readonly 950: "#4c0519";
+    };
+    readonly sky: {
+        readonly 50: "#f0f9ff";
+        readonly 100: "#e0f2fe";
+        readonly 200: "#bae6fd";
+        readonly 300: "#7dd3fc";
+        readonly 400: "#38bdf8";
+        readonly 500: "#0ea5e9";
+        readonly 600: "#0284c7";
+        readonly 700: "#0369a1";
+        readonly 800: "#075985";
+        readonly 900: "#0c4a6e";
+        readonly 950: "#082f49";
+    };
+};
+
+export { amber, brand, colors, colors as default, emerald, indigo, rose, sky, slate };

package/dist/colors.mjs

@@ -0,0 +1,86 @@
+// src/colors.ts
+var indigo = {
+  50: "#eef2ff",
+  100: "#e0e7ff",
+  200: "#c7d2fe",
+  300: "#a5b4fc",
+  400: "#818cf8",
+  500: "#6366f1",
+  600: "#4f46e5",
+  700: "#4338ca",
+  800: "#3730a3",
+  900: "#312e81",
+  950: "#1e1b4b"
+};
+var slate = {
+  50: "#f8fafc",
+  100: "#f1f5f9",
+  200: "#e2e8f0",
+  300: "#cbd5e1",
+  400: "#94a3b8",
+  500: "#64748b",
+  600: "#475569",
+  700: "#334155",
+  800: "#1e293b",
+  900: "#0f172a",
+  950: "#020617"
+};
+var emerald = {
+  50: "#ecfdf5",
+  100: "#d1fae5",
+  200: "#a7f3d0",
+  300: "#6ee7b7",
+  400: "#34d399",
+  500: "#10b981",
+  600: "#059669",
+  700: "#047857",
+  800: "#065f46",
+  900: "#064e3b",
+  950: "#022c22"
+};
+var amber = {
+  50: "#fffbeb",
+  100: "#fef3c7",
+  200: "#fde68a",
+  300: "#fcd34d",
+  400: "#fbbf24",
+  500: "#f59e0b",
+  600: "#d97706",
+  700: "#b45309",
+  800: "#92400e",
+  900: "#78350f",
+  950: "#451a03"
+};
+var rose = {
+  50: "#fff1f2",
+  100: "#ffe4e6",
+  200: "#fecdd3",
+  300: "#fda4af",
+  400: "#fb7185",
+  500: "#f43f5e",
+  600: "#e11d48",
+  700: "#be123c",
+  800: "#9f1239",
+  900: "#881337",
+  950: "#4c0519"
+};
+var sky = {
+  50: "#f0f9ff",
+  100: "#e0f2fe",
+  200: "#bae6fd",
+  300: "#7dd3fc",
+  400: "#38bdf8",
+  500: "#0ea5e9",
+  600: "#0284c7",
+  700: "#0369a1",
+  800: "#075985",
+  900: "#0c4a6e",
+  950: "#082f49"
+};
+var brand = indigo;
+var colors = { indigo, slate, emerald, amber, rose, sky };
+var colors_default = colors;
+
+export { amber, brand, colors, colors_default as default, emerald, indigo, rose, sky, slate };
+//# sourceMappingURL=colors.mjs.map
+//# sourceMappingURL=colors.mjs.map

package/dist/colors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/colors.ts"],"names":[],"mappings":";AAeO,IAAM,MAAA,GAAS;AAAA,EACpB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,KAAA,GAAQ;AAAA,EACnB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,OAAA,GAAU;AAAA,EACrB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,KAAA,GAAQ;AAAA,EACnB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,IAAA,GAAO;AAAA,EAClB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,GAAA,GAAM;AAAA,EACjB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,KAAA,GAAQ;AAGd,IAAM,SAAS,EAAE,MAAA,EAAQ,OAAO,OAAA,EAAS,KAAA,EAAO,MAAM,GAAA;AAE7D,IAAO,cAAA,GAAQ","file":"colors.mjs","sourcesContent":["// twico-ui/colors — the primitive color scales as plain JS objects.\n//\n// Mirrors Material UI's `@mui/material/colors`: given a HUE and a SHADE you can\n// import a hex string directly —\n//\n//   import { indigo } from \"twico-ui/colors\";\n//   const color = indigo[500]; // \"#6366f1\"\n//\n// These are the same raw values declared as `--indigo-*` / `--slate-*` / … in\n// tokens/colors.css; tests/colors.test.ts asserts the two never drift. Use these\n// when a CSS custom property is awkward (charts, canvas, inline style maths, JS\n// theme objects). For app theming prefer the SEMANTIC aliases (`var(--color-primary)`,\n// `var(--color-surface)`, …) which also flip under dark mode — JS primitives do not.\n\n/** Indigo — the brand scale. Remap `--brand-*` (CSS) to reskin the library. */\nexport const indigo = {\n  50: \"#eef2ff\",\n  100: \"#e0e7ff\",\n  200: \"#c7d2fe\",\n  300: \"#a5b4fc\",\n  400: \"#818cf8\",\n  500: \"#6366f1\",\n  600: \"#4f46e5\",\n  700: \"#4338ca\",\n  800: \"#3730a3\",\n  900: \"#312e81\",\n  950: \"#1e1b4b\",\n} as const;\n\n/** Slate — the neutral scale (surfaces, borders, text). */\nexport const slate = {\n  50: \"#f8fafc\",\n  100: \"#f1f5f9\",\n  200: \"#e2e8f0\",\n  300: \"#cbd5e1\",\n  400: \"#94a3b8\",\n  500: \"#64748b\",\n  600: \"#475569\",\n  700: \"#334155\",\n  800: \"#1e293b\",\n  900: \"#0f172a\",\n  950: \"#020617\",\n} as const;\n\n/** Emerald — the success hue. */\nexport const emerald = {\n  50: \"#ecfdf5\",\n  100: \"#d1fae5\",\n  200: \"#a7f3d0\",\n  300: \"#6ee7b7\",\n  400: \"#34d399\",\n  500: \"#10b981\",\n  600: \"#059669\",\n  700: \"#047857\",\n  800: \"#065f46\",\n  900: \"#064e3b\",\n  950: \"#022c22\",\n} as const;\n\n/** Amber — the warning hue. */\nexport const amber = {\n  50: \"#fffbeb\",\n  100: \"#fef3c7\",\n  200: \"#fde68a\",\n  300: \"#fcd34d\",\n  400: \"#fbbf24\",\n  500: \"#f59e0b\",\n  600: \"#d97706\",\n  700: \"#b45309\",\n  800: \"#92400e\",\n  900: \"#78350f\",\n  950: \"#451a03\",\n} as const;\n\n/** Rose — the danger hue. */\nexport const rose = {\n  50: \"#fff1f2\",\n  100: \"#ffe4e6\",\n  200: \"#fecdd3\",\n  300: \"#fda4af\",\n  400: \"#fb7185\",\n  500: \"#f43f5e\",\n  600: \"#e11d48\",\n  700: \"#be123c\",\n  800: \"#9f1239\",\n  900: \"#881337\",\n  950: \"#4c0519\",\n} as const;\n\n/** Sky — the info hue. */\nexport const sky = {\n  50: \"#f0f9ff\",\n  100: \"#e0f2fe\",\n  200: \"#bae6fd\",\n  300: \"#7dd3fc\",\n  400: \"#38bdf8\",\n  500: \"#0ea5e9\",\n  600: \"#0284c7\",\n  700: \"#0369a1\",\n  800: \"#075985\",\n  900: \"#0c4a6e\",\n  950: \"#082f49\",\n} as const;\n\n/** Alias of {@link indigo} — mirrors the CSS `--brand-*` → `--indigo-*` aliasing. */\nexport const brand = indigo;\n\n/** Every primitive scale, keyed by hue name. */\nexport const colors = { indigo, slate, emerald, amber, rose, sky } as const;\n\nexport default colors;\n"]}