@qasa/qds-ui 0.9.0 → 0.10.0-next.0

package/dist/esm/types/components/_internal/form-parts.d.ts

@@ -7,4 +7,4 @@ export declare const ErrorMessage: import("@emotion/styled").StyledComponent<{
 export declare const HelperText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -12,6 +12,7 @@ export * from './link';
 export * from './loading-dots';
 export * from './paragraph';
 export * from './primitives';
+export * from './radio-group';
 export * from './select';
 export * from './spacer';
 export * from './stack';

package/dist/esm/types/components/radio-group/index.d.ts

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

package/dist/esm/types/components/radio-group/radio-card.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+interface RadioCardOptions {
+    label: string;
+    /**
+     * Text that provides additional guidance to the user
+     */
+    helperText?: string;
+    /**
+     * If `true` the radio card will be required using the HTML `required` attribute.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * If `true` the radio card will be disabled using the HTML `disabled` attribute.
+     * @default false
+     */
+    isDisabled?: boolean;
+}
+export interface RadioCardProps extends Omit<RadioGroupPrimitive.RadioGroupItemProps, 'asChild' | keyof RadioCardOptions>, RadioCardOptions {
+}
+export declare const RadioCard: import("react").ForwardRefExoticComponent<RadioCardProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/esm/types/components/radio-group/radio-group-context.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface RadioGroupContextValue {
+    labelRefCallback: (node: HTMLElement | null) => void;
+    isDisabled: boolean | undefined;
+    errorMessageId?: string;
+}
+interface RadioGroupProviderProps {
+    value: RadioGroupContextValue;
+    children: React.ReactNode;
+}
+export declare function RadioGroupProvider({ value, children }: RadioGroupProviderProps): JSX.Element;
+interface UseRadioGroupContextProps {
+    consumerName: string;
+}
+export declare const useRadioGroupContext: ({ consumerName }: UseRadioGroupContextProps) => RadioGroupContextValue;
+export {};

package/dist/esm/types/components/radio-group/radio-group-label.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { HTMLQdsProps } from '../../types';
+export declare type RadioGroupLabelProps = HTMLQdsProps<'label'>;
+export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "key" | keyof import("react").LabelHTMLAttributes<HTMLLabelElement>> & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/esm/types/components/radio-group/radio-group.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import type { RadioCardProps } from './radio-card';
+import type { RadioGroupLabelProps } from './radio-group-label';
+interface RadioGroupOptions {
+    /**
+     * The value of the radio item that should be checked when initially rendered.
+     * Use when you do not need to control the state of the radio items.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the radio item to check.
+     * Should be used in conjunction with `onValueChange`.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * The name of the group. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * If `true` all child radio items will be disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true` the user must check a radio item before the owning form can be submitted.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * If `true` the radio group will be invalid.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * The error message to display if `isInvalid` is `true`
+     */
+    errorMessage?: string;
+}
+export interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, 'asChild' | keyof RadioGroupOptions>, RadioGroupOptions {
+}
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Card: import("react").ForwardRefExoticComponent<RadioCardProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Label: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "key" | keyof import("react").LabelHTMLAttributes<HTMLLabelElement>> & import("react").RefAttributes<HTMLLabelElement>>;
+};
+export type { RadioGroupLabelProps, RadioCardProps };

package/dist/esm/types/components/radio-group/radio-indicator.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+declare type RadioIndicatorProps = Omit<RadioGroupPrimitive.RadioGroupIndicatorProps, 'asChild' | 'forceMount'>;
+/**
+ * Styled Radix `RadioIndicator` component.
+ * @see Docs https://www.radix-ui.com/primitives/docs/components/radio-group#indicator
+ * @internal Not to be used outside the library.
+ */
+export declare const RadioIndicator: import("react").ForwardRefExoticComponent<RadioIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

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

@@ -414,8 +414,9 @@ export declare const getFormFieldBaseStyles: (theme: {
             boxShadow: `0 0 0 1px ${string}`;
         };
     };
-    '&[disabled]': {
+    '&[disabled], &:disabled, &[data-disabled]': {
         opacity: number;
+        borderColor: string;
     };
     transitionProperty: "opacity, border-color, box-shadow";
     transitionDuration: "120ms";

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

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

package/dist/esm/types/utils/merge-refs.d.ts

@@ -0,0 +1,5 @@
+import type { MutableRefObject, RefCallback } from 'react';
+declare type ReactRef<T> = RefCallback<T> | MutableRefObject<T>;
+declare type Maybe<T> = T | null | undefined;
+export declare const mergeRefs: <T>(...refs: Maybe<ReactRef<T>>[]) => (node: T | null) => void;
+export {};

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import * as _emotion_react from '@emotion/react';
 import { CSSObject } from '@emotion/react';
 import * as _emotion_styled from '@emotion/styled';
 import { LucideIcon } from 'lucide-react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
 declare const theme: {
     mediaQueries: {
@@ -1448,8 +1449,9 @@ declare const getFormFieldBaseStyles: (theme: {
             boxShadow: `0 0 0 1px ${string}`;
         };
     };
-    '&[disabled]': {
+    '&[disabled], &:disabled, &[data-disabled]': {
         opacity: number;
+        borderColor: string;
     };
     transitionProperty: "opacity, border-color, box-shadow";
     transitionDuration: "120ms";
@@ -5251,6 +5253,74 @@ interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$
 }
 declare const TextareaBase: react.ForwardRefExoticComponent<TextareaBaseProps & react.RefAttributes<HTMLTextAreaElement>>;
 
+interface RadioCardOptions {
+    label: string;
+    /**
+     * Text that provides additional guidance to the user
+     */
+    helperText?: string;
+    /**
+     * If `true` the radio card will be required using the HTML `required` attribute.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * If `true` the radio card will be disabled using the HTML `disabled` attribute.
+     * @default false
+     */
+    isDisabled?: boolean;
+}
+interface RadioCardProps extends Omit<RadioGroupPrimitive.RadioGroupItemProps, 'asChild' | keyof RadioCardOptions>, RadioCardOptions {
+}
+
+declare type RadioGroupLabelProps = HTMLQdsProps<'label'>;
+
+interface RadioGroupOptions {
+    /**
+     * The value of the radio item that should be checked when initially rendered.
+     * Use when you do not need to control the state of the radio items.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the radio item to check.
+     * Should be used in conjunction with `onValueChange`.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * The name of the group. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * If `true` all child radio items will be disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true` the user must check a radio item before the owning form can be submitted.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * If `true` the radio group will be invalid.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * The error message to display if `isInvalid` is `true`
+     */
+    errorMessage?: string;
+}
+interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, 'asChild' | keyof RadioGroupOptions>, RadioGroupOptions {
+}
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>> & {
+    Card: react.ForwardRefExoticComponent<RadioCardProps & react.RefAttributes<HTMLButtonElement>>;
+    Label: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "key" | keyof react.LabelHTMLAttributes<HTMLLabelElement>> & react.RefAttributes<HTMLLabelElement>>;
+};
+
 interface SelectOptionOptions {
     isDisabled?: boolean;
 }
@@ -5449,4 +5519,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, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, Image, ImageIcon, ImageProps, 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, 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, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };
+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, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, Image, ImageIcon, ImageProps, 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, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qasa/qds-ui",
-  "version": "0.9.0",
+  "version": "0.10.0-next.0",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -101,5 +101,8 @@
   },
   "engines": {
     "node": ">=14"
+  },
+  "dependencies": {
+    "@radix-ui/react-radio-group": "^1.1.3"
   }
 }