@oniratec/onira-react-ui 1.3.3 → 1.4.0

package/dist/index.d.ts

@@ -20,6 +20,14 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
 
+export declare const Alert: React_2.ForwardRefExoticComponent<AlertProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface AlertProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    variant?: AlertVariant;
+}
+
+export declare type AlertVariant = 'error' | 'warning' | 'info' | 'success';
+
 export declare function AsyncSelect<T>({ value, onValueChange, placeholder, searchPlaceholder, disabled, hasError, minChars, debounceMs, fetcher, getOptionValue, getOptionLabel, emptyLabel, loadingLabel, emptyActionLabel, onEmptyActionClick, contentClassName, triggerClassName, }: Props<T>): JSX.Element;
 
 /** =========================
@@ -65,6 +73,32 @@ export declare type AsyncSelectOption = {
     meta?: unknown;
 };
 
+export declare const AuthLayout: React_2.FC<AuthLayoutProps>;
+
+export declare interface AuthLayoutLogo {
+    src: string;
+    alt: string;
+    href?: string;
+}
+
+export declare interface AuthLayoutProps {
+    logo?: AuthLayoutLogo;
+    children: React_2.ReactNode;
+    footer?: React_2.ReactNode;
+    className?: string;
+}
+
+export declare const Badge: React_2.ForwardRefExoticComponent<BadgeProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+}
+
+export declare type BadgeSize = 'sm' | 'md';
+
+export declare type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
+
 declare type BaseField<T extends FieldValues> = InputField<T> | TextareaField<T> | SelectField<T> | AsyncSelectField<T> | ToggleField<T> | CheckboxField<T> | DateField<T> | FileUploadField<T> | CustomField<T>;
 
 /** =========================

package/dist/index.js

@@ -3,7 +3,7 @@ import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useLayoutEffect, useState, forwardRef, useId as useId$1, useRef, useMemo, useEffect, useCallback, Fragment } from "react";
-import { Loader2, Calendar, ChevronLeft, ChevronRight, Check, Circle, EyeOff, EyeIcon, UploadCloud, X as X$1, ChevronDown, ChevronUp, ChevronsUpDown, Eye } from "lucide-react";
+import { Loader2, CheckCircle, Info as Info$1, AlertTriangle, AlertCircle, Calendar, ChevronLeft, ChevronRight, Check, Circle, EyeOff, EyeIcon, UploadCloud, X as X$1, ChevronDown, ChevronUp, ChevronsUpDown, Eye } from "lucide-react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -635,7 +635,44 @@ const Logo = ({
     ),
     children: t
   }
-), CardHeader = ({ children: t, className: e }) => /* @__PURE__ */ jsx("div", { className: cn$1("mb-2", e), children: t }), CardTitle = ({ children: t, className: e }) => /* @__PURE__ */ jsx("h3", { className: cn$1("text-sm font-medium text-[color:var(--text-2)]", e), children: t }), CardContent = ({ children: t, className: e }) => /* @__PURE__ */ jsx("div", { className: cn$1("text-2xl font-semibold text-[color:var(--text-1)]", e), children: t });
+), CardHeader = ({ children: t, className: e }) => /* @__PURE__ */ jsx("div", { className: cn$1("mb-2", e), children: t }), CardTitle = ({ children: t, className: e }) => /* @__PURE__ */ jsx("h3", { className: cn$1("text-sm font-medium text-[color:var(--text-2)]", e), children: t }), CardContent = ({ children: t, className: e }) => /* @__PURE__ */ jsx("div", { className: cn$1("text-2xl font-semibold text-[color:var(--text-1)]", e), children: t }), ICONS = {
+  error: AlertCircle,
+  warning: AlertTriangle,
+  info: Info$1,
+  success: CheckCircle
+}, Alert = React.forwardRef(
+  ({ className: t, variant: e = "info", children: r, ...i }, a) => {
+    const h = ICONS[e];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: a,
+        role: "alert",
+        "data-variant": e,
+        className: cn$1("oniratec-alert", t),
+        ...i,
+        children: [
+          /* @__PURE__ */ jsx(h, { className: "oniratec-alert__icon", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: "oniratec-alert__content", children: r })
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+const Badge = React.forwardRef(
+  ({ className: t, variant: e = "default", size: r = "md", ...i }, a) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: a,
+      "data-variant": e,
+      "data-size": r,
+      className: cn$1("oniratec-badge", t),
+      ...i
+    }
+  )
+);
+Badge.displayName = "Badge";
 function composeEventHandlers(t, e, { checkForDefaultPrevented: r = !0 } = {}) {
   return function(a) {
     if (t?.(a), r === !1 || !a.defaultPrevented)
@@ -17695,6 +17732,23 @@ const Toggle = ({
   }
 ) }));
 TooltipContent.displayName = "TooltipContent";
+const AuthLayout = ({ logo: t, children: e, footer: r, className: i }) => /* @__PURE__ */ jsx("div", { className: "flex min-h-screen items-center justify-center bg-gradient-to-br from-[--surface-1] via-[--surface-2] to-[--surface-1] px-4 py-12", children: /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn$1(
+      "w-full max-w-sm rounded-xl bg-[--surface-1] p-8",
+      "shadow-[var(--shadow-card-xl)] border border-[--border-1]",
+      "flex flex-col gap-6",
+      i
+    ),
+    children: [
+      t && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: t.href ? /* @__PURE__ */ jsx("a", { href: t.href, className: "focus-visible:outline-none focus-visible:ring-2", children: /* @__PURE__ */ jsx("img", { src: t.src, alt: t.alt, className: "h-10 w-auto" }) }) : /* @__PURE__ */ jsx("img", { src: t.src, alt: t.alt, className: "h-10 w-auto" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: e }),
+      r && /* @__PURE__ */ jsx("div", { className: "border-t border-[--border-1] pt-4 text-center text-xs text-[--text-2]", children: r })
+    ]
+  }
+) });
+AuthLayout.displayName = "AuthLayout";
 function normalizeSortState$1(t) {
   return t ? Array.isArray(t) ? t : [t] : [];
 }
@@ -21360,7 +21414,10 @@ function cn(...t) {
   return twMerge(clsx(t));
 }
 export {
+  Alert,
   AsyncSelect,
+  AuthLayout,
+  Badge,
   Box,
   Breadcrumbs,
   Button,