@koobiq/react-components 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-core": "0.11.0",
-    "@koobiq/logger": "0.11.0",
-    "@koobiq/react-icons": "0.11.0",
-    "@koobiq/react-primitives": "0.11.0"
+    "@koobiq/logger": "0.12.0",
+    "@koobiq/react-icons": "0.12.0",
+    "@koobiq/react-primitives": "0.12.0",
+    "@koobiq/react-core": "0.12.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",

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

@@ -1,4 +0,0 @@
-import type { ComponentPropsWithRef, ElementType } from 'react';
-import type { FieldBaseProps } from './types';
-export declare const Field: import("@koobiq/react-core").PolyForwardComponent<"div", FieldBaseProps, ElementType>;
-export type FieldProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Field<As>>;

package/dist/components/FieldComponents/Field/Field.js

@@ -1,10 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
-import s from "./Field.module.css.js";
-const Field = polymorphicForwardRef(
-  ({ as: Tag = "div", className, ...other }, ref) => /* @__PURE__ */ jsx(Tag, { className: clsx(s.base, className), ...other, ref })
-);
-Field.displayName = "Field";
-export {
-  Field
-};

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

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

package/dist/components/FieldComponents/Field/types.d.ts

@@ -1,4 +0,0 @@
-import type { DataAttributeProps } from '@koobiq/react-core';
-export type FieldBaseProps = {
-    className?: string;
-} & DataAttributeProps;

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

@@ -1,11 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
-export declare const fieldAddonPropPlacement: readonly ["start", "end"];
-export type FieldAddonPlacement = (typeof fieldAddonPropPlacement)[number];
-export type FieldAddonProps = ExtendableComponentPropsWithRef<{
-    isInvalid?: boolean;
-    isDisabled?: boolean;
-    children?: ReactNode;
-    placement?: FieldAddonPlacement;
-}, 'div'>;
-export declare const FieldAddon: import("react").ForwardRefExoticComponent<Omit<FieldAddonProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,20 +0,0 @@
-const base = "kbq-fieldaddon-3388d3";
-const start = "kbq-fieldaddon-start-83aa84";
-const end = "kbq-fieldaddon-end-f314bf";
-const invalid = "kbq-fieldaddon-invalid-08b1fe";
-const disabled = "kbq-fieldaddon-disabled-c170bf";
-const s = {
-  base,
-  start,
-  end,
-  invalid,
-  disabled
-};
-export {
-  base,
-  s as default,
-  disabled,
-  end,
-  invalid,
-  start
-};

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

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

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

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

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

@@ -1,2 +0,0 @@
-import type { FieldContentGroupProps } from './index';
-export declare const FieldContentGroup: import("react").ForwardRefExoticComponent<Omit<FieldContentGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,29 +0,0 @@
-const base = "kbq-fieldcontentgroup-d85be3";
-const hasStartAddon = "kbq-fieldcontentgroup-hasStartAddon-62fb80";
-const hasEndAddon = "kbq-fieldcontentgroup-hasEndAddon-e8c20a";
-const transparent = "kbq-fieldcontentgroup-transparent-ac42b6";
-const filled = "kbq-fieldcontentgroup-filled-37bb93";
-const focused = "kbq-fieldcontentgroup-focused-8fb205";
-const invalid = "kbq-fieldcontentgroup-invalid-e4973b";
-const disabled = "kbq-fieldcontentgroup-disabled-54827b";
-const s = {
-  base,
-  hasStartAddon,
-  hasEndAddon,
-  transparent,
-  filled,
-  focused,
-  invalid,
-  disabled
-};
-export {
-  base,
-  s as default,
-  disabled,
-  filled,
-  focused,
-  hasEndAddon,
-  hasStartAddon,
-  invalid,
-  transparent
-};

package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroupContext.d.ts

