@koobiq/react-components 0.0.1-beta.1

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

@@ -0,0 +1,44 @@
+const base = "kbq-button-d95067";
+const hovered = "kbq-button-hovered-037da3";
+const pressed = "kbq-button-pressed-508d5d";
+const focusVisible = "kbq-button-focusVisible-e63c2b";
+const progress = "kbq-button-progress-f454f0";
+const disabled = "kbq-button-disabled-1df5f6";
+const fullWidth = "kbq-button-fullWidth-c149b8";
+const onlyIcon = "kbq-button-onlyIcon-e1268c";
+const loader = "kbq-button-loader-467f28";
+const content = "kbq-button-content-2e3014";
+const label = "kbq-button-label-9f6f6b";
+const s = {
+  base,
+  hovered,
+  pressed,
+  focusVisible,
+  progress,
+  disabled,
+  fullWidth,
+  onlyIcon,
+  loader,
+  content,
+  label,
+  "contrast-filled": "kbq-button-contrast-filled-606131",
+  "fade-contrast-filled": "kbq-button-fade-contrast-filled-8959de",
+  "fade-contrast-outline": "kbq-button-fade-contrast-outline-785e24",
+  "fade-theme-outline": "kbq-button-fade-theme-outline-a6684c",
+  "contrast-transparent": "kbq-button-contrast-transparent-da3653",
+  "theme-transparent": "kbq-button-theme-transparent-8a514f"
+};
+export {
+  base,
+  content,
+  s as default,
+  disabled,
+  focusVisible,
+  fullWidth,
+  hovered,
+  label,
+  loader,
+  onlyIcon,
+  pressed,
+  progress
+};

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

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

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

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
+export declare const buttonPropVariant: readonly ["contrast-filled", "contrast-transparent", "fade-contrast-filled", "fade-contrast-outline", "fade-theme-outline", "theme-transparent"];
+export type ButtonPropVariant = (typeof buttonPropVariant)[number];
+export type ButtonPropOnClick = ButtonOptions['onPress'];
+export type ButtonBaseProps = {
+    /** The content of the component. */
+    children?: ReactNode;
+    /**
+     * The variant to use.
+     * @default contrast-filled
+     * */
+    variant?: ButtonPropVariant;
+    /**
+     * If `true`, the progress indicator is shown and the button becomes disabled.
+     * @default false
+     * */
+    progress?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    disabled?: boolean;
+    /**
+     * If `true`, only the icon is shown, and the button has same sides.
+     * @default false
+     * */
+    onlyIcon?: boolean;
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * If `true`, the button will take up the full width of its container.
+     * @default false
+     * */
+    fullWidth?: boolean;
+    /** Icon placed before the children. */
+    startIcon?: ReactNode;
+    /** Icon placed after the children. */
+    endIcon?: ReactNode;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Handler that is called when a hover interaction starts. */
+    onHoverStart?: (e: HoverEvent) => void;
+    /** Handler that is called when a hover interaction ends. */
+    onHoverEnd?: (e: HoverEvent) => void;
+    onClick?: ButtonPropOnClick;
+};

package/dist/components/Button/types.js

@@ -0,0 +1,11 @@
+const buttonPropVariant = [
+  "contrast-filled",
+  "contrast-transparent",
+  "fade-contrast-filled",
+  "fade-contrast-outline",
+  "fade-theme-outline",
+  "theme-transparent"
+];
+export {
+  buttonPropVariant
+};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,19 @@
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/checkbox").AriaCheckboxProps, "onChange" | "isDisabled" | "isRequired" | "isInvalid" | "isReadOnly" | "isSelected" | "isIndeterminate" | "defaultSelected">, "defaultChecked" | "onChange" | "disabled" | "checked" | "required" | "error" | "readonly" | "indeterminate"> & {
+    error?: boolean;
+    checked?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    indeterminate?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+} & {
+    className?: string;
+    size?: import("./types").CheckboxPropSize;
+    'data-testid'?: string | number;
+    labelPlacement?: import("./types").CheckboxPropLabelPlacement;
+    slotProps?: {
+        box?: import("react").ComponentPropsWithRef<"span">;
+        label?: import("react").ComponentPropsWithRef<"span">;
+    };
+} & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/Checkbox/Checkbox.js

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

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

