@koobiq/react-components 0.0.1-beta.8 → 0.0.1

package/dist/components/RadioGroup/components/Radio/Radio.js

@@ -1,6 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { mergeProps, isNotNil, clsx } from "@koobiq/react-core";
+import { IconCircleXs16 } from "@koobiq/react-icons";
 import { Radio as Radio$1 } from "@koobiq/react-primitives";
 import s from "./Radio.module.css.js";
 import { useRadioGroupState } from "../../RadioContext.js";
@@ -9,33 +11,57 @@ const Radio = forwardRef(
     const {
       labelPlacement = "end",
       size: sizeProp,
+      isDisabled: isDisabledProp,
+      disabled,
       children,
       slotProps,
       className,
       ...other
     } = props;
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+      deprecate(
+        'Radio: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
     const { size: sizeState } = useRadioGroupState();
     const size = sizeProp || sizeState || "normal";
     const commonProps = {
-      className: ({ error, checked, hovered, disabled, focusVisible }) => clsx(
+      isDisabled,
+      className: ({
+        isInvalid,
+        isSelected,
+        isHovered,
+        isDisabled: isDisabled2,
+        isFocusVisible
+      }) => clsx(
         s.base,
         s[size],
-        error && s.error,
-        checked && s.checked,
-        hovered && s.hovered,
-        disabled && s.disabled,
         s[labelPlacement],
-        focusVisible && s.focusVisible,
+        isInvalid && s.invalid,
+        isHovered && s.hovered,
+        isDisabled2 && s.disabled,
+        isSelected && s.selected,
+        isFocusVisible && s.focusVisible,
         className
       ),
       ...other
     };
     const circleProps = mergeProps({ className: s.circle }, slotProps?.circle);
     const labelProps = slotProps?.label;
-    return /* @__PURE__ */ jsxs(Radio$1, { ...commonProps, ref, children: [
-      /* @__PURE__ */ jsx("span", { ...circleProps }),
-      isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Radio$1,
+      {
+        ...commonProps,
+        "data-size": size,
+        "data-label-placement": labelPlacement,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx("span", { ...circleProps, children: /* @__PURE__ */ jsx(IconCircleXs16, { className: s.icon }) }),
+          isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
+        ]
+      }
+    );
   }
 );
 Radio.displayName = "Radio";

package/dist/components/RadioGroup/components/Radio/Radio.module.css.js

@@ -1,10 +1,11 @@
 const base = "kbq-radio-c3ed31";
 const circle = "kbq-radio-circle-a0903b";
+const icon = "kbq-radio-icon-148a68";
 const normal = "kbq-radio-normal-81ed3e";
 const big = "kbq-radio-big-06db10";
 const hovered = "kbq-radio-hovered-3999f1";
-const checked = "kbq-radio-checked-a71e68";
-const error = "kbq-radio-error-52bb9e";
+const selected = "kbq-radio-selected-15ea41";
+const invalid = "kbq-radio-invalid-e69d52";
 const focusVisible = "kbq-radio-focusVisible-6613a5";
 const disabled = "kbq-radio-disabled-d60f1e";
 const start = "kbq-radio-start-e3dab7";
@@ -12,11 +13,12 @@ const end = "kbq-radio-end-8689f9";
 const s = {
   base,
   circle,
+  icon,
   normal,
   big,
   hovered,
-  checked,
-  error,
+  selected,
+  invalid,
   focusVisible,
   disabled,
   start,
@@ -25,14 +27,15 @@ const s = {
 export {
   base,
   big,
-  checked,
   circle,
   s as default,
   disabled,
   end,
-  error,
   focusVisible,
   hovered,
+  icon,
+  invalid,
   normal,
+  selected,
   start
 };

package/dist/components/RadioGroup/components/Radio/types.d.ts

@@ -1,27 +1,42 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { UseRadioProps } from '@koobiq/react-primitives';
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import { type RadioProps as RadioPropsPrimitive } from '@koobiq/react-primitives';
 export declare const radioPropSize: readonly ["normal", "big"];
 export type RadioPropSize = (typeof radioPropSize)[number];
 export declare const radioPropLabelPlacement: readonly ["start", "end"];
 export type RadioPropLabelPlacement = (typeof radioPropLabelPlacement)[number];
-export type RadioProps = UseRadioProps & {
-    /** The helper text content. */
-    caption?: string;
+type RadioDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+};
+export type RadioProps = ExtendableProps<{
+    /** The content of the component. */
+    children?: ReactNode;
     /**
      * Size.
-     * @default normal
-     * */
+     * @default 'normal'
+     */
     size?: RadioPropSize;
     /**
      * The position of the label.
-     * @default end
-     * */
+     * @default 'end'
+     */
     labelPlacement?: RadioPropLabelPlacement;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
         circle?: ComponentPropsWithRef<'span'>;
         label?: ComponentPropsWithRef<'span'>;
     };
-};
+} & RadioDeprecatedProps, RadioPropsPrimitive>;
+export {};

package/dist/components/RadioGroup/components/Radio/types.js

@@ -1,3 +1,4 @@
+import "@koobiq/react-primitives";
 const radioPropSize = ["normal", "big"];
 const radioPropLabelPlacement = ["start", "end"];
 export {

package/dist/components/RadioGroup/types.d.ts

@@ -1,37 +1,64 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef, ExtendableProps } from '@koobiq/react-core';
-import type { UseRadioGroupProps } from '@koobiq/react-primitives';
+import type { RadioGroupProps as RadioGroupPrimitiveProps } from '@koobiq/react-primitives';
 import type { RadioGroupDescriptionProps, RadioGroupLabelProps } from './components';
 export declare const radioGroupPropSize: readonly ["normal", "big"];
 export type RadioGroupPropSize = (typeof radioGroupPropSize)[number];
 export declare const radioGroupPropOrientation: readonly ["horizontal", "vertical"];
 export type RadioGroupPropOrientation = (typeof radioGroupPropOrientation)[number];
+type RadioGroupDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the component will indicate an error.
+     * @default false
+     * @deprecated
+     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
+     */
+    error?: boolean;
+    /**
+     * It prevents the user from changing the value of the checkbox.
+     * @default false
+     * @deprecated
+     * The "readonly" prop is deprecated. Use "isReadonly" prop to replace it.
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, the input element is required.
+     * @default false
+     * @deprecated
+     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
+     */
+    required?: boolean;
+};
 export type RadioGroupBaseProps = ExtendableProps<{
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /** The content of the component. */
     children?: ReactNode;
     /**
      * Size.
-     * @default normal
-     * */
+     * @default 'normal'
+     */
     size?: RadioGroupPropSize;
-    /** Slots */
-    slotProps?: {
-        root?: ComponentPropsWithRef<'div'>;
-        description?: RadioGroupDescriptionProps;
-        label?: RadioGroupLabelProps;
-    };
     /**
      * The axis the Radio Button(s) should align with.
      * @default 'vertical'
      */
     orientation?: RadioGroupPropOrientation;
-    /** The current value (controlled). */
-    value?: UseRadioGroupProps['value'];
-    /** The default value (uncontrolled). */
-    defaultValue?: UseRadioGroupProps['defaultValue'];
-    /** Handler that is called when the value changes. */
-    onChange?: UseRadioGroupProps['onChange'];
-}, UseRadioGroupProps>;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        description?: RadioGroupDescriptionProps;
+        label?: RadioGroupLabelProps;
+    };
+} & RadioGroupDeprecatedProps, Omit<RadioGroupPrimitiveProps, 'validate' | 'validationBehavior' | 'validationState' | 'errorMessage'>>;
 export type RadioGroupProps = ExtendableComponentPropsWithRef<RadioGroupBaseProps, 'div'>;
