@koobiq/react-components 0.0.1-beta.1

package/dist/components/SkeletonBlock/SkeletonBlock.d.ts

@@ -0,0 +1,2 @@
+import type { SkeletonBlockBaseProps } from './index';
+export declare const SkeletonBlock: import("@koobiq/react-core").PolyForwardComponent<"span", SkeletonBlockBaseProps, import("react").ElementType>;

package/dist/components/SkeletonBlock/SkeletonBlock.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx, isNotNil } from "@koobiq/react-core";
+import s from "./SkeletonBlock.module.css.js";
+import { normalizeSize } from "./utils.js";
+const SkeletonBlock = polymorphicForwardRef((props, ref) => {
+  const {
+    as: Tag = "span",
+    style: styleProp,
+    children,
+    bgColor,
+    waveColor,
+    className,
+    inlineSize,
+    blockSize,
+    ...other
+  } = props;
+  const style = {
+    "--skeleton-inline-size": normalizeSize(inlineSize),
+    "--skeleton-block-size": normalizeSize(blockSize),
+    "--skeleton-wave-color": waveColor,
+    "--skeleton-bg-color": bgColor,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: clsx(s.base, isNotNil(children) && s.hasChildren, className),
+      style,
+      ...other,
+      ref,
+      children
+    }
+  );
+});
+export {
+  SkeletonBlock
+};

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

@@ -0,0 +1,12 @@
+const base = "kbq-skeletonblock-e98401";
+const hasChildren = "kbq-skeletonblock-hasChildren-88ab53";
+const s = {
+  base,
+  "skeleton-wave": "kbq-skeletonblock-skeleton-wave-3094a0",
+  hasChildren
+};
+export {
+  base,
+  s as default,
+  hasChildren
+};

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

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

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

@@ -0,0 +1,18 @@
+import type { ComponentRef, CSSProperties, ReactNode } from 'react';
+export type SkeletonBlockBaseProps = {
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Width of component. */
+    inlineSize?: CSSProperties['inlineSize'];
+    /** Height of components. */
+    blockSize?: CSSProperties['blockSize'];
+    /** Wave color. */
+    waveColor?: string;
+    /** Background color. */
+    bgColor?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+};
+export type SkeletonBlockRef = ComponentRef<'span'>;

package/dist/components/SkeletonBlock/utils.d.ts

@@ -0,0 +1,2 @@
+import type { SkeletonBlockBaseProps } from './types';
+export declare const normalizeSize: (value: SkeletonBlockBaseProps["blockSize"] | undefined) => string | undefined;

package/dist/components/SkeletonBlock/utils.js

@@ -0,0 +1,8 @@
+import { isNumber } from "@koobiq/react-core";
+const normalizeSize = (value) => {
+  if (isNumber(value)) return `${value}px`;
+  return value;
+};
+export {
+  normalizeSize
+};

package/dist/components/SkeletonTypography/SkeletonTypography.d.ts

@@ -0,0 +1,2 @@
+import type { SkeletonTypographyBaseProps } from './index';
+export declare const SkeletonTypography: import("@koobiq/react-core").PolyForwardComponent<"span", SkeletonTypographyBaseProps, import("react").ElementType>;

package/dist/components/SkeletonTypography/SkeletonTypography.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { utilClasses } from "../../styles/utility.js";
+import s from "./SkeletonTypography.module.css.js";
+import { getRowWidth } from "./utils.js";
+import { SkeletonBlock } from "../SkeletonBlock/SkeletonBlock.js";
+const textVariant = utilClasses.typography;
+const SkeletonTypography = polymorphicForwardRef((props, ref) => {
+  const {
+    as: Tag = "span",
+    variant = "inherit",
+    rows,
+    inlineSize,
+    style,
+    bgColor,
+    waveColor,
+    className,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: clsx(s.base, textVariant[variant], className),
+      style: { inlineSize },
+      ...other,
+      ref,
+      children: new Array(rows).fill(0).map((_, idx) => /* @__PURE__ */ jsx("span", { className: clsx(s.row, variant && s[variant]), children: /* @__PURE__ */ jsx(
+        SkeletonBlock,
+        {
+          bgColor,
+          className: s.skeleton,
+          waveColor,
+          style: {
+            width: getRowWidth(idx, rows),
+            ...style
+          }
+        }
+      ) }, idx))
+    }
+  );
+});
+export {
+  SkeletonTypography
+};

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

