@neo-ui-kit/react 1.2.1 → 1.3.1

package/dist/chunks/{chunk-YKCUOZ7V.js → chunk-WOUWYJ6U.js}

@@ -1,3 +1,7 @@
+import {
+  classes,
+  mark
+} from "./chunk-BJSFN52W.js";
 import {
   canObserveIntersection,
   createResizeObserver,
@@ -763,6 +767,83 @@ function useSmoothWheel(ref) {
   }, [ref, enabled]);
 }
 
+// src/components/foundation/ThemeProvider/ThemeProvider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var themes = {
+  ruby: ["#ff244c", "#ff7c97"],
+  light: ["#e0a43a", "#f3d38f"],
+  green: ["#10c99a", "#7cf3d0"],
+  violet: ["#9b5cff", "#d3a8ff"]
+};
+var ThemeColorSchemeContext = createContext("dark");
+var ThemePaletteContext = createContext({
+  theme: "ruby",
+  primary: themes.ruby[0],
+  secondary: themes.ruby[1]
+});
+var useThemePalette = () => useContext(ThemePaletteContext);
+var emptyTokens = {};
+function hue(hex) {
+  const [r, g, b] = [1, 3, 5].map(
+    (i) => parseInt(hex.slice(i, i + 2), 16) / 255
+  );
+  const max = Math.max(r, g, b);
+  const delta = max - Math.min(r, g, b);
+  if (!delta) return 0;
+  let h = (r - g) / delta + 4;
+  if (max === r) h = (g - b) / delta % 6;
+  else if (max === g) h = (b - r) / delta + 2;
+  return (h * 60 + 360) % 360;
+}
+var ThemeProvider = ({
+  theme,
+  colorScheme,
+  primary,
+  secondary,
+  accent,
+  tokens = emptyTokens,
+  style,
+  children,
+  id,
+  className,
+  ...attributes
+}) => {
+  const inheritedScheme = useContext(ThemeColorSchemeContext);
+  const inheritedPalette = useThemePalette();
+  const scheme = colorScheme ?? inheritedScheme;
+  const selected = theme ?? inheritedPalette.theme;
+  const main = primary ?? accent ?? (theme ? themes[theme][0] : inheritedPalette.primary);
+  const light = secondary ?? (theme ? themes[theme][1] : inheritedPalette.secondary);
+  const vars = useMemo(() => {
+    const next = { ...style };
+    if (theme !== void 0 || primary !== void 0 || accent !== void 0) next["--ad-primary"] = main;
+    if (theme !== void 0 || secondary !== void 0) next["--ad-secondary"] = light;
+    for (const [key, value] of Object.entries(tokens))
+      next[key.startsWith("--") ? key : `--ad-${key}`] = value;
+    const effectivePrimary2 = next["--ad-primary"];
+    if (typeof effectivePrimary2 === "string" && /^#[0-9a-f]{6}$/i.test(effectivePrimary2) && next["--ad-hue-shift"] === void 0)
+      next["--ad-hue-shift"] = `${Math.round(hue(effectivePrimary2) - hue(themes.ruby[0]))}deg`;
+    return next;
+  }, [style, main, light, primary, secondary, accent, theme, tokens]);
+  const effectivePrimary = String(vars["--ad-primary"] ?? main);
+  const effectiveSecondary = String(vars["--ad-secondary"] ?? light);
+  const palette = useMemo(() => ({ theme: selected, primary: effectivePrimary, secondary: effectiveSecondary }), [selected, effectivePrimary, effectiveSecondary]);
+  return /* @__PURE__ */ jsx(ThemeColorSchemeContext.Provider, { value: scheme, children: /* @__PURE__ */ jsx(ThemePaletteContext.Provider, { value: palette, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...mark("ThemeProvider", attributes),
+      id,
+      className: classes("ad-theme", className),
+      style: vars,
+      "data-ad-component": "ThemeProvider",
+      "data-ad-theme": selected,
+      "data-ad-color-scheme": scheme,
+      children
+    }
+  ) }) });
+};
+
 export {
   refreshMotion,
   setMotionFrameRate,
@@ -773,5 +854,8 @@ export {
   useTick,
   usePauseOffscreen,
   useTabShape,
-  useSmoothWheel
+  useSmoothWheel,
+  themes,
+  useThemePalette,
+  ThemeProvider
 };

package/dist/components/artwork/QuantumField/QuantumFieldExperience.d.ts

@@ -10,6 +10,12 @@ export interface QuantumBackgroundSettings {
     density: number;
     /** Share of the scene the field spans: 1 reaches the edges, above 1 runs past them. */
     fieldSize: number;
+    /** 0 keeps the original plane; 1 separates near and far particles in space and speed. */
+    particleDepth: number;
+    /** Multiplies particle size without changing the field's footprint, 0.5–3. */
+    particleScale: number;
+    /** 0 keeps the original glow; 1 uses a crisp light core and a compact halo. */
+    particleSharpness: number;
     timeScale: number;
     nebulaEnabled: boolean;
     nebulaIntensity: number;

package/dist/components/controls/ThemePicker/ThemePicker.d.ts

@@ -8,6 +8,8 @@ export interface ThemePickerOption<V extends string = string> {
     description?: string;
     /** Picture of the theme (with transparency); the chosen one gets a moving shine. */
     image?: string;
+    /** Optional full-card backdrop, kept separate from the foreground picture. */
+    background?: string;
     /** The theme's own colour for the card's edge and glow. */
     color?: string;
 }

package/dist/components/controls/ThemePicker/styles.css

@@ -54,6 +54,7 @@
 /* Gallery: one picture card per theme, edged and lit in that theme's colour. */
 .ad-theme-picker[data-gallery] {
   display: grid;
+  width: 100%;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
   gap: var(--ad-space-3);
 }
@@ -63,17 +64,31 @@
   isolation: isolate;
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
+  min-width: 0;
   aspect-ratio: 5 / 4;
   padding: 0;
   overflow: hidden;
   border: 0.0625rem solid rgb(from var(--ad-theme-card) r g b / 0.38);
   border-radius: 0.8rem;
   background: linear-gradient(135deg, var(--ad-neutral-900), var(--ad-neutral-950));
-  color: var(--ad-text);
+  color: #fff;
   font: inherit;
   cursor: pointer;
   transition: filter 0.18s, box-shadow 0.18s, border-color 0.18s;
 }
+.ad-theme-card-background {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+.ad-theme-card:focus-visible {
+  outline: 0.125rem solid var(--ad-theme-card);
+  outline-offset: 0.2rem;
+}
 .ad-theme-card:hover {
   filter: brightness(1.13);
 }
@@ -88,28 +103,48 @@
     0 0 1rem rgb(from var(--ad-theme-card) r g b / 0.28);
 }
 .ad-theme-card-preview {
+  position: relative;
   display: grid;
   place-items: center;
   min-height: 0;
-  padding: var(--ad-space-2);
+  margin: 4% 12% 0.2rem;
   background: radial-gradient(ellipse at 50% 76%, rgb(from var(--ad-theme-card) r g b / 0.18), transparent 72%);
 }
-.ad-theme-card-preview > :is(img, svg, .ad-image-shine) {
-  width: auto;
-  max-width: 100%;
+.ad-theme-card-image {
+  position: absolute;
+  inset: 0;
+}
+.ad-theme-card-image > :is(img, .ad-image-shine) {
+  width: 100%;
   height: 100%;
-  aspect-ratio: 1;
+  aspect-ratio: auto;
   object-fit: contain;
 }
 .ad-theme-card-caption {
   display: grid;
   justify-items: center;
-  gap: 0.15rem;
-  padding: var(--ad-space-2);
-  background: linear-gradient(180deg, transparent, var(--ad-neutral-950));
+  gap: 0.1rem;
+  padding: 0 0.5rem 0.35rem;
+  text-align: center;
+  text-shadow: 0 0.125rem 0.4rem #000;
+  background: linear-gradient(180deg, transparent, #000b);
+}
+.ad-theme-card-caption > strong {
+  font-size: 1em;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+.ad-theme-card-caption::after {
+  content: "";
+  width: 20%;
+  height: 0.125rem;
+  margin-top: 0.15rem;
+  border-radius: 1rem;
+  background: var(--ad-theme-card);
+  box-shadow: 0 0 0.7rem var(--ad-theme-card);
 }
 .ad-theme-card-caption > span {
-  color: var(--ad-muted);
+  color: #fffd;
   font-size: var(--ad-font-size-caption);
   text-align: center;
 }

package/dist/components/forms/FormFields/FormFields.d.ts

@@ -1,14 +1,20 @@
 import { type ComponentType, type ReactNode } from "react";
 import { type GridResponsive } from "../../layout/Grid/Grid";
-export type FieldKind = "text" | "number" | "textarea" | "select" | "autocomplete" | "checkbox" | "switch" | "color" | "date" | "file" | "people" | "slider" | "rotary" | "tags";
-export interface FormFieldDefinition<T extends Record<string, unknown> = Record<string, unknown>> {
+import { type FormApi } from "../Form/Form";
+export type FieldKind = "text" | "number" | "textarea" | "select" | "autocomplete" | "checkbox" | "switch" | "color" | "date" | "file" | "people" | "slider" | "rotary" | "tags" | "theme" | "toggle" | "segmented" | "tabs" | "custom";
+export type FormFieldDefinition<T extends Record<string, unknown> = Record<string, unknown>> = {
     name: string;
-    kind?: FieldKind;
     label?: ReactNode;
     span?: GridResponsive<number | "full">;
     showWhen?: (values: T) => boolean;
     props?: Record<string, unknown>;
-}
+} & ({
+    kind: "custom";
+    render: (field: ReturnType<FormApi<T>["field"]>, form: FormApi<T>) => ReactNode;
+} | {
+    kind?: Exclude<FieldKind, "custom">;
+    render?: never;
+});
 export type FieldRegistry = Record<string, ComponentType<any>>;
 export declare const defaultFieldRegistry: FieldRegistry;
 export interface FormFieldsProps<T extends Record<string, unknown>> {

package/dist/components/forms/FormFields/styles.css

@@ -12,6 +12,9 @@
     grid-row-end: span 4;
     grid-template-rows: subgrid;
   }
+  .ad-form-field[data-custom] {
+    display: block;
+  }
   .ad-form-field > * {
     grid-row: 2;
     align-self: center;

package/dist/components/foundation/LoaderGenerator/LoaderGenerator.d.ts

@@ -15,14 +15,14 @@ export interface LoaderGeneratorProps extends CommonProps {
     defaultValue?: Partial<LoaderSettings>;
     onValueChange?: (settings: LoaderSettings) => void;
 }
-export declare const loaderGeneratorAnimations: ("flip" | "fill" | "wave" | "palette" | "pulse" | "spin" | "breathe" | "bounce" | "glow" | "shine" | "wobble")[];
+export declare const loaderGeneratorAnimations: ("flip" | "fill" | "wave" | "palette" | "glow" | "pulse" | "spin" | "breathe" | "bounce" | "shine" | "wobble")[];
 export declare const loaderSizes: {
     readonly xs: 4.5;
     readonly sm: 6.5;
     readonly md: 9;
     readonly lg: 12;
 };
-export declare const loaderRenderKey: ({ animation }: Pick<LoaderSettings, "animation">) => "flip" | "fill" | "wave" | "palette" | "pulse" | "spin" | "breathe" | "bounce" | "orbit" | "glow" | "shine" | "wobble" | "radar";
+export declare const loaderRenderKey: ({ animation }: Pick<LoaderSettings, "animation">) => "flip" | "fill" | "wave" | "palette" | "glow" | "pulse" | "spin" | "breathe" | "bounce" | "orbit" | "shine" | "wobble" | "radar";
 /** Removes large, smoothly connected background regions while preserving enclosed logo details. */
 export declare function removeBackgroundPixels(pixels: Uint8ClampedArray, width: number, height: number, signal?: AbortSignal): Promise<Uint8ClampedArray<ArrayBufferLike>>;
 /** Finds a representative visible colour for rings, highlights and image glow. */

package/dist/core.js

@@ -1,18 +1,16 @@
 import {
   ThemeProvider,
-  themes
-} from "./chunks/chunk-JZ4GDTH5.js";
-import {
   getMotionStats,
   setMotionFrameRate,
   subscribeTick,
+  themes,
   useBorder,
   useDecoration,
   usePauseOffscreen,
   useSmoothWheel,
   useTabShape,
   useTick
-} from "./chunks/chunk-YKCUOZ7V.js";
+} from "./chunks/chunk-WOUWYJ6U.js";
 import {
   LocaleProvider,
   addMessages,

package/dist/forms.js

@@ -4,8 +4,8 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-FNY5E2QO.js";
-import "./chunks/chunk-YKCUOZ7V.js";
+} from "./chunks/chunk-TQWTM23C.js";
+import "./chunks/chunk-WOUWYJ6U.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";
 export {