@customafk/lunas-ui 0.0.25 → 0.0.27

package/packages/components/ui/slider.tsx

@@ -1,45 +0,0 @@
-'use client'
-import React from 'react'
-import { Slider as SliderPrimitive } from 'radix-ui'
-
-import { cn } from '@/lib/utils'
-
-function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]), [value, defaultValue, min, max])
-
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-        className,
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className={cn(
-          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
-    </SliderPrimitive.Root>
-  )
-}
-
-export { Slider }

package/packages/components/ui/sonner.tsx

@@ -1,40 +0,0 @@
-'use client'
-import { LoaderIcon } from 'lucide-react'
-import { useTheme } from 'next-themes'
-import { Toaster as Sonner, type ToasterProps } from 'sonner'
-
-const Toaster = () => {
-  const { theme = 'system' } = useTheme()
-
-  return (
-    <Sonner
-      richColors
-      theme={theme as ToasterProps['theme']}
-      expand={false}
-      visibleToasts={5}
-      closeButton={true}
-      position="bottom-right"
-      swipeDirections={['left', 'right']}
-      icons={{
-        loading: <LoaderIcon size={16} className="animate-spin" />,
-      }}
-      toastOptions={{
-        classNames: {
-          toast: '!text-white !border-none rounded-lg cursor-grab active:cursor-grabbing select-none z-99999',
-          icon: '!size-6',
-          title: '!text-sm !font-bold',
-          description: '!text-xs !font-semibold !text-white/80',
-          success: '!bg-success',
-          info: '!bg-blue-700',
-          loading: '!bg-slate-500',
-          warning: '!bg-warning',
-          error: '!bg-danger',
-          closeButton: '!text-gray-400 hover:!text-gray-500 !bg-neutral-50 hover:!bg-gray-100 !border-none !shadow',
-        },
-      }}
-      className="toaster group pointer-events-auto !z-999999"
-    />
-  )
-}
-
-export { Toaster }

package/packages/components/ui/switch.tsx

@@ -1,46 +0,0 @@
-'use client'
-import React from 'react'
-import { Switch as SwitchPrimitive } from 'radix-ui'
-
-import { cn } from '@/lib/utils'
-
-function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        'peer',
-        'w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs transition-all outline-none',
-        'inline-flex h-5',
-        'data-[state=checked]:bg-primary',
-        'data-[state=unchecked]:bg-border-muted',
-        'focus-visible:border-primary-strong',
-        'focus-visible:ring-primary-weak',
-        'focus-visible:ring-4',
-        'disabled:cursor-not-allowed',
-        'disabled:opacity-50',
-        'data-[state=unchecked]:border-border-weak',
-        'data-[state=unchecked]:[&_span]:bg-accent-weak',
-        'data-[state=unchecked]:bg-transparent',
-        'data-[state=unchecked]:[&_span]:size-4',
-        'data-[state=unchecked]:[&_span]:translate-x-0.5',
-        'data-[state=unchecked]:[&_span]:shadow-none',
-        'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',
-        className,
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          'bg-background',
-          'pointer-events-none block size-4 rounded-full ring-0 transition-transform',
-          'data-[state=checked]:translate-x-[calc(100%-3px)]',
-          'data-[state=unchecked]:translate-x-0',
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
-}
-
-export { Switch }

package/packages/components/ui/table.tsx

@@ -1,66 +0,0 @@
-'use client'
-import React from 'react'
-
-import { cn } from '@/lib/utils'
-
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
-  return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table data-slot="table" className={cn('w-full caption-bottom text-sm', className)} {...props} />
-    </div>
-  )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  return <thead data-slot="table-header" className={cn('bg-muted-muted border-border-weak [&_tr]:border-b', className)} {...props} />
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
-  return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
-  return <tfoot data-slot="table-footer" className={cn('bg-accent-muted border-t font-medium [&>tr]:last:border-b-0', className)} {...props} />
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn('hover:bg-muted-muted/50 active:bg-muted-muted data-[state=selected]:bg-muted border-border-weak border-b transition-colors', className)}
-      {...props}
-    />
-  )
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        'text-text-positive-weak',
-        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap',
-        '[&:has([role=checkbox])]:pr-0',
-        '[&>[role=checkbox]]:translate-y-0.5',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', className)}
-      {...props}
-    />
-  )
-}
-
-function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
-  return <caption data-slot="table-caption" className={cn('text-text-positive-muted mt-4 text-sm', className)} {...props} />
-}
-
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }

package/packages/components/ui/tabs.tsx

@@ -1,53 +0,0 @@
-'use client'
-import { Tabs as TabsPrimitive } from 'radix-ui'
-
-import { cn } from '@/lib/utils'
-
-function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return <TabsPrimitive.Root data-slot="tabs" className={cn('flex flex-col gap-2', className)} {...props} />
-}
-
-function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn('bg-muted-muted inline-flex h-9 w-fit items-center justify-center rounded-full p-1', className)}
-      {...props}
-    />
-  )
-}
-
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        'text-text-positive-weak',
-        'inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5',
-        'rounded-full',
-        'border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition',
-        'hover:bg-muted-weak',
-        'data-[state=active]:shadow-card',
-        'data-[state=active]:bg-background',
-        'disabled:opacity-50',
-        'disabled:pointer-events-none',
-        'focus-visible:border-primary',
-        'focus-visible:ring-4',
-        'focus-visible:ring-primary-weak',
-        'focus-visible:outline-1',
-        'focus-visible:outline-primary',
-        '[&_svg]:pointer-events-none',
-        '[&_svg]:shrink-0',
-        "[&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />
-}
-
-export { Tabs, TabsContent, TabsList, TabsTrigger }

package/packages/components/ui/textarea.tsx

@@ -1,46 +0,0 @@
-'use client'
-import React from 'react'
-
-import { cn } from '@/lib/utils'
-
-function Textarea({
-  className,
-  onChange,
-  onValueChange,
-  ...props
-}: React.ComponentProps<'textarea'> & {
-  onValueChange?: (value: string) => void
-}) {
-  const handleChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      onChange?.(e)
-      onValueChange?.(e.target.value)
-    },
-    [onChange, onValueChange],
-  )
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        'border-border-weak caret-primary',
-        'flex min-h-16 w-full bg-transparent px-3 py-2',
-        'field-sizing-content',
-        'shadow-input rounded-md border',
-        'text-sm transition outline-none',
-        'placeholder:text-text-positive-muted',
-        'focus-visible:border-primary-strong',
-        'focus-visible:ring-primary-weak',
-        'focus-visible:ring-4',
-        'aria-invalid:ring-danger-weak',
-        'aria-invalid:border-danger-strong',
-        'disabled:cursor-not-allowed',
-        'disabled:opacity-50',
-        className,
-      )}
-      {...props}
-      onChange={handleChange}
-    />
-  )
-}
-
-export { Textarea }

package/packages/components/ui/toggle-group.tsx

@@ -1,63 +0,0 @@
-'use client'
-import React from 'react'
-import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui'
-import { type VariantProps } from 'class-variance-authority'
-
-import { toggleVariants } from '@/components/ui/toggle'
-import { cn } from '@/lib/utils'
-
-const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-  size: 'default',
-  variant: 'default',
-})
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      className={cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', className)}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  )
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
-}
-
-export { ToggleGroup, ToggleGroupItem }

package/packages/components/ui/toggle.tsx

@@ -1,34 +0,0 @@
-'use client'
-import React from 'react'
-import { Toggle as TogglePrimitive } from 'radix-ui'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
-      },
-      size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  return <TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
-}
-
-// eslint-disable-next-line react-refresh/only-export-components
-export { Toggle, toggleVariants }

package/packages/components/ui/tooltip.tsx

@@ -1,53 +0,0 @@
-'use client'
-import React from 'react'
-import { Tooltip as TooltipPrimitive } from 'radix-ui'
-
-import { cn } from '@/lib/utils'
-
-function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
-}
-
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
-}
-
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-foreground text-text-negative-intense shadow-dropdown outline-none',
-          'animate-in fade-in-0 zoom-in-95',
-          'data-[state=closed]:animate-out',
-          'data-[state=closed]:fade-out-0',
-          'data-[state=closed]:zoom-out-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-fit',
-          'origin-(--radix-tooltip-content-transform-origin)',
-          'rounded-lg px-3 py-1.5 text-xs text-balance',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground text-secondary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
-}
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/packages/constants.tsx