@@ -0,0 +1,41 @@
+const base = "kbq-checkbox-72cf70";
+const checkbox = "kbq-checkbox-checkbox-dbb3d9";
+const normal = "kbq-checkbox-normal-646719";
+const big = "kbq-checkbox-big-d7d5f1";
+const hovered = "kbq-checkbox-hovered-a8a95e";
+const checked = "kbq-checkbox-checked-e66779";
+const error = "kbq-checkbox-error-3cdabd";
+const focusVisible = "kbq-checkbox-focusVisible-c41061";
+const indeterminate = "kbq-checkbox-indeterminate-efed4f";
+const disabled = "kbq-checkbox-disabled-e359aa";
+const start = "kbq-checkbox-start-5afa6a";
+const end = "kbq-checkbox-end-0c77de";
+const s = {
+  base,
+  checkbox,
+  normal,
+  big,
+  hovered,
+  checked,
+  error,
+  focusVisible,
+  indeterminate,
+  disabled,
+  start,
+  end
+};
+export {
+  base,
+  big,
+  checkbox,
+  checked,
+  s as default,
+  disabled,
+  end,
+  error,
+  focusVisible,
+  hovered,
+  indeterminate,
+  normal,
+  start
+};

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

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

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

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { UseCheckboxProps } from '@koobiq/react-primitives';
+export declare const checkboxPropSize: readonly ["normal", "big"];
+export type CheckboxPropSize = (typeof checkboxPropSize)[number];
+export declare const checkboxPropLabelPlacement: readonly ["start", "end"];
+export type CheckboxPropLabelPlacement = (typeof checkboxPropLabelPlacement)[number];
+export type CheckboxProps = UseCheckboxProps & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * Size.
+     * @default normal
+     * */
+    size?: CheckboxPropSize;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /**
+     * The position of the label.
+     * @default end
+     * */
+    labelPlacement?: CheckboxPropLabelPlacement;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        box?: ComponentPropsWithRef<'span'>;
+        label?: ComponentPropsWithRef<'span'>;
+    };
+};

package/dist/components/Checkbox/types.js

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

package/dist/components/Container/Container.d.ts

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

