@qasa/qds-ui 0.10.0-next.7 → 0.10.0-next.9

package/dist/esm/types/components/checkbox/checkbox.d.ts

@@ -0,0 +1,70 @@
+import type { ReactElement } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+interface CheckboxOptions {
+    /**
+     * The label for the checkbox. Accepts a string, or a React component for rendering links within the label.
+     *
+     * @example
+     * ```jsx
+     * <Checkbox label="I agree to the terms and conditions" />
+     * ```
+     *
+     * @example
+     * ```jsx
+     * <Checkbox
+     *   label={
+     *    <>
+     *      I agree to <Link href="/terms">the terms and conditions</Link>
+     *    </>
+     *  }
+     * />
+     * ```
+     */
+    label: string | ReactElement<unknown>;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
+     */
+    isChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
+     */
+    checked?: boolean;
+    /**
+     * Event handler called when the checked state of the checkbox changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * If `true` the checkbox will render in its invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true` it prevents the user from interacting with the checkbox.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true` the user must check the checkbox before the owning form can be submitted.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * The value given as data when submitted with a `name`.
+     */
+    value?: string;
+}
+export declare type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'asChild' | 'children' | 'checked' | 'defaultChecked' | keyof CheckboxOptions> & CheckboxOptions;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "children" | "asChild" | keyof CheckboxOptions> & CheckboxOptions & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/esm/types/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './checkbox';

package/dist/esm/types/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './avatar';
 export * from './button';
+export * from './checkbox';
 export * from './divider';
 export * from './dropdown-menu';
 export * from './heading';

package/dist/esm/types/styles/common-styles.d.ts

@@ -408,7 +408,7 @@ export declare const getFormFieldBaseStyles: (theme: {
         borderColor: string;
         boxShadow: `0 0 0 1px ${string}`;
     };
-    '&[aria-invalid=true]': {
+    '&[aria-invalid="true"]': {
         borderColor: string;
         '&:focus': {
             boxShadow: `0 0 0 1px ${string}`;

package/dist/esm/types/utils/html-attributes.d.ts

@@ -1,3 +1,4 @@
 declare type Booleanish = boolean | 'true' | 'false';
 export declare const dataAttr: (condition: boolean | undefined) => Booleanish;
+export declare const ariaAttr: (condition: boolean | undefined) => Booleanish;
 export {};

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, useLayoutEffect } from 'react';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, ReactElement, useLayoutEffect } from 'react';
 import { Options } from '@emotion/cache';
 import * as _emotion_react from '@emotion/react';
 import { CSSObject } from '@emotion/react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
 import * as _emotion_styled from '@emotion/styled';
 import { LucideIcon } from 'lucide-react';
@@ -1444,7 +1445,7 @@ declare const getFormFieldBaseStyles: (theme: {
         borderColor: string;
         boxShadow: `0 0 0 1px ${string}`;
     };
-    '&[aria-invalid=true]': {
+    '&[aria-invalid="true"]': {
         borderColor: string;
         '&:focus': {
             boxShadow: `0 0 0 1px ${string}`;
@@ -2419,6 +2420,74 @@ declare type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
 declare type ButtonProps = PropsOf<PolymorphicButton>;
 declare const Button: PolymorphicButton;
 
+interface CheckboxOptions {
+    /**
+     * The label for the checkbox. Accepts a string, or a React component for rendering links within the label.
+     *
+     * @example
+     * ```jsx
+     * <Checkbox label="I agree to the terms and conditions" />
+     * ```
+     *
+     * @example
+     * ```jsx
+     * <Checkbox
+     *   label={
+     *    <>
+     *      I agree to <Link href="/terms">the terms and conditions</Link>
+     *    </>
+     *  }
+     * />
+     * ```
+     */
+    label: string | ReactElement<unknown>;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
+     */
+    isChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
+     */
+    checked?: boolean;
+    /**
+     * Event handler called when the checked state of the checkbox changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * If `true` the checkbox will render in its invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true` it prevents the user from interacting with the checkbox.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true` the user must check the checkbox before the owning form can be submitted.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * The value given as data when submitted with a `name`.
+     */
+    value?: string;
+}
+declare type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'asChild' | 'children' | 'checked' | 'defaultChecked' | keyof CheckboxOptions> & CheckboxOptions;
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "children" | "asChild" | keyof CheckboxOptions> & CheckboxOptions & react.RefAttributes<HTMLButtonElement>>;
+
 interface DividerOptions {
     /**
      * The orientation of the divider.
@@ -5198,4 +5267,4 @@ declare function useStableId(fixedId?: string | null): string;
  */
 declare const useSafeLayoutEffect: typeof useLayoutEffect;
 
-export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, Divider, DividerProps, DropdownMenu, DropdownMenuContentProps, DropdownMenuDividerProps, DropdownMenuItemProps, DropdownMenuRootProps, DropdownMenuTriggerProps, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, ImageIcon, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, PropsOf, QdsProvider, RadioCardProps, RadioGroup, RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };
+export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, Checkbox, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, Divider, DividerProps, DropdownMenu, DropdownMenuContentProps, DropdownMenuDividerProps, DropdownMenuItemProps, DropdownMenuRootProps, DropdownMenuTriggerProps, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, ImageIcon, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, PropsOf, QdsProvider, RadioCardProps, RadioGroup, RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qasa/qds-ui",
-  "version": "0.10.0-next.7",
+  "version": "0.10.0-next.9",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -106,6 +106,7 @@
     "node": ">=14"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6"