+export {};

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,11 @@
+import { Item, Section } from '../Collections';
+import { ListItemText } from '../List';
+import type { SelectComponent } from './index';
+declare const SelectComponent: SelectComponent;
+type CompoundedComponent = typeof SelectComponent & {
+    Item: typeof Item;
+    Section: typeof Section;
+    ItemText: typeof ListItemText;
+};
+export declare const Select: CompoundedComponent;
+export {};

package/dist/components/Select/Select.js

@@ -0,0 +1,204 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
+import { useDOMRef, useBoolean, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
+import { IconChevronDownS16 } from "@koobiq/react-icons";
+import { useSelectState, removeDataAttributes, useSelect, HiddenSelect } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
+import s from "./Select.module.css.js";
+import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
+import { ListInner } from "../List/List.js";
+import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
+import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
+import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
+import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
+import { Item } from "../Collections/Item.js";
+import { Section } from "../Collections/Section.js";
+import { ListItemText } from "../List/components/ListItemText/ListItemText.js";
+function SelectRender(props, ref) {
+  const {
+    fullWidth = false,
+    "data-testid": testId,
+    className,
+    style,
+    open,
+    isOpen: isOpenProp,
+    hiddenLabel,
+    isLabelHidden: isLabelHiddenProp,
+    disabled,
+    isDisabled: isDisabledProp,
+    error,
+    isInvalid: isInvalidProp,
+    required,
+    isRequired: isRequiredProp,
+    caption,
+    placeholder,
+    endAddon,
+    slotProps,
+    startAddon,
+    label,
+    name,
+    errorMessage,
+    renderValue: renderValueProp
+  } = props;
+  const isOpen = isOpenProp ?? open;
+  const isInvalid = isInvalidProp ?? error ?? false;
+  const isDisabled = isDisabledProp ?? disabled ?? false;
+  const isRequired = isRequiredProp ?? required ?? false;
+  const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
+  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+    deprecate(
+      'Select: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "required" in props) {
+    deprecate(
+      'Select: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "error" in props) {
+    deprecate(
+      'Select: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "open" in props) {
+    deprecate(
+      'Select: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "hiddenLabel" in props) {
+    deprecate(
+      'Select: the "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.'
+    );
+  }
+  const domRef = useDOMRef(ref);
+  const state = useSelectState({
+    ...removeDataAttributes(props),
+    isOpen,
+    isInvalid,
+    isDisabled,
+    isRequired
+  });
+  const [opened, { on, off }] = useBoolean(state.isOpen);
+  const {
+    menuProps,
+    valueProps,
+    triggerProps,
+    labelProps: labelPropsAria,
+    descriptionProps,
+    errorMessageProps
+  } = useSelect(
+    {
+      ...removeDataAttributes(props),
+      isOpen,
+      isInvalid,
+      isDisabled,
+      isRequired
+    },
+    { ...state, isOpen: state.isOpen || opened },
+    domRef
+  );
+  const { ref: containerRef, width } = useElementSize();
+  const rootProps = mergeProps({
+    "data-testid": testId,
+    "data-invalid": isInvalid,
+    "data-fullwidth": fullWidth,
+    "data-disabled": isDisabled,
+    "data-required": isRequired,
+    className: clsx(s.base, fullWidth && s.fullWidth, className),
+    style
+  });
+  const listProps = mergeProps(
+    { className: s.list, state },
+    slotProps?.list,
+    menuProps
+  );
+  const labelProps = mergeProps(
+    { isHidden: isLabelHidden, children: label, isRequired },
+    slotProps?.label,
+    labelPropsAria
+  );
+  const groupProps = mergeProps(
+    {
+      slotProps: {
+        end: { className: s.addon },
+        start: { className: s.addon }
+      },
+      startAddon,
+      endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        endAddon,
+        /* @__PURE__ */ jsx(IconChevronDownS16, {})
+      ] }),
+      isInvalid,
+      isDisabled,
+      ref: containerRef
+    },
+    slotProps?.group
+  );
+  const controlProps = mergeProps(
+    {
+      isInvalid,
+      isDisabled,
+      ref: domRef,
+      placeholder
+    },
+    slotProps?.control,
+    valueProps,
+    triggerProps
+  );
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
+  const errorProps = mergeProps(
+    { isInvalid, children: errorMessage },
+    slotProps?.errorMessage,
+    errorMessageProps
+  );
+  const popoverProps = mergeProps(
+    {
+      state,
+      offset: 4,
+      size: width,
+      hideArrow: true,
+      anchorRef: domRef,
+      className: s.popover,
+      placement: "bottom start",
+      type: "listbox",
+      slotProps: {
+        transition: {
+          onEnter: on,
+          onExited: off
+        }
+      }
+    },
+    slotProps?.popover
+  );
+  const renderDefaultValue = (selectedItem) => selectedItem?.rendered;
+  const renderValue = renderValueProp || renderDefaultValue;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
+      /* @__PURE__ */ jsx(
+        HiddenSelect,
+        {
+          name,
+          label,
+          state,
+          triggerRef: domRef,
+          isDisabled
+        }
+      ),
+      /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state?.selectedItem) }) }),
+      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+    ] }),
+    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
+  ] });
+}
+const SelectComponent = forwardRef(SelectRender);
+const Select = SelectComponent;
+Select.Item = Item;
+Select.Section = Section;
+Select.ItemText = ListItemText;
+export {
+  Select
+};