package/dist/components/Container/Container.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import s from "./Container.module.css.js";
+import { normalizeMaxInlineSize, normalizePosition, normalizeMargins } from "./utils.js";
+import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
+import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
+const Container = polymorphicForwardRef(
+  (props, ref) => {
+    const {
+      as: Tag = "div",
+      margins: marginsProp = 0,
+      position: positionProp = "center",
+      fixed = false,
+      children,
+      className,
+      maxInlineSize: maxInlineSizeProp,
+      style: styleProp,
+      ...other
+    } = props;
+    const breakpoints = useMatchedBreakpoints();
+    const maxInlineSize = getResponsiveValue(maxInlineSizeProp, breakpoints);
+    const position = getResponsiveValue(positionProp, breakpoints);
+    const margins = getResponsiveValue(marginsProp, breakpoints);
+    const style = {
+      ...styleProp,
+      "--container-max-inline-size": fixed ? void 0 : normalizeMaxInlineSize(maxInlineSize),
+      "--container-position": normalizePosition(position),
+      "--container-margins": normalizeMargins(margins)
+    };
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        className: clsx(s.base, className),
+        style,
+        ...other,
+        ref,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+export {
+  Container
+};

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

@@ -0,0 +1,8 @@
+const base = "kbq-container-136c61";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

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

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

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

@@ -0,0 +1,32 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ResponsiveValue } from '../../utils';
+export declare const containerMarginsProp: readonly [0, "3xs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "3xl", "4xl", "5xl", "6xl", "7xl"];
+export type ContainerMarginsProp = (typeof containerMarginsProp)[number];
+export type ContainerMaxInlineSizeProp = CSSProperties['maxInlineSize'];
+export declare const containerPositionProp: readonly ["start", "center", "end"];
+export type ContainerPositionProp = (typeof containerPositionProp)[number];
+export type ContainerBaseProps = {
+    /**
+     * Container position.
+     * @default center
+     * */
+    position?: ContainerPositionProp | ResponsiveValue<ContainerPositionProp>;
+    /** Determine the max-inline-size of the container. */
+    maxInlineSize?: ContainerMaxInlineSizeProp | ResponsiveValue<ContainerMaxInlineSizeProp>;
+    /**
+     * Margins are the space between content and the left and right edges of the screen.
+     * @default 0
+     * */
+    margins?: ContainerMarginsProp | ResponsiveValue<ContainerMarginsProp>;
+    /**
+     * If `true`, doesn't set the max-inline-size of the container.
+     * @default false
+     * */
+    fixed?: boolean;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+};

package/dist/components/Container/types.js

@@ -0,0 +1,21 @@
+const containerMarginsProp = [
+  0,
+  "3xs",
+  "xxs",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl",
+  "xxl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl"
+];
+const containerPositionProp = ["start", "center", "end"];
+export {
+  containerMarginsProp,
+  containerPositionProp
+};

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

@@ -0,0 +1,4 @@
+import type { ContainerMarginsProp, ContainerMaxInlineSizeProp, ContainerPositionProp } from './types';
+export declare const normalizeMargins: (value: ContainerMarginsProp | undefined) => string | 0 | undefined;
+export declare const normalizeMaxInlineSize: (value: ContainerMaxInlineSizeProp | undefined) => string | undefined;
+export declare const normalizePosition: (value: ContainerPositionProp | undefined) => "0 auto" | "auto 0" | "auto";

package/dist/components/Container/utils.js

@@ -0,0 +1,19 @@
+import { isString, isNumber } from "@koobiq/react-core";
+const normalizeMargins = (value) => {
+  if (isString(value)) return `var(--kbq-size-${value})`;
+  return value;
+};
+const normalizeMaxInlineSize = (value) => {
+  if (isNumber(value)) return `${value}px`;
+  return value;
+};
+const normalizePosition = (value) => {
+  if (value === "start") return "0 auto";
+  if (value === "end") return "auto 0";
+  return "auto";
+};
+export {
+  normalizeMargins,
+  normalizeMaxInlineSize,
+  normalizePosition
+};

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,2 @@
+import type { DialogProps } from './types';
+export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from "react";
+import { useBoolean, useDOMRef, mergeProps, clsx, useElementSize, useEventListener, useMultiRef } from "@koobiq/react-core";
+import { useDialog } from "@koobiq/react-primitives";
+import { utilClasses } from "../../styles/utility.js";
+import s from "./Dialog.module.css.js";
+import { DialogContext } from "./DialogContext.js";
+import { DialogCloseButton } from "./components/DialogCloseButton.js";
+const Dialog = forwardRef(
+  ({ onClose, children, slotProps, hideCloseButton, ...other }, ref) => {
+    const [topOverflow, { set: setTopOverflow }] = useBoolean();
+    const [bottomOverflow, { set: setBottomOverflow }] = useBoolean();
+    const contentRef = useRef(null);
+    const domRef = useDOMRef(ref);
+    const { dialogProps } = useDialog(other, domRef);
+    const showCloseButton = !hideCloseButton;
+    const rootProps = mergeProps(
+      {
+        className: clsx(s.base, utilClasses.typography["text-normal"]),
+        "data-close-button": showCloseButton,
+        "data-top-overflow": topOverflow,
+        "data-bottom-overflow": bottomOverflow
+      },
+      other,
+      dialogProps
+    );
+    const containerProps = mergeProps({
+      className: s.container
+    });
+    const updateOverflow = (element) => {
+      if (!element) return;
+      setTopOverflow(element.scrollTop > 0);
+      setBottomOverflow(
+        element.scrollTop + element.clientHeight < element.scrollHeight
+      );
+    };
+    const { ref: innerRef, height } = useElementSize();
+    useEffect(() => {
+      if (contentRef.current) updateOverflow(contentRef.current);
+    }, [contentRef.current, height]);
+    useEventListener({
+      element: contentRef,
+      eventName: "scroll",
+      handler: () => {
+        updateOverflow(contentRef.current);
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      DialogContext.Provider,
+      {
+        value: {
+          close: onClose,
+          slots: { content: { ref: useMultiRef([contentRef, innerRef]) } }
+        },
+        children: /* @__PURE__ */ jsxs("section", { ...rootProps, ref: domRef, children: [
+          showCloseButton && /* @__PURE__ */ jsx(DialogCloseButton, { ...slotProps?.["close-button"] }),
+          /* @__PURE__ */ jsx("div", { ...containerProps, children })
+        ] })
+      }
+    );
+  }
+);
+Dialog.displayName = "Dialog";
+export {
+  Dialog
+};

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

@@ -0,0 +1,23 @@
+const base = "kbq-dialog-4c737c";
+const container = "kbq-dialog-container-a08202";
+const header = "kbq-dialog-header-f96b65";
+const closeButton = "kbq-dialog-closeButton-4b804e";
+const content = "kbq-dialog-content-8f3b2a";
+const footer = "kbq-dialog-footer-cf03d1";
+const s = {
+  base,
+  container,
+  header,
+  closeButton,
+  content,
+  footer
+};
+export {
+  base,
+  closeButton,
+  container,
+  content,
+  s as default,
+  footer,
+  header
+};

package/dist/components/Dialog/DialogContext.d.ts

@@ -0,0 +1,9 @@
+import type { DialogContentProps } from './components';
+export type DialogContextProps = {
+    close?(): void;
+    slots?: {
+        content?: DialogContentProps;
+    };
+};
+export declare const DialogContext: import("react").Context<DialogContextProps>;
+export declare function useDialogProvider(): DialogContextProps;

package/dist/components/Dialog/DialogContext.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext, useContext } from "react";
+const DialogContext = createContext(
+  {}
+);
+function useDialogProvider() {
+  return useContext(DialogContext);
+}
+export {
+  DialogContext,
+  useDialogProvider
+};

package/dist/components/Dialog/components/DialogCloseButton.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentRef } from 'react';
+import { type ButtonProps } from '../../Button';
+export type DialogCloseButtonRef = ComponentRef<'button'>;
+export type DialogCloseButtonProps = ButtonProps;
+export declare const DialogCloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "as" | keyof import("../..").ButtonBaseProps> & import("../..").ButtonBaseProps & {
+    as?: "button" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Dialog/components/DialogCloseButton.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { mergeProps } from "@koobiq/react-core";
+import { IconXmark16 } from "@koobiq/react-icons";
+import { useLocalizedStringFormatter } from "@koobiq/react-primitives";
+import s from "../Dialog.module.css.js";
+import intlMessages from "../intl.json.js";
+import { useDialogProvider } from "../DialogContext.js";
+import { Button } from "../../Button/Button.js";
+const DialogCloseButton = forwardRef(({ onClick, ...other }, ref) => {
+  const { close } = useDialogProvider();
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  return /* @__PURE__ */ jsx("div", { className: s.closeButton, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...mergeProps({ onClick: close }, { onClick }),
+      "aria-label": stringFormatter.format("close"),
+      startIcon: /* @__PURE__ */ jsx(IconXmark16, {}),
+      variant: "contrast-transparent",
+      onlyIcon: true,
+      ...other,
+      ref
+    }
+  ) });
+});
+DialogCloseButton.displayName = "DialogCloseButton";
+export {
+  DialogCloseButton
+};

package/dist/components/Dialog/components/DialogContent.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode, ComponentRef } from 'react';
+import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type DialogContentRef = ComponentRef<'div'>;
+export type DialogContentProps = ExtendableComponentPropsWithRef<{
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string;
+}, 'div'>;
+export declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog/components/DialogContent.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useMultiRef, clsx } from "@koobiq/react-core";
+import { utilClasses } from "../../../styles/utility.js";
+import s from "../Dialog.module.css.js";
+import { useDialogProvider } from "../DialogContext.js";
+const DialogContent = forwardRef(
+  ({ children, className, ...other }, ref) => {
+    const { slots } = useDialogProvider();
+    const { content: { ref: contextRef } = {} } = slots || {};
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: useMultiRef([ref, contextRef]),
+        className: clsx(
+          s.content,
+          utilClasses.typography["text-normal"],
+          className
+        ),
+        ...other,
+        children
+      }
+    );
+  }
+);
+DialogContent.displayName = "DialogContent";
+export {
+  DialogContent
+};

package/dist/components/Dialog/components/DialogFooter.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode, ComponentRef } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type DialogFooterRef = ComponentRef<'div'>;
+export type DialogFooterProps = ExtendableComponentPropsWithRef<{
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string;
+}, 'div'>;
+export declare const DialogFooter: import("react").ForwardRefExoticComponent<Omit<DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog/components/DialogFooter.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import s from "../Dialog.module.css.js";
+const DialogFooter = forwardRef(
+  ({ children, className, ...other }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx(s.footer, className), ...other, children })
+);
+DialogFooter.displayName = "DialogFooter";
+export {
+  DialogFooter
+};