@regardio/react 0.5.7 → 0.7.0

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+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.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,4 @@
+//#region src/countdown/countdown.d.ts
+declare function Countdown(): React.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,68 @@
+import { ComponentProps, ReactNode } from "react";
+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 FieldRoot: ({
+  className,
+  variant,
+  ...props
+}: FieldRootProps) => React.JSX.Element;
+declare const FieldLabel: ({
+  className,
+  variant,
+  ...props
+}: FieldLabelProps) => React.JSX.Element;
+declare const FieldDescription: ({
+  className,
+  variant,
+  ...props
+}: FieldDescriptionProps) => React.JSX.Element;
+declare const FieldError: ({
+  className,
+  ...props
+}: FieldErrorProps) => React.JSX.Element;
+declare const FieldItem: ({
+  className,
+  layout,
+  children,
+  ...props
+}: FieldItemProps) => React.JSX.Element;
+declare const Field: {
+  Control: typeof Field$1.Control;
+  Description: typeof FieldDescription;
+  Error: typeof FieldError;
+  Item: typeof FieldItem;
+  Label: typeof FieldLabel;
+  Root: typeof FieldRoot;
+  Validity: typeof Field$1.Validity;
+};
+//#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,34 @@
+import { ComponentProps } from "react";
+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 FieldsetRoot: ({
+  className,
+  variant,
+  ...props
+}: FieldsetRootProps) => React.JSX.Element;
+declare const FieldsetLegend: ({
+  className,
+  size,
+  ...props
+}: FieldsetLegendProps) => React.JSX.Element;
+declare const Fieldset: {
+  Legend: typeof FieldsetLegend;
+  Root: typeof FieldsetRoot;
+};
+//#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,21 @@
+import { ComponentProps } from "react";
+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.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.mts

@@ -0,0 +1,44 @@
+//#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: "error";
+  defaultId: string;
+  defaultMessage: string;
+  message?: string;
+  stack?: string;
+} | {
+  type: "unknown";
+  defaultId: string;
+  defaultMessage: string;
+};
+/**
+* Compute a normalized error descriptor from a React Router error.
+* Apps can use this to map to i18n keys.
+*/
+declare function getErrorDescriptor(error: unknown): ErrorDescriptor;
+/**
+* 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
+*/
+declare function GenericError({
+  renderMessage
+}?: {
+  renderMessage?: (descriptor: ErrorDescriptor) => React.JSX.Element;
+}): React.JSX.Element;
+//#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 };

package/dist/grid/index.d.mts

@@ -0,0 +1,101 @@
+import { HTMLAttributes } from "react";
+
+//#region src/grid/grid-item.d.ts
+declare const GRID_ITEM_VARIANTS: {
+  readonly end: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, "auto"];
+  readonly rowSpan: readonly [1, 2, 3, 4, 5, 6, "full"];
+  readonly span: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "full"];
+  readonly spanLg: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "full"];
+  readonly spanMd: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "full"];
+  readonly spanSm: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "full"];
+  readonly spanXl: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "full"];
+  readonly spanXs: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, "full"];
+  readonly start: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, "auto"];
+};
+interface GridItemVariantProps {
+  end?: (typeof GRID_ITEM_VARIANTS.end)[number];
+  rowSpan?: (typeof GRID_ITEM_VARIANTS.rowSpan)[number];
+  span?: (typeof GRID_ITEM_VARIANTS.span)[number];
+  spanLg?: (typeof GRID_ITEM_VARIANTS.spanLg)[number];
+  spanMd?: (typeof GRID_ITEM_VARIANTS.spanMd)[number];
+  spanSm?: (typeof GRID_ITEM_VARIANTS.spanSm)[number];
+  spanXl?: (typeof GRID_ITEM_VARIANTS.spanXl)[number];
+  spanXs?: (typeof GRID_ITEM_VARIANTS.spanXs)[number];
+  start?: (typeof GRID_ITEM_VARIANTS.start)[number];
+}
+interface GridItemSlotProps {
+  class?: string;
+  className?: string;
+}
+interface GridItemSlots {
+  root: (props?: GridItemSlotProps) => string;
+}
+type GridItemStyleFn = (props?: GridItemVariantProps) => GridItemSlots;
+declare const gridItem: GridItemStyleFn;
+type GridItemVariants = GridItemVariantProps;
+interface GridItemProps extends HTMLAttributes<HTMLDivElement>, GridItemVariants {
+  classNames?: {
+    root?: string;
+  };
+  ref?: React.Ref<HTMLDivElement>;
+}
+declare const GridItem: ({
+  children,
+  className,
+  classNames,
+  span,
+  spanXs,
+  spanSm,
+  spanMd,
+  spanLg,
+  spanXl,
+  start,
+  end,
+  rowSpan,
+  ref,
+  ...props
+}: GridItemProps) => React.JSX.Element;
+//#endregion
+//#region src/grid/grid-root.d.ts
+declare const GRID_VARIANTS: {
+  readonly align: readonly ["center", "end", "start", "stretch"];
+  readonly flow: readonly ["column", "dense", "row"];
+};
+interface GridVariantProps {
+  align?: (typeof GRID_VARIANTS.align)[number];
+  flow?: (typeof GRID_VARIANTS.flow)[number];
+}
+interface GridSlotProps {
+  class?: string;
+  className?: string;
+}
+interface GridSlots {
+  root: (props?: GridSlotProps) => string;
+}
+type GridStyleFn = (props?: GridVariantProps) => GridSlots;
+declare const grid: GridStyleFn;
+type GridVariants = GridVariantProps;
+interface GridContextValue {
+  styles: ReturnType<typeof grid>;
+}
+declare function useGrid(): GridContextValue;
+interface GridRootProps extends HTMLAttributes<HTMLDivElement>, GridVariants {
+  classNames?: {
+    root?: string;
+  };
+  ref?: React.Ref<HTMLDivElement>;
+}
+declare const GridRoot: ({
+  children,
+  className,
+  classNames,
+  flow,
+  align,
+  ref,
+  ...props
+}: GridRootProps) => React.JSX.Element;
+declare namespace index_parts_d_exports {
+  export { GridItem as Item, GridRoot as Root };
+}
+//#endregion
+export { index_parts_d_exports as Grid, type GridItemProps, type GridItemVariants, type GridRootProps, gridItem, useGrid };