package/dist/components/Select/Select.module.css.js

@@ -0,0 +1,20 @@
+const base = "kbq-select-6d31ad";
+const fullWidth = "kbq-select-fullWidth-1dfc13";
+const addon = "kbq-select-addon-cbc524";
+const popover = "kbq-select-popover-79fc05";
+const list = "kbq-select-list-8ffac0";
+const s = {
+  base,
+  fullWidth,
+  addon,
+  popover,
+  list
+};
+export {
+  addon,
+  base,
+  s as default,
+  fullWidth,
+  list,
+  popover
+};

package/dist/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './types';

package/dist/components/Select/types.d.ts

@@ -0,0 +1,125 @@
+import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { Node } from '@koobiq/react-core';
+import type { AriaSelectProps } from '@koobiq/react-primitives';
+import type { FieldErrorProps, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldInputGroupProps } from '../FieldComponents';
+import type { ListPropItems, ListPropChildren, ListPropDisabledKeys } from '../List';
+import type { PopoverProps } from '../Popover';
+export type SelectKey = string | number;
+export type SelectPropOnSelectionChange<T> = AriaSelectProps<T>['onSelectionChange'];
+type SelectDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     * @deprecated
+     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     * @deprecated
+     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
+     */
+    required?: boolean;
+    /**
+     * Sets the open state of the menu.
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     * @deprecated
+     * The "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.
+     */
+    hiddenLabel?: boolean;
+};
+export type SelectProps<T extends object> = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content to display as the label. */
+    label?: ReactNode;
+    /** The contents of the collection. */
+    children?: ListPropChildren<T>;
+    /** Item objects in the collection. */
+    items?: ListPropItems<T>;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The text appears in a control until the user puts focus on the field. */
+    placeholder?: string;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /** Message for the error state */
+    errorMessage?: ReactNode;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     */
+    isRequired?: boolean;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Ref to the control */
+    ref?: Ref<HTMLButtonElement>;
+    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: ListPropDisabledKeys<T>;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: SelectKey;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: SelectKey | null;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: SelectPropOnSelectionChange<T>;
+    /** Sets the open state of the menu. */
+    isOpen?: boolean;
+    /** Sets the default open state of the menu. */
+    defaultOpen?: boolean;
+    /** Method that is called when the open state of the menu changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** A render function for displaying the selected value. */
+    renderValue?: (props: Node<T> | null) => ReactElement;
+    name?: string;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        popover?: PopoverProps;
+        label?: FieldLabelProps;
+        list?: ListPropChildren<T>;
+        control?: FieldSelectProps;
+        caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
+        errorMessage?: FieldErrorProps;
+    };
+} & SelectDeprecatedProps;
+export type SelectComponent = <T extends object>(props: SelectProps<T>) => ReactElement | null;
+export type SelectRef = ComponentRef<'button'>;
+export {};

