@customafk/lunas-ui 0.0.7 → 0.0.8

package/packages/components/ui/form.tsx

@@ -0,0 +1,168 @@
+"use client";
+import React from "react";
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from "react-hook-form";
+import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
+
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, control, resetField } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    control,
+    resetField,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-1", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { formItemId } = useFormField();
+  return (
+    <Label
+      data-slot="form-label"
+      className={cn("text-xs", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({
+  ...props
+}: React.ComponentProps<typeof SlotPrimitive.Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <SlotPrimitive.Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+
+  return (
+    <span
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-xs", className)}
+      {...props}
+    >
+      {error ? String(error?.message ?? "") : children}
+    </span>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+};

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

@@ -0,0 +1,43 @@
+"use client";
+import React from "react";
+import { HoverCard as HoverCardPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+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 HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        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",
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };

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

@@ -0,0 +1,76 @@
+"use client";
+import React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  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)}
+      {...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;
+}) {
+  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]",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/packages/components/ui/input.tsx

@@ -0,0 +1,59 @@
+"use client";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({
+  className,
+  type,
+  onChange,
+  onValueChange,
+  ...props
+}: React.ComponentProps<"input"> & {
+  onValueChange?: (value: string) => void;
+}) {
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      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",
+        className,
+      )}
+      {...props}
+      onChange={handleChange}
+    />
+  );
+}
+
+export { Input };

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

