@mbao01/common 0.1.4 → 0.2.0

package/src/components/Card/Card.tsx

@@ -12,9 +12,9 @@ import type {
 import { cn } from "../../utilities";
 import { getCardClasses } from "./constants";
 
-const Card = ({ compact, bordered, horizontal, overlay, className, ...props }: CardProps) => (
+const Card = ({ size, border, horizontal, overlay, className, ...props }: CardProps) => (
   <div
-    className={cn(getCardClasses({ bordered, compact, horizontal, overlay }), className)}
+    className={cn(getCardClasses({ border, size, horizontal, overlay }), className)}
     {...props}
   />
 );

package/src/components/Card/constants.ts

@@ -2,12 +2,16 @@ import { cva } from "../../libs";
 
 export const getCardClasses = cva("card", {
   variants: {
-    bordered: {
-      true: "card-bordered",
+    border: {
+      solid: "card-border",
+      dash: "card-dash",
     },
-    compact: {
-      true: "card-compact",
-      false: "card-normal",
+    size: {
+      xs: "card-xs",
+      sm: "card-sm",
+      md: "card-md",
+      lg: "card-lg",
+      xl: "card-xl",
     },
     horizontal: {
       true: "card-side",
@@ -16,7 +20,4 @@ export const getCardClasses = cva("card", {
       true: "image-full",
     },
   },
-  defaultVariants: {
-    compact: false,
-  },
 });

package/src/components/Chart/constants.ts

@@ -7,7 +7,7 @@ export const THEMES = {
 } satisfies Record<Theme, string>;
 
 export const getChartClasses = cva(
-  "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-base-content [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-base-content/20 [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-radial-bar-background-sector]:fill-base-200 [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-base-200 [&_.recharts-reference-line_[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none"
+  "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-base-content [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-base-content/20 [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-radial-bar-background-sector]:fill-base-200 [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-base-200 [&_.recharts-reference-line_[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden"
 );
 
 export const getChartLegendContainerClasses = cva("flex items-center justify-center gap-4", {
@@ -55,7 +55,7 @@ export const getChartTooltipItemLabelClasses = cva(
 export const getChartTooltipItemValueClasses = cva("font-mono font-medium tabular-nums");
 
 export const getChartTooltipItemIndicatorClasses = cva(
-  "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+  "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
   {
     variants: {
       indicator: {

package/src/components/Chart/stories/examples/PieChart.tsx

@@ -133,7 +133,7 @@ export const WithLegendPieChartExample = (props: Partial<PieChartProps>) => {
         <Pie dataKey="visitors" {...props.pie} />
         <ChartLegend
           content={<ChartLegendContent nameKey="browser" />}
-          className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+          className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"
         />
       </PieChart>
     </Chart>

package/src/components/Chart/stories/examples/RadarChart.tsx

@@ -186,7 +186,7 @@ export const GridFilledRadarChartExample = (props: Partial<RadarChartProps>) =>
     <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
       <RadarChart {...props.radarChart}>
         <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-        <PolarGrid className="fill-[--color-desktop] opacity-20" />
+        <PolarGrid className="fill-(--color-desktop) opacity-20" />
         <PolarAngleAxis dataKey="month" />
         <Radar dataKey="desktop" {...props.radar} />
       </RadarChart>
@@ -237,7 +237,7 @@ export const GridCircleFilledRadarChartExample = (props: Partial<RadarChartProps
     <Chart config={chartConfig} className="mx-auto aspect-square h-[250px]">
       <RadarChart {...props.radarChart}>
         <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-        <PolarGrid className="fill-[--color-desktop] opacity-20" gridType="circle" />
+        <PolarGrid className="fill-(--color-desktop) opacity-20" gridType="circle" />
         <PolarAngleAxis dataKey="month" />
         <Radar dataKey="desktop" {...props.radar} />
       </RadarChart>

package/src/components/Command/constants.ts

@@ -13,7 +13,7 @@ export const getCommandDialogClasses = cva(
 export const getCommandInputWrapperClasses = cva("flex items-center border-b px-3");
 
 export const getCommandInputClasses = cva(
-  "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+  "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
 );
 
 export const getCommandListClasses = cva("max-h-[300px] overflow-y-auto overflow-x-hidden");
@@ -27,7 +27,7 @@ export const getCommandGroupClasses = cva(
 export const getCommandSeparatorClasses = cva("-mx-1 h-px bg-border");
 
 export const getCommandItemClasses = cva(
-  "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors aria-selected:bg-base-300 aria-selected:text-base-content aria-disabled:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default"
+  "relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors aria-selected:bg-base-300 aria-selected:text-base-content aria-disabled:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default"
 );
 
 export const getCommandShortcutClasses = cva(

package/src/components/DatetimePicker/constants.ts

@@ -72,7 +72,7 @@ export const getDatetimeGridClasses = cva(
 export const getDatetimeSeparatorClasses = cva("text-xs text-gray-400");
 
 export const getDatetimeInputClasses = cva(
-  "min-w-8 p-1 inline tabular-nums h-fit border-none outline-none select-none content-box caret-transparent rounded-sm min-w-8 text-center focus:outline-none focus:bg-base-content/20 focus-visible:ring-0 focus-visible:outline-none",
+  "min-w-8 p-1 inline tabular-nums h-fit border-none outline-hidden shadow-none select-none content-box caret-transparent min-w-8 text-center focus:outline-hidden focus:bg-base-content/20 focus-visible:ring-0 focus-visible:outline-hidden",
   {
     variants: {
       size: {
@@ -83,7 +83,7 @@ export const getDatetimeInputClasses = cva(
       },
       unit: {
         years: "min-w-12",
-        "am/pm": "bg-base-content/15",
+        "am/pm": "bg-base-content/5",
       } as Record<DateFormat | TimeFormat, string>,
     },
     compoundVariants: [

package/src/components/Description/Description.tsx

@@ -10,7 +10,7 @@ const DescriptionTerm = ({ className, ...props }: DescriptionTermProps) => {
 };
 
 const DescriptionDetail = ({ className, ...props }: DescriptionDetailProps) => {
-  return <dd className={cn("text-base [&:not(:last-child)]:mb-1", className)} {...props} />;
+  return <dd className={cn("text-base not-last:mb-1", className)} {...props} />;
 };
 
 Description.Term = DescriptionTerm;

package/src/components/Dialog/constants.ts

@@ -40,5 +40,5 @@ export const getDialogTitleClasses = cva("text-lg font-semibold leading-none tra
 export const getDialogDescriptionClasses = cva("text-sm text-muted-foreground");
 
 export const getDialogCloseClasses = cva(
-  "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+  "absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
 );

package/src/components/DragAndDrop/Draggable/Draggable.example.tsx

@@ -136,7 +136,7 @@ export const DraggableOverlayExample = ({
           id="my-draggable"
           axis={axis}
           handle={handle}
-          className="w-fit border border-base-content rounded-md p-2 flex items-center gap-2 data-[draggable-active]:opacity-0"
+          className="w-fit border border-base-content rounded-md p-2 flex items-center gap-2 data-draggable-active:opacity-0"
         >
           {label}
         </Draggable>

package/src/components/DragAndDrop/Draggable/constants.ts

@@ -25,7 +25,7 @@ export const DROP_ANIMATION_CONFIG: DropAnimation = {
 };
 
 export const getDraggableClasses = cva(
-  "translate-x-[--translate-x] translate-y-[--translate-y] translate-z-0",
+  "translate-x-(--translate-x) translate-y-(--translate-y) translate-z-0",
   {
     variants: {
       isDragging: {

package/src/components/DragAndDrop/Droppable/Droppable.example.tsx

@@ -40,7 +40,7 @@ export const DroppableExample = ({
   const item = (
     <Draggable
       id="my-draggable"
-      className="w-fit border border-base-content rounded-md p-2 flex items-center gap-2 data-[draggable-active]:opacity-0"
+      className="w-fit border border-base-content rounded-md p-2 flex items-center gap-2 data-draggable-active:opacity-0"
     >
       Go ahead, drag me.
     </Draggable>
@@ -65,7 +65,7 @@ export const DroppableExample = ({
               key={id}
               id={id}
               isDragging={isDragging}
-              className="relative p-6 border border-base-300 rounded-md w-72 h-72 bg-base-200 box-border data-[draggable-active]:opacity-80 data-[draggable-over]:opacity-100 transition-opacity"
+              className="relative p-6 border border-base-300 rounded-md w-72 h-72 bg-base-200 box-border data-draggable-active:opacity-80 data-draggable-over:opacity-100 transition-opacity"
             >
               <div className="absolute bottom-6">Container {id}</div>
               {parentContainerId === id ? item : null}

package/src/components/DragAndDrop/Sortable/Sortable.example.tsx

@@ -44,9 +44,9 @@ export const SortableExample = ({ hasDraggableOverlay, ...props }: SortableExamp
               key={item}
               id={item}
               className={cn(
-                "flex items-center justify-center w-32 h-32 bg-base-100 border border-primary-content/30 rounded-md text-sm p-2 data-[draggable]:shadow data-[draggable-active]:z-20",
+                "flex items-center justify-center w-32 h-32 bg-base-100 border border-primary-content/30 rounded-md text-sm p-2 data-draggable:shadow-sm data-draggable-active:z-20",
                 {
-                  "data-[draggable-active]:opacity-30": hasDraggableOverlay,
+                  "data-draggable-active:opacity-30": hasDraggableOverlay,
                 }
               )}
             >

package/src/components/FileUploader/FileUploader.tsx

@@ -253,7 +253,7 @@ const FileUploaderItem = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "h-6 p-1 justify-between cursor-pointer relative rounded",
+        "h-6 p-1 justify-between cursor-pointer relative rounded-sm",
         { "bg-base-300": isSelected },
         className
       )}

package/src/components/Form/Checkbox/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 
 export const getCheckboxClasses = cva(
-  "peer flex items-center justify-center h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
+  "peer flex items-center justify-center h-4 w-4 shrink-0 rounded-xs border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/components/Form/DatetimeInput/constants.ts

@@ -57,12 +57,12 @@ export const getDatetimeInputContainerClasses = cva(
 
 export const getDatetimeCalendarTriggerClasses = cva(
   `size-8 rounded-md p-1 flex items-center justify-center font-normal
-  outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base-content focus-visible:ring-inset
+  outline-hidden focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-base-content focus-visible:ring-inset
   `,
   {
     variants: {
       size: {
-        xs: "size-4 p-0 rounded-sm",
+        xs: "size-4 p-0 rounded-xs",
         sm: "size-6",
         md: "size-9",
         lg: "size-10",
@@ -89,7 +89,7 @@ export const getDatetimeCalendarIconClasses = cva("", {
 });
 
 export const getTimePickerClasses = cva(
-  "border border-neutral-content bg-base-100 shadow-sm cursor-pointer ring-0 py-2 h-8 px-3 w-full text-sm outline-0 inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base-content disabled:pointer-events-none disabled:opacity-50 hover:bg-base-200",
+  "border border-neutral-content bg-base-100 shadow-xs cursor-pointer ring-0 py-2 h-8 px-3 w-full text-sm outline-0 inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-base-content disabled:pointer-events-none disabled:opacity-50 hover:bg-base-200",
   {
     variants: {
       selected: {
@@ -111,7 +111,7 @@ export const getTimePickerScrollAreaClasses = cva(
 );
 
 export const getNaturalLanguageInputClasses = cva(
-  "flex-1 border-none rounded bg-transparent outline-none ring-0 focus:outline-none focus:ring-0 focus-within:outline-none focus-within:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+  "flex-1 border-none bg-transparent outline-hidden ring-0 focus:outline-hidden focus:ring-0 focus-within:outline-hidden focus-within:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       size: {
@@ -131,5 +131,5 @@ export const getNaturalLanguageInputClasses = cva(
 );
 
 export const getDatetimeCalendarClasses = cva(
-  "peer flex justify-end bg-transparent focus:outline-none focus:ring-0 focus-within:outline-none focus-within:ring-0 sm:text-sm disabled:cursor-not-allowed disabled:opacity-50"
+  "peer flex justify-end bg-transparent focus:outline-hidden focus:ring-0 focus-within:outline-hidden focus-within:ring-0 sm:text-sm disabled:cursor-not-allowed disabled:opacity-50"
 );

package/src/components/Form/MultiSelect/constants.ts

@@ -52,7 +52,7 @@ export const getMultiSelectTriggerClasses = cva(
 );
 
 export const getMultiSelectItemClasses = cva(
-  "cursor-pointer transition-colors flex justify-between aria-selected:bg-base-300 aria-selected:text-base-content rounded-sm py-1.5 px-2 text-sm outline-none",
+  "cursor-pointer transition-colors flex justify-between aria-selected:bg-base-300 aria-selected:text-base-content rounded-xs py-1.5 px-2 text-sm outline-hidden",
   {
     variants: {
       included: {
@@ -96,11 +96,11 @@ export const getMultiSelectListClasses = cva(
 );
 
 export const getMultiSelectTagClasses = cva(
-  "relative flex items-center gap-1 [&>span]:truncate [&>span]:max-w-24 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed focus-visible:outline-none",
+  "relative flex items-center gap-1 [&>span]:truncate [&>span]:max-w-24 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed focus-visible:outline-hidden",
   {
     variants: {
       size: {
-        xs: "px-0.5 [&>span]:max-w-20 rounded",
+        xs: "px-0.5 [&>span]:max-w-20 rounded-sm",
         sm: "px-1",
         md: "px-1.5 [&>span]:max-w-28",
         lg: "px-2 [&>span]:max-w-32",
@@ -109,7 +109,7 @@ export const getMultiSelectTagClasses = cva(
   }
 );
 
-export const getMultiSelectInputClasses = cva("bg-transparent outline-none flex-1", {
+export const getMultiSelectInputClasses = cva("bg-transparent outline-hidden flex-1", {
   variants: {
     size: {
       xs: "text-xs",

package/src/components/Form/OtpInput/OtpInput.tsx

@@ -16,7 +16,7 @@ export const OtpInput = ({ className, inputProps, ...props }: OtpInputProps) =>
         <Input
           {...inputProps}
           {...renderProps}
-          className={cn("!w-12 !appearance-none selection:bg-base text-base-content", className)}
+          className={cn("w-12! appearance-none! selection:bg-base text-base-content", className)}
         />
       )}
       containerStyle={`flex justify-center items-center flex-wrap text-2xl font-bold ${

package/src/components/Form/Phone/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 
-export const getPhoneButtonClasses = cva("join-item justify-between px-2");
+export const getPhoneButtonClasses = cva("join-item justify-between rounded-r-none! px-2");
 
 export const getPhoneInputClasses = cva(
-  "input join-item input-bordered w-full !rounded-l-none !pl-2 transition-all duration-100"
+  "input join-item input-bordered w-full rounded-l-none! pl-2! transition-all duration-100"
 );

package/src/components/Form/Select/Select.tsx

@@ -21,10 +21,10 @@ const Select = (props: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Roo
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
->(({ className, children, size, wide, variant, outline, ...props }, ref) => (
+>(({ className, children, size, variant, outline, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
-    className={cn(getSelectTriggerClasses({ size, wide, variant, outline }), className)}
+    className={cn(getSelectTriggerClasses({ size, variant, outline }), className)}
     {...props}
   >
     {children}

package/src/components/Form/Select/constants.ts

@@ -15,10 +15,8 @@ export const getSelectTriggerClasses = cva(
         error: "select-error",
       },
       outline: {
-        true: "select-bordered border border-input",
-      },
-      wide: {
-        true: "w-full",
+        true: "border border-input",
+        false: "select-ghost",
       },
       size: {
         xs: "select-xs",
@@ -32,6 +30,10 @@ export const getSelectTriggerClasses = cva(
         size: undefined,
         className: "min-h-fit h-10",
       },
+      {
+        outline: undefined,
+        className: "select-ghost",
+      },
       {
         variant: undefined,
         outline: true,
@@ -47,7 +49,7 @@ export const getSelectTriggerClasses = cva(
 );
 
 export const getSelectItemClasses = cva(
-  "relative flex w-full cursor-pointer select-none items-center focus:bg-base-300 focus:text-base-content rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "relative flex w-full cursor-pointer select-none items-center focus:bg-base-300 focus:text-base-content rounded-xs py-1.5 pl-2 pr-8 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/components/Form/Slider/constants.ts

@@ -57,7 +57,7 @@ export const getSliderClasses = cva("absolute h-full", {
 });
 
 export const getSliderThumbClasses = cva(
-  "block h-5 w-5 rounded-full border-2 ring-offset-neutral transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "block h-5 w-5 rounded-full border-2 ring-offset-neutral transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/components/Form/TagsInput/constants.ts

@@ -55,11 +55,11 @@ export const getTagsClasses = cva(
 );
 
 export const getTagClasses = cva(
-  "relative flex items-center gap-1 [&>span]:truncate [&>span]:max-w-24 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed focus-visible:outline-none",
+  "relative flex items-center gap-1 [&>span]:truncate [&>span]:max-w-24 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed focus-visible:outline-hidden",
   {
     variants: {
       size: {
-        xs: "px-0.5 [&>span]:max-w-20 rounded",
+        xs: "px-0.5 [&>span]:max-w-20 rounded-sm",
         sm: "px-1",
         md: "px-1.5 [&>span]:max-w-28",
         lg: "px-2 [&>span]:max-w-32",
@@ -69,7 +69,7 @@ export const getTagClasses = cva(
 );
 
 export const getTagsInputClasses = cva(
-  "outline-0 border-none h-5 min-w-fit flex-1 focus-visible:outline-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-0 placeholder:text-muted-foreground px-1",
+  "outline-0 border-none h-5 min-w-fit shadow-none flex-1 focus-visible:outline-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-0 placeholder:text-muted-foreground px-1",
   {
     variants: {
       size: {

package/src/components/Form/TextField/TextField.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { FormControl } from "../components/FormControl/FormControl";
+import { Fieldset } from "../components/Fieldset";
+import { Label } from "../components/Label";
 import { Input } from "../Input";
 import { type TextFieldProps } from "./types";
 
@@ -8,12 +9,12 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
     const feedbackId = name ? `${name}-information` : undefined;
 
     return (
-      <FormControl as="label" htmlFor={id}>
+      <Fieldset>
         {Boolean(label ?? info) && (
-          <div className="label">
-            <span className="label-text">{label}</span>
-            {info && <span className="label-text-alt">{info}</span>}
-          </div>
+          <Label className="flex justify-between" htmlFor={id}>
+            <span>{label}</span>
+            {info && <span>{info}</span>}
+          </Label>
         )}
         <Input
           id={id}
@@ -24,13 +25,15 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
           {...props}
         />
         {Boolean(error) && (
-          <div className="label">
-            <span className="label-text-alt text-red-500" id={feedbackId}>
-              {Array.isArray(error) ? error.join(", ") : error}
-            </span>
-          </div>
+          <Label className="flex flex-col items-start" htmlFor={id} id={feedbackId}>
+            {(Array.isArray(error) ? error : [error]).map((e, index) => (
+              <span key={index} className="text-red-500">
+                {e}
+              </span>
+            ))}
+          </Label>
         )}
-      </FormControl>
+      </Fieldset>
     );
   }
 );

package/src/components/Form/Textarea/constants.ts

@@ -14,7 +14,7 @@ export const getTextareaClasses = cva("textarea rounded-md transition-all durati
       warning: "textarea-warning",
     },
     outline: {
-      true: "textarea-bordered",
+      false: "textarea-ghost",
     },
     wide: {
       true: "w-full",
@@ -31,6 +31,11 @@ export const getTextareaClasses = cva("textarea rounded-md transition-all durati
       size: undefined,
       className: "min-h-fit h-10",
     },
+    {
+      variant: undefined,
+      outline: undefined,
+      className: "textarea-ghost",
+    },
     {
       variant: undefined,
       outline: true,

package/src/components/Form/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,42 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { As, FieldsetLabelProps, FieldsetLegendProps, FieldsetProps } from "./types";
+import { cn } from "../../../../utilities";
+import { Label } from "../Label";
+import { getFieldsetClasses, getFieldsetLabelClasses, getFieldsetLegendClasses } from "./constants";
+
+const Fieldset = ({ children, className, ...props }: FieldsetProps) => {
+  return (
+    <fieldset className={cn(getFieldsetClasses(), className)} {...props}>
+      {children}
+    </fieldset>
+  );
+};
+
+const FieldsetLabel = <T extends As>({
+  as,
+  children,
+  className,
+  ...props
+}: FieldsetLabelProps<T>) => {
+  const SlotChild = !as || as === "label" ? Label : as;
+
+  return (
+    <Slot className={cn(getFieldsetLabelClasses(), className)} {...props}>
+      {/* slot merges it's prop into it's immediate child */}
+      <SlotChild>{children}</SlotChild>
+    </Slot>
+  );
+};
+
+const FieldsetLegend = ({ children, className, ...props }: FieldsetLegendProps) => {
+  return (
+    <legend className={cn(getFieldsetLegendClasses(), className)} {...props}>
+      {children}
+    </legend>
+  );
+};
+
+Fieldset.Label = FieldsetLabel;
+Fieldset.Legend = FieldsetLegend;
+
+export { Fieldset };

package/src/components/Form/components/Fieldset/constants.ts

@@ -0,0 +1,7 @@
+import { cva } from "../../../../libs";
+
+export const getFieldsetClasses = cva("fieldset");
+
+export const getFieldsetLabelClasses = cva("fieldset-label");
+
+export const getFieldsetLegendClasses = cva("fieldset-legend");

package/src/components/Form/components/Fieldset/index.ts

@@ -0,0 +1 @@
+export { Fieldset } from "./Fieldset";

package/src/components/Form/components/Fieldset/types.ts

@@ -0,0 +1,19 @@
+import { type VariantProps } from "../../../../libs";
+import { getFieldsetClasses, getFieldsetLabelClasses, getFieldsetLegendClasses } from "./constants";
+
+export type FieldsetProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement> &
+  VariantProps<typeof getFieldsetClasses>;
+
+export type As = "div" | "span" | "label" | "p";
+
+type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
+
+export type FieldsetLabelProps<T extends As> = (T extends "label"
+  ? React.LabelHTMLAttributes<HTMLLabelElement>
+  : React.HTMLAttributes<HTMLElement & AllowedElements[T]>) &
+  VariantProps<typeof getFieldsetLabelClasses> & {
+    as?: T;
+  };
+
+export type FieldsetLegendProps = React.HTMLAttributes<HTMLLegendElement> &
+  VariantProps<typeof getFieldsetLegendClasses>;

package/src/components/Form/components/Label/Label.tsx

@@ -1,20 +1,9 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
-import type { LabelProps, LabelTextProps } from "./types";
+import type { LabelProps } from "./types";
 import { cn } from "../../../../utilities";
-import { Text } from "../../../Text";
 import { getLabelClasses } from "./constants";
 
-const Label = ({ className, ...props }: LabelProps) => (
+export const Label = ({ className, ...props }: LabelProps) => (
   <LabelPrimitive.Root className={cn(getLabelClasses(), className)} {...props} />
 );
 Label.displayName = LabelPrimitive.Root.displayName;
-
-const LabelText = ({ className, children, ...props }: LabelTextProps) => (
-  <Text as="span" className={cn("label-text", className)} {...props}>
-    {children}
-  </Text>
-);
-
-Label.Text = LabelText;
-
-export { Label };

package/src/components/Form/index.ts

@@ -13,4 +13,4 @@ export { TagsInput } from "./TagsInput";
 export { Textarea } from "./Textarea";
 export { TextField } from "./TextField";
 export { Label } from "./components/Label";
-export { FormControl } from "./components/FormControl";
+export { Fieldset } from "./components/Fieldset";

package/src/components/HoverCard/constants.ts

@@ -1,5 +1,5 @@
 import { cva } from "../../libs";
 
 export const getHoverCardContentClasses = cva(
-  "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+  "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
 );

package/src/components/Loading/constants.ts

@@ -11,6 +11,7 @@ export const getLoadingClasses = cva("loading", {
       infinity: "loading-infinity",
     },
     intent: {
+      default: "text-base-content",
       primary: "text-primary",
       secondary: "text-secondary",
       accent: "text-accent",