@sableui/react 0.9.1 → 0.10.0

package/dist/lib/palette.js

@@ -0,0 +1,103 @@
+// src/lib/palette.ts
+var PALETTE_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+var PALETTE_FAMILIES = [
+  { name: "red", hue: 25, light: { l: 0.6, c: 0.21 }, dark: { l: 0.64, c: 0.2 } },
+  { name: "orange", hue: 50, light: { l: 0.69, c: 0.18 }, dark: { l: 0.71, c: 0.17 } },
+  // Yellow is only yellow when it is light; at 0.6 it is olive.
+  { name: "yellow", hue: 92, light: { l: 0.83, c: 0.16 }, dark: { l: 0.82, c: 0.15 } },
+  { name: "green", hue: 145, light: { l: 0.64, c: 0.17 }, dark: { l: 0.68, c: 0.16 } },
+  { name: "teal", hue: 190, light: { l: 0.7, c: 0.12 }, dark: { l: 0.74, c: 0.12 } },
+  { name: "blue", hue: 262, light: { l: 0.6, c: 0.19 }, dark: { l: 0.64, c: 0.17 } },
+  { name: "purple", hue: 305, light: { l: 0.56, c: 0.22 }, dark: { l: 0.64, c: 0.2 } },
+  { name: "pink", hue: 350, light: { l: 0.65, c: 0.2 }, dark: { l: 0.69, c: 0.18 } }
+];
+var PALETTE_COLORS = ["red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"];
+var isPaletteColor = (value) => PALETTE_COLORS.includes(value);
+var PALETTE_SLOTS = {
+  wash: 100,
+  "wash-strong": 200,
+  edge: 300,
+  dot: 500,
+  solid: 700,
+  text: 800,
+  "solid-ink": 50
+};
+var PALETTE_TONES = ["tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
+var PALETTE_SCALES = ["neutral", ...PALETTE_FAMILIES.map((family) => family.name), ...PALETTE_TONES];
+var STEP_CURVES = {
+  light: {
+    50: { target: 0.985, pull: 0.94, chroma: 0.12 },
+    100: { target: 0.985, pull: 0.86, chroma: 0.22 },
+    200: { target: 0.985, pull: 0.7, chroma: 0.4 },
+    300: { target: 0.985, pull: 0.5, chroma: 0.62 },
+    400: { target: 0.985, pull: 0.26, chroma: 0.85 },
+    500: { target: 0, pull: 0, chroma: 1 },
+    // The far half pulls toward the ink, by shares of whatever distance is
+    // left, so any anchor walks away from the page: a dark one (a deep tone)
+    // cannot turn back lighter, and a light one (yellow) still reaches text
+    // strength by 700 instead of stopping at olive.
+    600: { target: 0.2, pull: 0.2, chroma: 1 },
+    700: { target: 0.2, pull: 0.5, chroma: 0.92 },
+    800: { target: 0.2, pull: 0.6, chroma: 0.8 },
+    900: { target: 0.2, pull: 0.75, chroma: 0.66 },
+    950: { target: 0.2, pull: 0.88, chroma: 0.52 }
+  },
+  dark: {
+    50: { target: 0.17, pull: 0.93, chroma: 0.25 },
+    100: { target: 0.17, pull: 0.85, chroma: 0.32 },
+    200: { target: 0.17, pull: 0.7, chroma: 0.45 },
+    300: { target: 0.17, pull: 0.5, chroma: 0.62 },
+    400: { target: 0.17, pull: 0.27, chroma: 0.82 },
+    500: { target: 0, pull: 0, chroma: 1 },
+    600: { target: 0.97, pull: 0.2, chroma: 0.95 },
+    700: { target: 0.97, pull: 0.42, chroma: 0.8 },
+    800: { target: 0.97, pull: 0.6, chroma: 0.6 },
+    900: { target: 0.97, pull: 0.75, chroma: 0.42 },
+    950: { target: 0.97, pull: 0.88, chroma: 0.28 }
+  }
+};
+var NEUTRAL_MIX = {
+  50: 3,
+  100: 6,
+  200: 12,
+  300: 22,
+  400: 38,
+  500: 50,
+  600: 62,
+  700: 72,
+  800: 82,
+  900: 90,
+  950: 95
+};
+var TONE_CHROMA_CAP = {
+  light: { 50: 0.02, 100: 0.04, 200: 0.07, 300: 0.11 },
+  dark: { 50: 0.035, 100: 0.05, 200: 0.07, 300: 0.1 }
+};
+var LEAN = { amount: 0.5, cap: 15, fullAt: 0.06, maxHarmony: 2 };
+var LEAN_REACH = LEAN.cap * LEAN.maxHarmony;
+var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+function familyHue(hue, brand, harmony = 1) {
+  const gap = ((brand.h - hue + 540) % 360 + 360) % 360 - 180;
+  const lean = clamp(gap * LEAN.amount, -LEAN.cap, LEAN.cap) * clamp(harmony, 0, LEAN.maxHarmony) * clamp(brand.c / LEAN.fullAt, 0, 1);
+  return ((hue + lean) % 360 + 360) % 360;
+}
+function stepFrom(anchor, step, mode) {
+  const curve = STEP_CURVES[mode][step];
+  return { l: anchor.l + (curve.target - anchor.l) * curve.pull, c: anchor.c * curve.chroma };
+}
+export {
+  LEAN,
+  LEAN_REACH,
+  NEUTRAL_MIX,
+  PALETTE_COLORS,
+  PALETTE_FAMILIES,
+  PALETTE_SCALES,
+  PALETTE_SLOTS,
+  PALETTE_STEPS,
+  PALETTE_TONES,
+  STEP_CURVES,
+  TONE_CHROMA_CAP,
+  familyHue,
+  isPaletteColor,
+  stepFrom
+};

package/dist/lib/selection-card.js

@@ -14,12 +14,12 @@ var SELECTION_CARD_LAYOUT = {
 };
 var SELECTION_CARD_TILE_HEAD = "flex w-full items-start justify-between gap-3";
 var SELECTION_CARD_GLYPH = "shrink-0 text-2xl leading-none motion-interactive";
-var SELECTION_CARD_TONES = ["neutral", "standard", "collectible", "edition", "info", "warning"];
+var SELECTION_CARD_TONES = ["neutral", "3", "2", "1", "info", "warning"];
 var SELECTION_CARD_CHECKED = {
   neutral: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-primary data-[checked]:bg-muted",
-  standard: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-standard",
-  collectible: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-collectible",
-  edition: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-edition",
+  "3": "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-3",
+  "2": "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-2",
+  "1": "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-1",
   info: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-info",
   warning: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-warning"
 };