@koobiq/react-components 0.0.1-beta.20 → 0.0.1-beta.21

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

@@ -35,6 +35,7 @@ export type AlertBaseProps = {
     icon?: ReactNode;
     /** A callback function called when the user clicks the alert's close button. */
     onClose?: IconButtonProps['onPress'];
+    /** The props used for each slot inside. */
     slotProps?: {
         content?: ComponentPropsWithRef<'div'>;
         statusIcon?: ComponentPropsWithRef<'div'>;

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

@@ -15,8 +15,8 @@ export declare const DialogCloseButton: import("react").ForwardRefExoticComponen
     startIcon?: import("react").ReactNode;
     endIcon?: import("react").ReactNode;
     'data-testid'?: string | number;
-    onHoverStart?: (e: import("@react-types/shared").HoverEvent) => void;
-    onHoverEnd?: (e: import("@react-types/shared").HoverEvent) => void;
+    onHoverStart?: (e: import("@koobiq/react-primitives").HoverEvent) => void;
+    onHoverEnd?: (e: import("@koobiq/react-primitives").HoverEvent) => void;
 } & {
     as?: "button" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/TagGroup/Tag.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { ItemProps as AriaItemProps } from '@koobiq/react-primitives';
+import type { IconButtonProps } from '../IconButton';
+export type TagProps<T> = AriaItemProps<T> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Icon placed before the children. */
+    icon?: ReactNode;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        icon?: ComponentPropsWithRef<'span'>;
+        content?: ComponentPropsWithRef<'span'>;
+        removeIcon?: IconButtonProps;
+    };
+};
+export declare function Tag<T>(_props: TagProps<T>): null;
+export declare namespace Tag {
+    var getCollectionNode: unknown;
+}

package/dist/components/TagGroup/Tag.js

@@ -0,0 +1,10 @@
+"use client";
+import { Item } from "@koobiq/react-primitives";
+const ItemInner = Item;
+function Tag(_props) {
+  return null;
+}
+Tag.getCollectionNode = ItemInner.getCollectionNode;
+export {
+  Tag
+};

package/dist/components/TagGroup/TagGroup.d.ts

@@ -0,0 +1,2 @@
+import type { TagGroupComponentProp } from './types';
+export declare const TagGroup: TagGroupComponentProp;

package/dist/components/TagGroup/TagGroup.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useListState, useTagGroup } from "@koobiq/react-primitives";
+import s from "./TagGroup.module.css.js";
+import { TagInner } from "./components/TagInner/TagInner.js";
+function TagGroupRender(props, ref) {
+  const { variant = "theme-fade", style, className, slotProps } = props;
+  const domRef = useDOMRef(ref);
+  const state = useListState(props);
+  const { gridProps } = useTagGroup(props, state, domRef);
+  const rootProps = mergeProps(
+    { className: clsx(s.base, className), style, ref: domRef },
+    gridProps,
+    slotProps?.root
+  );
+  return /* @__PURE__ */ jsx("div", { ...rootProps, children: [...state.collection].map((item) => /* @__PURE__ */ jsx(TagInner, { item, variant, state }, item.key)) });
+}
+const TagGroup = forwardRef(TagGroupRender);
+export {
+  TagGroup
+};

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

@@ -0,0 +1,8 @@
+const base = "kbq-taggroup-20136b";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/TagGroup/components/TagInner/TagInner.d.ts

