@signalflare-ai/ui 0.5.0 → 1.0.0

package/scripts/theme-generator/generate-css.ts

@@ -5,7 +5,7 @@
  * Outputs:
  * - theme-sf.css: Base theme with all tokens
  * - theme-fedramp.css: Override layer for fedramp theme
- * - theme-minimal.css: Override layer for minimal/borderless theme
+ * - theme-blue-tint.css: Override layer for blue-tint theme
  * - (future themes as needed)
  */
 
@@ -32,6 +32,10 @@ function lightDark(light: string, dark: string): string {
   return `light-dark(\n    ${light},\n    ${dark}\n  )`;
 }
 
+function toThemeFileName(themeName: string): string {
+  return themeName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
 /**
  * Generate the base sf theme CSS
  * This contains all tokens with their sf theme values
@@ -89,6 +93,16 @@ export function generateSfThemeCSS(
     lines.push("}");
   }
 
+  const extras = THEME_EXTRAS.sf;
+  if (extras?.length) {
+    lines.push("");
+    lines.push(":root {");
+    for (const line of extras) {
+      lines.push(`  ${line}`);
+    }
+    lines.push("}");
+  }
+
   return lines.join("\n");
 }
 
@@ -154,7 +168,7 @@ export function generateThemeOverrideCSS(
     return `${GENERATED_FILE_HEADER}/* No overrides for ${themeName} theme */\n`;
   }
 
-  return `${GENERATED_FILE_HEADER}[data-theme="${themeName}"] {
+  return `${GENERATED_FILE_HEADER}[data-theme="${toThemeFileName(themeName)}"] {
 ${overrides.join("\n")}
 }
 `;
@@ -197,7 +211,7 @@ export function generateAllThemes(
   for (const themeName of themes) {
     if (themeName !== "sf") {
       files.set(
-        `theme-${themeName}.css`,
+        `theme-${toThemeFileName(themeName)}.css`,
         generateThemeOverrideCSS(THEME_CONFIG, themeName, useNewNames)
       );
     }

package/scripts/theme-generator/index.ts

@@ -21,7 +21,7 @@ import {
   getTokenRenameMap,
 } from "./generate-css.js";
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const __dirname = import.meta.dirname;
 const STYLES_DIR = path.resolve(__dirname, "../../src/styles");
 
 function parseArgs(args: string[]) {
@@ -51,8 +51,8 @@ Options:
 Output:
   Generates theme CSS files in src/styles/:
   - theme-sf.css       Base theme with all tokens
-  - theme-fedramp.css  FedRAMP theme overrides
-  - theme-minimal.css  Minimal/borderless theme overrides
+  - theme-fedramp.css   FedRAMP theme overrides
+  - theme-blue-tint.css Blue-tint theme overrides
 `);
 }
 

package/scripts/theme-generator/migrate.ts

@@ -21,7 +21,7 @@ import { THEME_CONFIG } from "./config.js";
 import { getTokenRenameMap } from "./generate-css.js";
 import type { TokenRenameMap } from "./types.js";
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const __dirname = import.meta.dirname;
 const MONOREPO_ROOT = path.resolve(__dirname, "../../../..");
 const CONFIG_PATH = path.resolve(__dirname, "config.ts");
 

package/dist/ai-loader-Cr3eQkNS.js

@@ -1,134 +0,0 @@
-"use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/ai-loader/ai-loader.tsx
-var SF_AI_LOADER_VARIANTS = { size: {
-	sm: {
-		classes: "size-3",
-		description: "Small — 12px"
-	},
-	base: {
-		classes: "size-4",
-		description: "Default — 16px"
-	},
-	lg: {
-		classes: "size-5",
-		description: "Large — 20px"
-	}
-} };
-var SF_AI_LOADER_DEFAULT_VARIANTS = { size: "base" };
-function LoaderIcon({ className }) {
-	return /* @__PURE__ */ jsxs("svg", {
-		"aria-hidden": "true",
-		className,
-		fill: "none",
-		viewBox: "0 0 16 16",
-		children: [
-			/* @__PURE__ */ jsx("title", { children: "Loading" }),
-			/* @__PURE__ */ jsxs("g", {
-				clipPath: "url(#ai-loader-clip)",
-				children: [
-					/* @__PURE__ */ jsx("path", {
-						d: "M8 0V4",
-						stroke: "currentColor",
-						strokeLinejoin: "round",
-						strokeWidth: "1.5"
-					}),
-					/* @__PURE__ */ jsx("path", {
-						d: "M8 16V12",
-						opacity: "0.5",
-						stroke: "currentColor",
-						strokeLinejoin: "round",
-						strokeWidth: "1.5"
-					}),
-					/* @__PURE__ */ jsx("path", {
-						d: "M3.29773 1.52783L5.64887 4.7639",
-						opacity: "0.9",
-						stroke: "currentColor",
-						strokeLinejoin: "round",
-						strokeWidth: "1.5"
-					}),
-					/* @__PURE__ */ jsx("path", {
-						d: "M12.7023 1.52783L10.3511 4.7639",
-						opacity: "0.1",
-						stroke: "currentColor",
-						strokeLinejoin: "round",
-						strokeWidth: "1.5"
-					}),
-					/* @__PURE__ */ jsx("path", {
-						d: "M12.7023 14.472L10.3511 11.236",
-						opacity: "0.4",
-						stroke: "currentColor",
-						strokeLinejoin: "round",
-						strokeWidth: "1.5"
-					}),
-					/* @__PURE__ */ jsx("path", {
-						d: "M3.29773 14.472L5.64887 11.236",
-						opacity: "0.6",
-						stroke: "currentColor",
-						strokeLinejoin: "round",
-						strokeWidth: "1.5"
-					}),
-					/* @__PURE__ */ jsx("path", {
-						d: "M15.6085 5.52783L11.8043 6.7639",
-						opacity: "0.2",
-						stroke: "currentColor",
-						strokeLinejoin: "round",
-						strokeWidth: "1.5"
-					}),
-					/* @__PURE__ */ jsx("path", {
-						d: "M0.391602 10.472L4.19583 9.23598",
-						opacity: "0.7",
-						stroke: "currentColor",
-						strokeLinejoin: "round",
-						strokeWidth: "1.5"
-					}),
-					/* @__PURE__ */ jsx("path", {
-						d: "M15.6085 10.4722L11.8043 9.2361",
-						opacity: "0.3",
-						stroke: "currentColor",
-						strokeLinejoin: "round",
-						strokeWidth: "1.5"
-					}),
-					/* @__PURE__ */ jsx("path", {
-						d: "M0.391602 5.52783L4.19583 6.7639",
-						opacity: "0.8",
-						stroke: "currentColor",
-						strokeLinejoin: "round",
-						strokeWidth: "1.5"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
-				id: "ai-loader-clip",
-				children: /* @__PURE__ */ jsx("rect", {
-					fill: "white",
-					height: "16",
-					width: "16"
-				})
-			}) })
-		]
-	});
-}
-/**
-* Spinning radial loader for AI streaming states.
-*
-* @example
-* ```tsx
-* <AiLoader />
-* <AiLoader size="sm" className="text-sf-subtle" />
-* ```
-*/
-function AiLoader({ size = SF_AI_LOADER_DEFAULT_VARIANTS.size, className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"aria-label": "Loading",
-		className: cn("inline-flex animate-spin items-center justify-center", className),
-		role: "status",
-		...props,
-		children: /* @__PURE__ */ jsx(LoaderIcon, { className: SF_AI_LOADER_VARIANTS.size[size].classes })
-	});
-}
-//#endregion
-export { SF_AI_LOADER_DEFAULT_VARIANTS as n, SF_AI_LOADER_VARIANTS as r, AiLoader as t };
-
-//# sourceMappingURL=ai-loader-Cr3eQkNS.js.map

package/dist/ai-loader-Cr3eQkNS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ai-loader-Cr3eQkNS.js","names":[],"sources":["../src/components/ai-loader/ai-loader.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_LOADER_VARIANTS = {\n  size: {\n    sm: { classes: \"size-3\", description: \"Small — 12px\" },\n    base: { classes: \"size-4\", description: \"Default — 16px\" },\n    lg: { classes: \"size-5\", description: \"Large — 20px\" },\n  },\n} as const;\n\nexport const SF_AI_LOADER_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport type SFAiLoaderSize = keyof typeof SF_AI_LOADER_VARIANTS.size;\n\nexport interface SFAiLoaderVariantsProps {\n  /**\n   * Icon size.\n   * - `\"sm\"` — 12px\n   * - `\"base\"` — 16px (default)\n   * - `\"lg\"` — 20px\n   * @default \"base\"\n   */\n  size?: SFAiLoaderSize;\n}\n\n// ─── SVG icon ────────────────────────────────────────────────────────────────\n\nfunction LoaderIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"none\"\n      viewBox=\"0 0 16 16\"\n    >\n      <title>Loading</title>\n      <g clipPath=\"url(#ai-loader-clip)\">\n        <path\n          d=\"M8 0V4\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M8 16V12\"\n          opacity=\"0.5\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M3.29773 1.52783L5.64887 4.7639\"\n          opacity=\"0.9\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M12.7023 1.52783L10.3511 4.7639\"\n          opacity=\"0.1\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M12.7023 14.472L10.3511 11.236\"\n          opacity=\"0.4\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M3.29773 14.472L5.64887 11.236\"\n          opacity=\"0.6\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M15.6085 5.52783L11.8043 6.7639\"\n          opacity=\"0.2\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M0.391602 10.472L4.19583 9.23598\"\n          opacity=\"0.7\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M15.6085 10.4722L11.8043 9.2361\"\n          opacity=\"0.3\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M0.391602 5.52783L4.19583 6.7639\"\n          opacity=\"0.8\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"ai-loader-clip\">\n          <rect fill=\"white\" height=\"16\" width=\"16\" />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport interface AiLoaderProps\n  extends SFAiLoaderVariantsProps, HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Spinning radial loader for AI streaming states.\n *\n * @example\n * ```tsx\n * <AiLoader />\n * <AiLoader size=\"sm\" className=\"text-sf-subtle\" />\n * ```\n */\nexport function AiLoader({\n  size = SF_AI_LOADER_DEFAULT_VARIANTS.size,\n  className,\n  ...props\n}: AiLoaderProps) {\n  return (\n    <div\n      aria-label=\"Loading\"\n      className={cn(\n        \"inline-flex animate-spin items-center justify-center\",\n        className\n      )}\n      role=\"status\"\n      {...props}\n    >\n      <LoaderIcon className={SF_AI_LOADER_VARIANTS.size[size].classes} />\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,IAAa,wBAAwB,EACnC,MAAM;CACJ,IAAI;EAAE,SAAS;EAAU,aAAa;EAAgB;CACtD,MAAM;EAAE,SAAS;EAAU,aAAa;EAAkB;CAC1D,IAAI;EAAE,SAAS;EAAU,aAAa;EAAgB;CACvD,EACF;AAED,IAAa,gCAAgC,EAC3C,MAAM,QACP;AAiBD,SAAS,WAAW,EAAE,aAAqC;AACzD,QACE,qBAAC,OAAD;EACE,eAAY;EACD;EACX,MAAK;EACL,SAAQ;YAJV;GAME,oBAAC,SAAD,EAAA,UAAO,WAAe,CAAA;GACtB,qBAAC,KAAD;IAAG,UAAS;cAAZ;KACE,oBAAC,QAAD;MACE,GAAE;MACF,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACA;;GACJ,oBAAC,QAAD,EAAA,UACE,oBAAC,YAAD;IAAU,IAAG;cACX,oBAAC,QAAD;KAAM,MAAK;KAAQ,QAAO;KAAK,OAAM;KAAO,CAAA;IACnC,CAAA,EACN,CAAA;GACH;;;;;;;;;;;;AAkBV,SAAgB,SAAS,EACvB,OAAO,8BAA8B,MACrC,WACA,GAAG,SACa;AAChB,QACE,oBAAC,OAAD;EACE,cAAW;EACX,WAAW,GACT,wDACA,UACD;EACD,MAAK;EACL,GAAI;YAEJ,oBAAC,YAAD,EAAY,WAAW,sBAAsB,KAAK,MAAM,SAAW,CAAA;EAC/D,CAAA"}