@cube-dev/ui-kit 0.114.0 → 0.115.0

package/dist/components/actions/use-context-menu.js

@@ -0,0 +1,184 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
+import { useEventBus } from "../../utils/react/useEventBus.js";
+import { useEvent } from "../../_internal/hooks/use-event.js";
+import { generateRandomId } from "../../utils/random.js";
+import { _MenuTrigger } from "./Menu/MenuTrigger.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { VisuallyHidden } from "react-aria";
+import { Pressable } from "@react-aria/interactions";
+
+//#region src/components/actions/use-context-menu.tsx
+/**
+* Generic hook to manage a context menu component that opens at pointer coordinates.
+*
+* @param Component - A React component that represents the menu content (Menu or CommandMenu).
+* @param defaultTriggerProps - Default props to pass to the MenuTrigger.
+* @param defaultMenuProps - Default props to pass to the Menu component.
+* @returns An object with `targetRef` to attach to the container element, `open` function to open the menu at event coordinates, `close` function to close the menu, and `rendered` JSX element to include in your component tree.
+*/
+function useContextMenu(Component, defaultTriggerProps, defaultMenuProps) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [componentProps, setComponentProps] = useState(null);
+	const [triggerProps, setTriggerProps] = useState(null);
+	const [anchorPosition, setAnchorPosition] = useState(null);
+	const targetRef = useRef(null);
+	const invisibleAnchorRef = useRef(null);
+	const setupRef = useRef(false);
+	const menuId = useMemo(() => generateRandomId(), []);
+	const { emit, on } = useEventBus();
+	useEffect(() => {
+		return on("popover:open", (data) => {
+			if (data.menuId !== menuId && isOpen) {
+				setIsOpen(false);
+				setAnchorPosition(null);
+			}
+		});
+	}, [
+		on,
+		menuId,
+		isOpen
+	]);
+	useEffect(() => {
+		if (isOpen) emit("popover:open", { menuId });
+	}, [
+		isOpen,
+		emit,
+		menuId
+	]);
+	function setupCheck() {
+		if (!setupRef.current) throw new Error("useContextMenu: MenuTrigger must be rendered. Use `rendered` property to include it in your component tree.");
+	}
+	const calculatePosition = (event) => {
+		const container = targetRef.current;
+		if (!event) {
+			if (!container) return {
+				x: 0,
+				y: 0
+			};
+			container.getBoundingClientRect();
+			const scrollLeft = container.scrollLeft;
+			const scrollTop = container.scrollTop;
+			const computed = window.getComputedStyle(container);
+			parseFloat(computed.borderLeftWidth);
+			parseFloat(computed.borderTopWidth);
+			const x = container.clientWidth / 2 + scrollLeft;
+			const y = container.clientHeight / 2 + scrollTop;
+			return {
+				x: Math.max(0, Math.min(x, container.scrollWidth)),
+				y: Math.max(0, Math.min(y, container.scrollHeight))
+			};
+		}
+		if (!container) {
+			const { clientX = 0, clientY = 0 } = event;
+			return {
+				x: clientX,
+				y: clientY
+			};
+		}
+		const containerRect = container.getBoundingClientRect();
+		const { clientX, clientY } = event;
+		const scrollLeft = container.scrollLeft;
+		const scrollTop = container.scrollTop;
+		const computed = window.getComputedStyle(container);
+		const borderLeft = parseFloat(computed.borderLeftWidth) || 0;
+		const borderTop = parseFloat(computed.borderTopWidth) || 0;
+		const x = clientX - containerRect.left - borderLeft + scrollLeft;
+		const y = clientY - containerRect.top - borderTop + scrollTop;
+		return {
+			x: Math.max(0, Math.min(x, container.scrollWidth)),
+			y: Math.max(0, Math.min(y, container.scrollHeight))
+		};
+	};
+	const open = useEvent((props = {}, triggerProps, event) => {
+		setupCheck();
+		if (targetRef.current) {
+			if (window.getComputedStyle(targetRef.current).position === "static") targetRef.current.style.position = "relative";
+		}
+		if (event && "preventDefault" in event && typeof event.preventDefault === "function") event.preventDefault();
+		const { x, y } = calculatePosition(event);
+		setAnchorPosition({
+			x,
+			y
+		});
+		setComponentProps(defaultMenuProps ? {
+			...defaultMenuProps,
+			...props
+		} : props);
+		setTriggerProps(triggerProps ?? null);
+		setIsOpen(true);
+	});
+	const update = useEvent((props, triggerProps) => {
+		setupCheck();
+		setComponentProps(defaultMenuProps ? {
+			...defaultMenuProps,
+			...props
+		} : props);
+		setTriggerProps(triggerProps ?? null);
+	});
+	const close = useEvent(() => {
+		setIsOpen(false);
+		setAnchorPosition(null);
+	});
+	const onContextMenu = useEvent((event) => {
+		event.preventDefault();
+		if (isOpen) setAnchorPosition(calculatePosition(event));
+		else open(defaultMenuProps, void 0, event);
+	});
+	useEffect(() => {
+		const element = targetRef.current;
+		if (!element) return;
+		element.addEventListener("contextmenu", onContextMenu);
+		return () => {
+			element.removeEventListener("contextmenu", onContextMenu);
+		};
+	}, [onContextMenu]);
+	const renderedMenu = useMemo(() => {
+		if (!componentProps || !anchorPosition) return null;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			ref: invisibleAnchorRef,
+			style: {
+				position: "absolute",
+				left: `${anchorPosition.x}px`,
+				top: `${anchorPosition.y}px`,
+				width: "0px",
+				height: "0px",
+				lineHeight: "0",
+				pointerEvents: "none",
+				visibility: "hidden"
+			}
+		}), /* @__PURE__ */ jsxs(_MenuTrigger, {
+			isDummy: true,
+			isOpen,
+			targetRef: invisibleAnchorRef,
+			offset: 0,
+			crossOffset: 0,
+			placement: triggerProps?.placement || defaultTriggerProps?.placement || "bottom start",
+			onOpenChange: setIsOpen,
+			...mergeProps$1(defaultTriggerProps, triggerProps || void 0),
+			children: [/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Pressable, { children: /* @__PURE__ */ jsx("button", { "aria-label": "Open context menu" }) }) }), /* @__PURE__ */ jsx(Component, { ...componentProps })]
+		})] });
+	}, [
+		componentProps,
+		triggerProps,
+		isOpen,
+		defaultTriggerProps,
+		anchorPosition
+	]);
+	return {
+		targetRef,
+		open,
+		update,
+		close,
+		isOpen,
+		get rendered() {
+			setupRef.current = true;
+			return renderedMenu;
+		}
+	};
+}
+
+//#endregion
+export { useContextMenu };
+//# sourceMappingURL=use-context-menu.js.map