@@ -0,0 +1,14 @@
+const base = "kbq-skeletontypography-776dae";
+const row = "kbq-skeletontypography-row-f56b71";
+const skeleton = "kbq-skeletontypography-skeleton-5db4ac";
+const s = {
+  base,
+  row,
+  skeleton
+};
+export {
+  base,
+  s as default,
+  row,
+  skeleton
+};

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

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

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

@@ -0,0 +1,25 @@
+import type { ComponentRef, CSSProperties } from 'react';
+import type { TypographyPropVariant } from '../Typography';
+export type SkeletonTypographyPropVariant = TypographyPropVariant;
+export type SkeletonTypographyBaseProps = {
+    /**
+     * Variant of typography.
+     * @default text-normal
+     * */
+    variant?: SkeletonTypographyPropVariant;
+    /** Number of lines per paragraph. */
+    rows?: number;
+    /** The content of the component. */
+    children?: never;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Width of component. */
+    inlineSize?: CSSProperties['inlineSize'];
+    /** Wave color. */
+    waveColor?: string;
+    /** Background color. */
+    bgColor?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+};
+export type SkeletonTypographyRef = ComponentRef<'span'>;

package/dist/components/SkeletonTypography/utils.d.ts

@@ -0,0 +1,2 @@
+import type { CSSProperties } from 'react';
+export declare const getRowWidth: (idx: number, rows?: number) => CSSProperties["inlineSize"];

package/dist/components/SkeletonTypography/utils.js

@@ -0,0 +1,18 @@
+const getRowWidth = (idx, rows = 0) => {
+  if (!rows) return "100%";
+  if (idx === rows - 1) {
+    return "50%";
+  }
+  switch (idx % 3) {
+    case 0:
+      return "95%";
+    case 1:
+      return "100%";
+    case 2:
+      return "90%";
+  }
+  return "100%";
+};
+export {
+  getRowWidth
+};

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,21 @@
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").UseTextFieldProps, "inputElementType">, "caption" | "label" | "className" | "disabled" | "required" | "cols" | "rows" | "error" | "variant" | "slotProps" | "fullWidth" | "errorMessage" | "hiddenLabel" | "expand"> & {
+    label?: import("react").ReactNode;
+    className?: string;
+    variant?: import("./types").TextareaPropVariant;
+    error?: boolean;
+    errorMessage?: string | number;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    hiddenLabel?: boolean;
+    caption?: string | number;
+    required?: boolean;
+    rows?: number;
+    cols?: number;
+    expand?: import("./types").TextareaPropExpand;
+    slotProps?: {
+        label?: import("../FieldComponents").FieldLabelProps;
+        caption?: import("../FieldComponents").FieldCaptionProps;
+        textarea?: import("../FieldComponents").FieldInputProps;
+        errorMessage?: import("../FieldComponents").FieldErrorProps;
+    };
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { mergeProps } from "@koobiq/react-core";
+import { TextareaContextConsumer } from "./components/TextareaContextConsumer/TextareaContextConsumer.js";
+import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
+const Textarea = forwardRef((props, ref) => {
+  const {
+    variant = "filled",
+    fullWidth = false,
+    hiddenLabel = false,
+    rows,
+    cols,
+    expand,
+    errorMessage,
+    slotProps,
+    caption,
+    label,
+    ...other
+  } = props;
+  const rootProps = mergeProps(
+    {
+      label,
+      fullWidth,
+      errorMessage,
+      "data-variant": variant,
+      "data-fullwidth": fullWidth
+    },
+    other
+  );
+  return /* @__PURE__ */ jsx(FieldControl, { inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
+    TextareaContextConsumer,
+    {
+      ...values,
+      rows,
+      cols,
+      label,
+      expand,
+      variant,
+      caption,
+      slotProps,
+      hiddenLabel,
+      errorMessage,
+      ref
+    }
+  ) });
+});
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};

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

@@ -0,0 +1,7 @@
+const s = {
+  "auto-size": "kbq-textarea-auto-size-566580",
+  "vertical-resize": "kbq-textarea-vertical-resize-bde131"
+};
+export {
+  s as default
+};

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.d.ts