package/dist/components/SidePanel/SidePanel.d.ts

@@ -1,2 +1,35 @@
-import type { SidePanelProps } from './types';
-export declare const SidePanel: import("react").ForwardRefExoticComponent<SidePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+import { type BackdropProps } from '../Backdrop';
+import { Dialog, type DialogProps } from '../Dialog';
+declare const SidePanelComponent: import("react").ForwardRefExoticComponent<{
+    size?: import("./types").SidePanelPropSize;
+    placement?: import("./types").SidePanelPropPlacement;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    children?: import("./types").SidePanelPropContent;
+    control?: import("./types").SidePanelPropControl;
+    hideCloseButton?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    portalContainer?: Element;
+    disableExitOnClickOutside?: boolean;
+    disableExitOnEscapeKeyDown?: boolean;
+    hideBackdrop?: boolean;
+    className?: string;
+    'data-testid'?: string | number;
+    disableFocusManagement?: boolean;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    slotProps?: {
+        dialog?: DialogProps;
+        backdrop?: BackdropProps;
+        panel?: import("react").ComponentPropsWithRef<"div">;
+    };
+} & {
+    open?: boolean;
+    position?: import("./types").SidePanelPropPosition;
+} & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof SidePanelComponent & {
+    Header: typeof Dialog.Header;
+    Body: typeof Dialog.Body;
+    Footer: typeof Dialog.Footer;
+};
+export declare const SidePanel: CompoundedComponent;
+export {};