package/dist/components/actions/use-context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-context-menu.js","names":["MenuTrigger","mergeProps"],"sources":["../../../src/components/actions/use-context-menu.tsx"],"sourcesContent":["import { Pressable } from '@react-aria/interactions';\nimport {\n  ComponentProps,\n  ComponentType,\n  MouseEvent,\n  PointerEvent,\n  ReactElement,\n  RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { VisuallyHidden } from 'react-aria';\n\nimport { useEvent } from '../../_internal';\nimport { generateRandomId } from '../../utils/random';\nimport { mergeProps } from '../../utils/react';\nimport { useEventBus } from '../../utils/react/useEventBus';\n\nimport { MenuTrigger } from './Menu';\n\ntype NativeMouseEvent = globalThis.MouseEvent;\ntype NativePointerEvent = globalThis.PointerEvent;\n\nexport interface UseContextMenuReturn<\n  E extends HTMLElement = HTMLElement,\n  P extends object = {},\n  T = ComponentProps<typeof MenuTrigger>,\n> {\n  /** Container element that receives context menu events. Attach this ref to your target element. */\n  targetRef: RefObject<E | null>;\n\n  /**\n   * Programmatically opens the menu at the specified coordinates or element center.\n   * Runtime props are merged with defaultMenuProps (runtime props take precedence).\n   *\n   * @param props - Props to pass to the menu component (optional, defaults to defaultMenuProps)\n   * @param triggerProps - Additional props for MenuTrigger (merged with defaultTriggerProps)\n   * @param event - The pointer/mouse event containing coordinates for positioning (optional, centers on element if not provided)\n   */\n  open(\n    props?: P,\n    triggerProps?: T,\n    event?: NativeMouseEvent | NativePointerEvent | MouseEvent | PointerEvent,\n  ): void;\n\n  /**\n   * Updates the props of the currently open menu without repositioning.\n   * Props are merged with defaultMenuProps.\n   */\n  update(props: P, triggerProps?: T): void;\n\n  /** Closes the menu programmatically. */\n  close(): void;\n\n  /** Current open/closed state of the menu. */\n  isOpen: boolean;\n\n  /**\n   * JSX element that must be rendered in your component tree.\n   * Contains the MenuTrigger and positioning logic.\n   * IMPORTANT: Must be placed directly inside the target container (the element with targetRef).\n   */\n  get rendered(): ReactElement | null;\n}\n\n/**\n * Generic hook to manage a context menu component that opens at pointer coordinates.\n *\n * @param Component - A React component that represents the menu content (Menu or CommandMenu).\n * @param defaultTriggerProps - Default props to pass to the MenuTrigger.\n * @param defaultMenuProps - Default props to pass to the Menu component.\n * @returns An object with `targetRef` to attach to the container element, `open` function to open the menu at event coordinates, `close` function to close the menu, and `rendered` JSX element to include in your component tree.\n */\nexport function useContextMenu<\n  E extends HTMLElement = HTMLElement,\n  P extends object = {},\n  T = ComponentProps<typeof MenuTrigger>,\n>(\n  Component: ComponentType<P>,\n  defaultTriggerProps?: Omit<\n    ComponentProps<typeof MenuTrigger>,\n    'children' | 'isOpen' | 'onOpenChange' | 'targetRef'\n  >,\n  defaultMenuProps?: P,\n): UseContextMenuReturn<E, P, T> {\n  const [isOpen, setIsOpen] = useState(false);\n  const [componentProps, setComponentProps] = useState<P | null>(null);\n  const [triggerProps, setTriggerProps] = useState<T | null>(null);\n  const [anchorPosition, setAnchorPosition] = useState<{\n    x: number;\n    y: number;\n  } | null>(null);\n  const targetRef = useRef<E>(null);\n  const invisibleAnchorRef = useRef<HTMLSpanElement>(null);\n  const setupRef = useRef(false);\n\n  // Generate a unique ID for this menu instance\n  const menuId = useMemo(() => generateRandomId(), []);\n\n  // Get event bus for menu synchronization\n  const { emit, on } = useEventBus();\n\n  // Listen for other menus opening and close this one if needed\n  useEffect(() => {\n    const unsubscribe = on('popover:open', (data: { menuId: string }) => {\n      // If another menu is opening and this menu is open, close this one\n      if (data.menuId !== menuId && isOpen) {\n        setIsOpen(false);\n        setAnchorPosition(null);\n      }\n    });\n\n    return unsubscribe;\n  }, [on, menuId, isOpen]);\n\n  // Emit event when this menu opens\n  useEffect(() => {\n    if (isOpen) {\n      emit('popover:open', { menuId });\n    }\n  }, [isOpen, emit, menuId]);\n\n  function setupCheck() {\n    if (!setupRef.current) {\n      throw new Error(\n        'useContextMenu: MenuTrigger must be rendered. Use `rendered` property to include it in your component tree.',\n      );\n    }\n  }\n\n  // Helper function to calculate position relative to targetRef, taking the\n  // element's scroll offset into account. Without the scroll offset the menu\n  // would be rendered at the wrong place inside scrollable containers.\n  const calculatePosition = (\n    event?: NativeMouseEvent | NativePointerEvent | MouseEvent | PointerEvent,\n  ) => {\n    const container = targetRef.current;\n\n    // If no event is provided, position at the center of the element\n    if (!event) {\n      if (!container) {\n        return { x: 0, y: 0 };\n      }\n\n      const containerRect = container.getBoundingClientRect();\n      const scrollLeft = container.scrollLeft;\n      const scrollTop = container.scrollTop;\n\n      const computed = window.getComputedStyle(container);\n      const borderLeft = parseFloat(computed.borderLeftWidth) || 0;\n      const borderTop = parseFloat(computed.borderTopWidth) || 0;\n\n      // Position at the center of the element's content area\n      const x = container.clientWidth / 2 + scrollLeft;\n      const y = container.clientHeight / 2 + scrollTop;\n\n      // Clamp to the full scroll size\n      const clampedX = Math.max(0, Math.min(x, container.scrollWidth));\n      const clampedY = Math.max(0, Math.min(y, container.scrollHeight));\n\n      return { x: clampedX, y: clampedY };\n    }\n\n    // If the target reference is missing, fall back to viewport coordinates.\n    if (!container) {\n      const { clientX = 0, clientY = 0 } = event;\n\n      return { x: clientX, y: clientY };\n    }\n\n    const containerRect = container.getBoundingClientRect();\n\n    // Get coordinates from the event (viewport-relative)\n    const { clientX, clientY } = event;\n\n    // Take the element's scroll offset into account so that the coordinates are\n    // relative to the **content** box, not the visible viewport of the\n    // element.\n    const scrollLeft = container.scrollLeft;\n    const scrollTop = container.scrollTop;\n\n    const computed = window.getComputedStyle(container);\n    const borderLeft = parseFloat(computed.borderLeftWidth) || 0;\n    const borderTop = parseFloat(computed.borderTopWidth) || 0;\n\n    const x = clientX - containerRect.left - borderLeft + scrollLeft;\n    const y = clientY - containerRect.top - borderTop + scrollTop;\n\n    // Clamp to the full scroll size so that the invisible anchor always stays\n    // inside the element regardless of the scroll position.\n    const clampedX = Math.max(0, Math.min(x, container.scrollWidth));\n    const clampedY = Math.max(0, Math.min(y, container.scrollHeight));\n\n    return { x: clampedX, y: clampedY };\n  };\n\n  // 'open' accepts props, trigger props, and optional event for positioning, then opens the menu\n  const open = useEvent(\n    (\n      props: P = {} as P,\n      triggerProps?: T,\n      event?: NativeMouseEvent | NativePointerEvent | MouseEvent | PointerEvent,\n    ) => {\n      setupCheck();\n\n      // Ensure the target element can serve as a positioning context for the\n      // invisible target element. If the consumer hasn't explicitly set\n      // `position: relative | absolute | fixed | sticky` we switch it to\n      // `relative` so that absolutely-positioned children are laid out correctly.\n      if (targetRef.current) {\n        const computedStyle = window.getComputedStyle(targetRef.current);\n\n        if (computedStyle.position === 'static') {\n          targetRef.current.style.position = 'relative';\n        }\n      }\n\n      // Prevent default context menu if it's a context menu event\n      if (\n        event &&\n        'preventDefault' in event &&\n        typeof event.preventDefault === 'function'\n      ) {\n        event.preventDefault();\n      }\n\n      const { x, y } = calculatePosition(event);\n      setAnchorPosition({ x, y });\n\n      // Merge defaultMenuProps with provided props\n      const finalProps = defaultMenuProps\n        ? { ...defaultMenuProps, ...props }\n        : props;\n\n      setComponentProps(finalProps);\n      setTriggerProps(triggerProps ?? null);\n      setIsOpen(true);\n    },\n  );\n\n  const update = useEvent((props: P, triggerProps?: T) => {\n    setupCheck();\n\n    // Merge defaultMenuProps with provided props\n    const finalProps = defaultMenuProps\n      ? { ...defaultMenuProps, ...props }\n      : props;\n\n    setComponentProps(finalProps as P);\n    setTriggerProps(triggerProps ?? null);\n  });\n\n  const close = useEvent(() => {\n    setIsOpen(false);\n    setAnchorPosition(null);\n  });\n\n  // Context menu event handler\n  const onContextMenu = useEvent(\n    (event: MouseEvent | PointerEvent | MouseEvent | PointerEvent) => {\n      event.preventDefault();\n      if (isOpen) {\n        const pos = calculatePosition(event);\n        setAnchorPosition(pos);\n      } else {\n        open(defaultMenuProps, undefined, event);\n      }\n    },\n  );\n\n  // Bind the onContextMenu event to targetRef\n  useEffect(() => {\n    const element = targetRef.current;\n    if (!element) return;\n\n    element.addEventListener('contextmenu', onContextMenu as any);\n\n    return () => {\n      element.removeEventListener('contextmenu', onContextMenu as any);\n    };\n  }, [onContextMenu]);\n\n  // Render the menu only when componentProps is set\n  const renderedMenu = useMemo(() => {\n    if (!componentProps || !anchorPosition) return null;\n\n    return (\n      <>\n        {/* Invisible anchor element positioned at click coordinates */}\n        <span\n          ref={invisibleAnchorRef}\n          style={{\n            position: 'absolute',\n            left: `${anchorPosition.x}px`,\n            top: `${anchorPosition.y}px`,\n            width: '0px',\n            height: '0px',\n            lineHeight: '0',\n            pointerEvents: 'none',\n            visibility: 'hidden',\n          }}\n        />\n        <MenuTrigger\n          isDummy\n          isOpen={isOpen}\n          targetRef={invisibleAnchorRef}\n          offset={0}\n          crossOffset={0}\n          placement={\n            (triggerProps as ComponentProps<typeof MenuTrigger>)?.placement ||\n            defaultTriggerProps?.placement ||\n            'bottom start'\n          }\n          onOpenChange={setIsOpen}\n          {...mergeProps(defaultTriggerProps, triggerProps || undefined)}\n        >\n          <VisuallyHidden>\n            <Pressable>\n              <button aria-label=\"Open context menu\" />\n            </Pressable>\n          </VisuallyHidden>\n          <Component {...componentProps} />\n        </MenuTrigger>\n      </>\n    );\n  }, [\n    componentProps,\n    triggerProps,\n    isOpen,\n    defaultTriggerProps,\n    anchorPosition,\n  ]);\n\n  return {\n    targetRef,\n    open,\n    update,\n    close,\n    isOpen,\n    get rendered() {\n      setupRef.current = true;\n\n      return renderedMenu;\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/components/content/ActiveZone/ActiveZone.d.ts

@@ -0,0 +1,16 @@
+
+import { BaseProps, BaseStyleProps, ContainerStyleProps, TextStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import * as react from "react";
+import { MouseEventHandler } from "react";
+import { FocusableOptions } from "react-aria";
+
+//#region src/components/content/ActiveZone/ActiveZone.d.ts
+interface CubeActiveZoneProps extends BaseProps, BaseStyleProps, ContainerStyleProps, TextStyleProps, FocusableOptions {
+  label?: string;
+  onClick?: MouseEventHandler;
+}
+declare const _ActiveZone: react.ForwardRefExoticComponent<CubeActiveZoneProps & react.RefAttributes<unknown>>;
+//#endregion
+export { CubeActiveZoneProps, _ActiveZone };
+//# sourceMappingURL=ActiveZone.d.ts.map

package/dist/components/content/ActiveZone/ActiveZone.js

@@ -0,0 +1,48 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES, TEXT_STYLES } from "../../../tasty/styles/list.js";
+import { Element } from "../../../tasty/tasty.js";
+import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useFocusable, useHover } from "react-aria";
+import { useFocusableRef } from "@react-spectrum/utils";
+
+//#region src/components/content/ActiveZone/ActiveZone.tsx
+const DEFAULT_STYLES = {
+	display: "inline-grid",
+	position: "relative",
+	opacity: {
+		"": 1,
+		disabled: .4
+	},
+	transition: "theme"
+};
+const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
+function ActiveZone({ as, label, onClick, ...props }, ref) {
+	const isDisabled = props.isDisabled;
+	const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
+	const domRef = useFocusableRef(ref);
+	let { hoverProps, isHovered } = useHover({ isDisabled });
+	let { focusProps, isFocused } = useFocus$1({ isDisabled });
+	let { focusableProps } = useFocusable(props, domRef);
+	return /* @__PURE__ */ jsx(Element, {
+		"data-hovered": isHovered && !isDisabled ? "" : null,
+		"data-focused": isFocused && !isDisabled ? "" : null,
+		"data-disabled": isDisabled || null,
+		"aria-label": label,
+		...mergeProps$1(hoverProps, focusProps, focusableProps, { onClick }, filterBaseProps(props, { eventProps: true })),
+		ref: domRef,
+		tabIndex: props.excludeFromTabOrder || isDisabled ? -1 : 0,
+		as,
+		styles
+	});
+}
+const _ActiveZone = forwardRef(ActiveZone);
+_ActiveZone.displayName = "ActiveZone";
+
+//#endregion
+export { _ActiveZone };
+//# sourceMappingURL=ActiveZone.js.map

package/dist/components/content/ActiveZone/ActiveZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveZone.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/content/ActiveZone/ActiveZone.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { forwardRef, MouseEventHandler } from 'react';\nimport { FocusableOptions, useFocusable, useHover } from 'react-aria';\n\nimport {\n  BaseProps,\n  BaseStyleProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n  TEXT_STYLES,\n  TextStyleProps,\n} from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\n\nexport interface CubeActiveZoneProps\n  extends BaseProps,\n    BaseStyleProps,\n    ContainerStyleProps,\n    TextStyleProps,\n    FocusableOptions {\n  label?: string;\n  onClick?: MouseEventHandler;\n}\n\nconst DEFAULT_STYLES: Styles = {\n  display: 'inline-grid',\n  position: 'relative',\n  opacity: {\n    '': 1,\n    disabled: 0.4,\n  },\n  transition: 'theme',\n} as const;\n\nconst STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nfunction ActiveZone(\n  { as, label, onClick, ...props }: CubeActiveZoneProps,\n  ref,\n) {\n  const isDisabled = props.isDisabled;\n  const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);\n  const domRef = useFocusableRef(ref);\n\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n  let { focusProps, isFocused } = useFocus({ isDisabled });\n  let { focusableProps } = useFocusable(props, domRef);\n\n  return (\n    <Element\n      data-hovered={isHovered && !isDisabled ? '' : null}\n      data-focused={isFocused && !isDisabled ? '' : null}\n      data-disabled={isDisabled || null}\n      aria-label={label}\n      {...mergeProps(\n        hoverProps,\n        focusProps,\n        focusableProps,\n        { onClick },\n        filterBaseProps(props, { eventProps: true }),\n      )}\n      ref={domRef}\n      tabIndex={props.excludeFromTabOrder || isDisabled ? -1 : 0}\n      as={as}\n      styles={styles}\n    />\n  );\n}\n\nconst _ActiveZone = forwardRef(ActiveZone);\n\n_ActiveZone.displayName = 'ActiveZone';\n\nexport { _ActiveZone as ActiveZone };\n"],"mappings":";;;;;;;;;;;;;AA6BA,MAAM,iBAAyB;CAC7B,SAAS;CACT,UAAU;CACV,SAAS;EACP,IAAI;EACJ,UAAU;EACX;CACD,YAAY;CACb;AAED,MAAM,cAAc,CAAC,GAAG,kBAAkB,GAAG,YAAY;AAEzD,SAAS,WACP,EAAE,IAAI,OAAO,SAAS,GAAG,SACzB,KACA;CACA,MAAM,aAAa,MAAM;CACzB,MAAM,SAAS,cAAc,OAAO,aAAa,eAAe;CAChE,MAAM,SAAS,gBAAgB,IAAI;CAEnC,IAAI,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,CAAC;CACxD,IAAI,EAAE,YAAY,cAAcA,WAAS,EAAE,YAAY,CAAC;CACxD,IAAI,EAAE,mBAAmB,aAAa,OAAO,OAAO;AAEpD,QACE,oBAAC;EACC,gBAAc,aAAa,CAAC,aAAa,KAAK;EAC9C,gBAAc,aAAa,CAAC,aAAa,KAAK;EAC9C,iBAAe,cAAc;EAC7B,cAAY;EACZ,GAAIC,aACF,YACA,YACA,gBACA,EAAE,SAAS,EACX,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC,CAC7C;EACD,KAAK;EACL,UAAU,MAAM,uBAAuB,aAAa,KAAK;EACrD;EACI;GACR;;AAIN,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}

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

