@asevenid/ui 0.1.0

package/dist/lib/generate-shades.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-shades.js","sources":["../../src/lib/generate-shades.ts"],"sourcesContent":["import { formatCss, oklch, parse } from \"culori\"\n\nexport const SHADE_STEPS = [\n  \"50\",\n  \"100\",\n  \"200\",\n  \"300\",\n  \"400\",\n  \"500\",\n  \"600\",\n  \"700\",\n  \"800\",\n  \"900\",\n  \"950\",\n] as const\n\nexport type ShadeStep = (typeof SHADE_STEPS)[number]\n\n// Lightness curve calibrated against Tailwind v4 blue OKLCH palette\n// so generated ramps sit visually alongside the bundled presets.\nexport const STEP_L: Record<ShadeStep, number> = {\n  \"50\": 0.971,\n  \"100\": 0.932,\n  \"200\": 0.882,\n  \"300\": 0.809,\n  \"400\": 0.707,\n  \"500\": 0.623,\n  \"600\": 0.546,\n  \"700\": 0.488,\n  \"800\": 0.424,\n  \"900\": 0.379,\n  \"950\": 0.282,\n}\n\n// Chroma multipliers applied to the input color's chroma. Peaks at 500/600\n// then tapers toward both ends so 50 and 950 don't gamut-clip.\nconst STEP_C_SCALE: Record<ShadeStep, number> = {\n  \"50\": 0.18,\n  \"100\": 0.32,\n  \"200\": 0.55,\n  \"300\": 0.75,\n  \"400\": 0.92,\n  \"500\": 1.0,\n  \"600\": 1.0,\n  \"700\": 0.92,\n  \"800\": 0.78,\n  \"900\": 0.62,\n  \"950\": 0.42,\n}\n\n// Hue rotation magnitudes per step (warm-to-cool direction). Cool-to-warm\n// flips the sign. Same trick Tailwind/Material/Radix all use to make ramps\n// feel less mechanical.\nconst HUE_SHIFT: Record<ShadeStep, number> = {\n  \"50\": -10,\n  \"100\": -8,\n  \"200\": -5,\n  \"300\": -3,\n  \"400\": -1,\n  \"500\": 0,\n  \"600\": 0,\n  \"700\": 2,\n  \"800\": 4,\n  \"900\": 6,\n  \"950\": 8,\n}\n\n// Material 3 tonal palette: tones (T0–T100). Mapped step → tone, divided by\n// 100 to get OKLCH lightness.\nconst MATERIAL_TONE: Record<ShadeStep, number> = {\n  \"50\": 99,\n  \"100\": 95,\n  \"200\": 90,\n  \"300\": 80,\n  \"400\": 70,\n  \"500\": 60,\n  \"600\": 50,\n  \"700\": 40,\n  \"800\": 30,\n  \"900\": 20,\n  \"950\": 10,\n}\n\n// Harmony (Evil Martians, APCA × OKLCH): fixed L and C per step, derived\n// from sampling the Yellow column in their Figma file. Yellow has the most\n// chroma-conservative ramp, so these values stay gamut-safe across all hues.\nconst HARMONY_L: Record<ShadeStep, number> = {\n  \"50\": 0.99,\n  \"100\": 0.96,\n  \"200\": 0.91,\n  \"300\": 0.84,\n  \"400\": 0.78,\n  \"500\": 0.72,\n  \"600\": 0.59,\n  \"700\": 0.5,\n  \"800\": 0.37,\n  \"900\": 0.25,\n  \"950\": 0.13,\n}\n\nconst HARMONY_C: Record<ShadeStep, number> = {\n  \"50\": 0.005,\n  \"100\": 0.018,\n  \"200\": 0.045,\n  \"300\": 0.075,\n  \"400\": 0.1,\n  \"500\": 0.135,\n  \"600\": 0.115,\n  \"700\": 0.095,\n  \"800\": 0.07,\n  \"900\": 0.045,\n  \"950\": 0.022,\n}\n\n// Per-L chroma cap for Material Tonal so saturated picks don't gamut-clip\n// at the very light or very dark ends.\nconst MATERIAL_C_CAP: Record<ShadeStep, number> = {\n  \"50\": 0.05,\n  \"100\": 0.1,\n  \"200\": 0.15,\n  \"300\": 0.2,\n  \"400\": 0.25,\n  \"500\": 0.3,\n  \"600\": 0.3,\n  \"700\": 0.25,\n  \"800\": 0.2,\n  \"900\": 0.15,\n  \"950\": 0.1,\n}\n\n// Vivid P3: Tailwind v4's STEP_L lifted ~0.05 across the board so the whole\n// ramp reads luminous, and chroma targets pushed into the Display-P3 gamut\n// (peak 0.25 — above the sRGB-safe ~0.18). On P3 displays this looks ~30%\n// punchier than Tailwind v4; sRGB browsers clip gracefully.\nconst VIVID_L: Record<ShadeStep, number> = {\n  \"50\": 0.98,\n  \"100\": 0.95,\n  \"200\": 0.9,\n  \"300\": 0.84,\n  \"400\": 0.76,\n  \"500\": 0.68,\n  \"600\": 0.6,\n  \"700\": 0.53,\n  \"800\": 0.46,\n  \"900\": 0.4,\n  \"950\": 0.32,\n}\n\nconst VIVID_C_TARGET: Record<ShadeStep, number> = {\n  \"50\": 0.04,\n  \"100\": 0.07,\n  \"200\": 0.13,\n  \"300\": 0.18,\n  \"400\": 0.22,\n  \"500\": 0.25,\n  \"600\": 0.24,\n  \"700\": 0.2,\n  \"800\": 0.16,\n  \"900\": 0.1,\n  \"950\": 0.06,\n}\n\nexport const HUE_SHIFT_MODES = [\"off\", \"warm-to-cool\", \"cool-to-warm\"] as const\nexport type HueShiftMode = (typeof HUE_SHIFT_MODES)[number]\n\ntype FormulaOptions = { hueShift: HueShiftMode }\ntype FormulaFn = (\n  hex: string,\n  options: FormulaOptions\n) => Record<ShadeStep, string>\n\ntype ParsedInput = {\n  l: number\n  c: number\n  h: number\n}\n\nfunction parseInput(hex: string): ParsedInput {\n  const parsed = parse(hex)\n  if (!parsed) {\n    throw new Error(`Invalid color: ${hex}`)\n  }\n  const inOklch = oklch(parsed)\n  if (!inOklch) {\n    throw new Error(`Could not convert to OKLCH: ${hex}`)\n  }\n  const rawHue = inOklch.h\n  const safeHue =\n    typeof rawHue === \"number\" && Number.isFinite(rawHue) ? rawHue : 0\n  return { l: inOklch.l, c: inOklch.c ?? 0, h: safeHue }\n}\n\nfunction withHue(\n  baseHue: number,\n  step: ShadeStep,\n  hueShift: HueShiftMode\n): number {\n  if (hueShift === \"off\") return baseHue\n  const sign = hueShift === \"warm-to-cool\" ? 1 : -1\n  return (((baseHue + sign * HUE_SHIFT[step]) % 360) + 360) % 360\n}\n\nfunction emit(l: number, c: number, h: number): string {\n  return formatCss({ mode: \"oklch\", l, c: Math.max(0, c), h })\n}\n\nfunction tailwindV4(hex: string, { hueShift }: FormulaOptions) {\n  const input = parseInput(hex)\n  const result = {} as Record<ShadeStep, string>\n  for (const step of SHADE_STEPS) {\n    const l = STEP_L[step]\n    const c = input.c * STEP_C_SCALE[step]\n    const h = withHue(input.h, step, hueShift)\n    result[step] = emit(l, c, h)\n  }\n  return result\n}\n\nfunction materialTonal(hex: string, { hueShift }: FormulaOptions) {\n  const input = parseInput(hex)\n  const result = {} as Record<ShadeStep, string>\n  for (const step of SHADE_STEPS) {\n    const l = MATERIAL_TONE[step] / 100\n    const c = Math.min(input.c, MATERIAL_C_CAP[step])\n    const h = withHue(input.h, step, hueShift)\n    result[step] = emit(l, c, h)\n  }\n  return result\n}\n\nfunction harmony(hex: string, { hueShift }: FormulaOptions) {\n  const input = parseInput(hex)\n  const result = {} as Record<ShadeStep, string>\n  for (const step of SHADE_STEPS) {\n    const l = HARMONY_L[step]\n    const c = HARMONY_C[step]\n    const h = withHue(input.h, step, hueShift)\n    result[step] = emit(l, c, h)\n  }\n  return result\n}\n\nfunction vividP3(hex: string, { hueShift }: FormulaOptions) {\n  const input = parseInput(hex)\n  const result = {} as Record<ShadeStep, string>\n  for (const step of SHADE_STEPS) {\n    const l = VIVID_L[step]\n    const c = Math.max(input.c, VIVID_C_TARGET[step])\n    const h = withHue(input.h, step, hueShift)\n    result[step] = emit(l, c, h)\n  }\n  return result\n}\n\nexport const SHADE_FORMULAS = {\n  \"tailwind-v4\": {\n    label: \"Tailwind v4\",\n    description: \"Fixed lightness curve, chroma scaled by input.\",\n    fn: tailwindV4 as FormulaFn,\n  },\n  \"material-tonal\": {\n    label: \"Material Tonal\",\n    description:\n      \"Material 3 tones; constant input chroma (capped per L) for vivid 50/950 ends.\",\n    fn: materialTonal as FormulaFn,\n  },\n  harmony: {\n    label: \"Harmony\",\n    description:\n      \"Evil Martians' APCA palette: fixed L and C per step, gamut-safe across all hues. Input contributes hue only.\",\n    fn: harmony as FormulaFn,\n  },\n  \"vivid-p3\": {\n    label: \"Vivid P3\",\n    description:\n      \"Lifted lightness + Display-P3 chroma targets. Uses input chroma when it exceeds the target so vivid picks stay vivid.\",\n    fn: vividP3 as FormulaFn,\n  },\n} as const\n\nexport type ShadeFormulaId = keyof typeof SHADE_FORMULAS\nexport const SHADE_FORMULA_IDS = Object.keys(SHADE_FORMULAS) as ShadeFormulaId[]\nexport const DEFAULT_FORMULA: ShadeFormulaId = \"tailwind-v4\"\n\nexport function generateShadesWith(\n  hex: string,\n  formula: ShadeFormulaId,\n  options: FormulaOptions\n): Record<ShadeStep, string> {\n  return SHADE_FORMULAS[formula].fn(hex, options)\n}\n\n// Back-compat: callers that don't care about formula get the Tailwind v4 ramp.\nexport function generateShades(hex: string): Record<ShadeStep, string> {\n  return generateShadesWith(hex, DEFAULT_FORMULA, { hueShift: \"off\" })\n}\n\n// Effective lightness used by a formula at each step — drives the active-step\n// dot indicator in the UI. Mirrors what `fn` produces internally.\nexport function getEffectiveLightness(\n  formula: ShadeFormulaId\n): Record<ShadeStep, number> {\n  if (formula === \"material-tonal\") {\n    const result = {} as Record<ShadeStep, number>\n    for (const step of SHADE_STEPS) {\n      result[step] = MATERIAL_TONE[step] / 100\n    }\n    return result\n  }\n\n  if (formula === \"harmony\") {\n    return { ...HARMONY_L }\n  }\n\n  if (formula === \"vivid-p3\") {\n    return { ...VIVID_L }\n  }\n\n  return { ...STEP_L }\n}\n"],"names":["SHADE_STEPS","STEP_L","STEP_C_SCALE","HUE_SHIFT","MATERIAL_TONE","HARMONY_L","HARMONY_C","MATERIAL_C_CAP","VIVID_L","VIVID_C_TARGET","HUE_SHIFT_MODES","parseInput","hex","parsed","parse","inOklch","oklch","rawHue","safeHue","withHue","baseHue","step","hueShift","emit","l","c","h","formatCss","tailwindV4","input","result","materialTonal","harmony","vividP3","SHADE_FORMULAS","SHADE_FORMULA_IDS","DEFAULT_FORMULA","generateShadesWith","formula","options","generateShades","getEffectiveLightness"],"mappings":"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"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -0,0 +1,10 @@
+"use client";
+import { clsx as t } from "clsx";
+import { twMerge as e } from "tailwind-merge";
+function c(...r) {
+  return e(t(r));
+}
+export {
+  c as cn
+};
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"names":["cn","inputs","twMerge","clsx"],"mappings":";;;AAGO,SAASA,KAAMC,GAAsB;AAC1C,SAAOC,EAAQC,EAAKF,CAAM,CAAC;AAC7B;"}