@regardio/react 0.5.5 → 0.6.0

package/dist/checkbox-group/index.d.mts

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
+
+//#region src/checkbox-group/checkbox-group.d.ts
+type CheckboxGroupOrientation = 'horizontal' | 'vertical';
+interface CheckboxGroupProps extends Omit<ComponentProps<typeof CheckboxGroup$1>, 'className'> {
+  className?: string;
+  orientation?: CheckboxGroupOrientation;
+}
+declare const CheckboxGroup: ({
+  className,
+  orientation,
+  ...props
+}: CheckboxGroupProps) => react_jsx_runtime23.JSX.Element;
+//#endregion
+export { CheckboxGroup, type CheckboxGroupOrientation, type CheckboxGroupProps };

package/dist/checkbox-group/index.mjs

@@ -0,0 +1,29 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
+
+//#region src/checkbox-group/checkbox-group.tsx
+const checkboxGroup = tv({
+	base: [
+		"flex",
+		"flex-col",
+		"gap-2"
+	],
+	defaultVariants: { orientation: "vertical" },
+	variants: { orientation: {
+		horizontal: ["flex-row", "gap-4"],
+		vertical: ["flex-col", "gap-2"]
+	} }
+});
+const CheckboxGroup = ({ className, orientation = "vertical", ...props }) => {
+	return /* @__PURE__ */ jsx(CheckboxGroup$1, {
+		className: checkboxGroup({
+			className,
+			orientation
+		}),
+		...props
+	});
+};
+
+//#endregion
+export { CheckboxGroup };

package/dist/chunk-BTpB_u-K.mjs

@@ -0,0 +1,18 @@
+//#region rolldown:runtime
+var __defProp = Object.defineProperty;
+var __exportAll = (all, symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+export { __exportAll as t };

package/dist/countdown/index.d.mts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime48 from "react/jsx-runtime";
+
+//#region src/countdown/countdown.d.ts
+declare function Countdown(): react_jsx_runtime48.JSX.Element;
+//#endregion
+export { Countdown };

package/dist/countdown/index.mjs

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { cn } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/countdown/countdown.tsx
+function Countdown() {
+	const [timerValue, setTimerValue] = useState(0);
+	const [isMounted, setIsMounted] = useState(false);
+	useEffect(() => {
+		setIsMounted(true);
+		const intervalId = setInterval(() => {
+			setTimerValue((prevValue) => {
+				return prevValue + 1;
+			});
+		}, 1e3);
+		return () => {
+			return clearInterval(intervalId);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("before:absolute", "before:bg-white", "before:content-[\"\"]", "before:h-[180px]", "before:rounded-full", "before:w-[180px]", "flex", "h-[240px]", "items-center", "justify-center", "relative", "rounded-full", "w-[240px]"),
+		style: { background: `conic-gradient(
+          transparent ${6 * (isMounted ? timerValue : 0)}deg,
+          hsl(var(--red-500)) 0deg,
+          hsl(var(--red-500)) 15deg,
+          hsl(var(--coral-500)) 15deg,
+          hsl(var(--coral-500)) 45deg,
+          hsl(var(--orange-500)) 45deg,
+          hsl(var(--orange-500)) 75deg,
+          hsl(var(--yellow-500)) 75deg,
+          hsl(var(--yellow-500)) 105deg,
+          hsl(var(--olive-500)) 105deg,
+          hsl(var(--olive-500)) 135deg,
+          hsl(var(--lime-500)) 135deg,
+          hsl(var(--lime-500)) 165deg,
+          hsl(var(--green-500)) 165deg,
+          hsl(var(--green-500)) 195deg,
+          hsl(var(--teal-500)) 195deg,
+          hsl(var(--teal-500)) 225deg,
+          hsl(var(--cyan-500)) 225deg,
+          hsl(var(--cyan-500)) 255deg,
+          hsl(var(--blue-500)) 255deg,
+          hsl(var(--blue-500)) 285deg,
+          hsl(var(--purple-500)) 285deg,
+          hsl(var(--purple-500)) 315deg,
+          hsl(var(--pink-500)) 315deg,
+          hsl(var(--pink-500)) 345deg,
+          hsl(var(--red-500)) 345deg
+          )` },
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn("text-foreground", "relative", "text-3xl", "font-bold"),
+			children: isMounted ? timerValue < 10 ? `0${timerValue}` : timerValue : 0
+		})
+	});
+}
+
+//#endregion
+export { Countdown };

package/dist/field/index.d.mts

