@cube-dev/ui-kit 0.113.1 → 0.115.0

package/dist/components/content/HotKeys/HotKeys.js

@@ -0,0 +1,92 @@
+/** @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 { _Text } from "../Text.js";
+import { useKeySymbols } from "../../../utils/react/useKeySymbols.js";
+import { Space } from "../../layout/Space.js";
+import { Fragment, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/content/HotKeys/HotKeys.tsx
+const StyledHotKeys = tasty(Space, {
+	qa: "HotKeys",
+	role: "group",
+	"aria-label": "Keyboard shortcuts",
+	styles: {
+		display: "inline-flex",
+		flow: "row",
+		gap: "1x",
+		placeSelf: "center"
+	}
+});
+const KeyElement = tasty({
+	as: "kbd",
+	role: "text",
+	styles: {
+		display: "inline-flex",
+		placeContent: "center",
+		placeItems: "center start",
+		radius: "1r",
+		preset: "tag",
+		boxSizing: "border-box",
+		width: "2.5x max-content max-content",
+		height: "min-content",
+		textAlign: "left",
+		whiteSpace: "nowrap",
+		padding: "0 (.5x - 1bw)",
+		color: {
+			"": "#dark.65",
+			"type=primary": "#white",
+			"type=inherit": "currentColor"
+		},
+		fill: {
+			"": "#dark.04",
+			"type=primary | type=inherit": "#clear"
+		},
+		border: {
+			"": true,
+			"type=primary": "#white",
+			"type=inherit": "currentColor"
+		}
+	}
+});
+function HotKeys(props, ref) {
+	const { children: keys, type, ...otherProps } = props;
+	const parsedKeys = useKeySymbols(keys);
+	const styles = extractStyles(otherProps, CONTAINER_STYLES);
+	return /* @__PURE__ */ jsx(StyledHotKeys, {
+		qa: "HotKeys",
+		...filterBaseProps(otherProps, {
+			eventProps: true,
+			labelable: true
+		}),
+		ref,
+		styles,
+		children: parsedKeys.map((keyGroup, groupIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [groupIndex > 0 && /* @__PURE__ */ jsx(_Text, {
+			color: "#dark-03",
+			role: "separator",
+			"aria-hidden": "true",
+			children: "or"
+		}), /* @__PURE__ */ jsx(Space, {
+			flow: "row",
+			gap: "0.25x",
+			role: "group",
+			"aria-label": `Key combination ${groupIndex + 1}`,
+			children: keyGroup.map((key, keyIndex) => /* @__PURE__ */ jsx(KeyElement, {
+				"data-type": type,
+				as: "kbd",
+				role: "text",
+				"aria-label": `Key ${key}`,
+				children: key
+			}, keyIndex))
+		})] }, groupIndex))
+	});
+}
+const _HotKeys = forwardRef(HotKeys);
+_HotKeys.displayName = "HotKeys";
+
+//#endregion
+export { _HotKeys };
+//# sourceMappingURL=HotKeys.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HotKeys.js","names":["Text"],"sources":["../../../../src/components/content/HotKeys/HotKeys.tsx"],"sourcesContent":["import { forwardRef, Fragment } from 'react';\n\nimport {\n  BasePropsWithoutChildren,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '../../../tasty';\nimport { useKeySymbols } from '../../../utils/react/useKeySymbols';\nimport { Space } from '../../layout/Space';\nimport { Text } from '../Text';\n\nconst StyledHotKeys = tasty(Space, {\n  qa: 'HotKeys',\n  role: 'group',\n  'aria-label': 'Keyboard shortcuts',\n  styles: {\n    display: 'inline-flex',\n    flow: 'row',\n    gap: '1x',\n    placeSelf: 'center',\n  },\n});\n\nconst KeyElement = tasty({\n  as: 'kbd',\n  role: 'text',\n  styles: {\n    display: 'inline-flex',\n    placeContent: 'center',\n    placeItems: 'center start',\n    radius: '1r',\n    preset: 'tag',\n    boxSizing: 'border-box',\n    width: '2.5x max-content max-content',\n    height: 'min-content',\n    textAlign: 'left',\n    whiteSpace: 'nowrap',\n    padding: '0 (.5x - 1bw)',\n    color: {\n      '': '#dark.65',\n      'type=primary': '#white',\n      'type=inherit': 'currentColor',\n    },\n    fill: {\n      '': '#dark.04',\n      'type=primary | type=inherit': '#clear',\n    },\n    border: {\n      '': true,\n      'type=primary': '#white',\n      'type=inherit': 'currentColor',\n    },\n  },\n});\n\nexport interface CubeHotKeysProps\n  extends BasePropsWithoutChildren,\n    ContainerStyleProps {\n  children: string;\n  type?: 'default' | 'primary' | 'inherit';\n}\n\nfunction HotKeys(props: CubeHotKeysProps, ref) {\n  const { children: keys, type, ...otherProps } = props;\n  const parsedKeys = useKeySymbols(keys);\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <StyledHotKeys\n      qa=\"HotKeys\"\n      {...filterBaseProps(otherProps, { eventProps: true, labelable: true })}\n      ref={ref}\n      styles={styles}\n    >\n      {parsedKeys.map((keyGroup, groupIndex) => (\n        <Fragment key={groupIndex}>\n          {groupIndex > 0 && (\n            <Text color=\"#dark-03\" role=\"separator\" aria-hidden=\"true\">\n              or\n            </Text>\n          )}\n          <Space\n            flow=\"row\"\n            gap=\"0.25x\"\n            role=\"group\"\n            aria-label={`Key combination ${groupIndex + 1}`}\n          >\n            {keyGroup.map((key, keyIndex) => (\n              <KeyElement\n                key={keyIndex}\n                data-type={type}\n                as=\"kbd\"\n                role=\"text\"\n                aria-label={`Key ${key}`}\n              >\n                {key}\n              </KeyElement>\n            ))}\n          </Space>\n        </Fragment>\n      ))}\n    </StyledHotKeys>\n  );\n}\n\nconst _HotKeys = forwardRef(HotKeys);\n\n_HotKeys.displayName = 'HotKeys';\n\nexport { _HotKeys as HotKeys };\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,gBAAgB,MAAM,OAAO;CACjC,IAAI;CACJ,MAAM;CACN,cAAc;CACd,QAAQ;EACN,SAAS;EACT,MAAM;EACN,KAAK;EACL,WAAW;EACZ;CACF,CAAC;AAEF,MAAM,aAAa,MAAM;CACvB,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,SAAS;EACT,cAAc;EACd,YAAY;EACZ,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,OAAO;EACP,QAAQ;EACR,WAAW;EACX,YAAY;EACZ,SAAS;EACT,OAAO;GACL,IAAI;GACJ,gBAAgB;GAChB,gBAAgB;GACjB;EACD,MAAM;GACJ,IAAI;GACJ,+BAA+B;GAChC;EACD,QAAQ;GACN,IAAI;GACJ,gBAAgB;GAChB,gBAAgB;GACjB;EACF;CACF,CAAC;AASF,SAAS,QAAQ,OAAyB,KAAK;CAC7C,MAAM,EAAE,UAAU,MAAM,MAAM,GAAG,eAAe;CAChD,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAE1D,QACE,oBAAC;EACC,IAAG;EACH,GAAI,gBAAgB,YAAY;GAAE,YAAY;GAAM,WAAW;GAAM,CAAC;EACjE;EACG;YAEP,WAAW,KAAK,UAAU,eACzB,qBAAC,uBACE,aAAa,KACZ,oBAACA;GAAK,OAAM;GAAW,MAAK;GAAY,eAAY;aAAO;IAEpD,EAET,oBAAC;GACC,MAAK;GACL,KAAI;GACJ,MAAK;GACL,cAAY,mBAAmB,aAAa;aAE3C,SAAS,KAAK,KAAK,aAClB,oBAAC;IAEC,aAAW;IACX,IAAG;IACH,MAAK;IACL,cAAY,OAAO;cAElB;MANI,SAOM,CACb;IACI,KAvBK,WAwBJ,CACX;GACY;;AAIpB,MAAM,WAAW,WAAW,QAAQ;AAEpC,SAAS,cAAc"}

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

