@customafk/lunas-ui 0.0.20 → 0.0.22

package/packages/components/ui/hover-card.tsx

@@ -1,29 +1,18 @@
-"use client";
-import React from "react";
-import { HoverCard as HoverCardPrimitive } from "radix-ui";
+'use client'
+import React from 'react'
+import { HoverCard as HoverCardPrimitive } from 'radix-ui'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
-function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
 }
 
-function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  );
+function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
 }
 
-function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+function HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
   return (
     <HoverCardPrimitive.Portal data-slot="hover-card-portal">
       <HoverCardPrimitive.Content
@@ -31,13 +20,13 @@ function HoverCardContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground 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 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          'bg-popover text-popover-foreground 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 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
           className,
         )}
         {...props}
       />
     </HoverCardPrimitive.Portal>
-  );
+  )
 }
 
-export { HoverCard, HoverCardContent, HoverCardTrigger };
+export { HoverCard, HoverCardContent, HoverCardTrigger }

package/packages/components/ui/input-otp.tsx

@@ -1,56 +1,47 @@
-"use client";
-import React from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { MinusIcon } from "lucide-react";
+'use client'
+import React from 'react'
+import { OTPInput, OTPInputContext } from 'input-otp'
+import { MinusIcon } from 'lucide-react'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 function InputOTP({
   className,
   containerClassName,
   ...props
 }: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string;
+  containerClassName?: string
 }) {
   return (
     <OTPInput
       data-slot="input-otp"
-      containerClassName={cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName,
-      )}
-      className={cn("disabled:cursor-not-allowed", className)}
+      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}
+      className={cn('disabled:cursor-not-allowed', className)}
       {...props}
     />
-  );
+  )
 }
 
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-otp-group"
-      className={cn("flex items-center", className)}
-      {...props}
-    />
-  );
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="input-otp-group" className={cn('flex items-center', className)} {...props} />
 }
 
 function InputOTPSlot({
   index,
   className,
   ...props
-}: React.ComponentProps<"div"> & {
-  index: number;
+}: React.ComponentProps<'div'> & {
+  index: number
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
 
   return (
     <div
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
         className,
       )}
       {...props}
@@ -62,15 +53,15 @@ function InputOTPSlot({
         </div>
       )}
     </div>
-  );
+  )
 }
 
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
   return (
     <div data-slot="input-otp-separator" role="separator" {...props}>
       <MinusIcon />
     </div>
-  );
+  )
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }

package/packages/components/ui/input.tsx

@@ -1,7 +1,7 @@
-"use client";
-import React from "react";
+'use client'
+import React from 'react'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 function Input({
   className,
@@ -9,51 +9,51 @@ function Input({
   onChange,
   onValueChange,
   ...props
-}: React.ComponentProps<"input"> & {
-  onValueChange?: (value: string) => void;
+}: React.ComponentProps<'input'> & {
+  onValueChange?: (value: string) => void
 }) {
   const handleChange = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange?.(e);
-      onValueChange?.(e.target.value);
+      onChange?.(e)
+      onValueChange?.(e.target.value)
     },
     [onChange, onValueChange],
-  );
+  )
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-9 w-full min-w-0",
-        "border-input shadow-input rounded-md border",
-        "px-3 py-1",
-        "bg-transparent",
-        "caret-primary text-sm",
-        "transition-[color,box-shadow] outline-none",
-        "placeholder:text-muted-foreground",
-        "selection:bg-primary",
-        "selection:text-primary-foreground",
-        "file:inline-flex",
-        "file:h-7",
-        "file:border-0",
-        "file:bg-transparent",
-        "file:text-sm",
-        "file:text-foreground",
-        "file:font-medium",
-        "disabled:pointer-events-none",
-        "disabled:cursor-not-allowed",
-        "disabled:opacity-50",
-        "focus-visible:ring-4",
-        "focus-visible:ring-ring",
-        "focus-visible:border-primary/60",
-        "aria-invalid:ring-destructive/40",
-        "aria-invalid:border-destructive",
+        'flex h-9 w-full min-w-0',
+        'border-border-weak shadow-input rounded-md border',
+        'px-3 py-1',
+        'bg-transparent',
+        'caret-primary text-sm',
+        'transition-[color,box-shadow] outline-none',
+        'placeholder:text-text-positive-muted',
+        'selection:bg-primary',
+        'selection:text-primary-foreground',
+        'file:inline-flex',
+        'file:h-7',
+        'file:border-0',
+        'file:bg-transparent',
+        'file:text-sm',
+        'file:text-foreground',
+        'file:font-medium',
+        'disabled:pointer-events-none',
+        'disabled:cursor-not-allowed',
+        'disabled:opacity-50',
+        'focus-visible:ring-4',
+        'focus-visible:ring-primary-weak',
+        'focus-visible:border-primary-strong',
+        'aria-invalid:ring-danger-muted',
+        'aria-invalid:border-danger',
         className,
       )}
       {...props}
       onChange={handleChange}
     />