@@ -1,10 +0,0 @@
-export type FieldContentGroupContextProps = {
-    isDisabled?: boolean;
-    hasStartAddon?: boolean;
-    hasEndAddon?: boolean;
-    isHovered?: boolean;
-    isFocusWithin?: boolean;
-    isInvalid?: boolean;
-};
-export declare const FieldContentGroupContext: import("react").Context<FieldContentGroupContextProps>;
-export declare const useFieldContentGroup: () => FieldContentGroupContextProps;

package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroupContext.js

@@ -1,7 +0,0 @@
-import { createContext, useContext } from "react";
-const FieldContentGroupContext = createContext({});
-const useFieldContentGroup = () => useContext(FieldContentGroupContext);
-export {
-  FieldContentGroupContext,
-  useFieldContentGroup
-};

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

@@ -1,3 +0,0 @@
-export * from './FieldContentGroup';
-export * from './FieldContentGroupContext';
-export * from './types';

package/dist/components/FieldComponents/FieldContentGroup/types.d.ts

@@ -1,29 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
-import type { FieldAddonProps } from '../FieldAddon';
-export declare const fieldContentGroupPropVariant: readonly ["filled", "transparent"];
-export type FieldContentGroupPropVariant = (typeof fieldContentGroupPropVariant)[number];
-export type FieldContentGroupProps = ExtendableComponentPropsWithRef<{
-    /** The content of the component. */
-    children?: ReactNode;
-    /** Addon placed before the children. */
-    startAddon?: ReactNode;
-    /** Addon placed after the children. */
-    endAddon?: ReactNode;
-    /**
-     * The variant to use.
-     * @default 'filled'
-     */
-    variant?: FieldContentGroupPropVariant;
-    /** Whether the input is disabled. */
-    isDisabled?: boolean;
-    /** Additional CSS-classes. */
-    className?: string;
-    /** Whether the input value is invalid. */
-    isInvalid?: boolean;
-    /** The props used for each slot inside. */
-    slotProps?: {
-        startAddon?: FieldAddonProps;
-        endAddon?: FieldAddonProps;
-    };
-}, 'div'>;

package/dist/components/FieldComponents/FieldContentGroup/types.js

@@ -1,4 +0,0 @@
-const fieldContentGroupPropVariant = ["filled", "transparent"];
-export {
-  fieldContentGroupPropVariant
-};

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

@@ -1,8 +0,0 @@
-import { type ReactNode } from 'react';
-import { type ValidationResult } from '@koobiq/react-core';
-import { type TextProps, type TextRef } from '@koobiq/react-primitives';
-export type FieldErrorProps = Omit<TextProps, 'children'> & {
-    children?: ReactNode | ((v: ValidationResult) => ReactNode);
-};
-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

@@ -1,19 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "@koobiq/react-core";
-import { FieldError as FieldError$1 } from "@koobiq/react-primitives";
-import s from "./FieldError.module.css.js";
-const FieldError = forwardRef(
-  ({ className, ...other }, ref) => /* @__PURE__ */ jsx(
-    FieldError$1,
-    {
-      className: clsx(s.base, className),
-      ...other,
-      ref
-    }
-  )
-);
-FieldError.displayName = "FieldError";
-export {
-  FieldError
-};

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

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

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

@@ -1,12 +0,0 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { FieldContentGroupPropVariant } from '../FieldContentGroup';
-export type FieldInputBaseProps = {
-    isInvalid?: boolean;
-    isDisabled?: boolean;
-    className?: string;
-    'data-testid'?: string;
-    as?: 'input' | 'textarea';
-    variant?: FieldContentGroupPropVariant;
-};
-export declare const FieldInput: import("@koobiq/react-core").PolyForwardComponent<"input", FieldInputBaseProps, "input" | "textarea">;
-export type FieldInputProps<As extends 'input' | 'textarea' = 'input'> = ComponentPropsWithRef<typeof FieldInput<As>>;

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

