@cube-dev/ui-kit 0.0.0-canary-153ae3b → 0.0.0-canary-efd7b90

package/dist/components/content/InfoBadge/InfoBadge.js

@@ -1,169 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-153ae3b | Cube Dev Team */
-import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
-import { ItemBadge } from "../ItemBadge/ItemBadge.js";
-import { useI18n } from "../../../i18n/useI18n.js";
-import { InfoCircleIcon } from "../../../icons/InfoCircleIcon.js";
-import { mergeStyles, tasty } from "@tenphi/tasty";
-import { forwardRef, isValidElement, useCallback, useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/content/InfoBadge/InfoBadge.tsx
-const SIZES = {
-	small: "2x",
-	medium: "2.5x",
-	large: "3x"
-};
-/**
-* The info badge is a leaf element that is often placed inside a bigger click
-* target: a field `<label>`, a switch row, a table header, a list item. Neither
-* the tooltip nor the optional navigation should ever activate that container,
-* so the events that would do so are contained here.
-*
-* The guard sits *above* the badge, so the badge's own handlers (including
-* `usePress`, which fires `onPress` from the `click` event) run first and stay
-* intact. `preventDefault` on click is what stops an enclosing `<label>` from
-* forwarding activation to its control — `stopPropagation` alone can't.
-*
-* `pointerup` / `mouseup` are intentionally left alone: `usePress` finishes a
-* press through document-level listeners for those events.
-*/
-const GUARD_HANDLERS = {
-	onClick: (event) => {
-		event.preventDefault();
-		event.stopPropagation();
-	},
-	onPointerDown: (event) => event.stopPropagation(),
-	onMouseDown: (event) => event.stopPropagation(),
-	onKeyDown: (event) => {
-		if (event.key === "Enter" || event.key === " ") event.stopPropagation();
-	},
-	onKeyUp: (event) => {
-		if (event.key === "Enter" || event.key === " ") event.stopPropagation();
-	}
-};
-/**
-* `display: contents` keeps the guard out of the layout entirely while staying
-* in the event path, so the badge remains a direct flex/grid/inline child of
-* whatever contains it.
-*/
-const GuardElement = tasty({
-	as: "span",
-	styles: { display: "contents" }
-});
-/**
-* Sizing the badge so it aligns with the text beside it.
-*
-* The box is a fixed square, but its *margin* box is padded (or trimmed, for
-* `large` in tight text) to exactly one line. An atomic inline's margin box is
-* what the line box measures, so `vertical-align: top` then lands the badge's
-* center on the line box center — where the adjacent text is optically
-* centered — at every size, in inline and block containers alike.
-*
-* `vertical-align: middle` can't do this: it aligns the box center with the
-* x-height midpoint, ~1.5px below the text center, and inflates the line box,
-* which pushes the badge down again inside a block container (a field's
-* `labelSuffix`, a paragraph).
-*
-* `preset: inherit` is what makes `1lh` mean the line the badge sits on. It
-* also keeps the glyph identical across render paths, since `ItemAction` pins
-* itself to the `t4` preset while `ItemBadge` inherits.
-*/
-function sizeStyles(size) {
-	const box = SIZES[size];
-	return {
-		preset: "inherit",
-		height: box,
-		width: box,
-		margin: `((1lh - ${box}) / 2) 0`,
-		verticalAlign: "top",
-		"$side-padding": 0,
-		Icon: {
-			height: box,
-			width: box,
-			"$icon-size": `(${box} - .25x)`
-		}
-	};
-}
-const INFO_STYLES = { color: {
-	"": "#primary-text-soft",
-	"hovered | focused": "#primary-text",
-	pressed: "#primary-text"
-} };
-function isTooltipConfig(value) {
-	return typeof value === "object" && value !== null && !isValidElement(value) && !Array.isArray(value);
-}
-/**
-* An informational icon with a tooltip. Renders as a plain badge by default and
-* upgrades to a link / button when `to` or `onPress` is provided.
-*/
-const InfoBadge = forwardRef(function InfoBadge(allProps, ref) {
-	const { t } = useI18n();
-	const { tooltip, tooltipSuffix, icon = /* @__PURE__ */ jsx(InfoCircleIcon, {}), size = "medium", type = "clear", theme = "default", to, onPress, navigationOptions, target, label, qa = "InfoBadge", styles, ...rest } = allProps;
-	const isInteractive = to != null || onPress != null;
-	const { title, tooltipProps } = useMemo(() => {
-		if (isTooltipConfig(tooltip)) {
-			const { title, ...tooltipProps } = tooltip;
-			return {
-				title,
-				tooltipProps
-			};
-		}
-		return {
-			title: tooltip,
-			tooltipProps: {}
-		};
-	}, [tooltip]);
-	const suffix = tooltipSuffix === void 0 ? isInteractive ? t("infoBadge.learnMore", "Click to learn more.") : null : tooltipSuffix;
-	const finalTooltip = useMemo(() => ({
-		...tooltipProps,
-		title: suffix ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			title,
-			" ",
-			suffix
-		] }) : title
-	}), [
-		tooltipProps,
-		title,
-		suffix
-	]);
-	const ariaLabel = label ?? rest["aria-label"] ?? (typeof title === "string" ? title : t("infoBadge.ariaLabel", "More information"));
-	const finalStyles = useMemo(() => mergeStyles(sizeStyles(size), theme === "default" && type === "clear" ? INFO_STYLES : null, styles), [
-		size,
-		theme,
-		type,
-		styles
-	]);
-	const actionRef = useCallback((value) => {
-		const element = value ? value.UNSAFE_getDOMNode() : null;
-		if (typeof ref === "function") ref(element);
-		else if (ref) ref.current = element;
-	}, [ref]);
-	const sharedProps = {
-		...rest,
-		qa,
-		icon,
-		type,
-		theme,
-		styles: finalStyles,
-		"aria-label": ariaLabel,
-		tooltip: finalTooltip
-	};
-	return /* @__PURE__ */ jsx(GuardElement, {
-		...GUARD_HANDLERS,
-		children: isInteractive ? /* @__PURE__ */ jsx(ItemAction, {
-			ref: actionRef,
-			to,
-			onPress,
-			navigationOptions,
-			target,
-			...sharedProps
-		}) : /* @__PURE__ */ jsx(ItemBadge, {
-			ref,
-			...sharedProps
-		})
-	});
-});
-
-//#endregion
-export { InfoBadge };
-//# sourceMappingURL=InfoBadge.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"InfoBadge.js","names":[],"sources":["../../../../src/components/content/InfoBadge/InfoBadge.tsx"],"sourcesContent":["import { FocusableRefValue } from '@react-types/shared';\nimport { BaseProps, mergeStyles, Styles, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n  useCallback,\n  useMemo,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { InfoCircleIcon } from '../../../icons/index';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { CubeUseActionProps } from '../../actions/use-action';\nimport { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\nimport { ItemBadge } from '../ItemBadge';\n\nexport type CubeInfoBadgeTooltipConfig = Omit<\n  CubeTooltipProviderProps,\n  'children'\n>;\n\nexport interface CubeInfoBadgeProps\n  extends Omit<BaseProps, 'children'>,\n    Partial<\n      Pick<\n        CubeUseActionProps,\n        'to' | 'onPress' | 'navigationOptions' | 'target' | 'label'\n      >\n    > {\n  /**\n   * Tooltip content. Either the content itself or a configuration object\n   * `{ title, ...tooltipProps }` for advanced setups (placement, delay, etc.).\n   */\n  tooltip: ReactNode | CubeInfoBadgeTooltipConfig;\n  /**\n   * Text appended to the tooltip content. Defaults to a \"learn more\" hint when\n   * the badge is interactive (`to` or `onPress` is provided). Pass `null` or an\n   * empty string to opt out.\n   */\n  tooltipSuffix?: ReactNode;\n  /** Icon to render. @default <InfoCircleIcon /> */\n  icon?: ReactNode;\n  /**\n   * Size of the badge. Every size still contributes exactly one line to the\n   * text around it, so the badge stays aligned with adjacent text.\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** @default \"clear\" */\n  type?: 'primary' | 'outline' | 'clear';\n  /** @default \"default\" */\n  theme?: 'default' | 'danger' | 'success';\n  isLoading?: boolean;\n  isDisabled?: boolean;\n  styles?: Styles;\n}\n\nconst SIZES: Record<NonNullable<CubeInfoBadgeProps['size']>, string> = {\n  small: '2x',\n  medium: '2.5x',\n  large: '3x',\n};\n\n/**\n * The info badge is a leaf element that is often placed inside a bigger click\n * target: a field `<label>`, a switch row, a table header, a list item. Neither\n * the tooltip nor the optional navigation should ever activate that container,\n * so the events that would do so are contained here.\n *\n * The guard sits *above* the badge, so the badge's own handlers (including\n * `usePress`, which fires `onPress` from the `click` event) run first and stay\n * intact. `preventDefault` on click is what stops an enclosing `<label>` from\n * forwarding activation to its control — `stopPropagation` alone can't.\n *\n * `pointerup` / `mouseup` are intentionally left alone: `usePress` finishes a\n * press through document-level listeners for those events.\n */\nconst GUARD_HANDLERS = {\n  onClick: (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  },\n  onPointerDown: (event: PointerEvent) => event.stopPropagation(),\n  onMouseDown: (event: MouseEvent) => event.stopPropagation(),\n  onKeyDown: (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.stopPropagation();\n    }\n  },\n  onKeyUp: (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.stopPropagation();\n    }\n  },\n};\n\n/**\n * `display: contents` keeps the guard out of the layout entirely while staying\n * in the event path, so the badge remains a direct flex/grid/inline child of\n * whatever contains it.\n */\nconst GuardElement = tasty({\n  as: 'span',\n  styles: { display: 'contents' },\n});\n\n/**\n * Sizing the badge so it aligns with the text beside it.\n *\n * The box is a fixed square, but its *margin* box is padded (or trimmed, for\n * `large` in tight text) to exactly one line. An atomic inline's margin box is\n * what the line box measures, so `vertical-align: top` then lands the badge's\n * center on the line box center — where the adjacent text is optically\n * centered — at every size, in inline and block containers alike.\n *\n * `vertical-align: middle` can't do this: it aligns the box center with the\n * x-height midpoint, ~1.5px below the text center, and inflates the line box,\n * which pushes the badge down again inside a block container (a field's\n * `labelSuffix`, a paragraph).\n *\n * `preset: inherit` is what makes `1lh` mean the line the badge sits on. It\n * also keeps the glyph identical across render paths, since `ItemAction` pins\n * itself to the `t4` preset while `ItemBadge` inherits.\n */\nfunction sizeStyles(size: NonNullable<CubeInfoBadgeProps['size']>): Styles {\n  const box = SIZES[size];\n\n  return {\n    preset: 'inherit',\n    height: box,\n    width: box,\n    margin: `((1lh - ${box}) / 2) 0`,\n    verticalAlign: 'top',\n    // The badge is standalone rather than part of an `Item` action row, so it\n    // shouldn't reserve the row's side padding as an outer margin.\n    '$side-padding': 0,\n    Icon: {\n      height: box,\n      width: box,\n      '$icon-size': `(${box} - .25x)`,\n    },\n  };\n}\n\n// Soft → strong on interaction, mirroring the link styles: the badge reads as a\n// quiet brand-colored hint at rest and gains contrast once it's engaged.\nconst INFO_STYLES: Styles = {\n  color: {\n    '': '#primary-text-soft',\n    'hovered | focused': '#primary-text',\n    pressed: '#primary-text',\n  },\n};\n\nfunction isTooltipConfig(\n  value: ReactNode | CubeInfoBadgeTooltipConfig,\n): value is CubeInfoBadgeTooltipConfig {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    !isValidElement(value) &&\n    !Array.isArray(value)\n  );\n}\n\n/**\n * An informational icon with a tooltip. Renders as a plain badge by default and\n * upgrades to a link / button when `to` or `onPress` is provided.\n */\nexport const InfoBadge = forwardRef(function InfoBadge(\n  allProps: CubeInfoBadgeProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  const {\n    tooltip,\n    tooltipSuffix,\n    icon = <InfoCircleIcon />,\n    size = 'medium',\n    type = 'clear',\n    theme = 'default',\n    to,\n    onPress,\n    navigationOptions,\n    target,\n    label,\n    qa = 'InfoBadge',\n    styles,\n    ...rest\n  } = allProps;\n\n  const isInteractive = to != null || onPress != null;\n\n  const { title, tooltipProps } = useMemo(() => {\n    if (isTooltipConfig(tooltip)) {\n      const { title, ...tooltipProps } = tooltip;\n\n      return { title, tooltipProps };\n    }\n\n    return { title: tooltip, tooltipProps: {} };\n  }, [tooltip]);\n\n  const suffix =\n    tooltipSuffix === undefined\n      ? isInteractive\n        ? t('infoBadge.learnMore', 'Click to learn more.')\n        : null\n      : tooltipSuffix;\n\n  const finalTooltip = useMemo(\n    () => ({\n      ...tooltipProps,\n      title: suffix ? (\n        <>\n          {title} {suffix}\n        </>\n      ) : (\n        title\n      ),\n    }),\n    [tooltipProps, title, suffix],\n  );\n\n  // The accessible name is the tooltip text itself when it's plain text. Rich\n  // tooltip content can't serve as a label, so fall back to a generic one.\n  const ariaLabel =\n    label ??\n    rest['aria-label'] ??\n    (typeof title === 'string'\n      ? title\n      : t('infoBadge.ariaLabel', 'More information'));\n\n  const finalStyles = useMemo(\n    () =>\n      mergeStyles(\n        sizeStyles(size),\n        // Only the default look is brand-tinted; explicit themes and filled\n        // types bring their own colors.\n        theme === 'default' && type === 'clear' ? INFO_STYLES : null,\n        styles,\n      ),\n    [size, theme, type, styles],\n  );\n\n  // `ItemAction` exposes a react-spectrum focusable ref; unwrap it so that `ref`\n  // points at the DOM node whether or not the badge is interactive.\n  const actionRef = useCallback(\n    (value: FocusableRefValue<HTMLElement> | null) => {\n      const element = value ? value.UNSAFE_getDOMNode() : null;\n\n      if (typeof ref === 'function') {\n        ref(element);\n      } else if (ref) {\n        ref.current = element;\n      }\n    },\n    [ref],\n  );\n\n  const sharedProps = {\n    ...rest,\n    qa,\n    icon,\n    type,\n    theme,\n    styles: finalStyles,\n    'aria-label': ariaLabel,\n    tooltip: finalTooltip as CubeItemActionProps['tooltip'],\n  };\n\n  return (\n    <GuardElement {...GUARD_HANDLERS}>\n      {isInteractive ? (\n        <ItemAction\n          ref={actionRef}\n          to={to}\n          onPress={onPress}\n          navigationOptions={navigationOptions}\n          target={target}\n          {...sharedProps}\n        />\n      ) : (\n        <ItemBadge ref={ref as ForwardedRef<HTMLDivElement>} {...sharedProps} />\n      )}\n    </GuardElement>\n  );\n});\n\nexport type { CubeInfoBadgeProps as InfoBadgeProps };\n"],"mappings":";;;;;;;;;;AA8DA,MAAM,QAAiE;CACrE,OAAO;CACP,QAAQ;CACR,OAAO;CACR;;;;;;;;;;;;;;;AAgBD,MAAM,iBAAiB;CACrB,UAAU,UAAsB;AAC9B,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;;CAEzB,gBAAgB,UAAwB,MAAM,iBAAiB;CAC/D,cAAc,UAAsB,MAAM,iBAAiB;CAC3D,YAAY,UAAyB;AACnC,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,OAAM,iBAAiB;;CAG3B,UAAU,UAAyB;AACjC,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,OAAM,iBAAiB;;CAG5B;;;;;;AAOD,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ,EAAE,SAAS,YAAY;CAChC,CAAC;;;;;;;;;;;;;;;;;;;AAoBF,SAAS,WAAW,MAAuD;CACzE,MAAM,MAAM,MAAM;AAElB,QAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ,WAAW,IAAI;EACvB,eAAe;EAGf,iBAAiB;EACjB,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,cAAc,IAAI,IAAI;GACvB;EACF;;AAKH,MAAM,cAAsB,EAC1B,OAAO;CACL,IAAI;CACJ,qBAAqB;CACrB,SAAS;CACV,EACF;AAED,SAAS,gBACP,OACqC;AACrC,QACE,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,eAAe,MAAM,IACtB,CAAC,MAAM,QAAQ,MAAM;;;;;;AAQzB,MAAa,YAAY,WAAW,SAAS,UAC3C,UACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,EACJ,SACA,eACA,OAAO,oBAAC,mBAAiB,EACzB,OAAO,UACP,OAAO,SACP,QAAQ,WACR,IACA,SACA,mBACA,QACA,OACA,KAAK,aACL,QACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,MAAM,QAAQ,WAAW;CAE/C,MAAM,EAAE,OAAO,iBAAiB,cAAc;AAC5C,MAAI,gBAAgB,QAAQ,EAAE;GAC5B,MAAM,EAAE,OAAO,GAAG,iBAAiB;AAEnC,UAAO;IAAE;IAAO;IAAc;;AAGhC,SAAO;GAAE,OAAO;GAAS,cAAc,EAAE;GAAE;IAC1C,CAAC,QAAQ,CAAC;CAEb,MAAM,SACJ,kBAAkB,SACd,gBACE,EAAE,uBAAuB,uBAAuB,GAChD,OACF;CAEN,MAAM,eAAe,eACZ;EACL,GAAG;EACH,OAAO,SACL;GACG;GAAM;GAAE;MACR,GAEH;EAEH,GACD;EAAC;EAAc;EAAO;EAAO,CAC9B;CAID,MAAM,YACJ,SACA,KAAK,kBACJ,OAAO,UAAU,WACd,QACA,EAAE,uBAAuB,mBAAmB;CAElD,MAAM,cAAc,cAEhB,YACE,WAAW,KAAK,EAGhB,UAAU,aAAa,SAAS,UAAU,cAAc,MACxD,OACD,EACH;EAAC;EAAM;EAAO;EAAM;EAAO,CAC5B;CAID,MAAM,YAAY,aACf,UAAiD;EAChD,MAAM,UAAU,QAAQ,MAAM,mBAAmB,GAAG;AAEpD,MAAI,OAAO,QAAQ,WACjB,KAAI,QAAQ;WACH,IACT,KAAI,UAAU;IAGlB,CAAC,IAAI,CACN;CAED,MAAM,cAAc;EAClB,GAAG;EACH;EACA;EACA;EACA;EACA,QAAQ;EACR,cAAc;EACd,SAAS;EACV;AAED,QACE,oBAAC;EAAa,GAAI;YACf,gBACC,oBAAC;GACC,KAAK;GACD;GACK;GACU;GACX;GACR,GAAI;IACJ,GAEF,oBAAC;GAAe;GAAqC,GAAI;IAAe;GAE7D;EAEjB"}