@@ -0,0 +1,325 @@
+"use client"
+import React from 'react'
+
+import { cn } from '@/lib/utils'
+
+import { Input } from '../input'
+
+const createValidationRegex = (allowNegative: boolean): RegExp => {
+  return allowNegative ? /^-?\d*\.?\d*$/ : /^\d*\.?\d*$/
+}
+
+const formatNumberWithCommas = (num: number | string): string => {
+  return Number(num).toLocaleString()
+}
+
+interface IProps extends React.HTMLAttributes<HTMLInputElement> {
+  /**
+   * Description: Value for the text field
+   *
+   * Default: ''
+   *
+   * Usage: Value for the text field
+   */
+  value?: string | number
+  /**
+   * Description: Disabled state of the text field
+   *
+   * Default: `false`
+   *
+   * Usage: Disabled state of the text field
+   *
+   * Note: If true, the text field will be disabled
+   */
+  disabled?: boolean
+  /**
+   * Description: Readonly state of the text field
+   *
+   * Default: `false`
+   *
+   * Usage: Readonly state of the text field
+   */
+  readonly?: boolean
+  /**
+   * Description: Allow negative value for the text field
+   *
+   * Default: `false`
+   *
+   * Usage: Allow negative value for the text field
+   */
+  allowNegative?: boolean
+  /**
+   * Description: Decimal point for the text field
+   *
+   * Default: `undefined`
+   *
+   * Usage: Ex: [12,3] => console.log(2323.23) // True
+   *
+   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored
+   */
+  decimal?: [number, number]
+  /**
+   * Description: Rounding rule for the text field
+   *
+   * Default: `nearest`
+   *
+   * Usage: Rounding rule for the text field
+   */
+  roundingRule?: 'up' | 'down' | 'nearest' | 'none'
+  /**
+   * Description: Number of digits after the decimal point
+   *
+   * Default: `2`
+   *
+   * Usage: Number of digits after the decimal point
+   */
+  numberAfterDecimalPoint?: number
+  /**
+   * Description: Placeholder for the text field
+   *
+   * Default: ''
+   *
+   * Usage: Placeholder for the text field
+   */
+  placeholder?: string
+  /**
+   * Description: Unit text for the text field
+   *
+   * Default: ''
+   *
+   * E.g. 'kg', 'm', 'USD'...
+   */
+  unitText?: string
+  /**
+   * Description: Invalid state of the text field
+   *
+   * Default: `false`
+   *
+   * Usage: Invalid state of the text field
+   */
+  invalid?: boolean
+  /**
+   * Description: Precision for the text field
+   *
+   * Default: `undefined`
+   * E.g.
+   * - 2.13 => 2.1 when precision is 1
+   * - 2.134 => 2.13 when precision is 2
+   */
+  precision?: number
+  /**
+   * Description: Callback function for the value change
+   * Usage: Callback function for the value change
+   */
+  onValueChange?: (value?: number) => void
+  onBlur?: () => void
+}
+/**
+ * ## Unit Text Field Component
+ *
+ * **Description**: This component is to display common text field with unit
+ *
+ * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...
+ */
+export const NumberInput: React.FC<IProps> = ({
+  disabled = false,
+  readonly = false,
+  allowNegative = false,
+  numberAfterDecimalPoint = 2,
+  roundingRule = 'none',
+  value: initialValue = '',
+  unitText,
+  decimal,
+  placeholder,
+  precision,
+  onChange,
+  onValueChange,
+  onBlur,
+  ...props
+}) => {
+  const _unitRef = React.useRef<HTMLSpanElement>(null)
+  const _inputRef = React.useRef<HTMLInputElement>(null)
+
+  const [value, setValue] = React.useState<string>(initialValue.toString())
+
+  // Memoized values for validation and formatting
+  const maxDecimalPlaces = decimal?.[1] ?? numberAfterDecimalPoint
+  const maxIntegerLength = decimal && decimal[0] - decimal[1]
+  const validationRegex = React.useMemo(() => createValidationRegex(allowNegative), [allowNegative])
+
+  // Validation functions
+  const isValidDecimalLength = React.useCallback(
+    (value: string): boolean => {
+      if (!maxDecimalPlaces && value.includes('.')) return false
+      const decimalPart = value.split('.')[1]
+      return !decimalPart || decimalPart.length <= maxDecimalPlaces
+    },
+    [maxDecimalPlaces],
+  )
+  const isValidFormat = React.useCallback(
+    (value: string): boolean => {
+      if (!decimal || value === '-') return true
+      const [integerPart, decimalPart = ''] = value.split('.')
+
+      return (
+        decimalPart.length <= decimal[1] &&
+        (integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length) <= maxIntegerLength!
+      )
+    },
+    [decimal, maxIntegerLength],
+  )
+  const customRoundedValue = React.useCallback(
+    (value: number, precision: number) => {
+      if (roundingRule === 'none') return value
+
+      const factor = Math.pow(10, precision)
+      const scaledValue = value * factor
+
+      switch (roundingRule) {
+        case 'up':
+          return Math.ceil(scaledValue) / factor
+        case 'down':
+          return Math.floor(scaledValue) / factor
+        case 'nearest': {
+          if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor
+          if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor
+          return (Math.floor(scaledValue) + 0.5) / factor
+        }
+        default:
+          return value
+      }
+    },
+    [roundingRule],
+  )
+  const isDecimalPointGreaterThanLimit = React.useCallback(
+    (value: string) =>
+      (!numberAfterDecimalPoint && value.includes('.')) || value.split('.')[1]?.length > numberAfterDecimalPoint,
+    [numberAfterDecimalPoint],
+  )
+  const formattedValue = React.useCallback(
+    (val: string) => {
+      if (val === '0') return '0'
+      if (!Number(val)) return ''
+
+      const numValue = parseFloat(val)
+      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0)
+      const roundedValue = customRoundedValue(numValue, effectivePrecision).toString()
+      const [integerPart, decimalPart = ''] = roundedValue.split('.')
+      const formattedInteger = formatNumberWithCommas(integerPart)
+      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger
+    },
+    [customRoundedValue, maxDecimalPlaces, precision],
+  )
+  // Validate decimal point is less than or equal to the limit
+  const validateDecimalPoint = React.useCallback(
+    (value: string) => {
+      if (!decimal || value === '-') return true
+
+      const [integerPart, decimalPart = ''] = value.split('.')
+      const integerLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length
+      const maxIntegerLength = decimal[0] - decimal[1]
+
+      return decimalPart.length <= decimal[1] && integerLength <= maxIntegerLength
+    },
+    [decimal],
+  )
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      // Don't prevent default behavior of input change
+      onChange?.(e)
+
+      // Custom event handler for value change
+      const { value: inputValue } = e.target
+
+      // Handle empty input
+      if (!inputValue) {
+        onValueChange?.(undefined)
+        setValue('')
+        return
+      }
+
+      // Handle zero and negative zero
+      const isZero = inputValue === '0'
+      const isNegativeZero = inputValue === '-' && allowNegative
+      if (isZero || isNegativeZero) {
+        onValueChange?.(0)
+        setValue(inputValue)
+        return
+      }
+
+      // Validate input format
+      const isValid =
+        validationRegex.test(inputValue) && isValidFormat(inputValue) && (decimal || isValidDecimalLength(inputValue))
+      if (!isValid) return
+
+      const numericValue = parseFloat(inputValue) || 0
+      onValueChange?.(numericValue)
+      setValue(inputValue)
+    },
+    [allowNegative, decimal, isValidDecimalLength, isValidFormat, onChange, onValueChange, validationRegex],
+  )
+
+  const handleFocus = React.useCallback(() => {
+    if (readonly) return
+    setValue((prev) => prev.replace(/,/g, '')) // Remove commas for easier editing
+  }, [readonly])
+
+  const handleBlur = React.useCallback(() => {
+    if (readonly) return
+    onBlur?.()
+    setValue((prev) => formattedValue(prev))
+  }, [readonly, onBlur, formattedValue])
+
+  // Set initial value
+  React.useEffect(() => {
+    const isFocused = document.activeElement === _inputRef.current
+
+    if (
+      !initialValue ||
+      !validationRegex.test(initialValue.toString()) ||
+      !validateDecimalPoint(initialValue.toString()) ||
+      (!decimal && isDecimalPointGreaterThanLimit(initialValue.toString()))
+    ) {
+      setValue('')
+      return
+    }
+
+    setValue((prev) => {
+      if (prev === '-') return '-'
+      if (!prev) return ''
+      return isFocused ? initialValue.toString() : formattedValue(initialValue.toString())
+    })
+  }, [decimal, formattedValue, initialValue, isDecimalPointGreaterThanLimit, validateDecimalPoint, validationRegex])
+
+  // Set padding right for the input field
+  React.useEffect(() => {
+    if (!_unitRef.current || !_inputRef.current || !unitText) return
+    const unitWidth = _unitRef.current.offsetWidth
+    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 8) / 16}rem`)
+  }, [disabled, unitText])
+
+  return (
+    <div className="relative">
+      <Input
+        {...props}
+        ref={_inputRef}
+        value={value || (readonly ? '0' : '')}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readonly}
+        className={cn('font-number text-end', readonly && 'bg-muted text-muted-foreground')}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        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"
+        >
+          {unitText}
+        </span>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,35 @@
+"use client"
+import React from 'react'
+import { EyeIcon, EyeOffIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+import { Input } from '../input'
+
+type Props = React.ComponentPropsWithoutRef<typeof Input>
+export const PasswordInput: React.FC<Props> = ({ className, ...rest }) => {
+  const id = React.useId()
+  const [isVisible, setIsVisible] = React.useState<boolean>(false)
+  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)}
+      />
+      <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"
+        onClick={toggleVisibility}
+        aria-label={isVisible ? 'Hide password' : 'Show password'}
+        aria-pressed={isVisible}
+        aria-controls="password"
+      >
+        {isVisible ? <EyeOffIcon size={16} aria-hidden="true" /> : <EyeIcon size={16} aria-hidden="true" />}
+      </button>
+    </div>
+  )
+}