@@ -0,0 +1,6 @@
+import type { TextareaProps } from '../../types';
+export declare const TextareaContextConsumer: import("react").ForwardRefExoticComponent<{
+    required?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "slotProps" | "errorMessage" | "hiddenLabel" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -0,0 +1,58 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps } from "@koobiq/react-core";
+import { useTextareaContext } from "@koobiq/react-primitives";
+import s from "../../Textarea.module.css.js";
+import { useTextareaAutosize } from "../../utils/useTextareaAutosize.js";
+import { FieldLabel } from "../../../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldInput } from "../../../FieldComponents/FieldInput/FieldInput.js";
+import { FieldCaption } from "../../../FieldComponents/FieldCaption/FieldCaption.js";
+import { FieldError } from "../../../FieldComponents/FieldError/FieldError.js";
+const TextareaContextConsumer = forwardRef((props, ref) => {
+  const {
+    rows,
+    cols,
+    label,
+    error,
+    expand,
+    caption,
+    variant,
+    disabled,
+    required,
+    slotProps,
+    hiddenLabel,
+    errorMessage
+  } = props;
+  const { value } = useTextareaContext();
+  const domRef = useDOMRef(ref);
+  useTextareaAutosize(domRef, value, expand === "auto-size");
+  const textareaProps = mergeProps(
+    {
+      error,
+      rows,
+      cols,
+      variant,
+      value,
+      disabled,
+      ...expand && { className: s[expand] },
+      ref: domRef
+    },
+    slotProps?.textarea
+  );
+  const captionProps = slotProps?.caption;
+  const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+  const labelProps = mergeProps(
+    { hidden: hiddenLabel, required },
+    slotProps?.label
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps.children || label }),
+    /* @__PURE__ */ jsx(FieldInput, { as: "textarea", ...textareaProps }),
+    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
+    /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+  ] });
+});
+TextareaContextConsumer.displayName = "TextareaContextConsumer";
+export {
+  TextareaContextConsumer
+};

package/dist/components/Textarea/components/TextareaContextConsumer/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,67 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { UseTextFieldProps } from '@koobiq/react-primitives';
+import type { FieldCaptionProps, FieldErrorProps, FieldInputProps, FieldLabelProps } from '../FieldComponents';
+export declare const textareaPropVariant: readonly ["filled", "transparent"];
+export type TextareaPropVariant = (typeof textareaPropVariant)[number];
+export declare const textareaPropExpand: readonly ["auto-size", "vertical-resize"];
+export type TextareaPropExpand = (typeof textareaPropExpand)[number];
+export type TextareaProps = ExtendableProps<{
+    /** The content to display as the label. */
+    label?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * The variant to use.
+     * @default filled
+     * */
+    variant?: TextareaPropVariant;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     * */
+    error?: boolean;
+    /** Message for the error state */
+    errorMessage?: string | number;
+    /**
+     * 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
+     * */
+    disabled?: boolean;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     * */
+    hiddenLabel?: boolean;
+    /** The helper text content. */
+    caption?: string | number;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     * */
+    required?: boolean;
+    /** The rows property specifies the visible height of a text area, in lines. */
+    rows?: number;
+    /** The cols property specifies the visible width of a text area. */
+    cols?: number;
+    /**
+     * The expand property determines how the block size (height) of the field will change:
+     *
+     * `autoSize` — auto-change the block size (height) of the field according to the entered value.
+     * `verticalResize` — the ability to stretch the field vertically.
+     */
+    expand?: TextareaPropExpand;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        label?: FieldLabelProps;
+        caption?: FieldCaptionProps;
+        textarea?: FieldInputProps;
+        errorMessage?: FieldErrorProps;
+    };
+}, Omit<UseTextFieldProps, 'inputElementType'>>;
+export type TextareaRef = ComponentRef<'textarea'>;

package/dist/components/Textarea/types.js

@@ -0,0 +1,6 @@
+const textareaPropVariant = ["filled", "transparent"];
+const textareaPropExpand = ["auto-size", "vertical-resize"];
+export {
+  textareaPropExpand,
+  textareaPropVariant
+};

package/dist/components/Textarea/utils/index.d.ts

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

package/dist/components/Textarea/utils/useTextareaAutosize.d.ts

@@ -0,0 +1,2 @@
+import { type MutableRefObject } from 'react';
+export declare function useTextareaAutosize(ref: MutableRefObject<HTMLTextAreaElement | null>, value: string | readonly string[] | number | undefined, active?: boolean): void;