package/docs/components/content/InfoBadge.md

@@ -1,49 +0,0 @@
-# InfoBadge
-
-An informational icon with a tooltip. Renders as a plain badge (`ItemBadge`) by default, and upgrades to a link or button (`ItemAction`) as soon as `to` or `onPress` is provided — so the same icon can also point at the docs.
-
-The badge contains its own press events, which lets it sit inside a bigger click target — a field `<label>`, a switch row, a table header, a list item — without activating it.
-
-## When to Use
-
-- Explain a field, a label, or a column header without spending layout space on a description
-- Link a piece of UI to its documentation page
-- Any place that used to render a bare info icon wrapped in a tooltip by hand
-
-Every field's `tooltip` prop already renders an `InfoBadge` next to the label, so reach for this component only when you need an info icon outside of a field.
-
-## Properties
-
-- **`tooltip`** `ReactNode | object` (required) — Tooltip content, or `{ title, ...tooltipProps }` for advanced configuration (`placement`, `delay`, `width`, …)
-- **`tooltipSuffix`** `ReactNode` — Text appended to the tooltip content. Defaults to a localized `Click to learn more.` hint when the badge is interactive. Pass `null` to opt out.
-- **`icon`** `ReactNode` (default: `<InfoCircleIcon />`) — Icon to render
-- **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) — Every size contributes exactly one line to the text around it, so the badge stays aligned with adjacent text whichever one you pick
-- **`type`** `'primary' | 'outline' | 'clear'` (default: `'clear'`) — Visual type
-- **`theme`** `'default' | 'danger' | 'success'` (default: `'default'`) — Color theme. The default `default` + `clear` combination is brand-tinted; any other combination uses the theme's own colors.
-- **`to`** `string | number | object` — Navigation target. Renders the badge as a link. Supports the `!` (new tab) and `@` (native navigation) prefixes.
-- **`onPress`** `(e: PressEvent) => void` — Press handler. Renders the badge as a button.
-- **`isLoading`** `boolean` — Replace the icon with a loading spinner
-- **`isDisabled`** `boolean` — Disable the badge
-
-### Accessibility
-
-The accessible name is the tooltip text when it's plain text. Rich tooltip content can't serve as a name, so a localized `More information` label is used instead — pass `aria-label` or `label` to override it.
-
-### Base Properties
-
-Supports [Base properties](../../BaseProperties.md).
-
-## Examples
-
-```jsx
-<InfoBadge tooltip="Deployments run in the region closest to your data source." />
-
-<InfoBadge
-  to="!https://docs.cube.dev/admin/deployment/auto-suspension"
-  tooltip="Suspends the deployment after a period of inactivity."
-/>
-
-<InfoBadge tooltip="Copied from the parent space." tooltipSuffix={null} />
-
-<Switch label="Auto-suspend" labelSuffix={<InfoBadge tooltip="…" />} />
-```