-  );
+  )
 }
 
-export { Input };
+export { Input }

package/packages/components/ui/inputs/number-input.tsx

@@ -1,4 +1,4 @@
-"use client"
+'use client'
 import React from 'react'
 
 import { cn } from '@/lib/utils'
@@ -161,10 +161,7 @@ export const NumberInput: React.FC<IProps> = ({
       if (!decimal || value === '-') return true
       const [integerPart, decimalPart = ''] = value.split('.')
 
-      return (
-        decimalPart.length <= decimal[1] &&
-        (integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length) <= maxIntegerLength!
-      )
+      return decimalPart.length <= decimal[1] && (integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length) <= maxIntegerLength!
     },
     [decimal, maxIntegerLength],
   )
@@ -192,8 +189,7 @@ export const NumberInput: React.FC<IProps> = ({
     [roundingRule],
   )
   const isDecimalPointGreaterThanLimit = React.useCallback(
-    (value: string) =>
-      (!numberAfterDecimalPoint && value.includes('.')) || value.split('.')[1]?.length > numberAfterDecimalPoint,
+    (value: string) => (!numberAfterDecimalPoint && value.includes('.')) || value.split('.')[1]?.length > numberAfterDecimalPoint,
     [numberAfterDecimalPoint],
   )
   const formattedValue = React.useCallback(
@@ -248,8 +244,7 @@ export const NumberInput: React.FC<IProps> = ({
       }
 
       // Validate input format
-      const isValid =
-        validationRegex.test(inputValue) && isValidFormat(inputValue) && (decimal || isValidDecimalLength(inputValue))
+      const isValid = validationRegex.test(inputValue) && isValidFormat(inputValue) && (decimal || isValidDecimalLength(inputValue))
       if (!isValid) return
 
       const numericValue = parseFloat(inputValue) || 0
@@ -313,10 +308,7 @@ export const NumberInput: React.FC<IProps> = ({
         onBlur={handleBlur}
       />
       {unitText && (
-        <span
-          ref={_unitRef}
-          className="text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm"
-        >
+        <span ref={_unitRef} className="text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm">
           {unitText}
         </span>
       )}

package/packages/components/ui/inputs/password-input.tsx

@@ -1,4 +1,4 @@
-"use client"
+'use client'
 import React from 'react'
 import { EyeIcon, EyeOffIcon } from 'lucide-react'
 
@@ -13,13 +13,7 @@ export const PasswordInput: React.FC<Props> = ({ className, ...rest }) => {
   const toggleVisibility = React.useCallback(() => setIsVisible((prevState) => !prevState), [])
   return (
     <div className="relative">
-      <Input
-        {...rest}
-        id={id}
-        placeholder="Password"
-        type={isVisible ? 'text' : 'password'}
-        className={cn('pe-9', className)}
-      />
+      <Input {...rest} id={id} placeholder="Password" type={isVisible ? 'text' : 'password'} className={cn('pe-9', className)} />
       <button
         className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
         type="button"

package/packages/components/ui/inputs/search-input.tsx

@@ -1,14 +1,14 @@
-import { ArrowRightIcon, SearchIcon } from "lucide-react";
+import { ArrowRightIcon, SearchIcon } from 'lucide-react'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
-import { Input } from "../input";
+import { Input } from '../input'
 
-type Props = React.ComponentPropsWithoutRef<typeof Input>;
+type Props = React.ComponentPropsWithoutRef<typeof Input>
 export const SearchInput = ({ className, ...rest }: Props) => {
   return (
     <div className="relative">
-      <Input {...rest} type="search" className={cn("ps-9 pe-9", className)} />
+      <Input {...rest} type="search" className={cn('ps-9 pe-9', className)} />
       <div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 peer-disabled:opacity-50">
         <SearchIcon size={16} />
       </div>
@@ -20,5 +20,5 @@ export const SearchInput = ({ className, ...rest }: Props) => {
         <ArrowRightIcon size={16} aria-hidden="true" />
       </button>
     </div>
-  );
-};
+  )
+}

package/packages/components/ui/label.tsx

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