import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/80",
outline:
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost:
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
destructive:
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default:
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
icon: "size-8",
"icon-xs":
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
"icon-sm":
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
"icon-lg": "size-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Button({
className,
variant = "default",
size = "default",
...props
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
return (
<ButtonPrimitive
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
}
export { Button, buttonVariants }
Button Group 13 - Star Rating
By ShadcnSpace
Try the interaction, copy the React source files, or download the complete example.
About Button Group 13 - Star Rating
Button Group 13 - Star Rating is an animated React and Tailwind CSS button by ShadcnSpace. Try the interaction, copy the React source, or download the example with creator credit.
- Effects and categories
- Hover effects, Animated
- Using this example
- Copy a TSX file or download the original source and standalone demo. Test keyboard focus, motion and contrast in your own project.
Usage, Tailwind and licensing questions
Read the source files
components/shadcn-space/button-group/button-group-13.tsx
"use client";
import { useState } from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { StarIcon } from "lucide-react";
import { motion } from "motion/react";
const STARS = [1, 2, 3, 4, 5];
const RatingButtonGroup = () => {
const [rating, setRating] = useState(0);
const [hovered, setHovered] = useState(0);
const active = hovered || rating;
return (
<ButtonGroup
className="gap-1 border-none"
onMouseLeave={() => setHovered(0)}
aria-label="Rate your experience"
>
{STARS.map((star) => {
const isFilled = star <= active;
return (
<Button
key={star}
variant="ghost"
size="icon-sm"
className="cursor-pointer border-none bg-transparent! hover:bg-transparent!"
onMouseEnter={() => setHovered(star)}
onClick={() => setRating(star)}
aria-label={`Rate ${star} out of 5`}
aria-pressed={star === rating}
>
<motion.span
className="block"
animate={isFilled ? { scale: [1, 1.25, 1] } : { scale: 1 }}
transition={{ duration: 0.25, ease: "easeOut" }}
>
<StarIcon
className={cn(
"size-5 transition-colors",
isFilled
? "fill-amber-300 text-amber-300"
: "fill-transparent text-muted-foreground",
)}
/>
</motion.span>
</Button>
);
})}
</ButtonGroup>
);
};
export default RatingButtonGroup;
components/ui/button-group.tsx
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
import { Separator } from "@/components/ui/separator"
const buttonGroupVariants = cva(
"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
{
variants: {
orientation: {
horizontal:
"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
vertical:
"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
},
},
defaultVariants: {
orientation: "horizontal",
},
}
)
function ButtonGroup({
className,
orientation,
...props
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
return (
<div
role="group"
data-slot="button-group"
data-orientation={orientation}
className={cn(buttonGroupVariants({ orientation }), className)}
{...props}
/>
)
}
function ButtonGroupText({
className,
render,
...props
}: useRender.ComponentProps<"div">) {
return useRender({
defaultTagName: "div",
props: mergeProps<"div">(
{
className: cn(
"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
className
),
},
props
),
render,
state: {
slot: "button-group-text",
},
})
}
function ButtonGroupSeparator({
className,
orientation = "vertical",
...props
}: React.ComponentProps<typeof Separator>) {
return (
<Separator
data-slot="button-group-separator"
orientation={orientation}
className={cn(
"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
className
)}
{...props}
/>
)
}
export {
ButtonGroup,
ButtonGroupSeparator,
ButtonGroupText,
buttonGroupVariants,
}
components/ui/button.tsx
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/80",
outline:
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost:
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
destructive:
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default:
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
icon: "size-8",
"icon-xs":
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
"icon-sm":
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
"icon-lg": "size-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Button({
className,
variant = "default",
size = "default",
...props
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
return (
<ButtonPrimitive
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
}
export { Button, buttonVariants }
lib/utils.ts
import { config } from "@/config";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export function capitalize(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
type GroupBy<T, K extends keyof T> = Record<string, T[]>;
export function groupBy<T, K extends keyof T>(
array: T[],
key: K
): GroupBy<T, K> {
return array.reduce((acc, item) => {
const keyValue = String(item[key]);
if (!acc[keyValue]) {
acc[keyValue] = [];
}
acc[keyValue].push(item);
return acc;
}, {} as GroupBy<T, K>);
}
export function absoluteUrl(path: string) {
return process.env.NODE_ENV === "development"
? `http://localhost:3000/${path}`
: `${config.appUrl}/${path}`;
}
config.ts
export const config = {
appUrl:
process.env.NODE_ENV === "production"
? process.env.VERCEL_PROJECT_PRODUCTION_URL ??
process.env.NEXT_PUBLIC_APP_URL!
: "http://localhost:3000",
social: {
github: "https://github.com/shadcnspace/shadcnspace",
twitter: "https://twitter.com/",
},
};
components/ui/separator.tsx
"use client"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { cn } from "@/lib/utils"
function Separator({
className,
orientation = "horizontal",
...props
}: SeparatorPrimitive.Props) {
return (
<SeparatorPrimitive
data-slot="separator"
orientation={orientation}
className={cn(
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
className
)}
{...props}
/>
)
}
export { Separator }
demo.tsx
export { default as default } from "@/components/shadcn-space/button-group/button-group-13";CSS
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
"Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-amber-300: oklch(87.9% 0.169 91.605);
--spacing: 0.25rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--font-weight-medium: 500;
--radius-md: calc(var(--radius) - 2px);
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-font-feature-settings: "cv02", "cv03", "cv04", "cv11";
--default-mono-font-family: var(--font-mono);
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer utilities {
.relative {
position: relative;
}
.block {
display: block;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.size-5 {
width: calc(var(--spacing) * 5);
height: calc(var(--spacing) * 5);
}
.size-6 {
width: calc(var(--spacing) * 6);
height: calc(var(--spacing) * 6);
}
.size-7 {
width: calc(var(--spacing) * 7);
height: calc(var(--spacing) * 7);
}
.size-8 {
width: calc(var(--spacing) * 8);
height: calc(var(--spacing) * 8);
}
.size-9 {
width: calc(var(--spacing) * 9);
height: calc(var(--spacing) * 9);
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-7 {
height: calc(var(--spacing) * 7);
}
.h-8 {
height: calc(var(--spacing) * 8);
}
.h-9 {
height: calc(var(--spacing) * 9);
}
.w-fit {
width: fit-content;
}
.shrink-0 {
flex-shrink: 0;
}
.cursor-pointer {
cursor: pointer;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.items-stretch {
align-items: stretch;
}
.justify-center {
justify-content: center;
}
.gap-1 {
gap: var(--spacing);
}
.gap-1\.5 {
gap: calc(var(--spacing) * 1.5);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
.self-stretch {
align-self: stretch;
}
.rounded-\[min\(var\(--radius-md\)\,10px\)\] {
border-radius: min(var(--radius-md), 10px);
}
.rounded-\[min\(var\(--radius-md\)\,12px\)\] {
border-radius: min(var(--radius-md), 12px);
}
.rounded-lg {
border-radius: var(--radius);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-none {
--tw-border-style: none;
border-style: none;
}
.border-border {
border-color: var(--border);
}
.border-transparent {
border-color: transparent;
}
.bg-background {
background-color: var(--background);
}
.bg-border {
background-color: var(--border);
}
.bg-destructive\/10 {
background-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
}
}
.bg-input {
background-color: var(--input);
}
.bg-muted {
background-color: var(--muted);
}
.bg-primary {
background-color: var(--primary);
}
.bg-secondary {
background-color: var(--secondary);
}
.bg-transparent\! {
background-color: transparent !important;
}
.bg-clip-padding {
background-clip: padding-box;
}
.fill-amber-300 {
fill: var(--color-amber-300);
}
.fill-transparent {
fill: transparent;
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
.px-2\.5 {
padding-inline: calc(var(--spacing) * 2.5);
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[0\.8rem\] {
font-size: 0.8rem;
}
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.whitespace-nowrap {
white-space: nowrap;
}
.text-amber-300 {
color: var(--color-amber-300);
}
.text-destructive {
color: var(--destructive);
}
.text-muted-foreground {
color: var(--muted-foreground);
}
.text-primary {
color: var(--primary);
}
.text-primary-foreground {
color: var(--primary-foreground);
}
.text-secondary-foreground {
color: var(--secondary-foreground);
}
.underline-offset-4 {
text-underline-offset: 4px;
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-all {
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.outline-none {
--tw-outline-style: none;
outline-style: none;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
@media (hover: hover) {
.hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover {
background-color: var(--secondary);
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover {
background-color: color-mix(in oklch,var(--secondary),var(--foreground) 5%);
}
}
.hover\:bg-destructive\/20:hover {
background-color: var(--destructive);
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-destructive\/20:hover {
background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
}
}
.hover\:bg-muted:hover {
background-color: var(--muted);
}
.hover\:bg-primary\/80:hover {
background-color: var(--primary);
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-primary\/80:hover {
background-color: color-mix(in oklab, var(--primary) 80%, transparent);
}
}
.hover\:bg-transparent\!:hover {
background-color: transparent !important;
}
.hover\:text-foreground:hover {
color: var(--foreground);
}
.hover\:underline:hover {
text-decoration-line: underline;
}
}
.focus-visible\:border-destructive\/40:focus-visible {
border-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
}
}
.focus-visible\:border-ring:focus-visible {
border-color: var(--ring);
}
.focus-visible\:ring-3:focus-visible {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-destructive\/20:focus-visible {
--tw-ring-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
}
}
.focus-visible\:ring-ring\/50:focus-visible {
--tw-ring-color: var(--ring);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
}
}
:is(.\*\:focus-visible\:relative > *):focus-visible {
position: relative;
}
:is(.\*\:focus-visible\:z-10 > *):focus-visible {
z-index: 10;
}
.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
--tw-translate-y: 1px;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:opacity-50:disabled {
opacity: 50%;
}
:where([data-slot="button-group"]) .in-data-\[slot\=button-group\]\:rounded-lg {
border-radius: var(--radius);
}
.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon="inline-end"]) {
padding-right: calc(var(--spacing) * 1.5);
}
.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon="inline-end"]) {
padding-right: calc(var(--spacing) * 2);
}
.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon="inline-start"]) {
padding-left: calc(var(--spacing) * 1.5);
}
.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon="inline-start"]) {
padding-left: calc(var(--spacing) * 2);
}
.has-\[\>\[data-slot\=button-group\]\]\:gap-2:has( > [data-slot=button-group]) {
gap: calc(var(--spacing) * 2);
}
.aria-expanded\:bg-muted[aria-expanded="true"] {
background-color: var(--muted);
}
.aria-expanded\:bg-secondary[aria-expanded="true"] {
background-color: var(--secondary);
}
.aria-expanded\:text-foreground[aria-expanded="true"] {
color: var(--foreground);
}
.aria-expanded\:text-secondary-foreground[aria-expanded="true"] {
color: var(--secondary-foreground);
}
.aria-invalid\:border-destructive[aria-invalid="true"] {
border-color: var(--destructive);
}
.aria-invalid\:ring-3[aria-invalid="true"] {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
--tw-ring-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
}
}
.data-horizontal\:mx-px[data-horizontal] {
margin-inline: 1px;
}
.data-horizontal\:h-px[data-horizontal] {
height: 1px;
}
.data-horizontal\:w-auto[data-horizontal] {
width: auto;
}
.data-horizontal\:w-full[data-horizontal] {
width: 100%;
}
:is(.\*\:data-slot\:rounded-r-none > *)[data-slot] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
:is(.\*\:data-slot\:rounded-b-none > *)[data-slot] {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.data-vertical\:my-px[data-vertical] {
margin-block: 1px;
}
.data-vertical\:h-auto[data-vertical] {
height: auto;
}
.data-vertical\:w-px[data-vertical] {
width: 1px;
}
.data-vertical\:self-stretch[data-vertical] {
align-self: stretch;
}
.dark\:border-input:where(.dark, .dark *) {
border-color: var(--input);
}
.dark\:bg-destructive\/20:where(.dark, .dark *) {
background-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
}
}
.dark\:bg-input\/30:where(.dark, .dark *) {
background-color: var(--input);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--input) 30%, transparent);
}
}
@media (hover: hover) {
.dark\:hover\:bg-destructive\/30:where(.dark, .dark *):hover {
background-color: var(--destructive);
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:hover\:bg-destructive\/30:where(.dark, .dark *):hover {
background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
}
}
.dark\:hover\:bg-input\/50:where(.dark, .dark *):hover {
background-color: var(--input);
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:hover\:bg-input\/50:where(.dark, .dark *):hover {
background-color: color-mix(in oklab, var(--input) 50%, transparent);
}
}
.dark\:hover\:bg-muted\/50:where(.dark, .dark *):hover {
background-color: var(--muted);
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:hover\:bg-muted\/50:where(.dark, .dark *):hover {
background-color: color-mix(in oklab, var(--muted) 50%, transparent);
}
}
}
.dark\:focus-visible\:ring-destructive\/40:where(.dark, .dark *):focus-visible {
--tw-ring-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
}
}
.dark\:aria-invalid\:border-destructive\/50:where(.dark, .dark *)[aria-invalid="true"] {
border-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
}
}
.dark\:aria-invalid\:ring-destructive\/40:where(.dark, .dark *)[aria-invalid="true"] {
--tw-ring-color: var(--destructive);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
}
}
.\[\&_svg\]\:pointer-events-none svg {
pointer-events: none;
}
.\[\&_svg\]\:shrink-0 svg {
flex-shrink: 0;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*='size-']) {
width: calc(var(--spacing) * 3);
height: calc(var(--spacing) * 3);
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*='size-']) {
width: calc(var(--spacing) * 3.5);
height: calc(var(--spacing) * 3.5);
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
.has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-lg:has(:is(select[aria-hidden=true]:last-child)) > [data-slot=select-trigger]:last-of-type {
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit > [data-slot=select-trigger]:not([class*='w-']) {
width: fit-content;
}
.\[\&\>\[data-slot\]\:not\(\:has\(\~\[data-slot\]\)\)\]\:rounded-r-lg\! > [data-slot]:not(:has( ~ [data-slot])) {
border-top-right-radius: var(--radius) !important;
border-bottom-right-radius: var(--radius) !important;
}
.\[\&\>\[data-slot\]\:not\(\:has\(\~\[data-slot\]\)\)\]\:rounded-b-lg\! > [data-slot]:not(:has( ~ [data-slot])) {
border-bottom-right-radius: var(--radius) !important;
border-bottom-left-radius: var(--radius) !important;
}
.\[\&\>\[data-slot\]\~\[data-slot\]\]\:rounded-t-none > [data-slot] ~ [data-slot] {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.\[\&\>\[data-slot\]\~\[data-slot\]\]\:rounded-l-none > [data-slot] ~ [data-slot] {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.\[\&\>\[data-slot\]\~\[data-slot\]\]\:border-t-0 > [data-slot] ~ [data-slot] {
border-top-style: var(--tw-border-style);
border-top-width: 0px;
}
.\[\&\>\[data-slot\]\~\[data-slot\]\]\:border-l-0 > [data-slot] ~ [data-slot] {
border-left-style: var(--tw-border-style);
border-left-width: 0px;
}
.\[\&\>input\]\:flex-1 > input {
flex: 1;
}
}
:root {
--background: #fff;
--foreground: #111;
--primary: #171717;
--primary-foreground: #fff;
--secondary: #eee;
--secondary-foreground: #171717;
--muted: #eee;
--muted-foreground: #666;
--accent: #eee;
--accent-foreground: #171717;
--border: #ddd;
--input: #ddd;
--ring: #777;
--destructive: #dc2626;
--destructive-foreground: #fff;
--popover: #fff;
--popover-foreground: #111;
--success: #15803d;
--success-foreground: #fff;
--radius: .625rem;
--hairline: 1px;
}
.dark {
--background: #090909;
--foreground: #fafafa;
--primary: #fafafa;
--primary-foreground: #171717;
--secondary: #262626;
--secondary-foreground: #fafafa;
--muted: #262626;
--muted-foreground: #a3a3a3;
--accent: #262626;
--accent-foreground: #fafafa;
--border: #333;
--input: #333;
--popover: #171717;
--popover-foreground: #fafafa;
}
:root {
--radius: 0.5rem;
--background: oklch(1 0 0);
--foreground: oklch(0.1296 0.0274 261.69);
--card: oklch(1 0 0);
--card-foreground: oklch(0.1296 0.0274 261.69);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.1296 0.0274 261.69);
--primary: oklch(0.1296 0.0274 261.69);
--primary-foreground: oklch(0.9276 0.0058 264.53);
--secondary: oklch(0.967 0.0029 264.54);
--secondary-foreground: oklch(0.1296 0.0274 261.69);
--muted: oklch(0.967 0.0029 264.54);
--muted-foreground: oklch(0.4461 0.0263 256.8);
--accent: oklch(0.967 0.0029 264.54);
--accent-foreground: oklch(0.1296 0.0274 261.69);
--destructive: oklch(0.6368 0.2078 25.33);
--border: oklch(0.9276 0.0058 264.53);
--input: oklch(0.922 0 0);
--ring: oklch(0.7137 0.0192 261.32);
--chart-1: oklch(63.681% 0.20784 25.315);
--chart-2: oklch(78.453% 0.13254 181.95);
--chart-3: oklch(62.31% 0.1881 259.83);
--chart-4: oklch(87.896% 0.15335 91.611);
--chart-5: oklch(75.763% 0.15899 55.922);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.1296 0.0274 261.69);
--sidebar-primary: oklch(0.1296 0.0274 261.69);
--sidebar-primary-foreground: oklch(0.9276 0.0058 264.53);
--sidebar-accent: oklch(0.967 0.0029 264.54);
--sidebar-accent-foreground: oklch(0.1296 0.0274 261.69);
--sidebar-border: oklch(0.9276 0.0058 264.53);
--sidebar-ring: oklch(0.7137 0.0192 261.32);
}
.dark {
--background: oklch(0.1296 0.0274 261.69);
--foreground: oklch(0.9276 0.0058 264.53);
--card: oklch(0.1296 0.0274 261.69);
--card-foreground: oklch(0.9276 0.0058 264.53);
--popover: oklch(0.1296 0.0274 261.69);
--popover-foreground: oklch(0.9276 0.0058 264.53);
--primary: oklch(0.9276 0.0058 264.53);
--primary-foreground: oklch(0.1296 0.0274 261.69);
--secondary: oklch(0.3729 0.0306 259.73);
--secondary-foreground: oklch(0.9276 0.0058 264.53);
--muted: oklch(0.2781 0.0296 256.85);
--muted-foreground: oklch(0.8717 0.0093 258.34);
--accent: oklch(0.2781 0.0296 256.85);
--accent-foreground: oklch(0.9276 0.0058 264.53);
--destructive: oklch(0.6368 0.2078 25.33);
--border: oklch(27.808% 0.02963 256.871 / 70%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.4461 0.0263 256.8);
--chart-1: oklch(63.681% 0.20784 25.315);
--chart-2: oklch(78.453% 0.13254 181.95);
--chart-3: oklch(62.31% 0.1881 259.83);
--chart-4: oklch(87.896% 0.15335 91.611);
--chart-5: oklch(75.763% 0.15899 55.922);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.9276 0.0058 264.53);
--sidebar-primary: oklch(0.9276 0.0058 264.53);
--sidebar-primary-foreground: oklch(0.1296 0.0274 261.69);
--sidebar-accent: oklch(0.2781 0.0296 256.85);
--sidebar-accent-foreground: oklch(0.9276 0.0058 264.53);
--sidebar-border: var(--border);
--sidebar-ring: oklch(0.4461 0.0263 256.8);
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-inset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
syntax: "*";
inherits: false;
}
@property --tw-ring-offset-width {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
@property --tw-ring-offset-color {
syntax: "*";
inherits: false;
initial-value: #fff;
}
@property --tw-ring-offset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "*";
inherits: false;
initial-value: 0;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-border-style: solid;
--tw-font-weight: initial;
--tw-outline-style: solid;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
}
}
}