@qasa/qds-ui 0.10.0-next.1 → 0.10.0-next.11

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/display-text/display-text.d.ts

@@ -0,0 +1,29 @@
+import type * as Polymorphic from '../../utils/polymorphic';
+import type { Theme } from '../../theme';
+declare type DisplaySize = keyof Theme['typography']['display'];
+declare type DisplayTextAlign = 'left' | 'center' | 'right';
+declare type DisplayTextWrap = 'pretty' | 'balance' | 'wrap' | 'nowrap' | 'stable';
+interface DisplayTextOptions {
+    /**
+     * Sets the visual size of the display text.
+     * To override the rendered tag, use the `as` prop.
+     *
+     * @default 'md'
+     */
+    size?: DisplaySize;
+    /**
+     * Sets the text alignment
+     * @default 'left'
+     */
+    textAlign?: DisplayTextAlign;
+    /**
+     * Sets the text wrapping
+     * @default 'pretty'
+     * Read more on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap)
+     */
+    textWrap?: DisplayTextWrap;
+}
+declare type DisplayTextComponent = Polymorphic.ForwardRefComponent<'h2', DisplayTextOptions>;
+export declare type DisplayTextProps = Polymorphic.PropsOf<DisplayTextComponent>;
+export declare const DisplayText: DisplayTextComponent;
+export {};

package/dist/esm/types/components/display-text/index.d.ts

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

package/dist/esm/types/components/dropdown-menu/dropdown-menu-content.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
+import type { HTMLQdsProps } from '../../types';
+declare type PrimitiveContentProps = DropdownPrimitive.MenuContentProps;
+interface DropdownMenuContentOptions {
+    /**
+     * Event handler called when focus moves to the trigger after closing.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onCloseAutofocus?: PrimitiveContentProps['onCloseAutoFocus'];
+    /**
+     * Event handler called when the escape key is down.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onEscapeKeyDown?: PrimitiveContentProps['onEscapeKeyDown'];
+    /**
+     * Event handler called when a pointer event occurs outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onPointerDownOutside?: PrimitiveContentProps['onPointerDownOutside'];
+    /**
+     * Event handler called when focus moves outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onFocusOutside?: PrimitiveContentProps['onFocusOutside'];
+    /**
+     * Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onInteractOutside?: PrimitiveContentProps['onInteractOutside'];
+    /**
+     * The preferred side of the trigger to render against when open.
+     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+     *
+     * @default "bottom"
+     */
+    side?: PrimitiveContentProps['side'];
+    /**
+     * The distance in pixels from the trigger.
+     *
+     * @default 8
+     */
+    sideOffset?: PrimitiveContentProps['sideOffset'];
+    /**
+     * The preferred alignment against the trigger. May change when collisions occur.
+     *
+     * @default "center"
+     */
+    align?: PrimitiveContentProps['align'];
+    /**
+     * The element used as the collision boundary.
+     * By default this is the viewport, though you can provide additional element(s) to be included in this check.
+     *
+     * @default []
+     */
+    collisionBoundary?: PrimitiveContentProps['collisionBoundary'];
+    /**
+     * Whether to hide the content when the trigger becomes fully occluded.
+     *
+     * @default false
+     */
+    hideWhenDetached?: PrimitiveContentProps['hideWhenDetached'];
+}
+export interface DropdownMenuContentProps extends HTMLQdsProps<'div'>, DropdownMenuContentOptions {
+}
+export declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/types/components/dropdown-menu/dropdown-menu-divider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { HTMLQdsProps } from '../../types';
+export declare type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
+export declare const DropdownMenuDivider: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/types/components/dropdown-menu/dropdown-menu-item.d.ts

@@ -0,0 +1,28 @@
+import type { ElementType } from 'react';
+import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
+import type { IconProps } from '../icon';
+interface DropdownMenuItemOptions {
+    /**
+     * If `true`, the item will be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Event handler called when the user selects an item (via mouse or keyboard).
+     * Calling `event.preventDefault` in this handler will prevent the dropdown from closing when selecting that item.
+     */
+    onSelect?: (event: Event) => void;
+    /**
+     * Optional text used for typeahead purposes.
+     * By default the typeahead behavior will use the `.textContent` of the item.
+     * Use this when the content is complex, or you have non-textual content inside.
+     */
+    textValue?: string;
+    /**
+     * Optional icon to display on the left side of the item content.
+     */
+    icon?: ElementType<IconProps>;
+}
+export interface DropdownMenuItemProps extends Omit<DropdownPrimitive.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions>, DropdownMenuItemOptions {
+}
+export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/types/components/dropdown-menu/dropdown-menu-trigger.d.ts

@@ -0,0 +1,5 @@
+import type * as Polymorphic from '../../utils/polymorphic';
+declare type DropdownTriggerComponent = Polymorphic.ForwardRefComponent<'button'>;
+export declare type DropdownMenuTriggerProps = Polymorphic.PropsOf<DropdownTriggerComponent>;
+export declare const DropdownMenuTrigger: DropdownTriggerComponent;
+export {};

package/dist/esm/types/components/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import { type DropdownMenuContentProps } from './dropdown-menu-content';
+import { type DropdownMenuDividerProps } from './dropdown-menu-divider';
+import { type DropdownMenuItemProps } from './dropdown-menu-item';
+import type { DropdownMenuTriggerProps } from './dropdown-menu-trigger';
+interface DropdownMenuRootProps {
+    children: ReactNode;
+    /**
+     * If `true` the dropdown menu will be open
+     */
+    isOpen?: boolean;
+    /**
+     * The open state of the submenu when it is initially rendered.
+     * Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback invoked open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+declare function DropdownMenuRoot(props: DropdownMenuRootProps): JSX.Element;
+export declare const DropdownMenu: typeof DropdownMenuRoot & {
+    Trigger: import("../../utils/polymorphic").ForwardRefComponent<"button", {}>;
+    Content: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Divider: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type { DropdownMenuRootProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuDividerProps, };

package/dist/esm/types/components/dropdown-menu/index.d.ts

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