@koobiq/react-components 0.0.1-beta.1

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { useDOMRef, useBoolean, FocusableProvider, mergeProps, clsx } from "@koobiq/react-core";
+import { useTooltipTriggerState, useTooltipTrigger, useOverlayPosition, useTooltip, Overlay } from "@koobiq/react-primitives";
+import { Transition } from "react-transition-group";
+import { utilClasses } from "../../styles/utility.js";
+import s from "./Tooltip.module.css.js";
+const Tooltip = forwardRef((props, ref) => {
+  const {
+    delay = 120,
+    disabled = false,
+    defaultOpen,
+    closeDelay = 120,
+    hideArrow = false,
+    variant = "contrast",
+    onOpenChange,
+    placement: placementProp = "top",
+    control,
+    children,
+    anchorRef,
+    crossOffset,
+    open: openProp,
+    offset: offsetProp,
+    arrowBoundaryOffset,
+    ...other
+  } = props;
+  const showArrow = !hideArrow;
+  const offset = showArrow ? offsetProp : offsetProp || 4;
+  const state = useTooltipTriggerState({
+    delay,
+    closeDelay,
+    defaultOpen,
+    onOpenChange,
+    isOpen: openProp,
+    isDisabled: disabled,
+    ...other
+  });
+  const domRef = useDOMRef(ref);
+  const controlRef = useRef(null);
+  const { triggerProps, tooltipProps } = useTooltipTrigger(
+    {
+      delay,
+      closeDelay,
+      defaultOpen,
+      onOpenChange,
+      isOpen: openProp,
+      isDisabled: disabled,
+      ...other
+    },
+    state,
+    controlRef
+  );
+  const openState = state.isOpen;
+  const [opened, { on, off }] = useBoolean(openState);
+  const { overlayProps, arrowProps, placement } = useOverlayPosition({
+    offset,
+    crossOffset,
+    isOpen: opened,
+    maxHeight: 480,
+    overlayRef: domRef,
+    arrowBoundaryOffset,
+    placement: placementProp,
+    onClose: () => state.close(true),
+    targetRef: anchorRef || controlRef
+  });
+  const { tooltipProps: localTooltipProps } = useTooltip(overlayProps, state);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FocusableProvider, { ...triggerProps, ref: controlRef, children: control?.({
+      ref: controlRef,
+      ...triggerProps
+    }) }),
+    /* @__PURE__ */ jsx(
+      Transition,
+      {
+        onEnter: on,
+        timeout: 300,
+        onExited: off,
+        in: openState,
+        nodeRef: domRef,
+        unmountOnExit: true,
+        appear: true,
+        children: (transition) => /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...mergeProps(localTooltipProps, tooltipProps),
+            "data-arrow": showArrow,
+            "data-variant": variant,
+            "data-placement": placement,
+            "data-transition": transition,
+            className: clsx(
+              s.base,
+              s[variant],
+              utilClasses.typography["text-normal"]
+            ),
+            ...other,
+            ref: domRef,
+            children: [
+              showArrow && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...arrowProps,
+                  className: s.arrow,
+                  "data-placement": placement
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: s.container, children: /* @__PURE__ */ jsx("div", { className: s.content, children }) })
+            ]
+          }
+        ) })
+      },
+      placement
+    )
+  ] });
+});
+Tooltip.displayName = "Tooltip";
+export {
+  Tooltip
+};

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

@@ -0,0 +1,30 @@
+const base = "kbq-tooltip-0c8f57";
+const container = "kbq-tooltip-container-9747af";
+const content = "kbq-tooltip-content-b5dfb0";
+const contrast = "kbq-tooltip-contrast-1d442f";
+const error = "kbq-tooltip-error-267f02";
+const warning = "kbq-tooltip-warning-312ad2";
+const theme = "kbq-tooltip-theme-c23977";
+const arrow = "kbq-tooltip-arrow-1d1044";
+const s = {
+  base,
+  container,
+  content,
+  contrast,
+  "contrast-fade": "kbq-tooltip-contrast-fade-5a17ff",
+  error,
+  warning,
+  theme,
+  arrow
+};
+export {
+  arrow,
+  base,
+  container,
+  content,
+  contrast,
+  s as default,
+  error,
+  theme,
+  warning
+};

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

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

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

@@ -0,0 +1,81 @@
+import type { ReactNode, ComponentRef, Ref, ReactElement, HTMLAttributes, RefObject } from 'react';
+import type { DataAttributeProps } from '@koobiq/react-core';
+export type TooltipPropControl = (props: HTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+}) => ReactElement;
+export declare const tooltipPropPlacement: readonly ["bottom", "bottom start", "bottom end", "top", "top start", "top end", "start", "start top", "start bottom", "end", "end top", "end bottom"];
+export declare const tooltipPropVariant: readonly ["contrast", "contrast-fade", "error", "warning", "theme"];
+export type TooltipPropVariant = (typeof tooltipPropVariant)[number];
+export type TooltipPropPlacement = (typeof tooltipPropPlacement)[number];
+export type TooltipProps = {
+    /**
+     * The variant to use.
+     * @default contrast
+     * */
+    variant?: TooltipPropVariant;
+    /** If `true`, the component is shown. */
+    open?: boolean;
+    /** The default open state. Use when the component is not controlled. */
+    defaultOpen?: boolean;
+    /** Handler that is called when the overlay's open state changes. */
+    onOpenChange?(open: boolean): void;
+    /**
+     * If `true`, the tooltip should be disabled, independent of the trigger.
+     * @default false
+     * */
+    disabled?: boolean;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** The render function of the control for displaying the tooltip. */
+    control?: TooltipPropControl;
+    /**
+     * The placement of the element with respect to its anchor element.
+     * @default top
+     * */
+    placement?: TooltipPropPlacement;
+    /** The ref for the element which the popover positions itself with respect to. */
+    anchorRef?: RefObject<HTMLElement>;
+    /**
+     * The minimum distance the arrow's edge should be from the edge of the overlay element.
+     * @default 0
+     */
+    arrowBoundaryOffset?: number;
+    /**
+     * The additional offset applied along the main axis between the element and its
+     * anchor element.
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * The additional offset applied along the cross axis between the element and its
+     * anchor element.
+     * @default 0
+     */
+    crossOffset?: number;
+    /**
+     * If `true`, the arrow isn't shown.
+     * @default false
+     * */
+    hideArrow?: boolean;
+    /**
+     * The delay time for the tooltip to show up.
+     * @default 120
+     */
+    delay?: number;
+    /**
+     * The delay time for the tooltip to close.
+     * @default 120
+     */
+    closeDelay?: number;
+    /**
+     * By default, opens for both focus and hover. Can be made to open only for focus.
+     */
+    trigger?: 'focus';
+    /**
+     * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+     */
+    id?: string;
+    /** Additional CSS-classes. */
+    className?: string;
+} & DataAttributeProps;
+export type TooltipRef = ComponentRef<'div'>;

package/dist/components/Tooltip/types.js

@@ -0,0 +1,25 @@
+const tooltipPropPlacement = [
+  "bottom",
+  "bottom start",
+  "bottom end",
+  "top",
+  "top start",
+  "top end",
+  "start",
+  "start top",
+  "start bottom",
+  "end",
+  "end top",
+  "end bottom"
+];
+const tooltipPropVariant = [
+  "contrast",
+  "contrast-fade",
+  "error",
+  "warning",
+  "theme"
+];
+export {
+  tooltipPropPlacement,
+  tooltipPropVariant
+};

package/dist/components/Typography/Typography.d.ts

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

package/dist/components/Typography/Typography.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { Text } from "@koobiq/react-primitives";
+import { utilClasses } from "../../styles/utility.js";
+import s from "./Typography.module.css.js";
+const foregroundColor = utilClasses.color.foreground;
+const textVariant = utilClasses.typography;
+const Typography = polymorphicForwardRef(
+  ({
+    variant = "text-normal",
+    color = "contrast",
+    as = "p",
+    children,
+    ellipsis,
+    display,
+    align,
+    className,
+    ...other
+  }, ref) => /* @__PURE__ */ jsx(
+    Text,
+    {
+      as,
+      "data-align": align,
+      "data-color": color,
+      "data-variant": variant,
+      "data-display": display,
+      "data-ellipsis": ellipsis,
+      className: clsx(
+        s.base,
+        display && s[display],
+        ellipsis && s.ellipsis,
+        align && s[`align-${align}`],
+        textVariant[variant],
+        foregroundColor[color],
+        className
+      ),
+      ...other,
+      ref,
+      children
+    }
+  )
+);
+Typography.displayName = "Typography";
+export {
+  Typography
+};

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

