@schemavaults/ui 0.15.0 → 0.16.2

package/dist/components/ui/breadcrumb/breadcrumb.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 import { type BreadcrumbSeparatorVariant, type BreadcrumbSize, type BreadcrumbVariant } from "./breadcrumb-variants";
 declare const breadcrumbListVariants: (props?: ({
     size?: "sm" | "default" | "lg" | null | undefined;
-    variant?: "default" | "ghost" | "muted" | "primary" | null | undefined;
+    variant?: "default" | "ghost" | "primary" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BreadcrumbProps extends ComponentPropsWithoutRef<"nav"> {
     separator?: BreadcrumbSeparatorVariant;

package/dist/components/ui/index.d.ts

@@ -98,3 +98,5 @@ export * from "./breadcrumb";
 export type * from "./breadcrumb";
 export * from "./kbd";
 export type * from "./kbd";
+export * from "./spinner";
+export type * from "./spinner";

package/dist/components/ui/index.js

@@ -48,4 +48,5 @@ export * from "./switch";
 export * from "./progress-bar";
 export * from "./breadcrumb";
 export * from "./kbd";
+export * from "./spinner";
 //# sourceMappingURL=index.js.map

package/dist/components/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,aAAa,CAAC;AAG5B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,kBAAkB,CAAC;AAGjC,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAExB,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AAGzB,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAG3B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,aAAa,CAAC;AAG5B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,kBAAkB,CAAC;AAGjC,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAExB,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AAGzB,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAG3B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,OAAO,CAAC;AAGtB,cAAc,WAAW,CAAC"}

package/dist/components/ui/loading-page/loading-page.d.ts

@@ -1,5 +1,6 @@
+import type { ReactElement } from "react";
 export interface LoadingPageProps {
     message?: string;
 }
-export declare function LoadingPage({ message }: LoadingPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoadingPage({ message }: LoadingPageProps): ReactElement;
 export default LoadingPage;

package/dist/components/ui/loading-page/loading-page.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner } from "../spinner";
 export function LoadingPage({ message }) {
-    return (_jsxs("div", { className: "w-full h-full flex grow flex-col items-center justify-center gap-4 min-h-[75vh]", children: [_jsx("div", { className: "inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]", role: "status", children: _jsx("span", { className: "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]" }) }), message && (_jsx("p", { className: "text-xs font-light text-muted-foreground", children: message }))] }));
+    return (_jsxs("div", { className: "w-full h-full flex grow flex-col items-center justify-center gap-4 min-h-[75vh]", children: [_jsx(Spinner, { size: "lg", label: message ?? "Loading" }), message && (_jsx("p", { className: "text-xs font-light text-muted-foreground", children: message }))] }));
 }
 export default LoadingPage;
 //# sourceMappingURL=loading-page.js.map

package/dist/components/ui/loading-page/loading-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-page.js","sourceRoot":"","sources":["../../../../src/components/ui/loading-page/loading-page.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAMb,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,EAAoB;IACvD,OAAO,CACL,eAAK,SAAS,EAAC,iFAAiF,aAC9F,cACE,SAAS,EAAC,6KAA6K,EACvL,IAAI,EAAC,QAAQ,YAEb,eAAM,SAAS,EAAC,uGAAuG,GAAQ,GAC3H,EACL,OAAO,IAAI,CACV,YAAG,SAAS,EAAC,0CAA0C,YAAE,OAAO,GAAK,CACtE,IACG,CACP,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"loading-page.js","sourceRoot":"","sources":["../../../../src/components/ui/loading-page/loading-page.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAMrC,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,EAAoB;IACvD,OAAO,CACL,eAAK,SAAS,EAAC,iFAAiF,aAC9F,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,OAAO,IAAI,SAAS,GAAI,EACjD,OAAO,IAAI,CACV,YAAG,SAAS,EAAC,0CAA0C,YAAE,OAAO,GAAK,CACtE,IACG,CACP,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC"}

package/dist/components/ui/spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner, Spinner as default, spinnerCircleVariants, spinnerSizeIds, spinnerVariantIds, } from "./spinner";
+export type { SpinnerProps, SpinnerSize, SpinnerVariant } from "./spinner";

package/dist/components/ui/spinner/index.js

@@ -0,0 +1,2 @@
+export { Spinner, Spinner as default, spinnerCircleVariants, spinnerSizeIds, spinnerVariantIds, } from "./spinner";
+//# sourceMappingURL=index.js.map

package/dist/components/ui/spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,OAAO,IAAI,OAAO,EAClB,qBAAqB,EACrB,cAAc,EACd,iBAAiB,GAClB,MAAM,WAAW,CAAC"}

package/dist/components/ui/spinner/spinner-variants.d.ts

@@ -0,0 +1,4 @@
+export declare const spinnerSizeIds: readonly ["xs", "sm", "md", "lg", "xl"];
+export type SpinnerSize = (typeof spinnerSizeIds)[number];
+export declare const spinnerVariantIds: readonly ["default", "primary", "secondary", "brand", "destructive", "warning", "muted"];
+export type SpinnerVariant = (typeof spinnerVariantIds)[number];

package/dist/components/ui/spinner/spinner-variants.js

@@ -0,0 +1,17 @@
+export const spinnerSizeIds = [
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+];
+export const spinnerVariantIds = [
+    "default",
+    "primary",
+    "secondary",
+    "brand",
+    "destructive",
+    "warning",
+    "muted",
+];
+//# sourceMappingURL=spinner-variants.js.map

package/dist/components/ui/spinner/spinner-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-variants.js","sourceRoot":"","sources":["../../../../src/components/ui/spinner/spinner-variants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;CACgC,CAAC;AAGvC,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,SAAS;IACT,SAAS;IACT,WAAW;IACX,OAAO;IACP,aAAa;IACb,SAAS;IACT,OAAO;CAC6B,CAAC"}

package/dist/components/ui/spinner/spinner.d.ts

@@ -0,0 +1,42 @@
+import { type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes, ReactElement, ReactNode, Ref } from "react";
+import { type SpinnerSize, type SpinnerVariant, spinnerSizeIds, spinnerVariantIds } from "./spinner-variants";
+/**
+ * Visual styling for the spinning circle itself. Border color uses
+ * `border-current` so the color is inherited from the wrapping element's
+ * text color (set by the variant).
+ */
+declare const spinnerCircleVariants: (props?: ({
+    size?: "xs" | "sm" | "lg" | "xl" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, "role" | "aria-label">, VariantProps<typeof spinnerCircleVariants> {
+    /**
+     * Color/intent variant. Defaults to "default" (foreground).
+     */
+    variant?: SpinnerVariant;
+    /**
+     * Accessible label describing what is loading. Announced to screen readers.
+     * Defaults to "Loading".
+     */
+    label?: string;
+    /**
+     * If true, the label is rendered visibly next to the spinner.
+     * If false (default), the label is only available to screen readers.
+     */
+    showLabel?: boolean;
+    /**
+     * Optional content rendered alongside the spinner. When provided, the
+     * content is rendered visibly and replaces the default visible label.
+     * The wrapping element retains the spinner's color so any nested text
+     * inherits it automatically.
+     */
+    children?: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+declare function Spinner({ className, size, variant, label, showLabel, children, ref, ...props }: SpinnerProps): ReactElement;
+declare namespace Spinner {
+    var displayName: string;
+}
+export { Spinner, spinnerCircleVariants, spinnerSizeIds, spinnerVariantIds, };
+export type { SpinnerSize, SpinnerVariant };
+export default Spinner;

package/dist/components/ui/spinner/spinner.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils";
+import { spinnerSizeIds, spinnerVariantIds, } from "./spinner-variants";
+/**
+ * Visual styling for the spinning circle itself. Border color uses
+ * `border-current` so the color is inherited from the wrapping element's
+ * text color (set by the variant).
+ */
+const spinnerCircleVariants = cva("inline-block rounded-full border-solid border-current border-r-transparent animate-spin motion-reduce:animate-[spin_1.5s_linear_infinite] align-[-0.125em]", {
+    variants: {
+        size: {
+            xs: "h-3 w-3 border-2",
+            sm: "h-4 w-4 border-2",
+            md: "h-6 w-6 border-[3px]",
+            lg: "h-8 w-8 border-4",
+            xl: "h-12 w-12 border-4",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+const spinnerLabelSizes = {
+    xs: "text-[10px]",
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+    xl: "text-lg",
+};
+const spinnerWrapperGapSizes = {
+    xs: "gap-1.5",
+    sm: "gap-2",
+    md: "gap-2.5",
+    lg: "gap-3",
+    xl: "gap-3.5",
+};
+const spinnerVariantColors = {
+    default: "text-foreground",
+    primary: "text-primary",
+    secondary: "text-secondary-foreground",
+    brand: "text-schemavaults-brand-blue",
+    destructive: "text-destructive",
+    warning: "text-warning",
+    muted: "text-muted-foreground",
+};
+function Spinner({ className, size, variant, label = "Loading", showLabel = false, children, ref, ...props }) {
+    const resolvedSize = size ?? "md";
+    const resolvedVariant = variant ?? "default";
+    const colorClass = spinnerVariantColors[resolvedVariant];
+    const hasVisibleContent = showLabel || children !== undefined;
+    if (!hasVisibleContent) {
+        return (_jsxs("span", { ref: ref, role: "status", "aria-live": "polite", "aria-label": label, "data-slot": "spinner", className: cn("inline-flex items-center", colorClass, className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: cn(spinnerCircleVariants({ size: resolvedSize })) }), _jsx("span", { className: "sr-only", children: label })] }));
+    }
+    const visibleLabel = children ?? label;
+    return (_jsxs("span", { ref: ref, role: "status", "aria-live": "polite", "data-slot": "spinner", className: cn("inline-flex items-center", spinnerWrapperGapSizes[resolvedSize], colorClass, className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: cn(spinnerCircleVariants({ size: resolvedSize })) }), _jsx("span", { className: cn("font-medium", spinnerLabelSizes[resolvedSize]), children: visibleLabel })] }));
+}
+Spinner.displayName = "Spinner";
+export { Spinner, spinnerCircleVariants, spinnerSizeIds, spinnerVariantIds, };
+export default Spinner;
+//# sourceMappingURL=spinner.js.map

package/dist/components/ui/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../src/components/ui/spinner/spinner.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schemavaults/ui",
-  "version": "0.15.0",
+  "version": "0.16.2",
   "private": false,
   "license": "UNLICENSED",
   "description": "React.js UI components for SchemaVaults frontend applications",
@@ -8,6 +8,10 @@
     "type": "git",
     "url": "https://github.com/schemavaults/ui.git"
   },
+  "peerDependencies": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
   "dependencies": {
     "@emotion/is-prop-valid": "1.4.0",
     "@hookform/resolvers": "3.9.0",
@@ -40,8 +44,6 @@
     "framer-motion": "12.23.24",
     "lucide-react": "0.575.0",
     "next-themes": "0.4.6",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
     "react-hook-form": "7.58.1",
     "tailwind-merge": "3.0.2"
   },