@saasflare/ui 3.1.1 → 3.2.0

package/dist/{use-saasflare-props-NrM2Glmp.d.ts → use-saasflare-props-BrjMhU0U.d.mts}

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 /**
  * @fileoverview Theme-related types and constants consumed by SaasflareProvider,
  * SaasflareShell, and CustomPaletteInjector.
@@ -9,7 +11,7 @@
  * and paint it with `oklch(var(--primary-l) var(--primary-c) var(--primary-h))`.
  * Do NOT add a hex `color` field here; it will drift from palettes.css.
  */
-/** All 16 available color palette ids and display names. */
+/** All available color palette ids and display names. */
 declare const PALETTES: readonly [{
     readonly id: "ocean";
     readonly name: "Ocean";
@@ -64,6 +66,12 @@ declare const PALETTES: readonly [{
 }, {
     readonly id: "ruby";
     readonly name: "Ruby";
+}, {
+    readonly id: "colorful";
+    readonly name: "Colorful";
+}, {
+    readonly id: "craivo";
+    readonly name: "Craivo";
 }];
 /** Union of all preset color palette IDs. */
 type PaletteId = (typeof PALETTES)[number]["id"];
@@ -75,7 +83,7 @@ type PaletteId = (typeof PALETTES)[number]["id"];
  * app's globals.css are accepted without a type patch, while preset
  * ids keep their autocomplete.
  */
-type StyleVariant = "flat" | "glass" | (string & {});
+type StyleVariant = "flat" | "glass" | "clay" | (string & {});
 /** All available built-in surface style variants. */
 declare const STYLES: readonly [{
     readonly id: "flat";
@@ -83,6 +91,9 @@ declare const STYLES: readonly [{
 }, {
     readonly id: "glass";
     readonly name: "Glass";
+}, {
+    readonly id: "clay";
+    readonly name: "Clay";
 }];
 /**
  * Radius preset — orthogonal to {@link Surface} (geometry vs. material).
@@ -165,7 +176,7 @@ type Palette = PaletteId | (string & {}) | CustomPalette;
  * Accepted values for the `surface` prop.
  *
  * - omit (undefined)   → defers to persisted user preference, then "flat" baseline
- * - StyleVariant       → "flat" | "glass" | app-registered custom surface
+ * - StyleVariant       → "flat" | "glass" | "clay" | app-registered custom surface
  */
 type Surface = StyleVariant;
 /**
@@ -176,6 +187,34 @@ type Surface = StyleVariant;
  */
 type RadiusProp = Radius;
 
+/**
+ * @fileoverview Base SVG icon primitive for Phosphor-derived icons.
+ * Provides shared sizing, color, and weight handling for every icon component
+ * in this directory. The actual path data is supplied by each icon via the
+ * `weights` map.
+ * @module @saasflare/ui/components/ui/phosphor/icon-base
+ */
+
+/** Visual weight provided by Phosphor: thin stroke (regular), heavier stroke (bold), filled glyph, or duotone (filled silhouette + stroke). */
+type IconWeight = "regular" | "bold" | "fill" | "duotone";
+/**
+ * Public props accepted by every Phosphor icon component.
+ * Mirrors the shape of `@phosphor-icons/react` so usage is familiar.
+ */
+interface PhosphorIconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "weight"> {
+    /** Visual weight. Defaults to "regular". */
+    weight?: IconWeight;
+    /** Width and height. Defaults to "1em" so the icon scales with the parent's font-size or Tailwind size-* class. */
+    size?: string | number;
+    /** Stroke / fill color. Defaults to "currentColor" so the icon inherits text color. */
+    color?: string;
+}
+/** Internal props — adds the per-icon `weights` map. */
+interface IconBaseProps extends PhosphorIconProps {
+    weights: Record<IconWeight, React.ReactNode>;
+}
+declare const IconBase: React.ForwardRefExoticComponent<IconBaseProps & React.RefAttributes<SVGSVGElement>>;
+
 /** Props that every Saasflare component accepts for theme integration. */
 interface SaasflareComponentProps {
     /** Surface style override. Omit to inherit from provider. */
@@ -184,6 +223,14 @@ interface SaasflareComponentProps {
     radius?: Radius;
     /** Animation override. Omit to inherit from provider. */
     animated?: boolean;
+    /**
+     * Icon weight override for any Phosphor icons rendered inside the component.
+     * Omit to inherit from provider (which defaults to "regular").
+     *
+     * Some components (e.g. Spinner) hardcode a weight that's part of their
+     * visual identity and intentionally ignore this prop.
+     */
+    iconWeight?: IconWeight;
 }
 /** Fully resolved theme values — no optionals, no undefined. */
 interface ResolvedSaasflareProps {
@@ -195,6 +242,8 @@ interface ResolvedSaasflareProps {
     animated: boolean;
     /** Active brand palette id (null = global.css baseline). */
     palette: string | null;
+    /** Active icon weight for component-rendered Phosphor icons. */
+    iconWeight: IconWeight;
 }
 /**
  * Resolves component-level overrides against the provider context.
@@ -205,4 +254,4 @@ interface ResolvedSaasflareProps {
  */
 declare function useSaasflareProps(props?: SaasflareComponentProps): ResolvedSaasflareProps;
 
-export { type CustomPalette as C, type Palette as P, type RadiusProp as R, type Surface as S, type StyleVariant as a, type Radius as b, type SaasflareComponentProps as c, PALETTES as d, type PaletteId as e, RADII as f, type ResolvedSaasflareProps as g, STYLES as h, useSaasflareProps as u };
+export { type CustomPalette as C, type IconWeight as I, type PhosphorIconProps as P, type RadiusProp as R, type Surface as S, type Palette as a, type StyleVariant as b, type Radius as c, type SaasflareComponentProps as d, IconBase as e, PALETTES as f, type PaletteId as g, RADII as h, type ResolvedSaasflareProps as i, STYLES as j, useSaasflareProps as u };

package/dist/{use-saasflare-props-NrM2Glmp.d.mts → use-saasflare-props-BrjMhU0U.d.ts}

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 /**
  * @fileoverview Theme-related types and constants consumed by SaasflareProvider,
  * SaasflareShell, and CustomPaletteInjector.
@@ -9,7 +11,7 @@
  * and paint it with `oklch(var(--primary-l) var(--primary-c) var(--primary-h))`.
  * Do NOT add a hex `color` field here; it will drift from palettes.css.
  */
-/** All 16 available color palette ids and display names. */
+/** All available color palette ids and display names. */
 declare const PALETTES: readonly [{
     readonly id: "ocean";
     readonly name: "Ocean";
@@ -64,6 +66,12 @@ declare const PALETTES: readonly [{
 }, {
     readonly id: "ruby";
     readonly name: "Ruby";
+}, {
+    readonly id: "colorful";
+    readonly name: "Colorful";
+}, {
+    readonly id: "craivo";
+    readonly name: "Craivo";
 }];
 /** Union of all preset color palette IDs. */
 type PaletteId = (typeof PALETTES)[number]["id"];
@@ -75,7 +83,7 @@ type PaletteId = (typeof PALETTES)[number]["id"];
  * app's globals.css are accepted without a type patch, while preset
  * ids keep their autocomplete.
  */
-type StyleVariant = "flat" | "glass" | (string & {});
+type StyleVariant = "flat" | "glass" | "clay" | (string & {});
 /** All available built-in surface style variants. */
 declare const STYLES: readonly [{
     readonly id: "flat";
@@ -83,6 +91,9 @@ declare const STYLES: readonly [{
 }, {
     readonly id: "glass";
     readonly name: "Glass";
+}, {
+    readonly id: "clay";
+    readonly name: "Clay";
 }];
 /**
  * Radius preset — orthogonal to {@link Surface} (geometry vs. material).
@@ -165,7 +176,7 @@ type Palette = PaletteId | (string & {}) | CustomPalette;
  * Accepted values for the `surface` prop.
  *
  * - omit (undefined)   → defers to persisted user preference, then "flat" baseline
- * - StyleVariant       → "flat" | "glass" | app-registered custom surface
+ * - StyleVariant       → "flat" | "glass" | "clay" | app-registered custom surface
  */
 type Surface = StyleVariant;
 /**
@@ -176,6 +187,34 @@ type Surface = StyleVariant;
  */
 type RadiusProp = Radius;
 
+/**
+ * @fileoverview Base SVG icon primitive for Phosphor-derived icons.
+ * Provides shared sizing, color, and weight handling for every icon component
+ * in this directory. The actual path data is supplied by each icon via the
+ * `weights` map.
+ * @module @saasflare/ui/components/ui/phosphor/icon-base
+ */
+
+/** Visual weight provided by Phosphor: thin stroke (regular), heavier stroke (bold), filled glyph, or duotone (filled silhouette + stroke). */
+type IconWeight = "regular" | "bold" | "fill" | "duotone";
+/**
+ * Public props accepted by every Phosphor icon component.
+ * Mirrors the shape of `@phosphor-icons/react` so usage is familiar.
+ */
+interface PhosphorIconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "weight"> {
+    /** Visual weight. Defaults to "regular". */
+    weight?: IconWeight;
+    /** Width and height. Defaults to "1em" so the icon scales with the parent's font-size or Tailwind size-* class. */
+    size?: string | number;
+    /** Stroke / fill color. Defaults to "currentColor" so the icon inherits text color. */
+    color?: string;
+}
+/** Internal props — adds the per-icon `weights` map. */
+interface IconBaseProps extends PhosphorIconProps {
+    weights: Record<IconWeight, React.ReactNode>;
+}
+declare const IconBase: React.ForwardRefExoticComponent<IconBaseProps & React.RefAttributes<SVGSVGElement>>;
+
 /** Props that every Saasflare component accepts for theme integration. */
 interface SaasflareComponentProps {
     /** Surface style override. Omit to inherit from provider. */
@@ -184,6 +223,14 @@ interface SaasflareComponentProps {
     radius?: Radius;
     /** Animation override. Omit to inherit from provider. */
     animated?: boolean;
+    /**
+     * Icon weight override for any Phosphor icons rendered inside the component.
+     * Omit to inherit from provider (which defaults to "regular").
+     *
+     * Some components (e.g. Spinner) hardcode a weight that's part of their
+     * visual identity and intentionally ignore this prop.
+     */
+    iconWeight?: IconWeight;
 }
 /** Fully resolved theme values — no optionals, no undefined. */
 interface ResolvedSaasflareProps {
@@ -195,6 +242,8 @@ interface ResolvedSaasflareProps {
     animated: boolean;
     /** Active brand palette id (null = global.css baseline). */
     palette: string | null;
+    /** Active icon weight for component-rendered Phosphor icons. */
+    iconWeight: IconWeight;
 }
 /**
  * Resolves component-level overrides against the provider context.
@@ -205,4 +254,4 @@ interface ResolvedSaasflareProps {
  */
 declare function useSaasflareProps(props?: SaasflareComponentProps): ResolvedSaasflareProps;
 
-export { type CustomPalette as C, type Palette as P, type RadiusProp as R, type Surface as S, type StyleVariant as a, type Radius as b, type SaasflareComponentProps as c, PALETTES as d, type PaletteId as e, RADII as f, type ResolvedSaasflareProps as g, STYLES as h, useSaasflareProps as u };
+export { type CustomPalette as C, type IconWeight as I, type PhosphorIconProps as P, type RadiusProp as R, type Surface as S, type Palette as a, type StyleVariant as b, type Radius as c, type SaasflareComponentProps as d, IconBase as e, PALETTES as f, type PaletteId as g, RADII as h, type ResolvedSaasflareProps as i, STYLES as j, useSaasflareProps as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasflare/ui",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "private": false,
   "license": "MIT",
   "description": "The Next.js UI library — App Router-aware Radix primitives with Tailwind v4 and Motion, animated by default.",
@@ -134,7 +134,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "lucide-react": "^1.14.0",
     "sonner": "^2.0.0",
     "tailwind-merge": "^3.5.0"
   },
@@ -195,7 +194,9 @@
     "typescript": "^6.0.3"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && pnpm build:registry && pnpm build:llms",
+    "build:registry": "node scripts/build-registry.mjs",
+    "build:llms": "node scripts/build-llms.mjs",
     "dev": "tsup --watch",
     "lint": "eslint .",
     "typecheck": "tsc --noEmit"

package/styles/aurora.css

@@ -0,0 +1,47 @@
+/**
+ * @fileoverview Aurora drift animations for AuroraBackground showcase backdrop.
+ * @module packages/ui/styles/aurora
+ * @package ui
+ *
+ * Three independent keyframe cycles with staggered periods (24/28/32s) and
+ * negative delays so the blobs never synchronise. Drift is small (max ±6%)
+ * to feel like ambient motion, not active animation.
+ *
+ * Animation only activates when the component sets `data-animated="true"`.
+ * `prefers-reduced-motion: reduce` always wins.
+ */
+
+@keyframes aurora-drift-1 {
+    0%, 100% { transform: translate(0, 0); }
+    50%      { transform: translate(4%, 6%); }
+}
+
+@keyframes aurora-drift-2 {
+    0%, 100% { transform: translate(0, 0); }
+    50%      { transform: translate(-5%, 3%); }
+}
+
+@keyframes aurora-drift-3 {
+    0%, 100% { transform: translate(0, 0); }
+    50%      { transform: translate(3%, -5%); }
+}
+
+[data-slot="aurora-background"][data-animated="true"] .aurora-blob-1 {
+    animation: aurora-drift-1 24s ease-in-out infinite;
+}
+
+[data-slot="aurora-background"][data-animated="true"] .aurora-blob-2 {
+    animation: aurora-drift-2 28s ease-in-out infinite;
+    animation-delay: -8s;
+}
+
+[data-slot="aurora-background"][data-animated="true"] .aurora-blob-3 {
+    animation: aurora-drift-3 32s ease-in-out infinite;
+    animation-delay: -16s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    [data-slot="aurora-background"] .aurora-blob {
+        animation: none !important;
+    }
+}