@@ -1,34 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
-import { Input, Textarea } from "@koobiq/react-primitives";
-import s from "./FieldInput.module.css.js";
-const FieldInput = polymorphicForwardRef(
-  ({
-    variant = "filled",
-    as = "input",
-    isInvalid,
-    isDisabled,
-    className,
-    ...other
-  }, ref) => {
-    const Tag = as === "input" ? Input : Textarea;
-    return /* @__PURE__ */ jsx(
-      Tag,
-      {
-        ...other,
-        className: clsx(
-          s.base,
-          s[variant],
-          isInvalid && s.invalid,
-          isDisabled && s.disabled,
-          className
-        ),
-        ref
-      }
-    );
-  }
-);
-FieldInput.displayName = "FieldInput";
-export {
-  FieldInput
-};

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

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

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

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

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

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

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

@@ -1,32 +0,0 @@
-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(
-  ({
-    variant = "filled",
-    isInvalid,
-    isDisabled,
-    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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-import type { ComponentPropsWithRef, ElementType } from 'react';
-import type { FieldSelectBaseProps } from './index';
-export declare const FieldSelect: import("@koobiq/react-core").PolyForwardComponent<"div", FieldSelectBaseProps, ElementType>;
-export type FieldSelectProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FieldSelect<As>>;

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

@@ -1,45 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, clsx, isNotNil } from "@koobiq/react-core";
-import { Button } from "@koobiq/react-primitives";
-import s from "./FieldSelect.module.css.js";
-import { isPrimitiveNode } from "../../../utils/isPrimitiveNode.js";
-const FieldSelect = polymorphicForwardRef(
-  ({
-    variant = "filled",
-    as = "div",
-    isInvalid,
-    isDisabled,
-    placeholder,
-    children,
-    className,
-    ...other
-  }, ref) => {
-    const content = children ?? placeholder;
-    return /* @__PURE__ */ jsxs(
-      Button,
-      {
-        ...other,
-        as,
-        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.hiddenPlaceholder, "aria-hidden": true, children: placeholder }),
-          /* @__PURE__ */ jsx("div", { className: s.container, children: isPrimitiveNode(content) ? /* @__PURE__ */ jsx("span", { className: s.content, children: content }) : children })
-        ]
-      }
-    );
-  }
-);
-FieldSelect.displayName = "FieldSelect";
-export {
-  FieldSelect
-};

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

@@ -1,26 +0,0 @@
-const base = "kbq-fieldselect-0f0f5e";
-const container = "kbq-fieldselect-container-422b17";
-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 hiddenPlaceholder = "kbq-fieldselect-hiddenPlaceholder-a3a36d";
-const s = {
-  base,
-  container,
-  content,
-  invalid,
-  disabled,
-  hasPlaceholder,
-  hiddenPlaceholder
-};
-export {
-  base,
-  container,
-  content,
-  s as default,
-  disabled,
-  hasPlaceholder,
-  hiddenPlaceholder,
-  invalid
-};

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

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

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

@@ -1,11 +0,0 @@
-import type { ReactNode } from 'react';
-import type { FieldContentGroupPropVariant } from '../FieldContentGroup';
-export type FieldSelectBaseProps = {
-    isInvalid?: boolean;
-    isDisabled?: boolean;
-    className?: string;
-    children?: ReactNode;
-    'data-testid'?: string;
-    placeholder?: string | number;
-    variant?: FieldContentGroupPropVariant;
-};

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

@@ -1,8 +0,0 @@
-export * from './Field';
-export * from './FieldInput';
-export * from './FieldSelect';
-export * from './FieldAddon';
-export * from './FieldCaption';
-export * from './FieldError';
-export * from './FieldContentGroup';
-export * from './FieldInputDate';

package/dist/components/FormControl/FormControl.d.ts