@@ -0,0 +1,2 @@
+
+import { CubeHotKeysProps, _HotKeys } from "./HotKeys.js";

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

@@ -0,0 +1,171 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps, Mods, Props } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { CubeTooltipProviderProps } from "../../overlays/Tooltip/TooltipProvider.js";
+import { DynamicIcon } from "../../../utils/react/resolveIcon.js";
+import "../../../utils/react/index.js";
+import { CubeItemBadgeProps } from "../ItemBadge/ItemBadge.js";
+import "./index.js";
+import { ItemVariant } from "../../../data/item-themes.js";
+import { CubeItemActionProps } from "../../actions/ItemAction/ItemAction.js";
+import "../../actions/index.js";
+import * as react from "react";
+import { ReactNode, RefObject } from "react";
+import { OverlayProps } from "react-aria";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/content/Item/Item.d.ts
+/** Known modifiers for Item component */
+type ItemMods = Mods<{
+  'has-icon'?: boolean;
+  'has-start-content'?: boolean;
+  'has-end-content'?: boolean;
+  'has-right-icon'?: boolean;
+  'has-label'?: boolean;
+  'has-prefix'?: boolean;
+  'has-suffix'?: boolean;
+  'has-description'?: boolean;
+  'has-actions'?: boolean;
+  'has-actions-content'?: boolean;
+  'auto-hide-actions'?: boolean;
+  'preserve-actions-space'?: boolean;
+  checkbox?: boolean;
+  disabled?: boolean;
+  selected?: boolean;
+  loading?: boolean;
+  size?: string;
+  description?: string;
+  type?: string;
+  theme?: string;
+  shape?: string;
+}>;
+interface CubeItemProps extends BaseProps, ContainerStyleProps {
+  icon?: DynamicIcon<ItemMods> | 'checkbox';
+  rightIcon?: DynamicIcon<ItemMods>;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  description?: ReactNode;
+  descriptionPlacement?: 'inline' | 'block';
+  /**
+   * When true, the item is rendered inside a wrapper element to separate the actions from the item.
+   * @default false
+   */
+  insideWrapper?: boolean;
+  /**
+   * Whether the item is selected.
+   * @default false
+   */
+  isSelected?: boolean;
+  /**
+   * Actions to render inline or placeholder mode for ItemButton wrapper.
+   * - ReactNode: renders actions inline as part of the grid layout
+   * - true: placeholder mode for ItemButton (enables --actions-width calculation)
+   */
+  actions?: ReactNode | true;
+  /**
+   * When true, actions are hidden by default and shown only on hover, focus, or focus-within.
+   * Uses opacity transition for visual hiding while maintaining layout space.
+   */
+  autoHideActions?: boolean;
+  /**
+   * When true and insideWrapper is true, this controls the visibility of the actions.
+   * @default false
+   */
+  showActions?: boolean;
+  /**
+   * When true, preserves the actions width when hidden (only changes opacity).
+   * Only applies when autoHideActions is true.
+   * @default false
+   */
+  preserveActionsSpace?: boolean;
+  /**
+   * When true, disables focus on action buttons by setting tabIndex={-1}.
+   * @default true
+   */
+  disableActionsFocus?: boolean;
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | number | (string & {});
+  type?: 'item' | 'header' | 'primary' | 'secondary' | 'outline' | 'neutral' | 'clear' | 'link' | 'card' | (string & {});
+  theme?: 'default' | 'danger' | 'success' | 'special' | 'warning' | 'note' | (string & {});
+  /** Keyboard shortcut that triggers the element when pressed */
+  hotkeys?: string;
+  /**
+   * Tooltip content and configuration:
+   * - string: simple tooltip text
+   * - true: auto tooltip on overflow (shows children as tooltip when truncated)
+   * - object: advanced configuration with optional auto property
+   */
+  tooltip?: string | boolean | (Omit<CubeTooltipProviderProps, 'children'> & {
+    auto?: boolean;
+  });
+  /**
+   * HTML button type to avoid implicit form submission when used as `as="button"`.
+   * Kept separate from visual `type` prop.
+   */
+  htmlType?: 'button' | 'submit' | 'reset';
+  labelProps?: Props;
+  descriptionProps?: Props;
+  keyboardShortcutProps?: Props;
+  /**
+   * The slot which the loading icon should replace in loading state.
+   * - "auto": Smart selection - prefers icon if present, then rightIcon, fallback to icon
+   * - Specific slot names: Always use that slot
+   * @default "auto"
+   */
+  loadingSlot?: 'auto' | 'icon' | 'rightIcon' | 'prefix' | 'suffix';
+  /**
+   * When true, shows loading state by replacing the specified slot with LoadingIcon
+   * and makes the component disabled.
+   */
+  isLoading?: boolean;
+  /**
+   * Shape of the item's border radius.
+   * - `card` - Card shape with larger border radius (`1cr`)
+   * - `button` - Button shape with default border radius (default)
+   * - `sharp` - Sharp corners with no border radius (`0`)
+   * - `pill` - Pill shape with fully rounded ends (`round`)
+   * @default "button"
+   */
+  shape?: 'card' | 'button' | 'sharp' | 'pill';
+  /**
+   * @private
+   * Default tooltip placement for the item.
+   * @default "top"
+   */
+  defaultTooltipPlacement?: OverlayProps['placement'];
+  /**
+   * Ref to access the label element directly
+   */
+  labelRef?: RefObject<HTMLElement>;
+  /**
+   * Heading level for the Label element when type="header" or type="card".
+   * Changes the Label's HTML tag to the corresponding heading (h1-h6).
+   * @default 3
+   */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * String to highlight within children.
+   * Only works when children is a plain string.
+   */
+  highlight?: string;
+  /**
+   * Whether highlight matching is case-sensitive.
+   * @default false
+   */
+  highlightCaseSensitive?: boolean;
+  /**
+   * Custom styles for highlighted text.
+   */
+  highlightStyles?: Styles;
+  /**
+   * Variant of the item.
+   */
+  variant?: ItemVariant;
+}
+declare const _Item: react.ForwardRefExoticComponent<CubeItemProps & react.RefAttributes<HTMLElement>> & {
+  Action: react.ForwardRefExoticComponent<Omit<CubeItemActionProps, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+  Badge: react.ForwardRefExoticComponent<CubeItemBadgeProps & react.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { CubeItemProps, ItemMods, _Item };
+//# sourceMappingURL=Item.d.ts.map