avocadi/ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve styling

Browse Source 
add tabs
This commit is contained in:
Enrico Bühler
2026-05-08 21:59:57 +02:00
parent 04b0ec8863
commit b2891feea4
8 changed files with 172 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lock
+4 -3
View File
@@ -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=="],
package.json
+4 -3
View File
@@ -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"
}
}
src/button.tsx
+1
View File
@@ -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",
src/form/field-container.tsx
+5 -18
View File
@@ -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 (
<motion.div {...animation.container} className="py-3 flex flex-col gap-2">
<motion.div
variants={defaultVariantsCard}
className="py-3 flex flex-col gap-2"
>
{children}
</motion.div>
);
src/form/label.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const labelVariants = cva(
);
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
src/form/select.tsx
+22 -5
View File
@@ -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<typeof SelectPrimitive.Root>) {
return <SelectPrimitive.Root data-slot="select" {...props} />;
const { play } = useInterfaceSound();
return (
<SelectPrimitive.Root
onOpenChange={(open) => {
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<typeof SelectPrimitive.Item>) {
const { play } = useInterfaceSound();
return (
<SelectPrimitive.Item
onMouseEnter={() => 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",
src/tabs.tsx
+134
View File
@@ -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<typeof TabsPrimitive.Root>) {
return (
<TabsPrimitive.Root
data-slot="tabs"
data-orientation={orientation}
orientation={orientation}
className={cn(
"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
className,
)}
{...props}
>
{children}
</TabsPrimitive.Root>
);
}
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<typeof TabsPrimitive.List> &
VariantProps<typeof tabsListVariants>) {
return (
<motion.div variants={defaultVariantsCard}>
<TabsPrimitive.List
data-slot="tabs-list"
data-color-theme={colorTheme}
className={cn(
tabsListVariants({ colorTheme, allowFlexCol }),
className,
)}
{...props}
>
{children}
</TabsPrimitive.List>
</motion.div>
);
}
function TabsTrigger({
className,
children,
...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
return (
<TabsPrimitive.Trigger
asChild
data-slot="tabs-trigger"
className={cn(
"w-full lg:w-fit",
"font-medium lg:h-full!",
"focus-visible:border-main focus-visible:ring-main/50 focus-visible:outline-main text-main/60 \
hover:text-main dark:text-main dark:hover:text-main relative inline-flex",
"items-center justify-center gap-1.5 rounded-full border border-transparent px-3 py-1",
"whitespace-nowrap group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start \
focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 \
group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none \
[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent \
dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
"data-[state=active]:bg-neutral dark:data-[state=active]:text-main dark:data-[state=active]:border-input \
dark:data-[state=active]:bg-input/30 data-[state=active]:text-main",
// bg
"after:bg-main after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 \
group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 \
group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 \
group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
className,
)}
{...props}
>
<AnimatedButton variant="ghost">{children}</AnimatedButton>
</TabsPrimitive.Trigger>
);
}
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, tabsListVariants };
tsdown.config.ts
+1 -1
View File
@@ -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: [],
});