@@ -1,45 +0,0 @@
-// Vietnamese locale configuration
-export const vietnameseLocale = {
-  weekdays: ['Chủ Nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'],
-  weekdaysShort: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
-  months: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'],
-  monthsShort: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10', 'T11', 'T12'],
-}
-
-// Vietnamese holidays
-export const vietnameseHolidays = {
-  '01-01': 'Tết Dương lịch',
-  '03-08': 'Quốc tế Phụ nữ',
-  '04-30': 'Ngày Giải phóng miền Nam',
-  '05-01': 'Quốc tế Lao động',
-  '09-02': 'Quốc khánh',
-  '10-20': 'Ngày Phụ nữ Việt Nam',
-  '11-20': 'Ngày Nhà giáo Việt Nam',
-}
-
-// Time Constants in milliseconds, seconds, and minutes
-export const TIME_IN_MS = Object.freeze({
-  SECOND: 1000,
-  MINUTE: 60 * 1000,
-  HOUR: 60 * 60 * 1000,
-  DAY: 24 * 60 * 60 * 1000,
-  WEEK: 7 * 24 * 60 * 60 * 1000,
-  MONTH: 30 * 24 * 60 * 60 * 1000, // Approximation for month length = 30 days
-  YEAR: 365 * 24 * 60 * 60 * 1000,
-})
-
-export const TIME_IN_SECONDS = Object.freeze({
-  MINUTE: 60,
-  HOUR: 60 * 60,
-  DAY: 24 * 60 * 60,
-  WEEK: 7 * 24 * 60 * 60,
-  MONTH: 30 * 24 * 60 * 60,
-  YEAR: 365 * 24 * 60 * 60,
-})
-
-export const TIME_IN_MINUTES = Object.freeze({
-  HOUR: 60,
-  DAY: 24 * 60,
-  WEEK: 7 * 24 * 60,
-  MONTH: 30 * 24 * 60,
-})

package/packages/hooks/use-callback-ref.ts

@@ -1,22 +0,0 @@
-import React from 'react'
-
-/**
- * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
- */
-
-/**
- * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
- * prop or avoid re-executing effects when passed as a dependency
- */
-function useCallbackRef<T extends (...args: never[]) => unknown>(callback: T | undefined): T {
-  const callbackRef = React.useRef(callback)
-
-  React.useEffect(() => {
-    callbackRef.current = callback
-  })
-
-  // https://github.com/facebook/react/issues/19240
-  return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, [])
-}
-
-export { useCallbackRef }

package/packages/hooks/use-controllable-state.ts

@@ -1,58 +0,0 @@
-import React from 'react'
-
-import { useCallbackRef } from './use-callback-ref'
-
-/**
- * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
- */
-
-type UseControllableStateParams<T> = {
-  prop?: T | undefined
-  defaultProp?: T | undefined
-  onChange?: (state: T) => void
-}
-
-type SetStateFn<T> = (prevState?: T) => T
-
-function useControllableState<T>({ prop, defaultProp, onChange = () => {} }: UseControllableStateParams<T>) {
-  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
-    defaultProp,
-    onChange,
-  })
-  const isControlled = prop !== undefined
-  const value = isControlled ? prop : uncontrolledProp
-  const handleChange = useCallbackRef(onChange)
-
-  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> = React.useCallback(
-    (nextValue) => {
-      if (isControlled) {
-        const setter = nextValue as SetStateFn<T>
-        const value = typeof nextValue === 'function' ? setter(prop) : nextValue
-        if (value !== prop) handleChange(value as T)
-      } else {
-        setUncontrolledProp(nextValue)
-      }
-    },
-    [isControlled, prop, setUncontrolledProp, handleChange],
-  )
-
-  return [value, setValue] as const
-}
-
-function useUncontrolledState<T>({ defaultProp, onChange }: Omit<UseControllableStateParams<T>, 'prop'>) {
-  const uncontrolledState = React.useState<T | undefined>(defaultProp)
-  const [value] = uncontrolledState
-  const prevValueRef = React.useRef(value)
-  const handleChange = useCallbackRef(onChange)
-
-  React.useEffect(() => {
-    if (prevValueRef.current !== value) {
-      handleChange(value as T)
-      prevValueRef.current = value
-    }
-  }, [value, prevValueRef, handleChange])
-
-  return uncontrolledState
-}
-
-export { useControllableState }

package/packages/hooks/use-mobile.ts

@@ -1,19 +0,0 @@
-import React from 'react'
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener('change', onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener('change', onChange)
-  }, [])
-
-  return !!isMobile
-}