@@ -0,0 +1,66 @@
+import * as react2 from "react";
+import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as _base_ui_react_field0 from "@base-ui/react/field";
+import { Field as Field$1 } from "@base-ui/react/field";
+
+//#region src/field/field.d.ts
+declare const fieldRootVariants: {
+  readonly default: readonly [];
+  readonly required: readonly ["after:content-[\"*\"]", "after:ml-1", "after:text-red-500"];
+};
+type FieldRootVariant = keyof typeof fieldRootVariants;
+type FieldLabelVariant = 'default' | 'error';
+type FieldDescriptionVariant = 'default' | 'error';
+type FieldItemLayout = 'default' | 'horizontal';
+interface FieldRootProps extends Omit<ComponentProps<typeof Field$1.Root>, 'className'> {
+  className?: string;
+  variant?: FieldRootVariant;
+}
+interface FieldLabelProps extends Omit<ComponentProps<typeof Field$1.Label>, 'className'> {
+  className?: string;
+  variant?: FieldLabelVariant;
+}
+interface FieldDescriptionProps extends Omit<ComponentProps<typeof Field$1.Description>, 'className'> {
+  className?: string;
+  variant?: FieldDescriptionVariant;
+}
+interface FieldErrorProps extends Omit<ComponentProps<typeof Field$1.Error>, 'className'> {
+  className?: string;
+}
+interface FieldItemProps extends ComponentProps<'div'> {
+  className?: string;
+  layout?: FieldItemLayout;
+  children: ReactNode;
+}
+declare const Field: {
+  Control: react2.ForwardRefExoticComponent<_base_ui_react_field0.FieldControlProps & react2.RefAttributes<HTMLInputElement>>;
+  Description: ({
+    className,
+    variant,
+    ...props
+  }: FieldDescriptionProps) => react_jsx_runtime12.JSX.Element;
+  Error: ({
+    className,
+    ...props
+  }: FieldErrorProps) => react_jsx_runtime12.JSX.Element;
+  Item: ({
+    className,
+    layout,
+    children,
+    ...props
+  }: FieldItemProps) => react_jsx_runtime12.JSX.Element;
+  Label: ({
+    className,
+    variant,
+    ...props
+  }: FieldLabelProps) => react_jsx_runtime12.JSX.Element;
+  Root: ({
+    className,
+    variant,
+    ...props
+  }: FieldRootProps) => react_jsx_runtime12.JSX.Element;
+  Validity: react2.FC<_base_ui_react_field0.FieldValidityProps>;
+};
+//#endregion
+export { Field, type FieldDescriptionProps, type FieldDescriptionVariant, type FieldErrorProps, type FieldItemLayout, type FieldItemProps, type FieldLabelProps, type FieldLabelVariant, type FieldRootProps, type FieldRootVariant };

package/dist/field/index.mjs

@@ -0,0 +1,115 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { Field as Field$1 } from "@base-ui/react/field";
+
+//#region src/field/field.tsx
+const fieldRoot = tv({
+	base: ["space-y-1"],
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: [],
+		required: [
+			"after:content-[\"*\"]",
+			"after:ml-1",
+			"after:text-red-500"
+		]
+	} }
+});
+const fieldLabel = tv({
+	base: [
+		"block",
+		"text-sm",
+		"font-medium",
+		"text-gray-700",
+		"mb-1"
+	],
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: [],
+		error: ["text-red-600"]
+	} }
+});
+const fieldDescription = tv({
+	base: [
+		"text-sm",
+		"text-gray-500",
+		"mt-1"
+	],
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: [],
+		error: ["text-red-600"]
+	} }
+});
+const fieldError = tv({ base: [
+	"text-sm",
+	"text-red-600",
+	"mt-1"
+] });
+const fieldItem = tv({
+	base: ["flex", "flex-col"],
+	defaultVariants: { layout: "default" },
+	variants: { layout: {
+		default: [],
+		horizontal: [
+			"flex-row",
+			"items-center",
+			"gap-2"
+		]
+	} }
+});
+const FieldRoot = ({ className, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(Field$1.Root, {
+		className: fieldRoot({
+			className,
+			variant
+		}),
+		...props
+	});
+};
+const FieldLabel = ({ className, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(Field$1.Label, {
+		className: fieldLabel({
+			className,
+			variant
+		}),
+		...props
+	});
+};
+const FieldDescription = ({ className, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(Field$1.Description, {
+		className: fieldDescription({
+			className,
+			variant
+		}),
+		...props
+	});
+};
+const FieldError = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Field$1.Error, {
+		className: fieldError({ className }),
+		...props
+	});
+};
+const FieldItem = ({ className, layout, children, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: fieldItem({
+			className,
+			layout
+		}),
+		...props,
+		children
+	});
+};
+const Field = {
+	Control: Field$1.Control,
+	Description: FieldDescription,
+	Error: FieldError,
+	Item: FieldItem,
+	Label: FieldLabel,
+	Root: FieldRoot,
+	Validity: Field$1.Validity
+};
+
+//#endregion
+export { Field };