@@ -0,0 +1,9 @@
+
+import { CubeAlertProps } from "./types.js";
+import * as react from "react";
+
+//#region src/components/content/Alert/Alert.d.ts
+declare const Alert: react.ForwardRefExoticComponent<CubeAlertProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Alert };
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/content/Alert/Alert.js

@@ -0,0 +1,55 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import themes_default from "../../../data/themes.js";
+import { useAlert } from "./use-alert.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Alert/Alert.tsx
+const AlertElement = tasty({
+	name: "Alert",
+	role: "alert",
+	qa: "Alert",
+	styles: {
+		display: "block",
+		flow: "column",
+		radius: {
+			"": "1cr",
+			"shape=sharp": "0"
+		},
+		padding: "1.5x",
+		preset: "t3",
+		color: {
+			"": "#dark-02",
+			"type=disabled": themes_default.disabled.color
+		},
+		fill: {
+			"": "#clear",
+			...Object.keys(themes_default).reduce((map, type) => {
+				map[`type=${type}`] = themes_default[type].fill;
+				return map;
+			}, {})
+		},
+		border: {
+			"": "#clear",
+			...Object.keys(themes_default).reduce((map, type) => {
+				map[`type=${type}`] = themes_default[type].border;
+				return map;
+			}, {}),
+			"shape=sharp": "0"
+		}
+	}
+});
+const Alert = forwardRef(function Alert(props, ref) {
+	const { styles, mods, filteredProps } = useAlert(props);
+	return /* @__PURE__ */ jsx(AlertElement, {
+		...filteredProps,
+		ref,
+		mods,
+		styles
+	});
+});
+
+//#endregion
+export { Alert };
+//# sourceMappingURL=Alert.js.map

package/dist/components/content/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":["THEMES"],"sources":["../../../../src/components/content/Alert/Alert.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react';\n\nimport THEMES from '../../../data/themes';\nimport { tasty } from '../../../tasty';\n\nimport { CubeAlertProps } from './types';\nimport { useAlert } from './use-alert';\n\nconst AlertElement = tasty({\n  name: 'Alert',\n  role: 'alert',\n  qa: 'Alert',\n  styles: {\n    display: 'block',\n    flow: 'column',\n    radius: {\n      '': '1cr',\n      'shape=sharp': '0',\n    },\n    padding: '1.5x',\n    preset: 't3',\n    color: {\n      '': '#dark-02',\n      'type=disabled': THEMES.disabled.color,\n    },\n    fill: {\n      '': '#clear',\n      ...Object.keys(THEMES).reduce((map, type) => {\n        map[`type=${type}`] = THEMES[type].fill;\n\n        return map;\n      }, {}),\n    },\n    border: {\n      '': '#clear',\n      ...Object.keys(THEMES).reduce((map, type) => {\n        map[`type=${type}`] = THEMES[type].border;\n\n        return map;\n      }, {}),\n      'shape=sharp': '0',\n    },\n  },\n});\n\nexport const Alert = forwardRef(function Alert(\n  props: CubeAlertProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { styles, mods, filteredProps } = useAlert(props);\n\n  return (\n    <AlertElement {...filteredProps} ref={ref} mods={mods} styles={styles} />\n  );\n});\n"],"mappings":";;;;;;;;AAQA,MAAM,eAAe,MAAM;CACzB,MAAM;CACN,MAAM;CACN,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;GACN,IAAI;GACJ,eAAe;GAChB;EACD,SAAS;EACT,QAAQ;EACR,OAAO;GACL,IAAI;GACJ,iBAAiBA,eAAO,SAAS;GAClC;EACD,MAAM;GACJ,IAAI;GACJ,GAAG,OAAO,KAAKA,eAAO,CAAC,QAAQ,KAAK,SAAS;AAC3C,QAAI,QAAQ,UAAUA,eAAO,MAAM;AAEnC,WAAO;MACN,EAAE,CAAC;GACP;EACD,QAAQ;GACN,IAAI;GACJ,GAAG,OAAO,KAAKA,eAAO,CAAC,QAAQ,KAAK,SAAS;AAC3C,QAAI,QAAQ,UAAUA,eAAO,MAAM;AAEnC,WAAO;MACN,EAAE,CAAC;GACN,eAAe;GAChB;EACF;CACF,CAAC;AAEF,MAAa,QAAQ,WAAW,SAAS,MACvC,OACA,KACA;CACA,MAAM,EAAE,QAAQ,MAAM,kBAAkB,SAAS,MAAM;AAEvD,QACE,oBAAC;EAAa,GAAI;EAAoB;EAAW;EAAc;GAAU;EAE3E"}