@@ -0,0 +1,23 @@
+const base = "kbq-typography-645b00";
+const block = "kbq-typography-block-b93e3b";
+const inline = "kbq-typography-inline-0ef064";
+const ellipsis = "kbq-typography-ellipsis-0ba98f";
+const s = {
+  base,
+  block,
+  inline,
+  "inline-block": "kbq-typography-inline-block-027ced",
+  "align-start": "kbq-typography-align-start-c9f58b",
+  "align-end": "kbq-typography-align-end-1a6658",
+  "align-center": "kbq-typography-align-center-2d47fd",
+  "align-initial": "kbq-typography-align-initial-faf6dd",
+  "align-inherit": "kbq-typography-align-inherit-00f946",
+  ellipsis
+};
+export {
+  base,
+  block,
+  s as default,
+  ellipsis,
+  inline
+};

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

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

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

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+export declare const typographyPropVariant: readonly ["display-big", "display-normal", "display-compact", "display-big-strong", "display-normal-strong", "display-compact-strong", "headline", "title", "subheading", "text-big", "text-big-strong", "text-big-medium", "text-normal", "text-normal-strong", "text-normal-medium", "text-compact", "text-compact-strong", "text-compact-medium", "caps-big", "caps-big-strong", "caps-normal", "caps-normal-strong", "caps-compact", "caps-compact-strong", "mono-big", "mono-big-strong", "mono-normal", "mono-normal-strong", "mono-compact", "mono-compact-strong", "mono-codeblock", "tabular-big", "tabular-big-strong", "tabular-normal", "tabular-normal-strong", "tabular-compact", "tabular-compact-strong", "italic-big", "italic-big-strong", "italic-normal", "italic-normal-strong", "italic-compact", "italic-compact-strong", "inherit"];
+export type TypographyPropVariant = (typeof typographyPropVariant)[number];
+export declare const typographyPropDisplay: readonly ["block", "inline", "inline-block"];
+export type TypographyDisplayVariant = (typeof typographyPropDisplay)[number];
+export declare const typographyPropAlign: readonly ["start", "center", "end", "initial", "inherit"];
+export type TypographyPropAlign = (typeof typographyPropAlign)[number];
+export declare const typographyPropColor: readonly ["white", "white-secondary", "theme", "theme-secondary", "contrast", "on-contrast", "contrast-secondary", "contrast-tertiary", "error", "error-secondary", "error-tertiary", "error-less", "success", "success-less", "success-secondary", "warning", "warning-secondary", "visited"];
+export type TypographyPropColor = (typeof typographyPropColor)[number];
+export type TypographyBaseProps = {
+    /**
+     * The variant to use.
+     * @default text-normal
+     * */
+    variant?: TypographyPropVariant;
+    /** Set the display for the component. */
+    display?: TypographyDisplayVariant;
+    /** Set the text-align on the component. */
+    align?: TypographyPropAlign;
+    /** Hidden overflow content will be replaced by an ellipsis. */
+    ellipsis?: boolean;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /**
+     * Text color.
+     * @default contrast
+     * */
+    color?: TypographyPropColor;
+};

package/dist/components/Typography/types.js

@@ -0,0 +1,84 @@
+const typographyPropVariant = [
+  "display-big",
+  "display-normal",
+  "display-compact",
+  "display-big-strong",
+  "display-normal-strong",
+  "display-compact-strong",
+  "headline",
+  "title",
+  "subheading",
+  "text-big",
+  "text-big-strong",
+  "text-big-medium",
+  "text-normal",
+  "text-normal-strong",
+  "text-normal-medium",
+  "text-compact",
+  "text-compact-strong",
+  "text-compact-medium",
+  "caps-big",
+  "caps-big-strong",
+  "caps-normal",
+  "caps-normal-strong",
+  "caps-compact",
+  "caps-compact-strong",
+  "mono-big",
+  "mono-big-strong",
+  "mono-normal",
+  "mono-normal-strong",
+  "mono-compact",
+  "mono-compact-strong",
+  "mono-codeblock",
+  "tabular-big",
+  "tabular-big-strong",
+  "tabular-normal",
+  "tabular-normal-strong",
+  "tabular-compact",
+  "tabular-compact-strong",
+  "italic-big",
+  "italic-big-strong",
+  "italic-normal",
+  "italic-normal-strong",
+  "italic-compact",
+  "italic-compact-strong",
+  "inherit"
+];
+const typographyPropDisplay = [
+  "block",
+  "inline",
+  "inline-block"
+];
+const typographyPropAlign = [
+  "start",
+  "center",
+  "end",
+  "initial",
+  "inherit"
+];
+const typographyPropColor = [
+  "white",
+  "white-secondary",
+  "theme",
+  "theme-secondary",
+  "contrast",
+  "on-contrast",
+  "contrast-secondary",
+  "contrast-tertiary",
+  "error",
+  "error-secondary",
+  "error-tertiary",
+  "error-less",
+  "success",
+  "success-less",
+  "success-secondary",
+  "warning",
+  "warning-secondary",
+  "visited"
+];
+export {
+  typographyPropAlign,
+  typographyPropColor,
+  typographyPropDisplay,
+  typographyPropVariant
+};

