@regardio/react 0.7.24 → 0.8.1

package/dist/button/index.d.mts

@@ -1,2 +1,2 @@
-import { i as ButtonVariant, n as ButtonProps, r as ButtonSize, t as Button } from "../index-DH3W0i5O.mjs";
-export { Button, ButtonProps, ButtonSize, ButtonVariant };
+import { i as buttonVariants, n as ButtonProps, r as ButtonVariant, t as Button } from "../index-DEHa010W.mjs";
+export { Button, ButtonProps, ButtonVariant, buttonVariants };

package/dist/button/index.mjs

@@ -1,2 +1,2 @@
-import { t as Button } from "../button-wigUM1BB.mjs";
-export { Button };
+import { n as buttonVariants, t as Button } from "../button-BllZdqCA.mjs";
+export { Button, buttonVariants };

package/dist/button-BllZdqCA.mjs

@@ -0,0 +1,109 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+//#region src/button/button.tsx
+const buttonVariants = {
+	destructive: [
+		"inline-flex",
+		"items-center",
+		"justify-center",
+		"transition-colors",
+		"bg-destructive",
+		"text-destructive-foreground",
+		"border-destructive",
+		"hover:bg-destructive-hover",
+		"hover:border-destructive-hover"
+	],
+	ghost: [
+		"inline-flex",
+		"items-center",
+		"justify-center",
+		"transition-colors",
+		"bg-transparent",
+		"text-foreground",
+		"border-transparent",
+		"hover:bg-muted"
+	],
+	outline: [
+		"inline-flex",
+		"items-center",
+		"justify-center",
+		"transition-colors",
+		"bg-transparent",
+		"text-foreground",
+		"border-current",
+		"hover:bg-muted"
+	],
+	primary: [
+		"inline-flex",
+		"items-center",
+		"justify-center",
+		"transition-colors",
+		"bg-primary",
+		"text-primary-foreground",
+		"border-primary",
+		"hover:bg-primary-hover",
+		"hover:border-primary-hover"
+	],
+	secondary: [
+		"inline-flex",
+		"items-center",
+		"justify-center",
+		"transition-colors",
+		"bg-secondary",
+		"text-secondary-foreground",
+		"border-secondary",
+		"hover:bg-secondary-hover",
+		"hover:border-secondary-hover"
+	]
+};
+const button = tv({
+	base: [],
+	defaultVariants: {
+		size: "md",
+		variant: "primary"
+	},
+	variants: {
+		size: {
+			"2xl": [
+				"px-8",
+				"py-4",
+				"text-xl"
+			],
+			lg: [
+				"px-6",
+				"py-3",
+				"text-lg"
+			],
+			md: [
+				"px-4",
+				"py-2",
+				"text-base"
+			],
+			sm: [
+				"px-3",
+				"py-1.5",
+				"text-sm"
+			],
+			xl: [
+				"px-7",
+				"py-3.5",
+				"text-lg"
+			]
+		},
+		variant: buttonVariants
+	}
+});
+const Button$1 = ({ children, className, size, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		className: button({
+			className,
+			size,
+			variant
+		}),
+		...props,
+		children
+	});
+};
+//#endregion
+export { buttonVariants as n, Button$1 as t };