package/dist/components/content/Alert/index.d.ts

@@ -0,0 +1,3 @@
+
+import { CubeAlertProps } from "./types.js";
+import { Alert } from "./Alert.js";

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

@@ -0,0 +1,31 @@
+
+import { BaseProps, ContainerStyleProps, TextStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { _default } from "../../../data/themes.js";
+
+//#region src/components/content/Alert/types.d.ts
+interface CubeAlertProps extends Omit<BaseProps, 'theme'>, ContainerStyleProps, TextStyleProps {
+  /**
+   * ***Deprecated***
+   *
+   * @deprecated use `theme` prop instead
+   * @default note
+   */
+  type?: keyof typeof _default;
+  /**
+   * Changes the appearance of the Alert component
+   *
+   * @default note
+   */
+  theme?: keyof typeof _default;
+  /**
+   * Shape of the alert's border radius and border.
+   * - `card` - Card shape with border radius (`1cr`) and border
+   * - `sharp` - Sharp corners with no border radius or border (`0`)
+   * @default "card"
+   */
+  shape?: 'card' | 'sharp';
+}
+//#endregion
+export { CubeAlertProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/content/Alert/use-alert.js

@@ -0,0 +1,30 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES, TEXT_STYLES } from "../../../tasty/styles/list.js";
+import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+import { useDeprecationWarning } from "../../../_internal/hooks/use-deprecation-warning.js";
+
+//#region src/components/content/Alert/use-alert.ts
+const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
+function useAlert(props) {
+	const { type, isDisabled = false, theme, shape = "card", mods } = props;
+	const styles = extractStyles(props, STYLE_LIST);
+	useDeprecationWarning(typeof type === "undefined", {
+		property: "type",
+		name: "Alert",
+		betterAlternative: "theme"
+	});
+	return {
+		styles,
+		mods: {
+			shape,
+			type: isDisabled ? "disabled" : theme ?? type ?? "note",
+			...mods
+		},
+		filteredProps: filterBaseProps(props, { eventProps: true })
+	};
+}
+
+//#endregion
+export { useAlert };
+//# sourceMappingURL=use-alert.js.map

package/dist/components/content/Alert/use-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-alert.js","names":[],"sources":["../../../../src/components/content/Alert/use-alert.ts"],"sourcesContent":["import { useDeprecationWarning } from '../../../_internal';\nimport {\n  CONTAINER_STYLES,\n  extractStyles,\n  filterBaseProps,\n  TEXT_STYLES,\n} from '../../../tasty';\n\nimport { CubeAlertProps } from './types';\n\nconst STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES] as const;\n\nexport function useAlert(props: CubeAlertProps) {\n  const { type, isDisabled = false, theme, shape = 'card', mods } = props;\n\n  const styles = extractStyles(props, STYLE_LIST);\n\n  useDeprecationWarning(typeof type === 'undefined', {\n    property: 'type',\n    name: 'Alert',\n    betterAlternative: 'theme',\n  });\n\n  const _theme = isDisabled ? 'disabled' : theme ?? type ?? 'note';\n\n  return {\n    styles,\n    mods: {\n      shape,\n      type: _theme,\n      ...mods,\n    },\n    filteredProps: filterBaseProps(props, { eventProps: true }),\n  };\n}\n"],"mappings":";;;;;;;AAUA,MAAM,aAAa,CAAC,GAAG,kBAAkB,GAAG,YAAY;AAExD,SAAgB,SAAS,OAAuB;CAC9C,MAAM,EAAE,MAAM,aAAa,OAAO,OAAO,QAAQ,QAAQ,SAAS;CAElE,MAAM,SAAS,cAAc,OAAO,WAAW;AAE/C,uBAAsB,OAAO,SAAS,aAAa;EACjD,UAAU;EACV,MAAM;EACN,mBAAmB;EACpB,CAAC;AAIF,QAAO;EACL;EACA,MAAM;GACJ;GACA,MANW,aAAa,aAAa,SAAS,QAAQ;GAOtD,GAAG;GACJ;EACD,eAAe,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC5D"}

