diff --git a/package-lock.json b/package-lock.json index b110e33939..e837bfb358 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1", "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", @@ -8563,6 +8564,36 @@ } } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.1.tgz", + "integrity": "sha512-0i/EKJ222Afa1FE0C6pNJxDq1itzcl3HChE9DwskA4th4KRse8ojx8a1nVcOjwJdbpDLcz7uol77yYnQNMHdKw==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collapsible": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz", diff --git a/package.json b/package.json index 5d1eac3f05..649bf6b2e1 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "dev:turbo": "next dev --turbo", "build": "NODE_OPTIONS='--max-old-space-size=4096' TS_CONFIG_PATH='./tsconfig.build.json' next build", "start": "next start", - "type-check": "tsc --pretty --noEmit --incremental false --project './tsconfig.build.json'", + "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc --pretty --noEmit --incremental false --project './tsconfig.build.json'", "write-check": "npx @biomejs/biome check --write --unsafe .", "snyk-protect": "snyk-protect", "postinstall": "npx dotenv-cli -e .env.local -- bash -c 'npm i --no-save --ignore-scripts $WAAS_WEB_URL $WAAS_VIEM_URL'", @@ -48,6 +48,7 @@ "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1", "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", diff --git a/src/v2/components/ui/Checkbox.stories.tsx b/src/v2/components/ui/Checkbox.stories.tsx new file mode 100644 index 0000000000..c1062272b2 --- /dev/null +++ b/src/v2/components/ui/Checkbox.stories.tsx @@ -0,0 +1,33 @@ +import { Meta, StoryObj } from "@storybook/react" +import { Checkbox, CheckboxProps } from "./Checkbox" +import { Label } from "./Label" + +const CheckboxExample = (props: CheckboxProps) => { + return ( +
+ + +
+ ) +} + +const meta: Meta = { + title: "Design system/Checkbox", + component: CheckboxExample, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + disabled: false, + }, + argTypes: { + disabled: { + type: "boolean", + control: "boolean", + }, + }, +} diff --git a/src/v2/components/ui/Checkbox.tsx b/src/v2/components/ui/Checkbox.tsx new file mode 100644 index 0000000000..a1a3863618 --- /dev/null +++ b/src/v2/components/ui/Checkbox.tsx @@ -0,0 +1,30 @@ +"use client" + +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" + +import { cn } from "@/lib/utils" +import { Check } from "@phosphor-icons/react/dist/ssr" +import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react" + +export type CheckboxProps = ComponentPropsWithoutRef + +const Checkbox = forwardRef< + ElementRef, + CheckboxProps +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox }