@customafk/lunas-ui 0.0.25 → 0.0.27

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

@@ -1,317 +0,0 @@
-'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

@@ -1,29 +0,0 @@
-'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>
-  )
-}

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

@@ -1,24 +0,0 @@
-import { ArrowRightIcon, SearchIcon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-import { Input } from '../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)} />
-      <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>
-      <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"
-        aria-label="Submit search"
-        type="submit"
-      >
-        <ArrowRightIcon size={16} aria-hidden="true" />
-      </button>
-    </div>
-  )
-}

package/packages/components/ui/label.tsx

@@ -1,26 +0,0 @@
-'use client'
-import React from 'react'
-import { Label as LabelPrimitive } from 'radix-ui'
-
-import { cn } from '@/lib/utils'
-
-function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        '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 }

package/packages/components/ui/menubar.tsx

@@ -1,212 +0,0 @@
-'use client'
-import React from 'react'
-import { Menubar as MenubarPrimitive } from 'radix-ui'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
-  return (
-    <MenubarPrimitive.Root
-      data-slot="menubar"
-      className={cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', className)}
-      {...props}
-    />
-  )
-}
-
-function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
-}
-
-function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
-}
-
-function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
-}
-
-function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-}
-
-function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  return (
-    <MenubarPrimitive.Trigger
-      data-slot="menubar-trigger"
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarContent({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>) {
-  return (
-    <MenubarPortal>
-      <MenubarPrimitive.Content
-        data-slot="menubar-content"
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in 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 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
-          className,
-        )}
-        {...props}
-      />
-    </MenubarPortal>
-  )
-}
-
-function MenubarItem({
-  className,
-  inset,
-  variant = 'default',
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean
-  variant?: 'default' | 'destructive'
-}) {
-  return (
-    <MenubarPrimitive.Item
-      data-slot="menubar-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
-  return (
-    <MenubarPrimitive.CheckboxItem
-      data-slot="menubar-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.CheckboxItem>
-  )
-}
-
-function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  return (
-    <MenubarPrimitive.RadioItem
-      data-slot="menubar-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.RadioItem>
-  )
-}
-
-function MenubarLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <MenubarPrimitive.Label
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
-      {...props}
-    />
-  )
-}
-
-function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
-  return <MenubarPrimitive.Separator data-slot="menubar-separator" className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />
-}
-
-function MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  return <span data-slot="menubar-shortcut" className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />
-}
-
-function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
-}
-
-function MenubarSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <MenubarPrimitive.SubTrigger
-      data-slot="menubar-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
-    </MenubarPrimitive.SubTrigger>
-  )
-}
-
-function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
-  return (
-    <MenubarPrimitive.SubContent
-      data-slot="menubar-sub-content"
-      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 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarGroup,
-  MenubarItem,
-  MenubarLabel,
-  MenubarMenu,
-  MenubarPortal,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-}