3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-06-03 03:01:52 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Checkbox component

Browse source
This commit is contained in:
Luke Vella 2025-03-24 13:36:02 +00:00
parent cebc32836b
commit 562ad81591
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C
2 changed files with 35 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/tailwind-config/tailwind.config.js
View file

@ -49,6 +49,10 @@ module.exports = {
accent: {
DEFAULT: colors.gray["100"],
},
"action-bar": {
DEFAULT: colors.gray["800"],
foreground: colors.white,
},
muted: {
DEFAULT: colors.gray["100"],
background: colors.gray["50"],
@ -63,6 +67,14 @@ module.exports = {
background: colors.white,
foreground: colors.gray["700"],
},
sidebar: {
DEFAULT: colors.gray["100"],
foreground: colors.gray["700"],
accent: {
DEFAULT: colors.gray["200"],
foreground: colors.gray["800"],
},
},
},
keyframes: {
wiggle: {

40
packages/ui/src/checkbox.tsx
View file

@ -1,31 +1,37 @@
"use client";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Check, Minus } from "lucide-react";
import * as React from "react";
import CheckboxCheckIcon from "./checkbox-check.svg";
import { cn } from "./lib/utils";
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"data-[state=checked]:bg-primary data-[state=checked]:border-primary-600",
"peer inline-flex size-5 shrink-0 items-center justify-center rounded border border-gray-200 bg-gray-50 ring-0 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>(({ className, checked, ...props }, ref) => {
return (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"data-[state=checked]:bg-primary data-[state=checked]:border-primary-700 data-[state=checked]:active:bg-primary-700 data-[state=indeterminate]:active:bg-primary-700 data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground peer size-5 shrink-0 rounded-md border border-gray-300 focus-visible:outline-none focus-visible:ring-1 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:active:border-gray-300",
className,
)}
checked={checked}
{...props}
>
<CheckboxCheckIcon className="text-primary-50 size-2.5" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
));
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
{checked === "indeterminate" ? (
<Minus className="size-4" />
) : (
<Check className="size-4" />
)}
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
);
});
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
export { Checkbox };