From e5db4bd7fb5dfaf05edf8dd6655fc80286ddb257 Mon Sep 17 00:00:00 2001 From: enricobuehler Date: Fri, 8 May 2026 01:20:55 +0200 Subject: [PATCH] replace select --- package.json | 1 - src/form/select.tsx | 33 ++----- src/select.tsx | 204 -------------------------------------------- 3 files changed, 8 insertions(+), 230 deletions(-) delete mode 100644 src/select.tsx diff --git a/package.json b/package.json index 84ca505..768b889 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,6 @@ "./section": "./dist/section/index.js", "./section/heading": "./dist/section/heading/index.js", "./section/section.types": "./dist/section/section.types.js", - "./select": "./dist/select.js", "./styles/animations": "./dist/styles/animations.js", "./logo/text": "./dist/logo/text.js", "./text": "./dist/text.js", diff --git a/src/form/select.tsx b/src/form/select.tsx index d8cd8ea..5f39c23 100644 --- a/src/form/select.tsx +++ b/src/form/select.tsx @@ -3,27 +3,13 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import { Select as SelectPrimitive } from "radix-ui"; import type * as React from "react"; -import useInterfaceSound from "@/hooks/useInterfaceSound"; + import { cn } from "@/lib/utils"; function Select({ ...props }: React.ComponentProps) { - const { play } = useInterfaceSound(); - - return ( - { - if (open) { - play({ id: "click3" }); - } else { - play({ id: "click4" }); - } - }} - data-slot="select" - {...props} - /> - ); + return ; } function SelectGroup({ @@ -51,10 +37,10 @@ function SelectTrigger({ data-slot="select-trigger" data-size={size} className={cn( - "border-main data-placeholder:text-secondary [&_svg:not([class*='text-'])]:text-secondary focus-visible:border-ring", + "border-main data-[placeholder]:text-secondary [&_svg:not([class*='text-'])]:text-secondary focus-visible:border-ring", "focus-visible:ring-main/50 aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error", - "dark:bg-neutral-accent/30 dark:hover:bg-neutral-accent/50 flex w-fit items-center justify-between gap-2 rounded-lg", - "border bg-transparent px-4 py-2 text-sm text-main whitespace-nowrap shadow-xs transition-[color,box-shadow,background-color] outline-none", + "dark:bg-neutral-accent/30 dark:hover:bg-neutral-accent/50 flex w-fit items-center justify-between gap-2 rounded-full", + "border bg-transparent px-3 py-2 text-sm text-main whitespace-nowrap shadow-xs transition-[color,box-shadow,background-color] outline-none", "focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-input-height data-[size=sm]:h-8", "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center", "*:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", @@ -85,8 +71,8 @@ function SelectContent({ "bg-neutral data-[state=open]:animate-in data-[state=closed]:animate-out p-1", "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 relative z-100 max-h-(--radix-select-content-available-height) min-w-32", - "origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border shadow-md", + "data-[side=top]:slide-in-from-bottom-2 relative z-100 max-h-(--radix-select-content-available-height) min-w-[8rem]", + "origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl border shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className, @@ -129,15 +115,12 @@ function SelectItem({ children, ...props }: React.ComponentProps) { - const { play } = useInterfaceSound(); - return ( play({ id: "click2" })} data-slot="select-item" className={cn( "focus:bg-main/25 text-main/75 focus:text-main [&_svg:not([class*='text-'])]:text-main transition-colors", - "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-3", + "relative flex w-full cursor-default items-center gap-2 rounded-full py-1.5 pr-8 pl-3", "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 *:[span]:last:flex", "*:[span]:last:items-center *:[span]:last:gap-2", diff --git a/src/select.tsx b/src/select.tsx deleted file mode 100644 index 5f39c23..0000000 --- a/src/select.tsx +++ /dev/null @@ -1,204 +0,0 @@ -"use client"; - -import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"; -import { Select as SelectPrimitive } from "radix-ui"; -import type * as React from "react"; - -import { cn } from "@/lib/utils"; - -function Select({ - ...props -}: React.ComponentProps) { - return ; -} - -function SelectGroup({ - ...props -}: React.ComponentProps) { - return ; -} - -function SelectValue({ - ...props -}: React.ComponentProps) { - return ; -} - -function SelectTrigger({ - className, - size = "default", - children, - ...props -}: React.ComponentProps & { - size?: "sm" | "default"; -}) { - return ( - - {children} - - - - - ); -} - -function SelectContent({ - className, - children, - position = "item-aligned", - align = "center", - ...props -}: React.ComponentProps) { - return ( - - - - - {children} - - - - - ); -} - -function SelectLabel({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function SelectItem({ - className, - children, - ...props -}: React.ComponentProps) { - return ( - - - - - - - {children} - - ); -} - -function SelectSeparator({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); -} - -function SelectScrollUpButton({ - className, - ...props -}: React.ComponentProps) { - return ( - - - - ); -} - -function SelectScrollDownButton({ - className, - ...props -}: React.ComponentProps) { - return ( - - - - ); -} - -export { - Select, - SelectContent, - SelectGroup, - SelectItem, - SelectLabel, - SelectScrollDownButton, - SelectScrollUpButton, - SelectSeparator, - SelectTrigger, - SelectValue, -};