@yakad/ui 2.0.1 → 2.0.3

package/dist/Avatar/Avatar.d.ts

@@ -1,6 +1,16 @@
 import React from "react";
-export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
-    src?: string;
-    ref?: React.Ref<HTMLDivElement>;
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { type VariantProps } from "class-variance-authority";
+declare const avatarVariants: (props?: ({
+    size?: "default" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
 }
-export declare function Avatar({ src, className, ...restProps }: AvatarProps): React.JSX.Element;
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
+}
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+export interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
+}
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback, };

package/dist/Avatar/Avatar.js

@@ -10,11 +10,52 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import styles from "./Avatar.module.css";
-import { Material } from "@yakad/symbols";
-export function Avatar(_a) {
-    var { src, className } = _a, restProps = __rest(_a, ["src", "className"]);
-    const joinedClassNames = classNames(styles.profileContainer, className);
-    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, style: src ? { backgroundImage: `url(${src})` } : {}, children: _jsx("div", { className: styles.editOverlay, children: _jsx(Material, { icon: "edit" }) }) })));
-}
+import React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cva } from "class-variance-authority";
+const avatarVariants = cva("relative flex shrink-0 overflow-hidden rounded-full", {
+    variants: {
+        size: {
+            default: "size-10",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+const Avatar = React.forwardRef((_a, ref) => {
+    var { className, size } = _a, props = __rest(_a, ["className", "size"]);
+    const avatarClassName = [
+        avatarVariants({
+            size,
+        }),
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx(AvatarPrimitive.Root, Object.assign({ ref: ref, "data-slot": "avatar", className: avatarClassName }, props)));
+});
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const avatarImageClassName = [
+        "aspect-square size-full",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx(AvatarPrimitive.Image, Object.assign({ ref: ref, "data-slot": "avatar-image", className: avatarImageClassName }, props)));
+});
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const avatarFallbackClassName = [
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx(AvatarPrimitive.Fallback, Object.assign({ ref: ref, "data-slot": "avatar-fallback", className: avatarFallbackClassName }, props)));
+});
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar, AvatarImage, AvatarFallback, };

package/dist/Button/Button.d.ts

@@ -1,14 +1,10 @@
-/// <reference types="react" />
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    fullWidthOnParentDemand?: boolean;
-    size?: "small" | "medium" | "large";
-    variant?: "text" | "outlined" | "filled" | "filledtonal" | "tonal" | "elevated" | "link" | "fab";
-    borderStyle?: "none" | "semi" | "squircle" | "rounded";
-    icon?: React.ReactNode;
-    iconPosition?: "start" | "end";
-    loadingPosition?: "auto" | "center";
-    loadingVariant?: "scaleOut" | "dots" | "spinner";
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLButtonElement>;
+import React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "text" | "filled" | "elevated" | "outlined" | "tonal" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
 }
-export declare function Button({ fullWidthOnParentDemand, size, variant, borderStyle, icon, iconPosition, loadingPosition, loadingVariant, className, children, ...restProps }: ButtonProps): import("react").JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/Button/Button.js

@@ -9,17 +9,31 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import { Spinner } from "@yakad/symbols";
-import boxingStyles from "../boxing.module.css";
-import styles from "./Button.module.css";
-export function Button(_a) {
-    var { fullWidthOnParentDemand = false, size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
-    const childrenFirst = iconPosition === "end";
-    const isloadingPositionCenter = !icon || loadingPosition === "center";
-    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isloadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
-    return (_jsxs("button", Object.assign({ className: joinedClassNames }, restProps, { children: [childrenFirst && children, loadingVariant && (_jsx("div", { className: classNames(styles.displayOnDisabled, {
-                    [styles.positionCenter]: isloadingPositionCenter,
-                }), children: _jsx(Spinner, { size: size, variant: loadingVariant }) })), icon, !childrenFirst && children] })));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", {
+    variants: {
+        variant: {
+            filled: "bg-primary text-primary-foreground hover:bg-primary/90",
+            tonal: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            outlined: "border border-outline bg-transparent text-foreground hover:bg-muted",
+            elevated: "bg-surface text-foreground shadow-sm hover:bg-muted",
+            text: "bg-transparent text-primary hover:bg-primary/10",
+        },
+    },
+    defaultVariants: {
+        variant: "filled",
+    },
+});
+const Button = React.forwardRef((_a, ref) => {
+    var { className, variant, asChild = false } = _a, props = __rest(_a, ["className", "variant", "asChild"]);
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, Object.assign({ ref: ref, "data-slot": "button", className: buttonVariants({
+            variant,
+            className,
+        }) }, props)));
+});
+Button.displayName = "Button";
+export { Button, buttonVariants };

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Separator } from "../Separator/Separator";
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): React.JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, };

