@customafk/lunas-ui 0.0.20 → 0.0.22

package/packages/components/ui/toggle.tsx

@@ -1,47 +1,34 @@
-"use client";
-import React from "react";
-import { Toggle as TogglePrimitive } from "radix-ui";
-import { cva, type VariantProps } from "class-variance-authority";
+'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";
+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",
+        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",
+        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",
+      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}
-    />
-  );
+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 };
+export { Toggle, toggleVariants }

package/packages/components/ui/tooltip.tsx

@@ -1,71 +1,53 @@
-"use client";
-import React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
+'use client'
+import React from 'react'
+import { Tooltip as TooltipPrimitive } from 'radix-ui'
 
-import { cn } from "@/lib/utils";
+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 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>) {
+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 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>) {
+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-secondary-foreground text-secondary",
-          "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-md px-3 py-1.5 text-xs text-balance",
+          '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-secondary-foreground fill-secondary-foreground text-secondary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <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 };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/packages/constants.tsx

@@ -1,55 +1,21 @@
 // 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",
-  ],
-};
+  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",
-};
+  '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({
@@ -60,7 +26,7 @@ export const TIME_IN_MS = Object.freeze({
   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,
@@ -69,11 +35,11 @@ export const TIME_IN_SECONDS = Object.freeze({
   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,4 +1,4 @@
-import React from "react";
+import React from 'react'
 
 /**
  * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
@@ -8,20 +8,15 @@ import React from "react";
  * 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);
+function useCallbackRef<T extends (...args: never[]) => unknown>(callback: T | undefined): T {
+  const callbackRef = React.useRef(callback)
 
   React.useEffect(() => {
-    callbackRef.current = callback;
-  });
+    callbackRef.current = callback
+  })
 
   // https://github.com/facebook/react/issues/19240
-  return React.useMemo(
-    () => ((...args) => callbackRef.current?.(...args)) as T,
-    [],
-  );
+  return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, [])
 }
 
-export { useCallbackRef };
+export { useCallbackRef }

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

@@ -1,67 +1,58 @@
-import React from "react";
+import React from 'react'
 
-import { useCallbackRef } from "./use-callback-ref";
+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;
-};
+  prop?: T | undefined
+  defaultProp?: T | undefined
+  onChange?: (state: T) => void
+}
 
-type SetStateFn<T> = (prevState?: T) => T;
+type SetStateFn<T> = (prevState?: T) => T
 
-function useControllableState<T>({
-  prop,
-  defaultProp,
-  onChange = () => {},
-}: UseControllableStateParams<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;
+  })
+  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);
+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;
+      handleChange(value as T)
+      prevValueRef.current = value
     }
-  }, [value, prevValueRef, handleChange]);
+  }, [value, prevValueRef, handleChange])
 
-  return uncontrolledState;
+  return uncontrolledState
 }
 
-export { useControllableState };
+export { useControllableState }

package/packages/hooks/use-mobile.ts

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