package/dist/components/content/Avatar/Avatar.d.ts

@@ -0,0 +1,16 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/content/Avatar/Avatar.d.ts
+interface CubeAvatarProps extends BaseProps, ContainerStyleProps {
+  icon?: ReactNode;
+  size?: Styles['size'];
+}
+declare const Avatar: react.ForwardRefExoticComponent<CubeAvatarProps & react.RefAttributes<unknown>>;
+//#endregion
+export { Avatar, CubeAvatarProps };
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/content/Avatar/Avatar.js

@@ -0,0 +1,40 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { Element } from "../../../tasty/tasty.js";
+import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+import { forwardRef } from "react";
+import { jsxs } from "react/jsx-runtime";
+
+//#region src/components/content/Avatar/Avatar.tsx
+const DEFAULT_STYLES = {
+	display: "grid",
+	gap: "1x",
+	flow: "row",
+	fill: "#primary",
+	color: "#white",
+	radius: "round",
+	placeContent: "center",
+	width: "$avatar-size $avatar-size $avatar-size",
+	height: "$avatar-size $avatar-size $avatar-size",
+	fontSize: "calc($avatar-size / 2)",
+	lineHeight: "calc($avatar-size / 2)",
+	fontWeight: 500
+};
+const Avatar = forwardRef(function Avatar({ size = "4x", icon, children, ...props }, ref) {
+	const styles = extractStyles(props, CONTAINER_STYLES, {
+		...DEFAULT_STYLES,
+		"--avatar-size": size
+	});
+	return /* @__PURE__ */ jsxs(Element, {
+		...filterBaseProps(props, { eventProps: true }),
+		ref,
+		styles,
+		"data-theme": "special",
+		children: [icon, children]
+	});
+});
+
+//#endregion
+export { Avatar };
+//# sourceMappingURL=Avatar.js.map