package/dist/fieldset/index.d.mts

@@ -0,0 +1,33 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
+
+//#region src/fieldset/fieldset.d.ts
+declare const fieldsetRootVariants: {
+  readonly compact: readonly ["space-y-2"];
+  readonly default: readonly ["space-y-4"];
+};
+type FieldsetRootVariant = keyof typeof fieldsetRootVariants;
+type FieldsetLegendSize = 'default' | 'small';
+interface FieldsetRootProps extends Omit<ComponentProps<typeof Fieldset$1.Root>, 'className'> {
+  className?: string;
+  variant?: FieldsetRootVariant;
+}
+interface FieldsetLegendProps extends Omit<ComponentProps<typeof Fieldset$1.Legend>, 'className'> {
+  className?: string;
+  size?: FieldsetLegendSize;
+}
+declare const Fieldset: {
+  Legend: ({
+    className,
+    size,
+    ...props
+  }: FieldsetLegendProps) => react_jsx_runtime1.JSX.Element;
+  Root: ({
+    className,
+    variant,
+    ...props
+  }: FieldsetRootProps) => react_jsx_runtime1.JSX.Element;
+};
+//#endregion
+export { Fieldset, type FieldsetLegendProps, type FieldsetLegendSize, type FieldsetRootProps, type FieldsetRootVariant };

package/dist/fieldset/index.mjs