@@ -0,0 +1,11 @@
+import { type AriaTagProps, type ListState } from '@koobiq/react-primitives';
+import type { TagGroupPropVariant } from '../../index';
+export type TagInnerProps<T> = AriaTagProps<T> & {
+    state: ListState<T>;
+    /**
+     * The variant to use.
+     * @default theme-fade
+     * */
+    variant?: TagGroupPropVariant;
+};
+export declare function TagInner<T>(props: TagInnerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/TagGroup/components/TagInner/TagInner.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useFocusRing, useHover, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { IconXmarkS16 } from "@koobiq/react-icons";
+import { useLocalizedStringFormatter, useTag } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import intlMessages from "../../intl.json.js";
+import s from "./TagInner.module.css.js";
+import { matchVariantToCloseButton } from "./utils.js";
+import { IconButton } from "../../../IconButton/IconButton.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+function TagInner(props) {
+  const { item, state, variant = "theme-fade" } = props;
+  const { slotProps, icon, className, style } = item.props;
+  const ref = useRef(null);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const { focusProps, isFocusVisible, isFocused } = useFocusRing({
+    within: false
+  });
+  const {
+    rowProps,
+    gridCellProps,
+    removeButtonProps: removeButtonPropsAria,
+    allowsRemoving,
+    isDisabled,
+    isPressed
+  } = useTag(props, state, ref);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const rootProps = mergeProps(
+    {
+      className: clsx(
+        s.base,
+        s[variant],
+        isFocused && s.focused,
+        isHovered && s.hovered,
+        isDisabled && s.disabled,
+        textNormalMedium,
+        className
+      ),
+      style,
+      "data-variant": variant,
+      "data-focused": isFocused,
+      "data-pressed": isPressed,
+      "data-hovered": isHovered,
+      "aria-disabled": isDisabled,
+      "data-disabled": isDisabled,
+      "data-focus-visible": isFocusVisible
+    },
+    rowProps,
+    hoverProps,
+    focusProps,
+    slotProps?.root
+  );
+  const removeButtonProps = mergeProps(
+    {
+      tabIndex: -1,
+      compact: true,
+      disabled: isDisabled,
+      className: s.cancelIcon,
+      variant: matchVariantToCloseButton[variant],
+      "aria-label": stringFormatter.format("close")
+    },
+    removeButtonPropsAria,
+    slotProps?.removeIcon
+  );
+  const contentProps = mergeProps(
+    {
+      className: s.content
+    },
+    slotProps?.content
+  );
+  const iconProps = mergeProps(
+    {
+      className: s.icon
+    },
+    slotProps?.icon
+  );
+  return /* @__PURE__ */ jsx("div", { ref, ...rootProps, children: /* @__PURE__ */ jsxs("div", { ...gridCellProps, children: [
+    isNotNil(icon) && /* @__PURE__ */ jsx("span", { ...iconProps, children: icon }),
+    isNotNil(item.rendered) && /* @__PURE__ */ jsx("span", { ...contentProps, children: item.rendered }),
+    allowsRemoving && /* @__PURE__ */ jsx(IconButton, { size: "l", ...removeButtonProps, children: /* @__PURE__ */ jsx(IconXmarkS16, {}) })
+  ] }) });
+}
+export {
+  TagInner
+};

package/dist/components/TagGroup/components/TagInner/TagInner.module.css.js

@@ -0,0 +1,30 @@
+const base = "kbq-taginner-f9f19a";
+const content = "kbq-taginner-content-72ca39";
+const icon = "kbq-taginner-icon-df45be";
+const cancelIcon = "kbq-taginner-cancelIcon-8a3dbe";
+const hovered = "kbq-taginner-hovered-abf199";
+const focused = "kbq-taginner-focused-16f44f";
+const disabled = "kbq-taginner-disabled-0c6073";
+const s = {
+  base,
+  content,
+  icon,
+  cancelIcon,
+  "theme-fade": "kbq-taginner-theme-fade-68b99c",
+  "contrast-fade": "kbq-taginner-contrast-fade-39d7a7",
+  "error-fade": "kbq-taginner-error-fade-6d7d03",
+  "warning-fade": "kbq-taginner-warning-fade-9403c7",
+  hovered,
+  focused,
+  disabled
+};
+export {
+  base,
+  cancelIcon,
+  content,
+  s as default,
+  disabled,
+  focused,
+  hovered,
+  icon
+};

package/dist/components/TagGroup/components/TagInner/index.d.ts

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

package/dist/components/TagGroup/components/TagInner/utils.d.ts

@@ -0,0 +1,3 @@
+import type { IconButtonPropVariant } from '../../../IconButton';
+import type { TagGroupPropVariant } from '../../types';
+export declare const matchVariantToCloseButton: Record<TagGroupPropVariant, IconButtonPropVariant>;

package/dist/components/TagGroup/components/TagInner/utils.js

@@ -0,0 +1,9 @@
+const matchVariantToCloseButton = {
+  "theme-fade": "theme",
+  "contrast-fade": "fade-contrast",
+  "error-fade": "error",
+  "warning-fade": "warning"
+};
+export {
+  matchVariantToCloseButton
+};

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

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

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