package/dist/components/content/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../../src/components/content/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n} from '../../../tasty';\n\nconst DEFAULT_STYLES = {\n  display: 'grid',\n  gap: '1x',\n  flow: 'row',\n  fill: '#primary',\n  color: '#white',\n  radius: 'round',\n  placeContent: 'center',\n  width: '$avatar-size $avatar-size $avatar-size',\n  height: '$avatar-size $avatar-size $avatar-size',\n  fontSize: 'calc($avatar-size / 2)',\n  lineHeight: 'calc($avatar-size / 2)',\n  fontWeight: 500,\n};\n\nexport interface CubeAvatarProps extends BaseProps, ContainerStyleProps {\n  icon?: ReactNode;\n  size?: Styles['size'];\n}\n\nexport const Avatar = forwardRef(function Avatar(\n  { size = '4x', icon, children, ...props }: CubeAvatarProps,\n  ref,\n) {\n  const styles = extractStyles(props, CONTAINER_STYLES, {\n    ...DEFAULT_STYLES,\n    '--avatar-size': size,\n  });\n\n  return (\n    <Element\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n      data-theme=\"special\"\n    >\n      {icon}\n      {children}\n    </Element>\n  );\n});\n"],"mappings":";;;;;;;;;AAYA,MAAM,iBAAiB;CACrB,SAAS;CACT,KAAK;CACL,MAAM;CACN,MAAM;CACN,OAAO;CACP,QAAQ;CACR,cAAc;CACd,OAAO;CACP,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,YAAY;CACb;AAOD,MAAa,SAAS,WAAW,SAAS,OACxC,EAAE,OAAO,MAAM,MAAM,UAAU,GAAG,SAClC,KACA;CACA,MAAM,SAAS,cAAc,OAAO,kBAAkB;EACpD,GAAG;EACH,iBAAiB;EAClB,CAAC;AAEF,QACE,qBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,cAAW;aAEV,MACA;GACO;EAEZ"}

package/dist/components/content/Badge/Badge.d.ts

@@ -0,0 +1,15 @@
+
+import "../Item/index.js";
+import { CubeItemProps } from "../Item/Item.js";
+import { _default } from "../../../data/themes.js";
+import * as react from "react";
+
+//#region src/components/content/Badge/Badge.d.ts
+interface CubeBadgeProps extends CubeItemProps {
+  type?: keyof typeof _default | string;
+  theme?: keyof typeof _default | string;
+}
+declare const _Badge: react.ForwardRefExoticComponent<CubeBadgeProps & react.RefAttributes<unknown>>;
+//#endregion
+export { CubeBadgeProps, _Badge };
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/content/Badge/Badge.js

@@ -0,0 +1,57 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _Item } from "../Item/Item.js";
+import themes_default from "../../../data/themes.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Badge/Badge.tsx
+const FILL_STYLES = Object.keys(themes_default).reduce((map, type) => {
+	map[`theme=${type}`] = type === "special" ? themes_default[type].fill : themes_default[type].color;
+	return map;
+}, {});
+const BadgeElement = tasty(_Item, {
+	qa: "Badge",
+	role: "status",
+	size: "inline",
+	styles: {
+		radius: "round",
+		color: "#white",
+		fill: {
+			"": "#primary",
+			...FILL_STYLES
+		},
+		preset: {
+			"": "tag",
+			"size=xsmall": "t4",
+			"size=small | size=medium": "t3",
+			"size=large | size=xlarge": "t2"
+		},
+		"$inline-padding": {
+			"": "max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))",
+			"size=inline": ".5x"
+		},
+		Label: {
+			textAlign: "center",
+			placeSelf: "center"
+		}
+	}
+});
+function Badge(allProps, ref) {
+	let { type, theme = "special", children, size = "inline", ...props } = allProps;
+	const badgeTheme = theme ?? type;
+	return /* @__PURE__ */ jsx(BadgeElement, {
+		ref,
+		size,
+		"data-type": "primary",
+		"data-theme": badgeTheme,
+		...props,
+		children
+	});
+}
+const _Badge = forwardRef(Badge);
+_Badge.displayName = "Badge";
+
+//#endregion
+export { _Badge };
+//# sourceMappingURL=Badge.js.map