@@ -1,4 +0,0 @@
-import type { ComponentPropsWithRef, ElementType } from 'react';
-import type { FormControlBaseProps } from './types';
-export declare const FormControl: import("@koobiq/react-core").PolyForwardComponent<"div", FormControlBaseProps, ElementType>;
-export type FormControlProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FormControl<As>>;

package/dist/components/FormControl/FormControl.js

@@ -1,34 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
-import s from "./FormControl.module.css.js";
-import { useForm } from "../Form/FormContext.js";
-const FormControl = polymorphicForwardRef(
-  (props, ref) => {
-    const { as: Tag = "div", fullWidth, className, ...other } = props;
-    const { labelPlacement: formLabelPlacement, labelAlign: formLabelAlign } = useForm();
-    const labelPlacement = props.labelPlacement ?? formLabelPlacement ?? "top";
-    const labelAlign = props.labelAlign ?? formLabelAlign ?? "start";
-    return /* @__PURE__ */ jsx(
-      Tag,
-      {
-        className: clsx(
-          s.base,
-          className,
-          s[labelAlign],
-          s[labelPlacement],
-          fullWidth && s.fullWidth
-        ),
-        "data-slot": "form-control",
-        "data-label-align": labelAlign,
-        "data-label-placement": labelPlacement,
-        "data-fullwidth": fullWidth || void 0,
-        ...other,
-        ref
-      }
-    );
-  }
-);
-FormControl.displayName = "FormControl";
-export {
-  FormControl
-};

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

@@ -1,17 +0,0 @@
-const base = "kbq-formcontrol-dbb0e4";
-const fullWidth = "kbq-formcontrol-fullWidth-b3e32c";
-const top = "kbq-formcontrol-top-17ba41";
-const side = "kbq-formcontrol-side-3e528f";
-const s = {
-  base,
-  fullWidth,
-  top,
-  side
-};
-export {
-  base,
-  s as default,
-  fullWidth,
-  side,
-  top
-};

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

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

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

@@ -1,19 +0,0 @@
-import type { DataAttributeProps } from '@koobiq/react-core';
-export declare const formControlPropLabelPlacement: readonly ["top", "side"];
-export type FormControlPropLabelPlacement = (typeof formControlPropLabelPlacement)[number];
-export declare const formControlPropLabelAlign: readonly ["start", "end"];
-export type FormControlPropLabelAlign = (typeof formControlPropLabelAlign)[number];
-export type FormControlBaseProps = {
-    fullWidth?: boolean;
-    className?: string;
-    /**
-     * The label's overall position relative to the element it is labeling.
-     * @default 'top'
-     */
-    labelPlacement?: FormControlPropLabelPlacement;
-    /**
-     * The label's horizontal alignment relative to the element it is labeling.
-     * @default 'start'
-     */
-    labelAlign?: FormControlPropLabelAlign;
-} & DataAttributeProps;

package/dist/components/FormControl/types.js

@@ -1,6 +0,0 @@
-const formControlPropLabelPlacement = ["top", "side"];
-const formControlPropLabelAlign = ["start", "end"];
-export {
-  formControlPropLabelAlign,
-  formControlPropLabelPlacement
-};

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

@@ -1,4 +0,0 @@
-import type { ComponentPropsWithRef, ElementType } from 'react';
-import type { FormControlLabelBaseProps } from './types';
-export declare const FormControlLabel: import("@koobiq/react-core").PolyForwardComponent<"label", FormControlLabelBaseProps, ElementType>;
-export type FormControlLabelProps<As extends ElementType = 'label'> = ComponentPropsWithRef<typeof FormControlLabel<As>>;

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

@@ -1,14 +0,0 @@
-const base = "kbq-formcontrollabel-f90f77";
-const hidden = "kbq-formcontrollabel-hidden-b6c00b";
-const sup = "kbq-formcontrollabel-sup-08dbc0";
-const s = {
-  base,
-  hidden,
-  sup
-};
-export {
-  base,
-  s as default,
-  hidden,
-  sup
-};

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

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