package/dist/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,60 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Separator } from "../Separator/Separator";
+const buttonGroupVariants = cva("flex w-fit items-stretch [&>*]:focus-visible:z-10", {
+    variants: {
+        orientation: {
+            horizontal: "flex-row",
+            vertical: "flex-col",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+function ButtonGroup(_a) {
+    var { className, orientation } = _a, props = __rest(_a, ["className", "orientation"]);
+    const buttonGroupClassName = [
+        buttonGroupVariants({ orientation }),
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("div", Object.assign({ role: "group", "data-slot": "button-group", "data-orientation": orientation, className: buttonGroupClassName }, props)));
+}
+function ButtonGroupText(_a) {
+    var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
+    const Comp = asChild ? Slot : "div";
+    const buttonGroupTextClassName = [
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs",
+        "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx(Comp, Object.assign({ "data-slot": "button-group-text", className: buttonGroupTextClassName }, props)));
+}
+function ButtonGroupSeparator(_a) {
+    var { className, orientation = "vertical" } = _a, props = __rest(_a, ["className", "orientation"]);
+    const buttonGroupSeparatorClassName = [
+        "bg-border relative !m-0 self-stretch",
+        "data-[orientation=vertical]:h-auto",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx(Separator, Object.assign({ "data-slot": "button-group-separator", orientation: orientation, className: buttonGroupSeparatorClassName }, props)));
+}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, };

package/dist/Card/Card.d.ts

@@ -1,9 +1,14 @@
-/// <reference types="react" />
-import { StackProps } from "..";
-export interface CardProps extends StackProps {
-    blur?: boolean;
-    level?: "transparent" | "low" | "mid" | "high";
-    hoverEffect?: boolean;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function Card({ blur, level, hoverEffect, className, children, ...restProps }: CardProps): import("react").JSX.Element;
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const cardVariants: (props?: ({
+    variant?: "filled" | "elevated" | "outlined" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type CardProps = React.ComponentProps<"div"> & VariantProps<typeof cardVariants>;
+declare function Card({ className, variant, ...props }: CardProps): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction, };

package/dist/Card/Card.js

@@ -10,11 +10,45 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import { Stack } from "..";
-import styles from "./Card.module.css";
-export function Card(_a) {
-    var { blur, level, hoverEffect, className, children } = _a, restProps = __rest(_a, ["blur", "level", "hoverEffect", "className", "children"]);
-    const joinedClassNames = classNames(styles.card, { [styles.blur]: blur }, { [styles.elevated]: level !== "transparent" }, { [styles.hoverEffect]: hoverEffect }, { [styles.yakadCardAutoLevel]: !level || level === "transparent" }, { [styles.yakadCardLowLevel]: level === "low" }, { [styles.yakadCardMidLevel]: level === "mid" }, { [styles.yakadCardHighLevel]: level === "high" }, className);
-    return (_jsx(Stack, Object.assign({}, restProps, { className: joinedClassNames, children: children })));
+import { cva } from "class-variance-authority";
+const cardVariants = cva("relative flex w-full flex-col overflow-hidden rounded-xl", {
+    variants: {
+        variant: {
+            elevated: "bg-white shadow-sm",
+            filled: "bg-gray-100",
+            outlined: "bg-white border border-gray-300",
+        },
+    },
+    defaultVariants: {
+        variant: "elevated",
+    },
+});
+function Card(_a) {
+    var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
+    return (_jsx("div", Object.assign({ "data-slot": "card", className: `${cardVariants({ variant })} ${className !== null && className !== void 0 ? className : ""}` }, props)));
 }
+function CardHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ "data-slot": "card-header", className: `grid grid-cols-[1fr_auto] items-start gap-4 p-6 ${className !== null && className !== void 0 ? className : ""}` }, props)));
+}
+function CardTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("h3", Object.assign({ "data-slot": "card-title", className: `text-xl font-medium leading-7 ${className !== null && className !== void 0 ? className : ""}` }, props)));
+}
+function CardDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("p", Object.assign({ "data-slot": "card-description", className: `mt-1 text-sm text-gray-600 ${className !== null && className !== void 0 ? className : ""}` }, props)));
+}
+function CardContent(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ "data-slot": "card-content", className: `px-6 pb-6 ${className !== null && className !== void 0 ? className : ""}` }, props)));
+}
+function CardFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ "data-slot": "card-footer", className: `flex items-center gap-2 px-6 pb-6 ${className !== null && className !== void 0 ? className : ""}` }, props)));
+}
+function CardAction(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ "data-slot": "card-action", className: `col-start-2 row-span-2 row-start-1 self-start ${className !== null && className !== void 0 ? className : ""}` }, props)));
+}
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction, };