@@ -0,0 +1,61 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
+
+//#region src/fieldset/fieldset.tsx
+const fieldsetRoot = tv({
+	base: [
+		"border",
+		"border-gray-200",
+		"rounded-lg",
+		"p-4"
+	],
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		compact: ["space-y-2"],
+		default: ["space-y-4"]
+	} }
+});
+const fieldsetLegend = tv({
+	base: [
+		"text-lg",
+		"font-semibold",
+		"text-gray-900",
+		"mb-2"
+	],
+	defaultVariants: { size: "default" },
+	variants: { size: {
+		default: [],
+		small: [
+			"text-base",
+			"font-medium",
+			"text-gray-900",
+			"mb-1"
+		]
+	} }
+});
+const FieldsetRoot = ({ className, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(Fieldset$1.Root, {
+		className: fieldsetRoot({
+			className,
+			variant
+		}),
+		...props
+	});
+};
+const FieldsetLegend = ({ className, size, ...props }) => {
+	return /* @__PURE__ */ jsx(Fieldset$1.Legend, {
+		className: fieldsetLegend({
+			className,
+			size
+		}),
+		...props
+	});
+};
+const Fieldset = {
+	Legend: FieldsetLegend,
+	Root: FieldsetRoot
+};
+
+//#endregion
+export { Fieldset };

package/dist/form/index.d.mts

@@ -0,0 +1,22 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
+import { Form as Form$1 } from "@base-ui/react/form";
+
+//#region src/form/form.d.ts
+declare const formVariants: {
+  readonly compact: readonly ["space-y-4"];
+  readonly default: readonly ["space-y-6"];
+  readonly inline: readonly ["flex", "flex-wrap", "gap-4", "items-end"];
+};
+type FormVariant = keyof typeof formVariants;
+interface FormProps extends Omit<ComponentProps<typeof Form$1>, 'className'> {
+  className?: string;
+  variant?: FormVariant;
+}
+declare const Form: ({
+  className,
+  variant,
+  ...props
+}: FormProps) => react_jsx_runtime30.JSX.Element;
+//#endregion
+export { Form, type FormProps, type FormVariant };

package/dist/form/index.mjs

@@ -0,0 +1,31 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { Form as Form$1 } from "@base-ui/react/form";
+
+//#region src/form/form.tsx
+const form = tv({
+	base: [],
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		compact: ["space-y-4"],
+		default: ["space-y-6"],
+		inline: [
+			"flex",
+			"flex-wrap",
+			"gap-4",
+			"items-end"
+		]
+	} }
+});
+const Form = ({ className, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(Form$1, {
+		className: form({
+			className,
+			variant
+		}),
+		...props
+	});
+};
+
+//#endregion
+export { Form };

package/dist/generic-error/{index.d.ts → index.d.mts}

@@ -1,24 +1,26 @@
-import { ReactElement } from 'react';
+import { ReactElement } from "react";
+
+//#region src/generic-error/generic-error.d.ts
 
 /**
  * Descriptor returned from getErrorDescriptor to help apps localize messages.
  */
 type ErrorDescriptor = {
-    type: 'http';
-    status: number;
-    statusText: string;
-    defaultId: string;
-    defaultMessage: string;
+  type: 'http';
+  status: number;
+  statusText: string;
+  defaultId: string;
+  defaultMessage: string;
 } | {
-    type: 'error';
-    defaultId: string;
-    defaultMessage: string;
-    message?: string;
-    stack?: string;
+  type: 'error';
+  defaultId: string;
+  defaultMessage: string;
+  message?: string;
+  stack?: string;
 } | {
-    type: 'unknown';
-    defaultId: string;
-    defaultMessage: string;
+  type: 'unknown';
+  defaultId: string;
+  defaultMessage: string;
 };
 /**
  * Compute a normalized error descriptor from a React Router error.
@@ -36,8 +38,10 @@ declare function getErrorDescriptor(error: unknown): ErrorDescriptor;
  * - Wrap this component and use `getErrorDescriptor(useRouteError())` to map to i18n keys
  * - Or provide a custom `renderMessage` to override the displayed details
  */
-declare function GenericError({ renderMessage, }?: {
-    renderMessage?: (descriptor: ErrorDescriptor) => ReactElement;
+declare function GenericError({
+  renderMessage
+}?: {
+  renderMessage?: (descriptor: ErrorDescriptor) => ReactElement;
 }): ReactElement;
-
-export { type ErrorDescriptor, GenericError, getErrorDescriptor };
+//#endregion
+export { type ErrorDescriptor, GenericError, getErrorDescriptor };

package/dist/generic-error/index.mjs

@@ -0,0 +1,57 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isRouteErrorResponse, useRouteError } from "react-router";
+
+//#region src/generic-error/generic-error.tsx
+/**
+* Compute a normalized error descriptor from a React Router error.
+* Apps can use this to map to i18n keys.
+*/
+function getErrorDescriptor(error) {
+	if (isRouteErrorResponse(error)) {
+		const status = error.status;
+		const statusText = error.statusText || "Error";
+		return {
+			defaultId: status === 404 ? "errors.404" : "errors.http",
+			defaultMessage: status === 404 ? "Not found" : `Error ${status}`,
+			status,
+			statusText,
+			type: "http"
+		};
+	}
+	if (error instanceof Error) return {
+		defaultId: "errors.runtime",
+		defaultMessage: "An unexpected error occurred.",
+		message: error.message,
+		type: "error",
+		...error.stack ? { stack: error.stack } : {}
+	};
+	return {
+		defaultId: "errors.unknown",
+		defaultMessage: "An unexpected error occurred.",
+		type: "unknown"
+	};
+}
+/**
+* GenericError
+*
+* A reusable error boundary component for React Router apps.
+* - Displays status-based messages for route responses
+* - Shows stack traces in development for non-response errors
+*
+* For localization, apps may either:
+* - Wrap this component and use `getErrorDescriptor(useRouteError())` to map to i18n keys
+* - Or provide a custom `renderMessage` to override the displayed details
+*/
+function GenericError({ renderMessage } = {}) {
+	const descriptor = getErrorDescriptor(useRouteError());
+	return /* @__PURE__ */ jsxs("main", {
+		className: "pt-2xl p-sm container mx-auto",
+		children: [/* @__PURE__ */ jsx("h1", { children: descriptor.type === "http" ? `Error ${descriptor.status}` : "Error" }), renderMessage ? renderMessage(descriptor) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", { children: descriptor.type === "http" ? descriptor.defaultMessage : descriptor.type === "error" ? descriptor.message || descriptor.defaultMessage : descriptor.defaultMessage }), import.meta.env.DEV && descriptor.type === "error" && descriptor.stack && /* @__PURE__ */ jsx("pre", {
+			className: "w-full p-sm overflow-x-auto",
+			children: /* @__PURE__ */ jsx("code", { children: descriptor.stack })
+		})] })]
+	});
+}
+
+//#endregion
+export { GenericError, getErrorDescriptor };