mirror of
https://github.com/lukevella/rallly.git
synced 2025-06-09 14:11:51 +02:00
💄 Checkbox component
This commit is contained in:
parent
cebc32836b
commit
562ad81591
2 changed files with 35 additions and 17 deletions
|
@ -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: {
|
||||||
|
|
|
@ -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 };
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue