remove unnecessary func or classes

irsyadadl · irsyadadl · commit 5510c6254cac · 2025-03-22T21:50:35.000+07:00
diff --git a/app/blocks/sidebar/sidebar-01/app-sidebar.tsx b/app/blocks/sidebar/sidebar-01/app-sidebar.tsx
@@ -20,7 +20,6 @@ import {
   SidebarSectionGroup,
   useSidebar,
 } from "@/components/ui/sidebar"
-import { Switch } from "@/components/ui/switch"
 import {
   IconArchive,
   IconArrowDown,
@@ -39,14 +38,12 @@ import {
   IconListBullets,
   IconLogout,
   IconMessage,
-  IconMoon,
   IconNotes,
   IconPackage,
   IconPlus,
   IconSettings,
   IconShield,
   IconShoppingBag,
-  IconSun,
   IconTicket,
 } from "justd-icons"
 import { useTheme } from "next-themes"
@@ -242,7 +239,6 @@ export default function AppSidebar(props: React.ComponentProps<typeof Sidebar>)
             </Menu.Item>
             <Menu.Separator />
 
-
             <Menu.Item href="#contact">
               <IconHeadphones />
               Customer Support
diff --git a/components/banner.tsx b/components/banner.tsx
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
@@ -1,30 +1,12 @@
-import { type VariantProps, tv } from "tailwind-variants"
+import { twMerge } from "tailwind-merge"
 
-const avatar = tv({
-  base: [
-    "inline-grid shrink-0 align-middle [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1",
-    "-outline-offset-1 outline-1 outline-fg/(--ring-opacity)",
-  ],
-  variants: {
-    shape: {
-      square: "rounded-(--avatar-radius) *:rounded-(--avatar-radius)",
-      circle: "rounded-full *:rounded-full",
-    },
-    size: {
-      "extra-small": "size-5 *:size-5",
-      small: "size-6 *:size-6",
-      medium: "size-8 *:size-8",
-      large: "size-10 *:size-10",
-      "extra-large": "size-12 *:size-12",
-    },
-  },
-})
-
-interface AvatarProps extends VariantProps<typeof avatar> {
+interface AvatarProps {
   src?: string | null
   initials?: string
   alt?: string
   className?: string
+  shape?: "square" | "circle"
+  size?: "extra-small" | "small" | "medium" | "large" | "extra-large"
 }
 
 const Avatar = ({
@@ -37,7 +19,21 @@ const Avatar = ({
   ...props
 }: AvatarProps & React.ComponentPropsWithoutRef<"span">) => {
   return (
-    <span data-slot="avatar" {...props} className={avatar({ shape, size, className })}>
+    <span
+      data-slot="avatar"
+      {...props}
+      className={twMerge(
+        "-outline-offset-1 inline-grid shrink-0 align-middle outline-1 outline-fg/(--ring-opacity) [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1",
+        size === "extra-small" && "size-5 *:size-5",
+        size === "small" && "size-6 *:size-6",
+        size === "medium" && "size-8 *:size-8",
+        size === "large" && "size-10 *:size-10",
+        size === "extra-large" && "size-12 *:size-12",
+        shape === "square" && "rounded-(--avatar-radius) *:rounded-(--avatar-radius)",
+        shape === "circle" && "rounded-full *:rounded-full",
+        className,
+      )}
+    >
       {initials && (
         <svg
           className="size-full select-none fill-current p-[5%] font-medium text-[48px] uppercase"
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
@@ -11,11 +11,9 @@ import {
   type ListBoxItemProps,
   ListBoxSection,
   type ListBoxSectionProps,
-  composeRenderProps,
 } from "react-aria-components"
 
-import { twMerge } from "tailwind-merge"
-import { tv } from "tailwind-variants"
+import { twJoin, twMerge } from "tailwind-merge"
 import type { ButtonProps } from "./button"
 import { Button } from "./button"
 import { composeTailwindRenderProps } from "./primitive"
@@ -180,32 +178,19 @@ const CarouselContent = <T extends object>({ className, ...props }: ListBoxSecti
   )
 }
 
-const carouselItem = tv({
-  base: [
-    "xd24r min-w-0 shrink-0 grow-0 basis-full focus:outline-hidden focus-visible:outline-hidden",
-    "group relative",
-  ],
-  variants: {
-    orientation: {
-      horizontal: "pl-4",
-      vertical: "pt-4",
-    },
-  },
-})
-
 const CarouselItem = ({ className, ...props }: ListBoxItemProps) => {
   const { orientation } = useCarousel()
 
   return (
     <ListBoxItem
       aria-label={`Slide ${props.id}`}
       aria-roledescription="slide"
-      className={composeRenderProps(className, (className, renderProps) =>
-        carouselItem({
-          ...renderProps,
-          orientation,
-          className,
-        }),
+      className={composeTailwindRenderProps(
+        className,
+        twJoin(
+          "xd24r group relative min-w-0 shrink-0 grow-0 basis-full focus:outline-hidden focus-visible:outline-hidden",
+          orientation === "horizontal" ? "pl-4" : "pt-4",
+        ),
       )}
       {...props}
     />
@@ -270,4 +255,4 @@ Carousel.Item = CarouselItem
 Carousel.Button = CarouselButton
 
 export type { CarouselApi }
-export { Carousel }
+export { Carousel, CarouselContent, CarouselHandler, CarouselItem, CarouselButton }
diff --git a/components/ui/container.tsx b/components/ui/container.tsx
@@ -8,8 +8,8 @@ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
 const Container = ({ className, constrained = false, ref, ...props }: ContainerProps) => (
   <div
     className={twMerge(
-      "mx-auto w-full max-w-7xl lg:max-w-(--breakpoint-xl) 2xl:max-w-(--breakpoint-2xl)",
-      constrained ? "sm:px-6 lg:px-8" : "px-4",
+      "mx-auto w-full max-w-7xl lg:max-w-(--breakpoint-2xl)",
+      constrained ? "sm:px-6" : "px-4 sm:px-6",
       className,
     )}
     {...props}
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
@@ -15,7 +15,7 @@ import {
 } from "motion/react"
 import type { DialogProps } from "react-aria-components"
 import { type ButtonProps, Modal, ModalOverlay } from "react-aria-components"
-import { twJoin, twMerge } from "tailwind-merge"
+import { twMerge } from "tailwind-merge"
 
 import { Dialog } from "./dialog"
 
@@ -102,10 +102,7 @@ const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitivePr
         isDismissable
         isOpen
         onOpenChange={closeDrawer}
-        className={twJoin([
-          "fixed top-0 left-0 isolate z-50 h-(--visual-viewport-height) w-full touch-none will-change-transform",
-          "flex items-end [--visual-viewport-vertical-padding:100px]",
-        ])}
+        className="fixed top-0 left-0 isolate z-50 flex h-(--visual-viewport-height) w-full touch-none items-end will-change-transform [--visual-viewport-vertical-padding:100px]"
         style={{
           backgroundColor: bg as any,
         }}
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
@@ -134,4 +134,4 @@ const Input = ({ className, ref, ...props }: InputProps) => {
 }
 
 export type { FieldProps, InputProps, FieldErrorProps }
-export { Description, FieldError, FieldGroup, Input, Label }
+export { Description, FieldError, FieldGroup, Input, Label, fieldStyles }
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
@@ -7,13 +7,15 @@ import {
   SliderOutput,
   Slider as SliderPrimitive,
   SliderStateContext,
-  SliderThumb,
-  SliderTrack,
+  SliderThumb as SliderThumbPrimitive,
+  SliderTrack as SliderTrackPrimitive,
   type SliderTrackProps,
   composeRenderProps,
 } from "react-aria-components"
 import { tv } from "tailwind-variants"
 
+import { composeTailwindRenderProps } from "@/components/ui/primitive"
+import { twJoin, twMerge } from "tailwind-merge"
 import { Description, Label } from "./field"
 import { Tooltip } from "./tooltip"
 
@@ -73,7 +75,7 @@ const Slider = ({
 
   const renderThumb = (value: number) => {
     const thumb = (
-      <Thumb
+      <SliderThumb
         index={value}
         aria-label={props.thumbLabels?.[value]}
         onFocusChange={onFocusChange}
@@ -115,47 +117,38 @@ const Slider = ({
           </SliderOutput>
         )}
       </div>
-      <Track>
+      <SliderTrack>
         {({ state }) => (
           <>
-            <Filler />
+            <SliderFiller />
             {state.values.map((_, i) => (
               <React.Fragment key={i}>{renderThumb(i)}</React.Fragment>
             ))}
           </>
         )}
-      </Track>
+      </SliderTrack>
       {props.description && <Description>{props.description}</Description>}
     </SliderPrimitive>
   )
 }
 
-const controlsStyles = tv({
-  slots: {
-    filler: [
-      "rounded-full bg-primary group-data-disabled/track:opacity-60",
-      "group-data-[orientation=horizontal]/top-0 pointer-events-none absolute group-data-[orientation=vertical]/track:bottom-0 group-data-[orientation=horizontal]/track:h-full group-data-[orientation=vertical]/track:w-full",
-    ],
-    track: [
-      "[--slider:color-mix(in_oklab,var(--color-muted)_90%,black_10%)] dark:[--slider:color-mix(in_oklab,var(--color-muted)_90%,white_10%)]",
-      "group/track relative cursor-pointer rounded-full bg-(--slider) disabled:cursor-default disabled:opacity-60",
-      "grow group-data-[orientation=horizontal]:h-1.5 group-data-[orientation=horizontal]:w-full group-data-[orientation=vertical]:w-1.5 group-data-[orientation=vertical]:flex-1",
-    ],
-  },
-})
-
-const { track, filler } = controlsStyles()
-
-const Track = (props: SliderTrackProps) => {
+const SliderTrack = ({ className, ...props }: SliderTrackProps) => {
   return (
-    <SliderTrack
+    <SliderTrackPrimitive
       {...props}
-      className={composeRenderProps(props.className, (className) => track({ className }))}
+      className={composeTailwindRenderProps(
+        className,
+        twJoin([
+          "[--slider:color-mix(in_oklab,var(--color-muted)_90%,black_10%)] dark:[--slider:color-mix(in_oklab,var(--color-muted)_90%,white_10%)]",
+          "group/track relative cursor-pointer rounded-full bg-(--slider) disabled:cursor-default disabled:opacity-60",
+          "grow group-data-[orientation=horizontal]:h-1.5 group-data-[orientation=horizontal]:w-full group-data-[orientation=vertical]:w-1.5 group-data-[orientation=vertical]:flex-1",
+        ]),
+      )}
     />
   )
 }
 
-const Filler = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+const SliderFiller = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
   const state = React.useContext(SliderStateContext)
   const { orientation, getThumbPercent, values } = state || {}
 
@@ -172,7 +165,16 @@ const Filler = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) =
       : { bottom: `${percent0}%`, height: `${Math.abs(percent0 - percent1)}%` }
   }
 
-  return <div {...props} style={getStyle()} className={filler({ className })} />
+  return (
+    <div
+      {...props}
+      style={getStyle()}
+      className={twMerge(
+        "group-data-[orientation=horizontal]/top-0 pointer-events-none absolute rounded-full bg-primary group-disabled/track:opacity-60 group-data-[orientation=vertical]/track:bottom-0 group-data-[orientation=horizontal]/track:h-full group-data-[orientation=vertical]/track:w-full",
+        className,
+      )}
+    />
+  )
 }
 
 const thumbStyles = tv({
@@ -191,9 +193,9 @@ const thumbStyles = tv({
     },
   },
 })
-const Thumb = ({ className, ...props }: SliderThumbProps) => {
+const SliderThumb = ({ className, ...props }: SliderThumbProps) => {
   return (
-    <SliderThumb
+    <SliderThumbPrimitive
       {...props}
       className={composeRenderProps(className, (className, renderProps) =>
         thumbStyles({ ...renderProps, className }),
@@ -203,4 +205,4 @@ const Thumb = ({ className, ...props }: SliderThumbProps) => {
 }
 
 export type { SliderProps }
-export { Slider }
+export { Slider, SliderFiller, SliderTrack, SliderThumb }

Original file line number	Diff line number	Diff line change
`@@ -134,4 +134,4 @@ const Input = ({ className, ref, ...props }: InputProps) => {`
`134`	`134`	`}`
`135`	`135`
`136`	`136`	`export type { FieldProps, InputProps, FieldErrorProps }`
`137`		`-export { Description, FieldError, FieldGroup, Input, Label }`
	`137`	`+export { Description, FieldError, FieldGroup, Input, Label, fieldStyles }`