package/dist/CheckBox/CheckBox.d.ts

@@ -1,8 +1,12 @@
-/// <reference types="react" />
-type ExcludedTypes = "type";
-export interface CheckBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedTypes> {
-    label?: string;
-    ref?: React.Ref<HTMLInputElement>;
-}
-export declare function CheckBox({ label, className, style, ...restProps }: CheckBoxProps): import("react").JSX.Element;
-export {};
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { type VariantProps } from "class-variance-authority";
+declare const checkboxVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & VariantProps<typeof checkboxVariants>;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox, checkboxVariants };
+export type { CheckboxProps };

package/dist/CheckBox/CheckBox.js

@@ -9,13 +9,50 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import { Material } from "@yakad/symbols";
-import boxingStyles from "../boxing.module.css";
-import styles from "./CheckBox.module.css";
-export function CheckBox(_a) {
-    var { label, className, style } = _a, restProps = __rest(_a, ["label", "className", "style"]);
-    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: label }, styles.label, { [styles.labeled]: label }, { [styles.disabled]: restProps.disabled }, className);
-    return (_jsxs("label", { className: joinedClassNames, style: style, children: [label, _jsx("input", Object.assign({}, restProps, { className: styles.input, type: "checkbox" })), _jsxs("div", { className: styles.symbolContainer, children: [_jsx(Material, { className: styles.symbolChecked, icon: "check_box" }), _jsx(Material, { className: styles.symbolUnChecked, icon: "check_box_outline_blank" })] })] }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva } from "class-variance-authority";
+const checkboxVariants = cva([
+    "peer",
+    "relative",
+    "inline-flex",
+    "shrink-0",
+    "items-center",
+    "justify-center",
+    "rounded-[4px]",
+    "border",
+    "border-slate-500",
+    "bg-transparent",
+    "text-white",
+    "transition-colors",
+    "duration-150",
+    "ease-out",
+    "outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-slate-500",
+    "focus-visible:ring-offset-2",
+    "disabled:pointer-events-none",
+    "disabled:opacity-50",
+    "data-[state=checked]:border-slate-900",
+    "data-[state=checked]:bg-slate-900",
+    "data-[state=indeterminate]:border-slate-900",
+    "data-[state=indeterminate]:bg-slate-900",
+], {
+    variants: {
+        size: {
+            small: "h-4 w-4",
+            medium: "h-[18px] w-[18px]",
+            large: "h-5 w-5",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const Checkbox = React.forwardRef((_a, ref) => {
+    var { className, size } = _a, props = __rest(_a, ["className", "size"]);
+    return (_jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: checkboxVariants({ size, className }) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("svg", { viewBox: "0 0 24 24", className: "h-full w-full", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5 12.5 10 17l9-10" }) }) }) })));
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export { Checkbox, checkboxVariants };

package/dist/Field/Field.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const Field: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const FieldGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const FieldLabel: React.ForwardRefExoticComponent<Omit<import("../Label/Label").LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FieldDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FieldError: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    errors?: ({
+        message?: string | undefined;
+    } | undefined)[] | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const FieldContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const FieldLegend: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "label" | "legend" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLLegendElement>>;
+declare const FieldSet: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+declare const FieldTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const FieldSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/dist/Field/Field.js

@@ -0,0 +1,154 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { cva } from "class-variance-authority";
+import { Label } from "../Label/Label";
+import { Separator } from "../Separator/Separator";
+const fieldVariants = cva("flex w-full gap-2", {
+    variants: {
+        orientation: {
+            vertical: "flex-col",
+            horizontal: "flex-row items-start",
+            responsive: "flex-col @md:flex-row @md:items-start",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+const fieldLegendVariants = cva("font-medium text-foreground", {
+    variants: {
+        variant: {
+            legend: "text-base",
+            label: "text-sm",
+        },
+    },
+    defaultVariants: {
+        variant: "legend",
+    },
+});
+const Field = React.forwardRef((_a, ref) => {
+    var { className, orientation } = _a, props = __rest(_a, ["className", "orientation"]);
+    const fieldClassName = [
+        fieldVariants({ orientation }),
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("div", Object.assign({ ref: ref, "data-slot": "field", "data-orientation": orientation }, props, { className: fieldClassName })));
+});
+Field.displayName = "Field";
+const FieldGroup = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const fieldGroupClassName = [
+        "flex w-full flex-col gap-6",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("div", Object.assign({ ref: ref, "data-slot": "field-group" }, props, { className: fieldGroupClassName })));
+});
+FieldGroup.displayName = "FieldGroup";
+const FieldLabel = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const fieldLabelClassName = [
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx(Label, Object.assign({ ref: ref, "data-slot": "field-label" }, props, { className: fieldLabelClassName })));
+});
+FieldLabel.displayName = "FieldLabel";
+const FieldDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const fieldDescriptionClassName = [
+        "text-sm text-muted-foreground",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("p", Object.assign({ ref: ref, "data-slot": "field-description" }, props, { className: fieldDescriptionClassName })));
+});
+FieldDescription.displayName = "FieldDescription";
+const FieldError = React.forwardRef((_a, ref) => {
+    var { className, children, errors } = _a, props = __rest(_a, ["className", "children", "errors"]);
+    const messages = errors === null || errors === void 0 ? void 0 : errors.map((error) => error === null || error === void 0 ? void 0 : error.message).filter(Boolean);
+    if (!children && !(messages === null || messages === void 0 ? void 0 : messages.length)) {
+        return null;
+    }
+    const fieldErrorClassName = [
+        "text-sm font-medium text-destructive",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", Object.assign({ ref: ref, role: "alert", "data-slot": "field-error" }, props, { className: fieldErrorClassName, children: [children, (messages === null || messages === void 0 ? void 0 : messages.length) ? (_jsx("ul", { className: "mt-1 list-disc space-y-1 pl-5", children: messages.map((message, index) => (_jsx("li", { children: message }, index))) })) : null] })));
+});
+FieldError.displayName = "FieldError";
+const FieldContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const fieldContentClassName = [
+        "flex flex-1 flex-col gap-1.5",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("div", Object.assign({ ref: ref, "data-slot": "field-content" }, props, { className: fieldContentClassName })));
+});
+FieldContent.displayName = "FieldContent";
+const FieldLegend = React.forwardRef((_a, ref) => {
+    var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
+    const fieldLegendClassName = [
+        fieldLegendVariants({ variant }),
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("legend", Object.assign({ ref: ref, "data-slot": "field-legend" }, props, { className: fieldLegendClassName })));
+});
+FieldLegend.displayName = "FieldLegend";
+const FieldSet = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const fieldSetClassName = [
+        "flex w-full min-w-0 flex-col gap-6",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("fieldset", Object.assign({ ref: ref, "data-slot": "field-set" }, props, { className: fieldSetClassName })));
+});
+FieldSet.displayName = "FieldSet";
+const FieldTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const fieldTitleClassName = [
+        "text-sm font-medium text-foreground",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("div", Object.assign({ ref: ref, "data-slot": "field-title" }, props, { className: fieldTitleClassName })));
+});
+FieldTitle.displayName = "FieldTitle";
+const FieldSeparator = React.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const fieldSeparatorClassName = [
+        "relative -my-2 flex h-5 items-center",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", Object.assign({ ref: ref, "data-slot": "field-separator" }, props, { className: fieldSeparatorClassName, children: [_jsx(Separator, { orientation: "horizontal", className: "absolute inset-0 top-1/2" }), children ? (_jsx("span", { className: "relative mx-auto bg-background px-2 text-xs text-muted-foreground", children: children })) : null] })));
+});
+FieldSeparator.displayName = "FieldSeparator";
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/dist/Label/Label.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
+declare const labelVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof labelVariants> {
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export { Label, labelVariants };

package/dist/{Spacer/Spacer.js → Label/Label.js}

@@ -10,10 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import styles from "./Spacer.module.css";
-export function Spacer(_a) {
+import React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef((_a, ref) => {
     var { className } = _a, restProps = __rest(_a, ["className"]);
-    const joinedClassNames = classNames(styles.spacer, className);
-    return _jsx("div", Object.assign({}, restProps, { className: joinedClassNames }));
-}
+    return (_jsx(LabelPrimitive.Root, Object.assign({ ref: ref, className: labelVariants({ className }) }, restProps)));
+});
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label, labelVariants };