package/dist/components/index.d.ts

@@ -0,0 +1,24 @@
+export * from './Provider';
+export * from './Container';
+export * from './Alert';
+export * from './Button';
+export * from './IconButton';
+export * from './Typography';
+export * from './Checkbox';
+export * from './Link';
+export * from './Badge';
+export * from './Input';
+export * from './Textarea';
+export * from './InputNumber';
+export * from './RadioGroup';
+export * from './Toggle';
+export * from './ProgressBar';
+export * from './ProgressSpinner';
+export * from './Grid';
+export * from './SkeletonBlock';
+export * from './SkeletonTypography';
+export * from './Modal';
+export * from './SidePanel';
+export * from './Popover';
+export * from './Tooltip';
+export * from './layout';

package/dist/components/layout/flex/flex.d.ts

@@ -0,0 +1,25 @@
+export declare const flexPropAlignItems: readonly ["flex-start", "flex-end", "center", "baseline", "stretch"];
+export type FlexPropAlignItems = (typeof flexPropAlignItems)[number];
+export declare const flexPropGap: readonly ["3xs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "3xl", "4xl", "5l", "6xl", "7xl"];
+export type FlexPropGap = (typeof flexPropGap)[number];
+export declare const flexPropJustifyContent: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"];
+export type FlexPropJustifyContent = (typeof flexPropJustifyContent)[number];
+export declare const flexPropFlex: readonly ["flex", "inline-flex"];
+export type FlexPropFlex = (typeof flexPropFlex)[number];
+export declare const flexPropWrap: readonly ["nowrap", "wrap", "wrap-reverse"];
+export type FlexPropWrap = (typeof flexPropWrap)[number];
+export declare const flexPropDirection: readonly ["row", "row-reverse", "column", "column-reverse"];
+export type FlexPropDirection = (typeof flexPropDirection)[number];
+export declare const flexPropOrder: readonly [-1, 0, 1];
+export type FlexPropOrder = (typeof flexPropOrder)[number];
+export type FlexProps = {
+    alignItems?: FlexPropAlignItems;
+    justifyContent?: FlexPropJustifyContent;
+    flex?: FlexPropFlex;
+    wrap?: FlexPropWrap;
+    direction?: FlexPropDirection;
+    gap?: FlexPropGap;
+    order?: FlexPropOrder;
+};
+export type FlexParams = (props: FlexProps, className?: string) => string;
+export declare const flex: FlexParams;

package/dist/components/layout/flex/flex.js

@@ -0,0 +1,74 @@
+import { clsx } from "@koobiq/react-core";
+import s from "./flex.module.css.js";
+const flexPropAlignItems = [
+  "flex-start",
+  "flex-end",
+  "center",
+  "baseline",
+  "stretch"
+];
+const flexPropGap = [
+  "3xs",
+  "xxs",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl",
+  "xxl",
+  "3xl",
+  "4xl",
+  "5l",
+  "6xl",
+  "7xl"
+];
+const flexPropJustifyContent = [
+  "flex-start",
+  "flex-end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly"
+];
+const flexPropFlex = ["flex", "inline-flex"];
+const flexPropWrap = ["nowrap", "wrap", "wrap-reverse"];
+const flexPropDirection = [
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse"
+];
+const flexPropOrder = [-1, 0, 1];
+const flex = (props, className) => {
+  const {
+    alignItems,
+    justifyContent,
+    flex: flex2,
+    wrap,
+    direction,
+    gap,
+    order: orderProp
+  } = props;
+  const order = String(orderProp);
+  return clsx(
+    s.base,
+    gap && s[`gap_${gap}`],
+    flex2 && s[`flex_${flex2}`],
+    wrap && s[`wrap_${wrap}`],
+    order && s[`order_${order}`],
+    direction && s[`direction_${direction}`],
+    alignItems && s[`alignItems_${alignItems}`],
+    justifyContent && s[`justifyContent_${justifyContent}`],
+    className
+  );
+};
+export {
+  flex,
+  flexPropAlignItems,
+  flexPropDirection,
+  flexPropFlex,
+  flexPropGap,
+  flexPropJustifyContent,
+  flexPropOrder,
+  flexPropWrap
+};

package/dist/components/layout/flex/flex.module.css.js

@@ -0,0 +1,92 @@
+const base = "kbq-flex-7624b3";
+const alignItems_center = "kbq-flex-alignItems_center-05836e";
+const alignItems_baseline = "kbq-flex-alignItems_baseline-1e77c2";
+const alignItems_stretch = "kbq-flex-alignItems_stretch-f031de";
+const justifyContent_center = "kbq-flex-justifyContent_center-5134e2";
+const flex_flex = "kbq-flex-flex_flex-de4f74";
+const wrap_wrap = "kbq-flex-wrap_wrap-78b98d";
+const wrap_nowrap = "kbq-flex-wrap_nowrap-902a73";
+const direction_row = "kbq-flex-direction_row-8fff0d";
+const direction_column = "kbq-flex-direction_column-29b97b";
+const order_0 = "kbq-flex-order_0-4a6164";
+const order_1 = "kbq-flex-order_1-b5e24c";
+const gap_3xs = "kbq-flex-gap_3xs-5c9d4e";
+const gap_xxs = "kbq-flex-gap_xxs-035614";
+const gap_xs = "kbq-flex-gap_xs-970b31";
+const gap_s = "kbq-flex-gap_s-e9d292";
+const gap_m = "kbq-flex-gap_m-21a099";
+const gap_l = "kbq-flex-gap_l-47c05c";
+const gap_xl = "kbq-flex-gap_xl-d76274";
+const gap_xxl = "kbq-flex-gap_xxl-0e68cb";
+const gap_3xl = "kbq-flex-gap_3xl-497012";
+const gap_4xl = "kbq-flex-gap_4xl-0b7c71";
+const gap_5xl = "kbq-flex-gap_5xl-ed56fe";
+const gap_6xl = "kbq-flex-gap_6xl-0749d1";
+const gap_7xl = "kbq-flex-gap_7xl-0a1536";
+const s = {
+  base,
+  "alignItems_flex-start": "kbq-flex-alignItems_flex-start-56df74",
+  "alignItems_flex-end": "kbq-flex-alignItems_flex-end-951e7a",
+  alignItems_center,
+  alignItems_baseline,
+  alignItems_stretch,
+  "justifyContent_flex-start": "kbq-flex-justifyContent_flex-start-05ff2a",
+  "justifyContent_flex-end": "kbq-flex-justifyContent_flex-end-06a105",
+  justifyContent_center,
+  "justifyContent_space-between": "kbq-flex-justifyContent_space-between-02a3e5",
+  "justifyContent_space-around": "kbq-flex-justifyContent_space-around-42e955",
+  "justifyContent_space-evenly": "kbq-flex-justifyContent_space-evenly-b84975",
+  flex_flex,
+  "flex_inline-flex": "kbq-flex-flex_inline-flex-a712ef",
+  wrap_wrap,
+  wrap_nowrap,
+  "wrap_wrap-reverse": "kbq-flex-wrap_wrap-reverse-dbacf6",
+  direction_row,
+  "direction_row-reverse": "kbq-flex-direction_row-reverse-7fa95e",
+  direction_column,
+  "direction_column-reverse": "kbq-flex-direction_column-reverse-04ecc6",
+  "order_-1": "kbq-flex-order_-1-4f5108",
+  order_0,
+  order_1,
+  gap_3xs,
+  gap_xxs,
+  gap_xs,
+  gap_s,
+  gap_m,
+  gap_l,
+  gap_xl,
+  gap_xxl,
+  gap_3xl,
+  gap_4xl,
+  gap_5xl,
+  gap_6xl,
+  gap_7xl
+};
+export {
+  alignItems_baseline,
+  alignItems_center,
+  alignItems_stretch,
+  base,
+  s as default,
+  direction_column,
+  direction_row,
+  flex_flex,
+  gap_3xl,
+  gap_3xs,
+  gap_4xl,
+  gap_5xl,
+  gap_6xl,
+  gap_7xl,
+  gap_l,
+  gap_m,
+  gap_s,
+  gap_xl,
+  gap_xs,
+  gap_xxl,
+  gap_xxs,
+  justifyContent_center,
+  order_0,
+  order_1,
+  wrap_nowrap,
+  wrap_wrap
+};

package/dist/components/layout/flex/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './flex';
+export * from './spacing';