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

package/dist/components/FieldComponents/FieldControl/FieldControl.d.ts

@@ -1,10 +1,8 @@
-import type { TextFieldProps, TextFieldRef } from '@koobiq/react-primitives';
-export type FieldControlProps = TextFieldProps & {
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import { type DataAttributeProps } from '@koobiq/react-core';
+export type FieldControlBaseProps = {
     fullWidth?: boolean;
     className?: string;
-};
-export type FieldControlRef = TextFieldRef;
-export declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseTextFieldProps, keyof import("node_modules/@koobiq/react-primitives/dist/utils").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps>> & import("node_modules/@koobiq/react-primitives/dist/utils").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps> & {
-    fullWidth?: boolean;
-    className?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & DataAttributeProps;
+export declare const FieldControl: import("@koobiq/react-core").PolyForwardComponent<"div", FieldControlBaseProps, ElementType>;
+export type FieldControlProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FieldControl<As>>;

package/dist/components/FieldComponents/FieldControl/FieldControl.js

@@ -1,16 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "@koobiq/react-core";
-import { TextField } from "@koobiq/react-primitives";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./FieldControl.module.css.js";
-const FieldControl = forwardRef(
-  ({ fullWidth = false, children, className, ...other }, ref) => /* @__PURE__ */ jsx(
-    TextField,
+const FieldControl = polymorphicForwardRef(
+  ({ fullWidth = false, className, as: Tag = "div", ...other }, ref) => /* @__PURE__ */ jsx(
+    Tag,
     {
       className: clsx(s.base, fullWidth && s.fullWidth, className),
       ...other,
-      ref,
-      children
+      ref
     }
   )
 );

package/dist/components/FieldComponents/FieldError/FieldError.d.ts

@@ -1,6 +1,6 @@
 import { type TextProps, type TextRef } from '@koobiq/react-primitives';
 export type FieldErrorProps = TextProps & {
-    error?: boolean;
+    isInvalid?: boolean;
 };
 export type FieldErrorRef = TextRef;
 export declare const FieldError: import("react").ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/FieldComponents/FieldError/FieldError.js

@@ -4,7 +4,7 @@ import { isNotNil, clsx } from "@koobiq/react-core";
 import { Text } from "@koobiq/react-primitives";
 import s from "./FieldError.module.css.js";
 const FieldError = forwardRef(
-  ({ children, className, error = false, ...other }, ref) => isNotNil(children) && error ? /* @__PURE__ */ jsx(
+  ({ children, className, isInvalid = false, ...other }, ref) => isNotNil(children) && isInvalid ? /* @__PURE__ */ jsx(
     Text,
     {
       className: clsx(s.base, className),

package/dist/components/FieldComponents/FieldInput/FieldInput.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithRef } from 'react';
-import type { InputPropVariant } from '../../Input/types';
+import type { InputPropVariant } from '../../Input';
 export type FieldInputBaseProps = {
-    error?: boolean;
-    disabled?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
     className?: string;
     'data-testid'?: string;
     as?: 'input' | 'textarea';

package/dist/components/FieldComponents/FieldInput/FieldInput.js

@@ -4,9 +4,9 @@ import { Input, Textarea } from "@koobiq/react-primitives";
 import s from "./FieldInput.module.css.js";
 const FieldInput = polymorphicForwardRef(
   ({
-    error = false,
+    isInvalid = false,
     as = "input",
-    disabled = false,
+    isDisabled = false,
     variant = "filled",
     className,
     ...other
@@ -19,8 +19,8 @@ const FieldInput = polymorphicForwardRef(
         className: clsx(
           s.base,
           s[variant],
-          error && s.error,
-          disabled && s.disabled,
+          isInvalid && s.invalid,
+          isDisabled && s.disabled,
           className
         ),
         ref

package/dist/components/FieldComponents/FieldInput/FieldInput.module.css.js

@@ -1,20 +1,20 @@
 const base = "kbq-fieldinput-77b90b";
 const transparent = "kbq-fieldinput-transparent-ed7263";
 const filled = "kbq-fieldinput-filled-abb632";
-const error = "kbq-fieldinput-error-00c0a4";
+const invalid = "kbq-fieldinput-invalid-2af82b";
 const disabled = "kbq-fieldinput-disabled-59285a";
 const s = {
   base,
   transparent,
   filled,
-  error,
+  invalid,
   disabled
 };
 export {
   base,
   s as default,
   disabled,
-  error,
   filled,
+  invalid,
   transparent
 };

package/dist/components/FieldComponents/FieldInputDate/FieldInputDate.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode, type Ref } from 'react';
+import type { InputPropVariant } from '../../Input';
+export type FieldInputDateProps = {
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    variant?: InputPropVariant;
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const FieldInputDate: import("react").ForwardRefExoticComponent<Omit<FieldInputDateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FieldComponents/FieldInputDate/FieldInputDate.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import s from "./FieldInputDate.module.css.js";
+const FieldInputDate = forwardRef(
+  ({
+    isInvalid = false,
+    isDisabled = false,
+    variant = "filled",
+    children,
+    className,
+    ...other
+  }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...other,
+      className: clsx(
+        s.base,
+        s[variant],
+        isInvalid && s.invalid,
+        isDisabled && s.disabled,
+        className
+      ),
+      ref,
+      children
+    }
+  )
+);
+FieldInputDate.displayName = "FieldSelect";
+export {
+  FieldInputDate
+};

package/dist/components/FieldComponents/FieldInputDate/FieldInputDate.module.css.js

@@ -0,0 +1,20 @@
+const base = "kbq-fieldinputdate-a54331";
+const transparent = "kbq-fieldinputdate-transparent-04d912";
+const filled = "kbq-fieldinputdate-filled-02db7d";
+const invalid = "kbq-fieldinputdate-invalid-d764c6";
+const disabled = "kbq-fieldinputdate-disabled-692832";
+const s = {
+  base,
+  transparent,
+  filled,
+  invalid,
+  disabled
+};
+export {
+  base,
+  s as default,
+  disabled,
+  filled,
+  invalid,
+  transparent
+};

package/dist/components/FieldComponents/FieldInputDate/index.d.ts

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

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroup.d.ts

@@ -1,11 +1,17 @@
 import { type ReactNode } from 'react';
 import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import { type FieldAddonProps } from '../FieldAddon';
 export type FieldInputGroupProps = ExtendableComponentPropsWithRef<{
     children?: ReactNode;
     startAddon?: ReactNode;
     endAddon?: ReactNode;
-    disabled?: boolean;
+    isDisabled?: boolean;
     className?: string;
-    error?: boolean;
+    isInvalid?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        start?: FieldAddonProps;
+        end?: FieldAddonProps;
+    };
 }, 'div'>;
 export declare const FieldInputGroup: import("react").ForwardRefExoticComponent<Omit<FieldInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroup.js

@@ -5,7 +5,7 @@ import { useInputContext, Group } from "@koobiq/react-primitives";
 import s from "./FieldInputGroup.module.css.js";
 import { FieldInputGroupContext } from "./FieldInputGroupContext.js";
 import { FieldAddon } from "../FieldAddon/FieldAddon.js";
-const FieldInputGroup = forwardRef(({ children, className, startAddon, endAddon, error, ...other }, ref) => {
+const FieldInputGroup = forwardRef(({ children, className, startAddon, endAddon, slotProps, ...other }, ref) => {
   const { value } = useInputContext();
   const hasStartAddon = !!startAddon;
   const hasEndAddon = !!endAddon;
@@ -21,14 +21,38 @@ const FieldInputGroup = forwardRef(({ children, className, startAddon, endAddon,
       ),
       ...other,
       ref,
-      children: ({ hovered, focusWithin, disabled }) => /* @__PURE__ */ jsxs(
+      children: ({ isHovered, isFocusWithin, isDisabled, isInvalid }) => /* @__PURE__ */ jsxs(
         FieldInputGroupContext.Provider,
         {
-          value: { disabled, hovered, hasValue, focusWithin },
+          value: {
+            isDisabled,
+            isHovered,
+            hasValue,
+            isFocusWithin,
+            isInvalid
+          },
           children: [
-            /* @__PURE__ */ jsx(FieldAddon, { placement: "start", error, children: startAddon }),
+            /* @__PURE__ */ jsx(
+              FieldAddon,
+              {
+                placement: "start",
+                isInvalid,
+                isDisabled,
+                ...slotProps?.start,
+                children: startAddon
+              }
+            ),
             children,
-            /* @__PURE__ */ jsx(FieldAddon, { placement: "end", error, children: endAddon })
+            /* @__PURE__ */ jsx(
+              FieldAddon,
+              {
+                placement: "end",
+                isInvalid,
+                isDisabled,
+                ...slotProps?.end,
+                children: endAddon
+              }
+            )
           ]
         }
       )

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroupContext.d.ts

@@ -1,8 +1,9 @@
 export type FieldInputGroupContextProps = {
-    disabled?: boolean;
+    isDisabled?: boolean;
     hasValue?: boolean;
-    hovered?: boolean;
-    focusWithin?: boolean;
+    isHovered?: boolean;
+    isFocusWithin?: boolean;
+    isInvalid?: boolean;
 };
 export declare const FieldInputGroupContext: import("react").Context<FieldInputGroupContextProps>;
 export declare const useFieldInputGroup: () => FieldInputGroupContextProps;

package/dist/components/FieldComponents/FieldLabel/FieldLabel.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
 export type FieldLabelProps = ExtendableComponentPropsWithRef<{
-    hidden?: boolean;
+    isHidden?: boolean;
     className?: string;
-    required?: boolean;
+    isRequired?: boolean;
     children?: ReactNode;
 }, 'label'>;
 export declare const FieldLabel: import("react").ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/FieldComponents/FieldLabel/FieldLabel.js

@@ -4,16 +4,16 @@ import { isNotNil, clsx } from "@koobiq/react-core";
 import { Label } from "@koobiq/react-primitives";
 import s from "./FieldLabel.module.css.js";
 const FieldLabel = forwardRef(
-  ({ children, className, hidden = false, required = false, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsxs(
+  ({ children, className, isHidden = false, isRequired = false, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsxs(
     Label,
     {
-      className: clsx(s.base, hidden && s.hidden, className),
+      className: clsx(s.base, isHidden && s.hidden, className),
       ...other,
       ref,
       children: [
         children,
         " ",
-        required && /* @__PURE__ */ jsx("sup", { className: s.sup, children: "*" })
+        isRequired && /* @__PURE__ */ jsx("sup", { className: s.sup, children: "*" })
       ]
     }
   ) : null

package/dist/components/FieldComponents/FieldSelect/FieldSelect.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode, type Ref } from 'react';
+import type { InputPropVariant } from '../../Input';
+export type FieldSelectProps = {
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+    variant?: InputPropVariant;
+    placeholder?: string | number;
+    ref?: Ref<HTMLButtonElement>;
+};
+export declare const FieldSelect: import("react").ForwardRefExoticComponent<Omit<FieldSelectProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/FieldComponents/FieldSelect/FieldSelect.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx, isNotNil } from "@koobiq/react-core";
+import { Button } from "@koobiq/react-primitives";
+import s from "./FieldSelect.module.css.js";
+const FieldSelect = forwardRef(
+  ({
+    isInvalid = false,
+    isDisabled = false,
+    variant = "filled",
+    placeholder,
+    children,
+    className,
+    ...other
+  }, ref) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...other,
+      isDisabled,
+      "data-slot": "select-value",
+      className: clsx(
+        s.base,
+        s[variant],
+        isInvalid && s.invalid,
+        isDisabled && s.disabled,
+        !isNotNil(children) && s.hasPlaceholder,
+        className
+      ),
+      ref,
+      children: /* @__PURE__ */ jsx("span", { className: s.content, children: children ?? placeholder })
+    }
+  )
+);
+FieldSelect.displayName = "FieldSelect";
+export {
+  FieldSelect
+};

package/dist/components/FieldComponents/FieldSelect/FieldSelect.module.css.js

@@ -0,0 +1,20 @@
+const base = "kbq-fieldselect-0f0f5e";
+const content = "kbq-fieldselect-content-c36142";
+const invalid = "kbq-fieldselect-invalid-db8152";
+const disabled = "kbq-fieldselect-disabled-f0efd4";
+const hasPlaceholder = "kbq-fieldselect-hasPlaceholder-7b7518";
+const s = {
+  base,
+  content,
+  invalid,
+  disabled,
+  hasPlaceholder
+};
+export {
+  base,
+  content,
+  s as default,
+  disabled,
+  hasPlaceholder,
+  invalid
+};

package/dist/components/FieldComponents/FieldSelect/index.d.ts

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

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

@@ -1,8 +1,9 @@
 export * from './FieldControl';
-export * from './FieldNumberControl';
 export * from './FieldInput';
+export * from './FieldSelect';
 export * from './FieldLabel';
 export * from './FieldAddon';
 export * from './FieldCaption';
 export * from './FieldError';
 export * from './FieldInputGroup';
+export * from './FieldInputDate';

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

@@ -10,7 +10,7 @@ export type FormControlLabelProps = ExtendableComponentPropsWithRef<{
     /**
      * If `true`, the component is disabled.
      * @default false
-     * */
+     */
     disabled?: boolean;
     /** The helper text content. */
     caption?: ReactNode;
@@ -18,13 +18,13 @@ export type FormControlLabelProps = ExtendableComponentPropsWithRef<{
     children?: ReactNode;
     /**
      * Size.
-     * @default normal
-     * */
+     * @default 'normal'
+     */
     size?: FormControlLabelPropSize;
     /**
      * The position of the label.
-     * @default end
-     * */
+     * @default 'end'
+     */
     labelPlacement?: FormControlLabelPropLabelPlacement;
     slotProps?: {
         content?: ComponentPropsWithRef<'div'>;

package/dist/components/Grid/Grid.d.ts

@@ -1,4 +1,10 @@
 import type { ComponentPropsWithRef, ElementType } from 'react';
+import { GridItem } from './components';
 import type { GridBaseProps } from './types';
-export declare const Grid: import("@koobiq/react-core").PolyForwardComponent<"div", GridBaseProps, ElementType>;
-export type GridProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Grid<As>>;
+declare const GridComponent: import("@koobiq/react-core").PolyForwardComponent<"div", GridBaseProps, ElementType>;
+export type GridProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof GridComponent<As>>;
+type CompoundedComponent = typeof GridComponent & {
+    Item: typeof GridItem;
+};
+export declare const Grid: CompoundedComponent;
+export {};

package/dist/components/Grid/Grid.js

@@ -3,9 +3,10 @@ import { jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./Grid.module.css.js";
 import { normalizeGap } from "./utils.js";
+import { GridItem } from "./components/GridItem/GridItem.js";
 import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
 import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
-const Grid = polymorphicForwardRef(
+const GridComponent = polymorphicForwardRef(
   ({
     as: Tag = "div",
     gap: gapProp,
@@ -46,7 +47,9 @@ const Grid = polymorphicForwardRef(
     );
   }
 );
-Grid.displayName = "Grid";
+GridComponent.displayName = "Grid";
+const Grid = GridComponent;
+Grid.Item = GridItem;
 export {
   Grid
 };

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

@@ -14,12 +14,12 @@ export type GridBaseProps = {
     /**
      * Control item alignment on the horizontal axis.
      * Defines the default `justifySelf` for all items in the grid.
-     * */
+     */
     justifyItems?: CSSProperties['justifyItems'] | ResponsiveValue<CSSProperties['justifyItems']>;
     /**
      * Control item alignment on the vertical axis.
      * Defines the default `alignSelf` for all items in the grid.
-     * */
+     */
     alignItems?: CSSProperties['alignItems'] | ResponsiveValue<CSSProperties['alignItems']>;
     /** Additional CSS-classes. */
     className?: string;

package/dist/components/IconButton/IconButton.js

@@ -1,42 +1,58 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { deprecate } from "@koobiq/logger";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import { Button } from "@koobiq/react-primitives";
 import s from "./IconButton.module.css.js";
 const IconButton = polymorphicForwardRef(
-  ({
-    as: Tag = "button",
-    variant = "theme",
-    size = "xl",
-    compact = false,
-    disabled = false,
-    children,
-    className,
-    ...other
-  }, ref) => {
+  (props, ref) => {
+    const {
+      as: Tag = "button",
+      variant = "theme",
+      size = "xl",
+      compact,
+      disabled,
+      isCompact: isCompactProp,
+      isDisabled: isDisabledProp,
+      children,
+      className,
+      ...other
+    } = props;
+    const isCompact = isCompactProp ?? compact ?? false;
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    if (process.env.NODE_ENV !== "production" && "compact" in props) {
+      deprecate(
+        'IconButton: the "compact" prop is deprecated. Use "isCompact" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+      deprecate(
+        'IconButton: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
     const classNameFn = ({
-      hovered,
-      disabled: disabled2,
-      loading,
-      focusVisible,
-      pressed
+      isHovered,
+      isDisabled: isDisabled2,
+      isLoading,
+      isFocusVisible,
+      isPressed
     }) => clsx(
       s.base,
       size && s[size],
       variant && s[variant],
-      hovered && s.hovered,
-      pressed && s.pressed,
-      disabled2 && s.disabled,
-      loading && s.progress,
-      compact && s.compact,
-      focusVisible && s.focusVisible,
+      isHovered && s.hovered,
+      isPressed && s.pressed,
+      isDisabled2 && s.disabled,
+      isLoading && s.progress,
+      isCompact && s.compact,
+      isFocusVisible && s.focusVisible,
       className
     );
     return /* @__PURE__ */ jsx(
       Button,
       {
         as: Tag,
-        disabled,
+        isDisabled,
         className: classNameFn,
         ...other,
         ref,

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

@@ -1,2 +1,2 @@
-export * from './IconButton.js';
-export * from './types.js';
+export * from './IconButton';
+export * from './types';

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

@@ -1,36 +1,52 @@
-import type { ReactNode } from 'react';
-import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
+import type { CSSProperties, ReactNode } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { ButtonBaseProps as ButtonBasePrimitiveProps } from '@koobiq/react-primitives';
 export declare const iconButtonPropVariant: readonly ["theme", "theme-contrast", "fade-contrast", "error", "success", "warning"];
 export type IconButtonPropVariant = (typeof iconButtonPropVariant)[number];
 export declare const iconButtonPropSize: readonly ["l", "xl"];
 export type IconButtonPropSize = (typeof iconButtonPropSize)[number];
-export type IconButtonBaseProps = {
+type IconButtonBaseDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, reduce the size of the component canvas.
+     * @default false
+     * @deprecated
+     * The "compact" prop is deprecated. Use "isCompact" prop to replace it.
+     */
+    compact?: boolean;
+};
+export type IconButtonBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /**
      * The variant to use.
-     * @default theme
-     * */
+     * @default 'theme'
+     */
     variant?: IconButtonPropVariant;
     /**
      * If `true`, the component is disabled.
      * @default false
-     * */
-    disabled?: boolean;
+     */
+    isDisabled?: boolean;
     /**
      * Size of the component
-     * @default xl
-     * */
+     * @default 'xl'
+     */
     size?: IconButtonPropSize;
     /**
      * If `true`, reduce the size of the component canvas.
      * @default false
-     * */
-    compact?: boolean;
+     */
+    isCompact?: boolean;
     /** Additional CSS-classes. */
     className?: string;
-    /** Handler that is called when a hover interaction starts. */
-    onHoverStart?: (e: HoverEvent) => void;
-    /** Handler that is called when a hover interaction ends. */
-    onClick?: ButtonOptions['onPress'];
-};
+    /** Inline styles. */
+    style?: CSSProperties;
+} & IconButtonBaseDeprecatedProps, Omit<ButtonBasePrimitiveProps, 'slot'>>;
+export {};