package/dist/components/Textarea/utils/useTextareaAutosize.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+function useTextareaAutosize(ref, value, active) {
+  useEffect(() => {
+    if (!active) return;
+    if (ref.current) {
+      const textareaEl = ref.current;
+      textareaEl.style.blockSize = "0px";
+      const { scrollHeight, offsetHeight, clientHeight } = textareaEl;
+      textareaEl.style.blockSize = `${scrollHeight + (offsetHeight - clientHeight)}px`;
+    }
+  }, [value]);
+}
+export {
+  useTextareaAutosize
+};

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,16 @@
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/checkbox").AriaToggleProps, "onChange" | "isDisabled" | "isRequired" | "isInvalid" | "isReadOnly" | "isSelected" | "defaultSelected">, "defaultChecked" | "onChange" | "disabled" | "checked" | "required" | "error"> & {
+    error?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+} & {
+    className?: string;
+    size?: import("./types").TogglePropSize;
+    labelPlacement?: import("./types").TogglePropLabelPlacement;
+    slotProps?: {
+        track?: import("react").ComponentPropsWithRef<"span">;
+        label?: import("react").ComponentPropsWithRef<"span">;
+    };
+} & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx, mergeProps, isNotNil } from "@koobiq/react-core";
+import { Toggle as Toggle$1 } from "@koobiq/react-primitives";
+import s from "./Toggle.module.css.js";
+const Toggle = forwardRef(
+  (props, ref) => {
+    const {
+      size = "normal",
+      labelPlacement = "end",
+      children,
+      slotProps,
+      className,
+      ...other
+    } = props;
+    const commonProps = {
+      className: ({ checked, hovered, focusVisible, disabled, error }) => clsx(
+        s.base,
+        s[size],
+        error && s.error,
+        s[labelPlacement],
+        hovered && s.hovered,
+        checked && s.checked,
+        disabled && s.disabled,
+        focusVisible && s.focusVisible,
+        className
+      ),
+      ...other
+    };
+    const trackProps = mergeProps({ className: s.track }, slotProps?.track);
+    const labelProps = slotProps?.label;
+    return /* @__PURE__ */ jsxs(Toggle$1, { ...commonProps, ref, children: [
+      /* @__PURE__ */ jsx("span", { ...trackProps }),
+      isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
+export {
+  Toggle
+};

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

@@ -0,0 +1,38 @@
+const base = "kbq-toggle-8e5279";
+const track = "kbq-toggle-track-03a806";
+const start = "kbq-toggle-start-0b2387";
+const end = "kbq-toggle-end-dd56df";
+const normal = "kbq-toggle-normal-1cd430";
+const big = "kbq-toggle-big-8df194";
+const hovered = "kbq-toggle-hovered-d4d8d0";
+const checked = "kbq-toggle-checked-6ab2c0";
+const error = "kbq-toggle-error-8e1b23";
+const focusVisible = "kbq-toggle-focusVisible-10b6e6";
+const disabled = "kbq-toggle-disabled-b31c64";
+const s = {
+  base,
+  track,
+  start,
+  end,
+  normal,
+  big,
+  hovered,
+  checked,
+  error,
+  focusVisible,
+  disabled
+};
+export {
+  base,
+  big,
+  checked,
+  s as default,
+  disabled,
+  end,
+  error,
+  focusVisible,
+  hovered,
+  normal,
+  start,
+  track
+};

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

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

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

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { UseToggleProps } from '@koobiq/react-primitives';
+export declare const togglePropSize: readonly ["normal", "big"];
+export type TogglePropSize = (typeof togglePropSize)[number];
+export declare const togglePropLabelPlacement: readonly ["start", "end"];
+export type TogglePropLabelPlacement = (typeof togglePropLabelPlacement)[number];
+export type ToggleProps = UseToggleProps & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * Size.
+     * @default normal
+     * */
+    size?: TogglePropSize;
+    /**
+     * The position of the label.
+     * @default end
+     * */
+    labelPlacement?: TogglePropLabelPlacement;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        track?: ComponentPropsWithRef<'span'>;
+        label?: ComponentPropsWithRef<'span'>;
+    };
+};

package/dist/components/Toggle/types.js

@@ -0,0 +1,6 @@
+const togglePropSize = ["normal", "big"];
+const togglePropLabelPlacement = ["start", "end"];
+export {
+  togglePropLabelPlacement,
+  togglePropSize
+};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,20 @@
+export declare const Tooltip: import("react").ForwardRefExoticComponent<{
+    variant?: import("./types").TooltipPropVariant;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?(open: boolean): void;
+    disabled?: boolean;
+    children?: import("react").ReactNode;
+    control?: import("./types").TooltipPropControl;
+    placement?: import("./types").TooltipPropPlacement;
+    anchorRef?: import("react").RefObject<HTMLElement>;
+    arrowBoundaryOffset?: number;
+    offset?: number;
+    crossOffset?: number;
+    hideArrow?: boolean;
+    delay?: number;
+    closeDelay?: number;
+    trigger?: "focus";
+    id?: string;
+    className?: string;
+} & import("@koobiq/react-core").DataAttributeProps & import("react").RefAttributes<HTMLDivElement>>;