package/dist/components/content/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["THEMES","Item"],"sources":["../../../../src/components/content/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport THEMES from '../../../data/themes';\nimport { tasty } from '../../../tasty';\nimport { CubeItemProps, Item } from '../Item';\n\nconst FILL_STYLES = Object.keys(THEMES).reduce((map, type) => {\n  map[`theme=${type}`] =\n    type === 'special' ? THEMES[type].fill : THEMES[type].color;\n\n  return map;\n}, {});\n\nconst BadgeElement = tasty(Item, {\n  qa: 'Badge',\n  role: 'status',\n  size: 'inline',\n  styles: {\n    radius: 'round',\n    color: '#white',\n    fill: {\n      '': '#primary',\n      ...FILL_STYLES,\n    },\n    preset: {\n      '': 'tag',\n      'size=xsmall': 't4',\n      'size=small | size=medium': 't3',\n      'size=large | size=xlarge': 't2',\n    },\n\n    '$inline-padding': {\n      '': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',\n      'size=inline': '.5x',\n    },\n\n    Label: {\n      textAlign: 'center',\n      placeSelf: 'center',\n    },\n  },\n});\n\nexport interface CubeBadgeProps extends CubeItemProps {\n  /* @deprecated Use theme instead */\n  type?: keyof typeof THEMES | string;\n  theme?: keyof typeof THEMES | string;\n}\n\nfunction Badge(allProps: CubeBadgeProps, ref) {\n  let {\n    type,\n    theme = 'special',\n    children,\n    size = 'inline',\n    ...props\n  } = allProps;\n\n  const badgeTheme = theme ?? type;\n\n  return (\n    <BadgeElement\n      ref={ref}\n      size={size}\n      data-type=\"primary\"\n      data-theme={badgeTheme}\n      {...props}\n    >\n      {children}\n    </BadgeElement>\n  );\n}\n\nconst _Badge = forwardRef(Badge);\n\n_Badge.displayName = 'Badge';\n\nexport { _Badge as Badge };\n"],"mappings":";;;;;;;;AAMA,MAAM,cAAc,OAAO,KAAKA,eAAO,CAAC,QAAQ,KAAK,SAAS;AAC5D,KAAI,SAAS,UACX,SAAS,YAAYA,eAAO,MAAM,OAAOA,eAAO,MAAM;AAExD,QAAO;GACN,EAAE,CAAC;AAEN,MAAM,eAAe,MAAMC,OAAM;CAC/B,IAAI;CACJ,MAAM;CACN,MAAM;CACN,QAAQ;EACN,QAAQ;EACR,OAAO;EACP,MAAM;GACJ,IAAI;GACJ,GAAG;GACJ;EACD,QAAQ;GACN,IAAI;GACJ,eAAe;GACf,4BAA4B;GAC5B,4BAA4B;GAC7B;EAED,mBAAmB;GACjB,IAAI;GACJ,eAAe;GAChB;EAED,OAAO;GACL,WAAW;GACX,WAAW;GACZ;EACF;CACF,CAAC;AAQF,SAAS,MAAM,UAA0B,KAAK;CAC5C,IAAI,EACF,MACA,QAAQ,WACR,UACA,OAAO,UACP,GAAG,UACD;CAEJ,MAAM,aAAa,SAAS;AAE5B,QACE,oBAAC;EACM;EACC;EACN,aAAU;EACV,cAAY;EACZ,GAAI;EAEH;GACY;;AAInB,MAAM,SAAS,WAAW,MAAM;AAEhC,OAAO,cAAc"}

package/dist/components/content/Card/Card.d.ts

@@ -0,0 +1,11 @@
+
+import { AllBaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import * as react from "react";
+
+//#region src/components/content/Card/Card.d.ts
+interface CubeCardProps extends Omit<AllBaseProps, 'title' | 'value' | 'placeholder' | 'text'>, ContainerStyleProps {}
+declare const Card: react.ForwardRefExoticComponent<CubeCardProps & react.RefAttributes<unknown>>;
+//#endregion
+export { Card, CubeCardProps };
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/content/Card/Card.js

@@ -0,0 +1,34 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Card/Card.tsx
+const CardElement = tasty({
+	role: "region",
+	styles: {
+		display: "block",
+		flow: "column",
+		radius: "(1cr + 1bw)",
+		fill: "#white",
+		border: "#border",
+		padding: "1.5x",
+		preset: "t3"
+	},
+	styleProps: CONTAINER_STYLES
+});
+const Card = forwardRef(function Card(props, ref) {
+	const styles = extractStyles(props, CONTAINER_STYLES);
+	return /* @__PURE__ */ jsx(CardElement, {
+		...filterBaseProps(props, { eventProps: true }),
+		ref,
+		styles
+	});
+});
+
+//#endregion
+export { Card };
+//# sourceMappingURL=Card.js.map

package/dist/components/content/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":[],"sources":["../../../../src/components/content/Card/Card.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '../../../tasty';\n\nconst CardElement = tasty({\n  role: 'region',\n  styles: {\n    display: 'block',\n    flow: 'column',\n    radius: '(1cr + 1bw)',\n    fill: '#white',\n    border: '#border',\n    padding: '1.5x',\n    preset: 't3',\n  },\n  styleProps: CONTAINER_STYLES,\n});\n\nexport interface CubeCardProps\n  extends Omit<AllBaseProps, 'title' | 'value' | 'placeholder' | 'text'>,\n    ContainerStyleProps {}\n\nexport const Card = forwardRef(function Card(props: CubeCardProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <CardElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;AAWA,MAAM,cAAc,MAAM;CACxB,MAAM;CACN,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,SAAS;EACT,QAAQ;EACT;CACD,YAAY;CACb,CAAC;AAMF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}