package/dist/carousel/index.mjs

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "../chunk-CfYAbeIz.mjs";
-import { t as Button } from "../button-wigUM1BB.mjs";
+import { t as Button } from "../button-BllZdqCA.mjs";
 import { createContext, useCallback, useContext, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import useEmblaCarousel from "embla-carousel-react";

package/dist/checkbox/index.mjs

@@ -4,22 +4,19 @@ import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 //#region src/checkbox/checkbox.tsx
 const checkboxRoot = tv({
 	base: [
-		"h-4",
-		"w-4",
+		"flex",
+		"items-center",
+		"justify-center",
 		"rounded",
-		"border",
-		"border-gray-300",
-		"bg-white",
-		"focus:outline-none",
-		"focus:ring-2",
-		"focus:ring-blue-500",
-		"focus:ring-offset-2",
+		"focus-visible:outline-2",
+		"focus-visible:outline-offset-2",
+		"focus-visible:outline-ring",
 		"disabled:cursor-not-allowed",
-		"disabled:opacity-50",
-		"data-[checked]:bg-blue-600",
-		"data-[checked]:border-blue-600",
+		"data-[checked]:bg-primary",
+		"data-[unchecked]:border",
+		"data-[unchecked]:border-current",
+		"data-[unchecked]:bg-background-muted",
 		"transition-colors",
-		"duration-200",
 		"cursor-pointer"
 	],
 	defaultVariants: { size: "md" },
@@ -31,10 +28,8 @@ const checkboxRoot = tv({
 });
 const checkboxIndicator = tv({ base: [
 	"flex",
-	"items-center",
-	"justify-center",
-	"text-white",
-	"data-[unchecked]:invisible"
+	"text-primary-foreground",
+	"data-[unchecked]:hidden"
 ] });
 const CheckboxRoot = ({ className, size = "md", ...props }) => {
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {

package/dist/combobox/index.d.mts

@@ -0,0 +1,142 @@
+import { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+import { JSX } from "react/jsx-runtime";
+import { Combobox as Combobox$1, ComboboxArrowProps, ComboboxBackdropProps, ComboboxGroupProps, ComboboxLabelProps, ComboboxPortalProps, ComboboxRowProps, ComboboxStatusProps } from "@base-ui/react/combobox";
+
+//#region src/combobox/combobox.d.ts
+type ComboboxSize = "sm" | "md" | "lg";
+interface ComboboxInputGroupProps extends ComponentProps<typeof Combobox$1.InputGroup> {
+  className?: string;
+}
+interface ComboboxInputProps extends Omit<ComponentProps<typeof Combobox$1.Input>, "size"> {
+  className?: string;
+  size?: ComboboxSize;
+}
+interface ComboboxTriggerProps extends ComponentProps<typeof Combobox$1.Trigger> {
+  children?: ReactNode;
+  className?: string;
+}
+interface ComboboxIconProps extends ComponentProps<typeof Combobox$1.Icon> {
+  className?: string;
+}
+interface ComboboxClearProps extends ComponentProps<typeof Combobox$1.Clear> {
+  children?: ReactNode;
+  className?: string;
+}
+interface ComboboxChipsProps extends ComponentProps<typeof Combobox$1.Chips> {
+  className?: string;
+}
+interface ComboboxChipProps extends ComponentProps<typeof Combobox$1.Chip> {
+  className?: string;
+}
+interface ComboboxChipRemoveProps extends ComponentProps<typeof Combobox$1.ChipRemove> {
+  children?: ReactNode;
+  className?: string;
+}
+interface ComboboxPositionerProps extends ComponentProps<typeof Combobox$1.Positioner> {
+  className?: string;
+}
+interface ComboboxPopupProps extends ComponentProps<typeof Combobox$1.Popup> {
+  className?: string;
+}
+interface ComboboxListProps extends ComponentProps<typeof Combobox$1.List> {
+  className?: string;
+}
+interface ComboboxItemProps extends ComponentProps<typeof Combobox$1.Item> {
+  className?: string;
+}
+interface ComboboxItemIndicatorProps extends ComponentProps<typeof Combobox$1.ItemIndicator> {
+  className?: string;
+}
+interface ComboboxEmptyProps extends ComponentProps<typeof Combobox$1.Empty> {
+  className?: string;
+}
+interface ComboboxGroupLabelProps extends ComponentProps<typeof Combobox$1.GroupLabel> {
+  className?: string;
+}
+interface ComboboxSeparatorProps extends ComponentProps<typeof Combobox$1.Separator> {
+  className?: string;
+}
+declare const Combobox: {
+  Arrow: ForwardRefExoticComponent<Omit<ComboboxArrowProps, "ref"> & RefAttributes<HTMLDivElement>>;
+  Backdrop: ForwardRefExoticComponent<Omit<ComboboxBackdropProps, "ref"> & RefAttributes<HTMLDivElement>>;
+  Chip: ({
+    className,
+    ...props
+  }: ComboboxChipProps) => JSX.Element;
+  ChipRemove: ({
+    className,
+    children,
+    ...props
+  }: ComboboxChipRemoveProps) => JSX.Element;
+  Chips: ({
+    className,
+    ...props
+  }: ComboboxChipsProps) => JSX.Element;
+  Clear: ({
+    className,
+    children,
+    ...props
+  }: ComboboxClearProps) => JSX.Element;
+  Collection: typeof Combobox$1.Collection;
+  Empty: ({
+    className,
+    ...props
+  }: ComboboxEmptyProps) => JSX.Element;
+  Group: ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & RefAttributes<HTMLDivElement>>;
+  GroupLabel: ({
+    className,
+    ...props
+  }: ComboboxGroupLabelProps) => JSX.Element;
+  Icon: ({
+    className,
+    children,
+    ...props
+  }: ComboboxIconProps) => JSX.Element;
+  Input: ({
+    className,
+    size,
+    ...props
+  }: ComboboxInputProps) => JSX.Element;
+  InputGroup: ({
+    className,
+    ...props
+  }: ComboboxInputGroupProps) => JSX.Element;
+  Item: ({
+    className,
+    ...props
+  }: ComboboxItemProps) => JSX.Element;
+  ItemIndicator: ({
+    className,
+    children,
+    ...props
+  }: ComboboxItemIndicatorProps) => JSX.Element;
+  Label: ForwardRefExoticComponent<Omit<ComboboxLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
+  List: ({
+    className,
+    ...props
+  }: ComboboxListProps) => JSX.Element;
+  Popup: ({
+    className,
+    ...props
+  }: ComboboxPopupProps) => JSX.Element;
+  Portal: ForwardRefExoticComponent<Omit<ComboboxPortalProps, "ref"> & RefAttributes<HTMLDivElement>>;
+  Positioner: ({
+    className,
+    ...props
+  }: ComboboxPositionerProps) => JSX.Element;
+  Root: typeof Combobox$1.Root;
+  Row: ForwardRefExoticComponent<Omit<ComboboxRowProps, "ref"> & RefAttributes<HTMLDivElement>>;
+  Separator: ({
+    className,
+    ...props
+  }: ComboboxSeparatorProps) => JSX.Element;
+  Status: ForwardRefExoticComponent<Omit<ComboboxStatusProps, "ref"> & RefAttributes<HTMLDivElement>>;
+  Trigger: ({
+    className,
+    children,
+    ...props
+  }: ComboboxTriggerProps) => JSX.Element;
+  Value: typeof Combobox$1.Value;
+};
+//#endregion
+export { Combobox, type ComboboxSize };

package/dist/combobox/index.mjs

@@ -0,0 +1,238 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
+//#region src/combobox/combobox.tsx
+const comboboxInputGroup = tv({ base: ["relative", "w-full"] });
+const comboboxInput = tv({
+	base: [
+		"w-full",
+		"border",
+		"border-current",
+		"rounded-md",
+		"bg-background-muted",
+		"text-foreground",
+		"placeholder:text-muted-foreground",
+		"focus-visible:outline-2",
+		"focus-visible:outline-offset-2",
+		"focus-visible:outline-ring",
+		"transition-colors"
+	],
+	defaultVariants: { size: "md" },
+	variants: { size: {
+		lg: [
+			"px-4",
+			"py-3",
+			"text-lg"
+		],
+		md: ["px-3", "py-2"],
+		sm: [
+			"px-2",
+			"py-1",
+			"text-sm"
+		]
+	} }
+});
+const comboboxTrigger = tv({ base: [
+	"absolute",
+	"right-0",
+	"top-0",
+	"bottom-0",
+	"flex",
+	"items-center",
+	"px-3",
+	"text-muted-foreground",
+	"hover:text-foreground",
+	"cursor-pointer"
+] });
+const comboboxIcon = tv({ base: ["flex", "items-center"] });
+const comboboxClear = tv({ base: [
+	"absolute",
+	"right-10",
+	"top-0",
+	"bottom-0",
+	"flex",
+	"items-center",
+	"px-2",
+	"text-muted-foreground",
+	"hover:text-foreground",
+	"cursor-pointer"
+] });
+const comboboxChips = tv({ base: [
+	"flex",
+	"flex-wrap",
+	"gap-1",
+	"pr-10",
+	"px-3",
+	"py-2",
+	"border",
+	"border-current",
+	"rounded-md",
+	"bg-background-muted",
+	"min-h-[42px]"
+] });
+const comboboxChip = tv({ base: [
+	"inline-flex",
+	"items-center",
+	"gap-1",
+	"px-2",
+	"py-1",
+	"rounded",
+	"bg-muted",
+	"text-foreground",
+	"text-sm"
+] });
+const comboboxChipRemove = tv({ base: [
+	"flex",
+	"items-center",
+	"text-muted-foreground",
+	"hover:text-foreground",
+	"cursor-pointer"
+] });
+const comboboxPositioner = tv({ base: ["absolute", "z-50"] });
+const comboboxPopup = tv({ base: [
+	"min-w-[var(--anchor-width)]",
+	"mt-1",
+	"rounded-md",
+	"border",
+	"border-current",
+	"bg-background",
+	"shadow-lg",
+	"overflow-hidden"
+] });
+const comboboxList = tv({ base: [
+	"max-h-60",
+	"overflow-auto",
+	"py-1",
+	"bg-background"
+] });
+const comboboxItem = tv({ base: [
+	"flex",
+	"items-center",
+	"gap-2",
+	"px-3",
+	"py-2",
+	"cursor-pointer",
+	"text-foreground",
+	"data-[highlighted]:bg-muted",
+	"data-[selected]:bg-primary",
+	"data-[selected]:text-primary-foreground"
+] });
+const comboboxItemIndicator = tv({ base: ["flex", "data-[unselected]:hidden"] });
+const comboboxEmpty = tv({ base: [
+	"px-3",
+	"py-2",
+	"text-muted-foreground"
+] });
+const comboboxGroupLabel = tv({ base: [
+	"px-3",
+	"py-2",
+	"text-muted-foreground",
+	"font-semibold"
+] });
+const comboboxSeparator = tv({ base: [
+	"my-1",
+	"h-px",
+	"bg-border"
+] });
+const ComboboxInputGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.InputGroup, {
+	className: comboboxInputGroup({ className }),
+	...props
+});
+const ComboboxInput = ({ className, size = "md", ...props }) => /* @__PURE__ */ jsx(Combobox$1.Input, {
+	className: comboboxInput({
+		className,
+		size
+	}),
+	...props
+});
+const ComboboxTrigger = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+	className: comboboxTrigger({ className }),
+	...props,
+	children
+});
+const ComboboxIcon = ({ className, children = "▼", ...props }) => /* @__PURE__ */ jsx(Combobox$1.Icon, {
+	className: comboboxIcon({ className }),
+	...props,
+	children
+});
+const ComboboxClear = ({ className, children = "✕", ...props }) => /* @__PURE__ */ jsx(Combobox$1.Clear, {
+	className: comboboxClear({ className }),
+	...props,
+	children
+});
+const ComboboxChips = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Chips, {
+	className: comboboxChips({ className }),
+	...props
+});
+const ComboboxChip = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Chip, {
+	className: comboboxChip({ className }),
+	...props
+});
+const ComboboxChipRemove = ({ className, children = "✕", ...props }) => /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+	className: comboboxChipRemove({ className }),
+	...props,
+	children
+});
+const ComboboxPositioner = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+	className: comboboxPositioner({ className }),
+	...props
+});
+const ComboboxPopup = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Popup, {
+	className: comboboxPopup({ className }),
+	...props
+});
+const ComboboxList = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.List, {
+	className: comboboxList({ className }),
+	...props
+});
+const ComboboxItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Item, {
+	className: comboboxItem({ className }),
+	...props
+});
+const ComboboxItemIndicator = ({ className, children = "✓", ...props }) => /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+	className: comboboxItemIndicator({ className }),
+	...props,
+	children
+});
+const ComboboxEmpty = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Empty, {
+	className: comboboxEmpty({ className }),
+	...props
+});
+const ComboboxGroupLabel = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+	className: comboboxGroupLabel({ className }),
+	...props
+});
+const ComboboxSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Separator, {
+	className: comboboxSeparator({ className }),
+	...props
+});
+const Combobox = {
+	Arrow: Combobox$1.Arrow,
+	Backdrop: Combobox$1.Backdrop,
+	Chip: ComboboxChip,
+	ChipRemove: ComboboxChipRemove,
+	Chips: ComboboxChips,
+	Clear: ComboboxClear,
+	Collection: Combobox$1.Collection,
+	Empty: ComboboxEmpty,
+	Group: Combobox$1.Group,
+	GroupLabel: ComboboxGroupLabel,
+	Icon: ComboboxIcon,
+	Input: ComboboxInput,
+	InputGroup: ComboboxInputGroup,
+	Item: ComboboxItem,
+	ItemIndicator: ComboboxItemIndicator,
+	Label: Combobox$1.Label,
+	List: ComboboxList,
+	Popup: ComboboxPopup,
+	Portal: Combobox$1.Portal,
+	Positioner: ComboboxPositioner,
+	Root: Combobox$1.Root,
+	Row: Combobox$1.Row,
+	Separator: ComboboxSeparator,
+	Status: Combobox$1.Status,
+	Trigger: ComboboxTrigger,
+	Value: Combobox$1.Value
+};
+//#endregion
+export { Combobox };

