@tulip-systems/core 0.6.0 → 0.7.0

package/src/components/ui/{input-date-time.tsx → input-date-time.client.tsx}

@@ -1,3 +1,5 @@
+"use client";
+
 import { format } from "date-fns";
 import { cn } from "@/lib/utils/cn";
 import { Input } from "./input";
@@ -5,11 +7,14 @@ import { Input } from "./input";
 /**
  * DateTimeInput
  */
-type DateTimeInputProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue"> & {
-  defaultValue?: Date;
-  value?: Date;
-  onValueChange?: (date: Date | undefined) => void;
-  onValueBlur?: (date: Date | undefined) => void;
+export type DateTimeInputProps = Omit<
+  React.ComponentProps<"input">,
+  "type" | "value" | "defaultValue"
+> & {
+  defaultValue?: Date | string;
+  value?: Date | string;
+  onValueChange?: (date: string | undefined) => void;
+  onValueBlur?: (date: string | undefined) => void;
 };
 
 export function DateTimeInput({
@@ -26,12 +31,16 @@ export function DateTimeInput({
   const defaultValue =
     props.defaultValue instanceof Date
       ? format(props.defaultValue, "yyyy-MM-dd'T'HH:mm")
-      : undefined;
+      : typeof props.defaultValue === "string"
+        ? props.defaultValue
+        : undefined;
 
   const value =
     props.value && props.value instanceof Date
       ? format(props.value, "yyyy-MM-dd'T'HH:mm")
-      : undefined;
+      : typeof props.value === "string"
+        ? props.value
+        : undefined;
 
   return (
     <Input
@@ -40,13 +49,11 @@ export function DateTimeInput({
       defaultValue={defaultValue}
       value={value}
       onChange={(e) => {
-        const date = new Date(e.target.value);
-        onValueChange?.(date ?? undefined);
+        onValueChange?.(e.target.value ?? undefined);
         onChange?.(e);
       }}
       onBlur={(e) => {
-        const date = new Date(e.target.value);
-        onValueBlur?.(date ?? undefined);
+        onValueBlur?.(e.target.value ?? undefined);
         onBlur?.(e);
       }}
       className={cn(

package/src/components/ui/input-date.tsx

@@ -4,7 +4,7 @@ import { Input } from "./input";
 /**
  * DateInput
  */
-type DateInputProps = Omit<React.ComponentProps<"input">, "type">;
+export type DateInputProps = Omit<React.ComponentProps<"input">, "type">;
 
 export function DateInput({ className, ...props }: DateInputProps) {
   return (

package/src/components/ui/input-group.client.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils/cn";
+import { DateInput, type DateInputProps } from "./input-date";
+import { DateTimeInput, type DateTimeInputProps } from "./input-date-time.client";
+import { TimeInput, type TimeInputProps } from "./input-time";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: The div element is used to group the input and its addons together, and the role="group" attribute is added for accessibility purposes.
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input outline-none transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+        "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+        "block-start":
+          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+        "block-end":
+          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: The div element is used as an addon to the input group, and it is not intended to be interactive on its own. The onClick handler is added to allow users to focus the associated input when they click on the addon, but it does not require keyboard interaction as it is not a standalone interactive element.
+    // biome-ignore lint/a11y/useSemanticElements: The div element is used as an addon to the input group, and it is not intended to be interactive on its own. The role="group" attribute is added for accessibility purposes to indicate that this element is part of a group of related elements.
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva("gap-2 text-sm flex items-center shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+});
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTimeInput({ className, ...props }: TimeInputProps) {
+  return (
+    <TimeInput
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupDateInput({ className, ...props }: DateInputProps) {
+  return (
+    <DateInput
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupDateTimeInput({ className, ...props }: DateTimeInputProps) {
+  return (
+    <DateTimeInput
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+  InputGroupTimeInput,
+  InputGroupDateInput,
+  InputGroupDateTimeInput,
+};

package/src/components/ui/input-recipient.tsx

@@ -6,7 +6,7 @@ import { toast } from "sonner";
 import { cn } from "@/lib/utils/cn";
 
 import { Button } from "./button";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.client";
 
 export type Contact = {
   id: string;
@@ -173,8 +173,8 @@ export function RecipientInput({
         <div
           ref={containerRef}
           className={cn(
-            "border-input bg-background ring-offset-background flex min-h-0 w-full flex-wrap items-center gap-2 rounded-lg border px-3 py-2 text-base transition-colors md:text-sm",
-            "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+            "flex min-h-0 w-full flex-wrap items-center gap-2 rounded-lg border border-input bg-background px-3 py-2 text-base ring-offset-background transition-colors md:text-sm",
+            "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
             disabled && "cursor-not-allowed opacity-50",
             className,
           )}
@@ -187,14 +187,14 @@ export function RecipientInput({
           {selectedContacts.map((contact) => (
             <div
               key={contact.id}
-              className="border-border bg-accent/50 flex items-center gap-2 rounded-full border px-2 py-0.5"
+              className="flex items-center gap-2 rounded-full border border-border bg-accent/50 px-2 py-0.5"
             >
               <span className="text-xs">{contact.email}</span>
               <Button
                 type="button"
                 variant="ghost"
                 size="icon"
-                className="hover:bg-destructive/20 h-4 w-4 rounded-full p-0"
+                className="h-4 w-4 rounded-full p-0 hover:bg-destructive/20"
                 onClick={(e) => {
                   e.stopPropagation();
                   handleRemove(contact.email);
@@ -219,7 +219,7 @@ export function RecipientInput({
             onKeyDown={handleKeyDown}
             placeholder={value.length === 0 ? placeholder : ""}
             disabled={disabled}
-            className="placeholder:text-muted-foreground min-w-30 flex-1 bg-transparent outline-none placeholder:text-sm disabled:cursor-not-allowed"
+            className="min-w-30 flex-1 bg-transparent outline-none placeholder:text-muted-foreground placeholder:text-sm disabled:cursor-not-allowed"
           />
         </div>
       </PopoverTrigger>
@@ -233,13 +233,13 @@ export function RecipientInput({
       >
         <div className="max-h-75 overflow-y-auto p-1">
           {filteredContacts.length === 0 && inputValue ? (
-            <div className="text-muted-foreground px-2 py-2">
+            <div className="px-2 py-2 text-muted-foreground">
               <div className="mb-2 text-xs">Geen contacten gevonden.</div>
               {isValidEmail(inputValue.trim()) && (
                 <button
                   type="button"
                   onClick={handleAddManualEmail}
-                  className="hover:bg-accent w-full rounded-sm px-2 py-1.5 text-left text-xs transition-colors"
+                  className="w-full rounded-sm px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent"
                 >
                   <span className="font-medium">Voeg toe: </span>
                   <span className="text-muted-foreground">{inputValue.trim()}</span>
@@ -247,7 +247,7 @@ export function RecipientInput({
               )}
             </div>
           ) : filteredContacts.length === 0 ? (
-            <div className="text-muted-foreground py-6 text-center text-xs">
+            <div className="py-6 text-center text-muted-foreground text-xs">
               Geen contacten gevonden.
             </div>
           ) : (
@@ -261,12 +261,12 @@ export function RecipientInput({
                   type="button"
                   onClick={() => handleSelect(contact)}
                   className={cn(
-                    "outline-hidden hover:bg-accent flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs transition-colors",
+                    "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden transition-colors hover:bg-accent",
                     highlightedIndex === index && "bg-accent",
                   )}
                 >
                   <div className="flex flex-col items-start">
-                    <span className="text-xs font-medium">{contact.name}</span>
+                    <span className="font-medium text-xs">{contact.name}</span>
                     <span className="text-muted-foreground text-xs">{contact.email}</span>
                   </div>
                 </button>
@@ -276,7 +276,7 @@ export function RecipientInput({
                   <button
                     type="button"
                     onClick={handleAddManualEmail}
-                    className="hover:bg-accent w-full rounded-sm px-2 py-1.5 text-left text-xs transition-colors"
+                    className="w-full rounded-sm px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent"
                   >
                     <span className="font-medium">Voeg toe: </span>
                     <span className="text-muted-foreground">{inputValue.trim()}</span>

package/src/components/ui/input-time.tsx

@@ -4,7 +4,7 @@ import { Input } from "./input";
 /**
  * TimeInput
  */
-type TimeInputProps = Omit<React.ComponentProps<"input">, "type">;
+export type TimeInputProps = Omit<React.ComponentProps<"input">, "type">;
 
 export function TimeInput({ className, ...props }: TimeInputProps) {
   return (

package/src/components/ui/input.tsx

@@ -1,5 +1,4 @@
 import type * as React from "react";
-
 import { cn } from "@/lib/utils/cn";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
@@ -8,9 +7,8 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base outline-none transition-colors file:inline-flex file:h-6 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:disabled:bg-input/80",
+        "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
         className,
       )}
       {...props}

package/src/components/ui/item.tsx

@@ -0,0 +1,182 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type * as React from "react";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils/cn";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: The list role is used to group items together, but the div element is used for styling purposes.
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  );
+}
+
+const itemVariants = cva(
+  "[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50 border-transparent",
+      },
+      size: {
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div";
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+const itemMediaVariants = cva(
+  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 font-medium text-sm leading-snug underline-offset-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left font-normal text-muted-foreground text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="item-actions" className={cn("flex items-center gap-2", className)} {...props} />
+  );
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+};

package/src/components/ui/kbd.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils/cn";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm bg-muted in-data-[slot=tooltip-content]:bg-background/20 px-1 font-medium font-sans in-data-[slot=tooltip-content]:text-background text-muted-foreground text-xs dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };

package/src/components/ui/label.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import * as LabelPrimitive from "@radix-ui/react-label";
+import { Label as LabelPrimitive } from "radix-ui";
 import type * as React from "react";
-
 import { cn } from "@/lib/utils/cn";
 
 function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
@@ -10,7 +9,7 @@ function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimiti
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+        "flex select-none items-center gap-2 font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
         className,
       )}
       {...props}

package/src/components/ui/loader.tsx

@@ -0,0 +1,51 @@
+export function Loader() {
+  return (
+    <svg viewBox="0 0 120.09 141.73" className="w-16">
+      <title>Tulip Logo Icon</title>
+      <defs>
+        <linearGradient
+          id="tulip-logo-icon-gradient"
+          x1="60.5"
+          y1="0"
+          x2="60.5"
+          y2="141.73"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#ffc754" />
+          <stop offset="1" stopColor="#ff1800" />
+        </linearGradient>
+        <linearGradient
+          id="tulip-logo-icon-gradient-2"
+          x1="72.4"
+          y1="5.81"
+          x2="72.4"
+          y2="141.73"
+          xlinkHref="#tulip-logo-icon-gradient"
+        />
+        <linearGradient
+          id="tulip-logo-icon-gradient-3"
+          x1="47.69"
+          y1="5.81"
+          x2="47.69"
+          y2="141.73"
+          xlinkHref="#tulip-logo-icon-gradient"
+        />
+      </defs>
+
+      <g>
+        <path
+          d="M107.88,93.09c0-35.95-47.38-93.09-47.38-93.09,0,0-47.39,57.14-47.38,93.09,0,26.17,21.21,48.64,47.38,48.64,26.17,0,47.39-22.47,47.38-48.64Z"
+          className="animate-pulse fill-[url(#tulip-logo-icon-gradient)] opacity-90"
+        />
+        <path
+          d="M116.68,109.5c12.3-33.78-12.69-103.68-12.69-103.68,0,0-64.07,37.49-76.37,71.27-8.95,24.59,3.3,52.97,27.89,61.92,24.59,8.95,52.21-4.91,61.16-29.5Z"
+          className="animate-pulse fill-[url(#tulip-logo-icon-gradient)] opacity-90"
+        />
+        <path
+          d="M92.46,77.09C80.16,43.3,16.09,5.81,16.09,5.81c0,0-24.98,69.9-12.69,103.68,8.95,24.59,36.57,38.45,61.16,29.5,24.59-8.95,36.84-37.32,27.89-61.92Z"
+          className="animate-pulse fill-[url(#tulip-logo-icon-gradient)] opacity-90"
+        />
+      </g>
+    </svg>
+  );
+}