3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-06-11 15:11:50 +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: { accent: {
DEFAULT: colors.gray["100"], DEFAULT: colors.gray["100"],
}, },
"action-bar": {
DEFAULT: colors.gray["800"],
foreground: colors.white,
},
muted: { muted: {
DEFAULT: colors.gray["100"], DEFAULT: colors.gray["100"],
background: colors.gray["50"], background: colors.gray["50"],
@ -63,6 +67,14 @@ module.exports = {
background: colors.white, background: colors.white,
foreground: colors.gray["700"], foreground: colors.gray["700"],
}, },
sidebar: {
DEFAULT: colors.gray["100"],
foreground: colors.gray["700"],
accent: {
DEFAULT: colors.gray["200"],
foreground: colors.gray["800"],
},
},
}, },
keyframes: { keyframes: {
wiggle: { wiggle: {

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

@ -1,31 +1,37 @@
"use client"; "use client";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Check, Minus } from "lucide-react";
import * as React from "react"; import * as React from "react";
import CheckboxCheckIcon from "./checkbox-check.svg";
import { cn } from "./lib/utils"; import { cn } from "./lib/utils";
const Checkbox = React.forwardRef< const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>, React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => ( >(({ className, checked, ...props }, ref) => {
return (
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
"data-[state=checked]:bg-primary data-[state=checked]:border-primary-600", "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",
"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, className,
)} )}
checked={checked}
{...props} {...props}
> >
<CheckboxPrimitive.Indicator <CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")} className={cn("flex items-center justify-center text-current")}
> >
<CheckboxCheckIcon className="text-primary-50 size-2.5" /> {checked === "indeterminate" ? (
<Minus className="size-4" />
) : (
<Check className="size-4" />
)}
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>
)); );
});
Checkbox.displayName = CheckboxPrimitive.Root.displayName; Checkbox.displayName = CheckboxPrimitive.Root.displayName;
export { Checkbox }; export { Checkbox };