@@ -0,0 +1,3 @@
+export * from './TagGroup';
+export * from './Tag';
+export * from './types';

package/dist/components/TagGroup/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "close": "Закрыть" },
+  "en-US": { "close": "Close" }
+};
+export {
+  intlMessages as default
+};

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

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { AriaTagGroupProps } from '@koobiq/react-primitives';
+export type TagGroupPropChildren<T extends object> = AriaTagGroupProps<T>['children'];
+export type TagGroupPropItems<T extends object> = AriaTagGroupProps<T>['items'];
+export type TagGroupPropOnRemove<T extends object> = AriaTagGroupProps<T>['onRemove'];
+export type TagGroupPropDisabledKeys<T extends object> = AriaTagGroupProps<T>['disabledKeys'];
+export declare const tagGroupPropVariant: readonly ["theme-fade", "contrast-fade", "error-fade", "warning-fade"];
+export type TagGroupPropVariant = (typeof tagGroupPropVariant)[number];
+export type TagGroupProps<T extends object> = {
+    /** The contents of the collection. */
+    children?: TagGroupPropChildren<T>;
+    /** Item objects in the collection. */
+    items?: TagGroupPropItems<T>;
+    /** Handler that is called when a user deletes a tag.  */
+    onRemove?: TagGroupPropOnRemove<T>;
+    /**
+     * The variant to use.
+     * @default theme-fade
+     * */
+    variant?: TagGroupPropVariant;
+    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: TagGroupPropDisabledKeys<T>;
+    /** Ref to the HTML ul-element. */
+    ref?: Ref<HTMLElement>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+    };
+};
+export type TagGroupComponentProp = <T extends object>(props: TagGroupProps<T>) => ReactElement | null;
+export type TagGroupRef = ComponentRef<'div'>;

package/dist/components/TagGroup/types.js

@@ -0,0 +1,9 @@
+const tagGroupPropVariant = [
+  "theme-fade",
+  "contrast-fade",
+  "error-fade",
+  "warning-fade"
+];
+export {
+  tagGroupPropVariant
+};

package/dist/components/index.d.ts

@@ -28,4 +28,6 @@ export * from './Select';
 export * from './Divider';
 export * from './Menu';
 export * from './ButtonToggleGroup';
+export * from './TagGroup';
 export * from './layout';
+export { useListData } from '@koobiq/react-primitives';

package/dist/index.js

@@ -1,4 +1,5 @@
 /* empty css           */
+import { useListData } from "@koobiq/react-primitives";
 import { Provider, defaultBreakpoints } from "./components/Provider/Provider.js";
 import { BreakpointsProvider } from "./components/Provider/BreakpointsProvider.js";
 import { ProviderContext, useProvider } from "./components/Provider/ProviderContext.js";
@@ -67,6 +68,9 @@ import { Menu } from "./components/Menu/Menu.js";
 import { menuPropSelectionMode } from "./components/Menu/types.js";
 import { ButtonToggleGroup } from "./components/ButtonToggleGroup/ButtonToggleGroup.js";
 import { ButtonToggle } from "./components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js";
+import { TagGroup } from "./components/TagGroup/TagGroup.js";
+import { Tag } from "./components/TagGroup/Tag.js";
+import { tagGroupPropVariant } from "./components/TagGroup/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -119,6 +123,8 @@ export {
   SidePanelHeader,
   SkeletonBlock,
   SkeletonTypography,
+  Tag,
+  TagGroup,
   Textarea,
   Toggle,
   Tooltip,
