From b2891feea4bdd50864e978a4a0feffc53f861ff3 Mon Sep 17 00:00:00 2001 From: enricobuehler Date: Fri, 8 May 2026 21:59:57 +0200 Subject: [PATCH] improve styling add tabs --- bun.lock | 7 +- package.json | 7 +- src/button.tsx | 1 + src/form/field-container.tsx | 23 ++---- src/form/label.tsx | 2 +- src/form/select.tsx | 27 +++++-- src/tabs.tsx | 134 +++++++++++++++++++++++++++++++++++ tsdown.config.ts | 2 +- 8 files changed, 172 insertions(+), 31 deletions(-) create mode 100644 src/tabs.tsx diff --git a/bun.lock b/bun.lock index cea870e..bb0c714 100644 --- a/bun.lock +++ b/bun.lock @@ -27,6 +27,7 @@ "motion": "^12.38.0", "radix-ui": "^1.4.3", "react": "^19.2.5", + "react-dom": "^19.2.5", "typescript": "^6", "use-sound": "^5.0.0", "zod": "^4.3.6", @@ -1080,7 +1081,7 @@ "sass": ["sass@1.77.4", "", { "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { "sass": "sass.js" } }, "sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw=="], - "scheduler": ["scheduler@0.25.0", "", {}, "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA=="], + "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="], "secure-json-parse": ["secure-json-parse@4.1.0", "", {}, "sha512-l4KnYfEyqYJxDwlNVyRfO2E4NTHfMKAWdUuA8J0yve2Dz/E/PdBepY03RvyJpssIpRFwJoCD55wA+mEDs6ByWA=="], @@ -1222,6 +1223,8 @@ "@lexical/react/react-error-boundary": ["react-error-boundary@6.1.1", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0" } }, "sha512-BrYwPOdXi5mqkk5lw+Uvt0ThHx32rCt3BkukS4X23A2AIWDPSGX6iaWTc0y9TU/mHDA/6qOSGel+B2ERkOvD1w=="], + "@payloadcms/ui/scheduler": ["scheduler@0.25.0", "", {}, "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA=="], + "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" }, "bundled": true }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="], "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="], @@ -1252,8 +1255,6 @@ "react-datepicker/date-fns": ["date-fns@3.6.0", "", {}, "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="], - "react-dom/scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="], - "readdirp/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="], "@babel/helper-module-imports/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="], diff --git a/package.json b/package.json index 6d48f3d..13d07a3 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@avocadi/ui", "type": "module", - "version": "0.2.17", + "version": "0.2.18", "description": "ui elements for avocadi", "private": false, "files": [ @@ -29,6 +29,7 @@ "motion": "^12.38.0", "radix-ui": "^1.4.3", "react": "^19.2.5", + "react-dom": "^19.2.5", "typescript": "^6", "use-sound": "^5.0.0", "zod": "^4.3.6" @@ -57,6 +58,7 @@ "./section/heading": "./dist/section/heading/index.js", "./section/section.types": "./dist/section/section.types.js", "./styles/animations": "./dist/styles/animations.js", + "./tabs": "./dist/tabs.js", "./logo/text": "./dist/logo/text.js", "./text": "./dist/text.js", "./package.json": "./package.json", @@ -83,7 +85,6 @@ "@radix-ui/react-use-layout-effect": "1.1.1", "framer-motion": "12.38.0", "motion-dom": "12.38.0", - "motion-utils": "12.36.0", - "react-dom": "19.2.5" + "motion-utils": "12.36.0" } } diff --git a/src/button.tsx b/src/button.tsx index c7e8807..eb35826 100644 --- a/src/button.tsx +++ b/src/button.tsx @@ -28,6 +28,7 @@ const buttonVariants = cva( }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", + input: "h-input-height px-4 py-1", sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 px-6 has-[>svg]:px-4", icon: "size-9", diff --git a/src/form/field-container.tsx b/src/form/field-container.tsx index 692fbb4..b4803ce 100644 --- a/src/form/field-container.tsx +++ b/src/form/field-container.tsx @@ -1,26 +1,13 @@ -import { ease } from "@unom/style"; import { motion } from "motion/react"; import type { ReactNode } from "react"; - -const animation = { - container: { - variants: { - enter: { - opacity: 1, - y: 0, - }, - from: { - opacity: 0, - y: -20, - }, - }, - transition: ease.quint(0.9).out, - }, -}; +import { defaultVariantsCard } from "@/styles/animations"; export const FieldContainer = ({ children }: { children: ReactNode }) => { return ( - + {children} ); diff --git a/src/form/label.tsx b/src/form/label.tsx index b6ebd26..2755c69 100644 --- a/src/form/label.tsx +++ b/src/form/label.tsx @@ -11,7 +11,7 @@ const labelVariants = cva( ); const Label = React.forwardRef< - React.ElementRef, + React.ComponentRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( diff --git a/src/form/select.tsx b/src/form/select.tsx index 5f39c23..6646d6d 100644 --- a/src/form/select.tsx +++ b/src/form/select.tsx @@ -3,13 +3,27 @@ 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) { - return ; + const { play } = useInterfaceSound(); + + return ( + { + if (open) { + play({ id: "click3" }); + } else { + play({ id: "click4" }); + } + }} + data-slot="select" + {...props} + /> + ); } function SelectGroup({ @@ -37,10 +51,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-full", - "border bg-transparent px-3 py-2 text-sm text-main whitespace-nowrap shadow-xs transition-[color,box-shadow,background-color] outline-none", + "border bg-transparent px-4 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", @@ -71,7 +85,7 @@ 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-[8rem]", + "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-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", @@ -115,8 +129,11 @@ 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", diff --git a/src/tabs.tsx b/src/tabs.tsx new file mode 100644 index 0000000..415e22f --- /dev/null +++ b/src/tabs.tsx @@ -0,0 +1,134 @@ +"use client"; + +import { cva, type VariantProps } from "class-variance-authority"; +import { motion } from "motion/react"; +import { Tabs as TabsPrimitive } from "radix-ui"; +import type * as React from "react"; +import { AnimatedButton } from "./button"; +import { cn } from "./lib/utils"; +import { defaultVariantsCard } from "./styles/animations"; + +function Tabs({ + className, + orientation = "horizontal", + children, + ...props +}: React.ComponentProps) { + return ( + + {children} + + ); +} + +const tabsListVariants = cva( + cn( + "rounded-full data-[variant=line]:rounded-none", + "p-2 gap-1", + "group/tabs-list text-main inline-flex w-fit items-center justify-center \ + group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", + "ring-1 ring-main/25", + ), + { + variants: { + colorTheme: { + default: "bg-neutral-accent", + neutral: "bg-neutral", + }, + allowFlexCol: { + true: "flex-col lg:flex-row lg:h-input-height max-lg:w-full", + false: "flex-row", + }, + }, + defaultVariants: { + colorTheme: "default", + allowFlexCol: true, + }, + }, +); + +function TabsList({ + className, + colorTheme = "default", + allowFlexCol = true, + children, + ...props +}: React.ComponentProps & + VariantProps) { + return ( + + + {children} + + + ); +} + +function TabsTrigger({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + {children} + + ); +} + +function TabsContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants }; diff --git a/tsdown.config.ts b/tsdown.config.ts index 20f6800..b85bd6b 100644 --- a/tsdown.config.ts +++ b/tsdown.config.ts @@ -18,7 +18,7 @@ export default defineConfig({ dts: true, exports: false, deps: { - neverBundle: [/\.mp3$/, /\.wav$/], + neverBundle: [/\.mp3$/, /\.wav$/, /^react$/, /^react\//, /^react-dom$/, /^react-dom\//], }, plugins: [], });