package/dist/field/index.d.mts

@@ -3,8 +3,8 @@ 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"];
+  readonly default: readonly ["space-y-1"];
+  readonly required: readonly ["space-y-1", "after:content-[\"*\"]", "after:ml-1", "after:text-destructive"];
 };
 type FieldRootVariant = keyof typeof fieldRootVariants;
 type FieldLabelVariant = "default" | "error";

package/dist/field/index.mjs

@@ -3,54 +3,54 @@ 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"],
+	base: [],
 	defaultVariants: { variant: "default" },
 	variants: { variant: {
-		default: [],
+		default: ["space-y-1"],
 		required: [
+			"space-y-1",
 			"after:content-[\"*\"]",
 			"after:ml-1",
-			"after:text-red-500"
+			"after:text-destructive"
 		]
 	} }
 });
 const fieldLabel = tv({
-	base: [
-		"block",
-		"text-sm",
-		"font-medium",
-		"text-gray-700",
-		"mb-1"
-	],
+	base: [],
 	defaultVariants: { variant: "default" },
 	variants: { variant: {
-		default: [],
-		error: ["text-red-600"]
+		default: [
+			"block",
+			"text-foreground",
+			"mb-1"
+		],
+		error: [
+			"block",
+			"text-destructive",
+			"mb-1"
+		]
 	} }
 });
 const fieldDescription = tv({
-	base: [
-		"text-sm",
-		"text-gray-500",
-		"mt-1"
-	],
+	base: [],
 	defaultVariants: { variant: "default" },
 	variants: { variant: {
-		default: [],
-		error: ["text-red-600"]
+		default: ["text-muted-foreground", "mt-1"],
+		error: ["text-destructive", "mt-1"]
 	} }
 });
-const fieldError = tv({ base: [
-	"text-sm",
-	"text-red-600",
-	"mt-1"
-] });
+const fieldError = tv({
+	base: [],
+	defaultVariants: { variant: "default" },
+	variants: { variant: { default: ["text-destructive", "mt-1"] } }
+});
 const fieldItem = tv({
-	base: ["flex", "flex-col"],
+	base: [],
 	defaultVariants: { layout: "default" },
 	variants: { layout: {
-		default: [],
+		default: ["flex", "flex-col"],
 		horizontal: [
+			"flex",
 			"flex-row",
 			"items-center",
 			"gap-2"

package/dist/fieldset/index.d.mts

@@ -3,8 +3,8 @@ 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"];
+  readonly compact: readonly ["border", "border-current", "rounded-lg", "p-4", "space-y-2"];
+  readonly default: readonly ["border", "border-current", "rounded-lg", "p-4", "space-y-4"];
 };
 type FieldsetRootVariant = keyof typeof fieldsetRootVariants;
 type FieldsetLegendSize = "default" | "small";