@@ -164,6 +170,7 @@ export {
   sidePanelPropSize,
   spacing,
   spacingGap,
+  tagGroupPropVariant,
   textareaPropExpand,
   textareaPropVariant,
   togglePropLabelPlacement,
@@ -175,6 +182,7 @@ export {
   typographyPropDisplay,
   typographyPropVariant,
   useBreakpoints,
+  useListData,
   useMatchedBreakpoints,
   useProvider,
   useRadioGroupState

package/dist/style.css

@@ -3333,6 +3333,114 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+.kbq-taggroup-20136b {
+  gap: var(--kbq-size-s);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+.kbq-taggroup-20136b [role="gridcell"] {
+  display: contents;
+}
+.kbq-taginner-f9f19a {
+  --tag-color: ;
+  --tag-bg-color: ;
+  --tag-icon-color: ;
+  --tag-outline-color: transparent;
+  --tag-outline-width: var(--kbq-size-3xs);
+  cursor: default;
+  vertical-align: top;
+  white-space: nowrap;
+  box-sizing: border-box;
+  color: var(--tag-color);
+  align-items: center;
+  gap: var(--kbq-size-3xs);
+  block-size: var(--kbq-size-xxl);
+  border-radius: var(--kbq-size-xxs);
+  padding-inline: var(--kbq-size-xxs);
+  min-inline-size: var(--kbq-size-xxl);
+  background-color: var(--tag-bg-color);
+  outline: var(--tag-outline-width) solid var(--tag-outline-color);
+  transition: outline-color var(--kbq-transition-default), background-color var(--kbq-transition-default), color var(--kbq-transition-default);
+  border: none;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.kbq-taginner-content-72ca39 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-inline: var(--kbq-size-3xs);
+  overflow: hidden;
+}
+
+.kbq-taginner-icon-df45be {
+  color: var(--tag-icon-color);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin-inline-start: var(--kbq-size-3xs);
+  display: flex;
+}
+
+.kbq-taginner-cancelIcon-8a3dbe {
+  justify-content: center;
+  align-items: center;
+  margin-inline-end: var(--kbq-size-3xs);
+  display: flex;
+}
+
+.kbq-taginner-theme-fade-68b99c {
+  --tag-icon-color: var(--kbq-icon-theme);
+  --tag-bg-color: var(--kbq-background-theme-fade);
+  --tag-color: var(--kbq-foreground-theme);
+}
+
+.kbq-taginner-contrast-fade-39d7a7 {
+  --tag-icon-color: var(--kbq-icon-contrast-fade);
+  --tag-bg-color: var(--kbq-background-contrast-fade);
+  --tag-color: var(--kbq-foreground-contrast);
+}
+
+.kbq-taginner-error-fade-6d7d03 {
+  --tag-icon-color: var(--kbq-icon-error);
+  --tag-bg-color: var(--kbq-background-error-fade);
+  --tag-color: var(--kbq-foreground-error);
+}
+
+.kbq-taginner-warning-fade-9403c7 {
+  --tag-icon-color: var(--kbq-icon-warning);
+  --tag-bg-color: var(--kbq-background-warning-fade);
+  --tag-color: var(--kbq-foreground-warning);
+}
+
+.kbq-taginner-theme-fade-68b99c:where(.kbq-taginner-hovered-abf199) {
+  --tag-bg-color: var(--kbq-states-background-theme-fade-hover);
+}
+
+.kbq-taginner-contrast-fade-39d7a7:where(.kbq-taginner-hovered-abf199) {
+  --tag-bg-color: var(--kbq-states-background-contrast-fade-hover);
+}
+
+.kbq-taginner-error-fade-6d7d03:where(.kbq-taginner-hovered-abf199) {
+  --tag-bg-color: var(--kbq-states-background-error-fade-hover);
+}
+
+.kbq-taginner-warning-fade-9403c7:where(.kbq-taginner-hovered-abf199) {
+  --tag-bg-color: var(--kbq-states-background-warning-fade-hover);
+}
+
+.kbq-taginner-focused-16f44f {
+  --tag-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+.kbq-taginner-disabled-0c6073 {
+  --tag-icon-color: ;
+  --tag-bg-color: var(--kbq-states-background-disabled);
+  --tag-color: var(--kbq-states-foreground-disabled);
+  --tag-outline-color: none;
+  cursor: not-allowed;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.20",
+  "version": "0.0.1-beta.21",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-core": "0.0.1-beta.20",
-    "@koobiq/logger": "0.0.1-beta.20",
-    "@koobiq/react-icons": "0.0.1-beta.20",
-    "@koobiq/react-primitives": "0.0.1-beta.20"
+    "@koobiq/logger": "0.0.1-beta.21",
+    "@koobiq/react-icons": "0.0.1-beta.21",
+    "@koobiq/react-primitives": "0.0.1-beta.21",
+    "@koobiq/react-core": "0.0.1-beta.21"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",