@cube-dev/ui-kit 0.113.1 → 0.115.0

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

@@ -0,0 +1,11 @@
+
+import { BaseProps, ContainerStyleProps, TextStyleProps } from "../../tasty/types.js";
+import "../../tasty/index.js";
+import * as react from "react";
+
+//#region src/components/content/Content.d.ts
+interface CubeContentProps extends BaseProps, ContainerStyleProps, TextStyleProps {}
+declare const Content: react.ForwardRefExoticComponent<CubeContentProps & react.RefAttributes<unknown>>;
+//#endregion
+export { Content, CubeContentProps };
+//# sourceMappingURL=Content.d.ts.map

package/dist/components/content/Content.js

@@ -0,0 +1,38 @@
+/** @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 { tasty } from "../../tasty/tasty.js";
+import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+import { useSlotProps } from "../../utils/react/Slots.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Content.tsx
+const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
+const ContentElement = tasty({
+	qa: "Content",
+	as: "section",
+	styles: {
+		gridArea: "content",
+		preset: "p3",
+		color: "#dark-02",
+		display: "block",
+		flow: "column",
+		gap: "2x",
+		overflow: "auto",
+		scrollbar: "styled"
+	}
+});
+const Content = forwardRef(function Content(props, ref) {
+	props = useSlotProps(props, "content");
+	const styles = extractStyles(props, STYLE_LIST);
+	return /* @__PURE__ */ jsx(ContentElement, {
+		...filterBaseProps(props, { eventProps: true }),
+		ref,
+		styles
+	});
+});
+
+//#endregion
+export { Content };
+//# sourceMappingURL=Content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","names":[],"sources":["../../../src/components/content/Content.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n  TEXT_STYLES,\n  TextStyleProps,\n} from '../../tasty';\nimport { useSlotProps } from '../../utils/react';\n\nconst STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nconst ContentElement = tasty({\n  qa: 'Content',\n  as: 'section',\n  styles: {\n    gridArea: 'content',\n    preset: 'p3',\n    color: '#dark-02',\n    display: 'block',\n    flow: 'column',\n    gap: '2x',\n    overflow: 'auto',\n    scrollbar: 'styled',\n  },\n});\n\nexport interface CubeContentProps\n  extends BaseProps,\n    ContainerStyleProps,\n    TextStyleProps {}\n\nexport const Content = forwardRef(function Content(\n  props: CubeContentProps,\n  ref,\n) {\n  props = useSlotProps(props, 'content');\n\n  const styles = extractStyles(props, STYLE_LIST);\n\n  return (\n    <ContentElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;AAcA,MAAM,aAAa,CAAC,GAAG,kBAAkB,GAAG,YAAY;AAExD,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,QAAQ;EACR,OAAO;EACP,SAAS;EACT,MAAM;EACN,KAAK;EACL,UAAU;EACV,WAAW;EACZ;CACF,CAAC;AAOF,MAAa,UAAU,WAAW,SAAS,QACzC,OACA,KACA;AACA,SAAQ,aAAa,OAAO,UAAU;CAEtC,MAAM,SAAS,cAAc,OAAO,WAAW;AAE/C,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

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

@@ -0,0 +1,24 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { PositionStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { CubeCardProps } from "../Card/Card.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/content/CopyPasteBlock/CopyPasteBlock.d.ts
+interface CubeCopyPasteBlockProps extends Omit<CubeCardProps, 'onPaste' | 'onCopy'>, PositionStyleProps {
+  padding?: Styles['padding'];
+  /** The code snippet */
+  value?: string;
+  placeholder?: ReactNode;
+  /** The title of the snippet */
+  title?: string;
+  onPaste?: (text: string) => void | Promise<void | string>;
+  onCopy?: () => void;
+  size?: 'small' | 'medium' | 'large';
+}
+declare const _CopyPasteBlock: react.ForwardRefExoticComponent<CubeCopyPasteBlockProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeCopyPasteBlockProps, _CopyPasteBlock };
+//# sourceMappingURL=CopyPasteBlock.d.ts.map

package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js

@@ -0,0 +1,167 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { POSITION_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { useTimer } from "../../../_internal/hooks/use-timer/use-timer.js";
+import { CopyIcon } from "../../../icons/CopyIcon.js";
+import { Button } from "../../actions/index.js";
+import { useToast } from "../../overlays/Toast/useToast.js";
+import { Card } from "../Card/Card.js";
+import { forwardRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "react-aria";
+import copy from "clipboard-copy";
+
+//#region src/components/content/CopyPasteBlock/CopyPasteBlock.tsx
+const StyledBlock = tasty({ styles: {
+	display: "grid",
+	flow: "column",
+	placeContent: "center space-between",
+	placeItems: "center stretch",
+	gap: "1x",
+	position: "relative",
+	width: "max 100%",
+	color: "inherit",
+	padding: "0 1.5x",
+	userSelect: "none",
+	Label: {
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	}
+} });
+const CopyPasteBlockElement = tasty(Card, {
+	qa: "CopyPasteBlock",
+	styles: {
+		display: "grid",
+		fill: "#dark-bg",
+		radius: "1r",
+		padding: {
+			"": "0 1px",
+			":focus": "0"
+		},
+		color: {
+			"": "#dark",
+			error: "#danger-text"
+		},
+		border: {
+			"": "dashed #dark-03",
+			":focus": "2px dashed #primary-text",
+			error: "dashed #danger"
+		},
+		cursor: "$pointer",
+		preset: {
+			"": "t3",
+			"size=large": "t2"
+		},
+		height: {
+			"": "5x",
+			"size=small": "4x",
+			"size=large": "6x"
+		},
+		boxSizing: "border-box",
+		Grid: {
+			display: "grid",
+			flow: "row",
+			gridColumns: "minmax(0, 1fr) min-content",
+			placeContent: "stretch",
+			width: "min 20x",
+			radius: "1r",
+			position: "relative"
+		},
+		Shortcut: { display: {
+			"": "none",
+			":focus & !error": "inline"
+		} }
+	}
+});
+const CopyButton = tasty(Button, {
+	type: "clear",
+	icon: /* @__PURE__ */ jsx(CopyIcon, {}),
+	"aria-label": "Copy to clipboard",
+	styles: {
+		placeSelf: "stretch",
+		border: "#clear",
+		shadow: {
+			"": "0 0 0 1ow #purple-03.0 inset",
+			focused: "0 0 0 1ow #purple-03 inset"
+		},
+		radius: {
+			"": "0 1r 1r 0",
+			"multiline | has-scroll": "0 1r 0 0"
+		},
+		height: "auto",
+		outline: false
+	}
+});
+function CopyPasteBlock(allProps, ref) {
+	const { value = "", onPaste, placeholder, title, size = "medium", ...props } = allProps;
+	const styles = extractStyles(props, POSITION_STYLES);
+	const [error, setError] = useState(null);
+	const toast = useToast();
+	const { clipboardProps } = useClipboard({
+		async onPaste(items) {
+			let pasted = await Promise.all(items.filter((item) => item.kind === "text" && item.types.has("text/plain")).map((item) => item.getText("text/plain")));
+			try {
+				await onPaste?.(pasted.join("\n"));
+			} catch (e) {
+				setError(String(e));
+			}
+		},
+		getItems() {
+			return value ? [{ "text/plain": value }] : [];
+		},
+		onCopy() {
+			if (value) toast.success(`${title || "Text"} copied`);
+		}
+	});
+	useTimer({
+		delay: 1e3,
+		callback() {
+			setError(null);
+		},
+		isDisabled: !error
+	});
+	async function onCopy() {
+		await copy(value);
+		toast.success(`${title || "Text"} copied`);
+	}
+	const pristineValue = value.replace(/\n/, " ");
+	return /* @__PURE__ */ jsx(CopyPasteBlockElement, {
+		ref,
+		mods: { error: !!error },
+		"data-size": size,
+		styles,
+		tabIndex: "0",
+		...props,
+		...clipboardProps,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-element": "Grid",
+			children: [/* @__PURE__ */ jsxs(StyledBlock, {
+				"data-size": size,
+				mods: { placeholder: !!placeholder || !value },
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-element": "Label",
+					children: error != null ? error || "Invalid data" : value ? pristineValue : /* @__PURE__ */ jsx(Fragment$1, { children: placeholder ? placeholder : "Select and paste" })
+				}), /* @__PURE__ */ jsxs("span", {
+					"data-element": "Shortcut",
+					children: [
+						/* @__PURE__ */ jsx("kbd", { children: "Cmd" }),
+						" + ",
+						/* @__PURE__ */ jsx("kbd", { children: "V" })
+					]
+				})]
+			}), value && !error && /* @__PURE__ */ jsx(CopyButton, {
+				size,
+				"aria-label": `Copy ${title}`,
+				onPress: onCopy
+			})]
+		})
+	});
+}
+const _CopyPasteBlock = forwardRef(CopyPasteBlock);
+_CopyPasteBlock.displayName = "CopyPasteBlock";
+
+//#endregion
+export { _CopyPasteBlock };
+//# sourceMappingURL=CopyPasteBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyPasteBlock.js","names":[],"sources":["../../../../src/components/content/CopyPasteBlock/CopyPasteBlock.tsx"],"sourcesContent":["import copy from 'clipboard-copy';\nimport { ForwardedRef, forwardRef, ReactNode, useState } from 'react';\nimport { TextDropItem, useClipboard } from 'react-aria';\n\nimport { useTimer } from '../../../_internal';\nimport { CopyIcon } from '../../../icons';\nimport {\n  extractStyles,\n  POSITION_STYLES,\n  PositionStyleProps,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { Button } from '../../actions';\nimport { useToast } from '../../overlays/Toast';\nimport { Card, CubeCardProps } from '../Card/Card';\n\nconst StyledBlock = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'column',\n    placeContent: 'center space-between',\n    placeItems: 'center stretch',\n    gap: '1x',\n    position: 'relative',\n    width: 'max 100%',\n    color: 'inherit',\n    padding: '0 1.5x',\n    // height: {\n    //   '': '4.5x',\n    //   '[data-size=\"small\"]': '3.5x',\n    //   '[data-size=\"large\"]': '5.5x',\n    // },\n    userSelect: 'none',\n\n    Label: {\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n  },\n});\n\nconst CopyPasteBlockElement = tasty(Card, {\n  qa: 'CopyPasteBlock',\n  styles: {\n    display: 'grid',\n    fill: '#dark-bg',\n    radius: '1r',\n    padding: {\n      '': '0 1px',\n      ':focus': '0',\n    },\n    color: {\n      '': '#dark',\n      error: '#danger-text',\n    },\n    border: {\n      '': 'dashed #dark-03',\n      ':focus': '2px dashed #primary-text',\n      error: 'dashed #danger',\n    },\n    cursor: '$pointer',\n    preset: {\n      '': 't3',\n      'size=large': 't2',\n    },\n    height: {\n      '': '5x',\n      'size=small': '4x',\n      'size=large': '6x',\n    },\n    boxSizing: 'border-box',\n\n    Grid: {\n      display: 'grid',\n      flow: 'row',\n      gridColumns: 'minmax(0, 1fr) min-content',\n      placeContent: 'stretch',\n      width: 'min 20x',\n      radius: '1r',\n      position: 'relative',\n    },\n\n    Shortcut: {\n      display: {\n        '': 'none',\n        ':focus & !error': 'inline',\n      },\n    },\n  },\n});\n\nconst CopyButton = tasty(Button, {\n  type: 'clear',\n  icon: <CopyIcon />,\n  'aria-label': 'Copy to clipboard',\n  styles: {\n    placeSelf: 'stretch',\n    border: '#clear',\n    shadow: {\n      '': '0 0 0 1ow #purple-03.0 inset',\n      focused: '0 0 0 1ow #purple-03 inset',\n    },\n    radius: {\n      '': '0 1r 1r 0',\n      'multiline | has-scroll': '0 1r 0 0',\n    },\n    height: 'auto',\n    outline: false,\n  },\n});\n\nexport interface CubeCopyPasteBlockProps\n  extends Omit<CubeCardProps, 'onPaste' | 'onCopy'>,\n    PositionStyleProps {\n  padding?: Styles['padding'];\n  /** The code snippet */\n  value?: string;\n  placeholder?: ReactNode;\n  /** The title of the snippet */\n  title?: string;\n  onPaste?: (text: string) => void | Promise<void | string>;\n  onCopy?: () => void;\n  size?: 'small' | 'medium' | 'large';\n}\n\nfunction CopyPasteBlock(\n  allProps: CubeCopyPasteBlockProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    value = '',\n    onPaste,\n    placeholder,\n    title,\n    size = 'medium',\n    ...props\n  } = allProps;\n  const styles = extractStyles(props, POSITION_STYLES);\n\n  const [error, setError] = useState<string | null>(null);\n  const toast = useToast();\n\n  const { clipboardProps } = useClipboard({\n    async onPaste(items) {\n      let pasted = await Promise.all(\n        items\n          .filter(\n            (item) => item.kind === 'text' && item.types.has('text/plain'),\n          )\n          .map((item) => (item as TextDropItem).getText('text/plain')),\n      );\n      try {\n        await onPaste?.(pasted.join('\\n'));\n      } catch (e) {\n        setError(String(e));\n      }\n    },\n    getItems() {\n      return value\n        ? [\n            {\n              'text/plain': value,\n            },\n          ]\n        : [];\n    },\n    onCopy() {\n      if (value) {\n        toast.success(`${title || 'Text'} copied`);\n      }\n    },\n  });\n\n  useTimer({\n    delay: 1000,\n    callback() {\n      setError(null);\n    },\n    isDisabled: !error,\n  });\n\n  async function onCopy() {\n    await copy(value);\n\n    toast.success(`${title || 'Text'} copied`);\n  }\n\n  const pristineValue = value.replace(/\\n/, ' ');\n\n  return (\n    <CopyPasteBlockElement\n      ref={ref}\n      mods={{ error: !!error }}\n      data-size={size}\n      styles={styles}\n      tabIndex=\"0\"\n      {...props}\n      {...clipboardProps}\n    >\n      <div data-element=\"Grid\">\n        <StyledBlock\n          data-size={size}\n          mods={{\n            placeholder: !!placeholder || !value,\n          }}\n        >\n          <div data-element=\"Label\">\n            {error != null ? (\n              error || 'Invalid data'\n            ) : value ? (\n              pristineValue\n            ) : (\n              <>{placeholder ? placeholder : 'Select and paste'}</>\n            )}\n          </div>\n          <span data-element=\"Shortcut\">\n            <kbd>Cmd</kbd> + <kbd>V</kbd>\n          </span>\n        </StyledBlock>\n        {value && !error && (\n          <CopyButton\n            size={size}\n            aria-label={`Copy ${title}`}\n            onPress={onCopy}\n          />\n        )}\n      </div>\n    </CopyPasteBlockElement>\n  );\n}\n\nconst _CopyPasteBlock = forwardRef(CopyPasteBlock);\n\n_CopyPasteBlock.displayName = 'CopyPasteBlock';\n\nexport { _CopyPasteBlock as CopyPasteBlock };\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+
+import { CubeCopyPasteBlockProps, _CopyPasteBlock } from "./CopyPasteBlock.js";

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

@@ -0,0 +1,44 @@
+
+import { CubePrismCodeProps } from "../PrismCode/PrismCode.js";
+import { CubeCardProps } from "../Card/Card.js";
+import * as react from "react";
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/content/CopySnippet/CopySnippet.d.ts
+declare const ActionButton: react.ComponentType<{
+  [x: string]: any;
+  [x: number]: any;
+  [x: symbol]: any;
+} & {}>;
+interface CubeCopySnippetProps extends CubeCardProps {
+  /** The code snippet */
+  code: string;
+  /** The title of the snippet */
+  title?: string;
+  /** Whether the snippet is single-lined */
+  nowrap?: boolean;
+  /** The prefix for each line of code. Useful for bash snippets. */
+  prefix?: string;
+  /** The code language of the snippet */
+  language?: CubePrismCodeProps['language'];
+  /** Whether the snippet uses a serif font */
+  serif?: boolean;
+  /** Whether to show the tooltip with the full content */
+  showTooltip?: boolean;
+  hideText?: string[] | string | boolean;
+  actions?: ReactNode;
+}
+declare function CopySnippet(allProps: CubeCopySnippetProps): react_jsx_runtime0.JSX.Element;
+declare const _CopySnippet: typeof CopySnippet & {
+  Button: typeof ActionButton;
+} & {
+  Button: react.ComponentType<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+  } & {}>;
+};
+//#endregion
+export { CubeCopySnippetProps, _CopySnippet };
+//# sourceMappingURL=CopySnippet.d.ts.map

package/dist/components/content/CopySnippet/CopySnippet.js

@@ -0,0 +1,198 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _Tooltip } from "../../overlays/Tooltip/Tooltip.js";
+import { TooltipTrigger } from "../../overlays/Tooltip/TooltipTrigger.js";
+import { CopyIcon } from "../../../icons/CopyIcon.js";
+import { EyeIcon } from "../../../icons/EyeIcon.js";
+import { EyeInvisibleIcon } from "../../../icons/EyeInvisibleIcon.js";
+import { Action } from "../../actions/Action/Action.js";
+import { Button } from "../../actions/index.js";
+import { _PrismCode } from "../PrismCode/PrismCode.js";
+import { useToast } from "../../overlays/Toast/useToast.js";
+import { Card } from "../Card/Card.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import copy from "clipboard-copy";
+
+//#region src/components/content/CopySnippet/CopySnippet.tsx
+const ActionElement = tasty(Action, { styles: {
+	display: "block",
+	cursor: "default",
+	width: "100%"
+} });
+const StyledBlock = tasty({ styles: {
+	position: "relative",
+	overflow: {
+		"": "auto clip",
+		multiline: "auto"
+	},
+	width: "initial auto 100%",
+	height: {
+		"": "max 5x",
+		multiline: "auto"
+	},
+	boxSizing: "border-box",
+	whiteSpace: {
+		"": "initial",
+		nowrap: "nowrap"
+	},
+	scrollbar: "styled",
+	padding: "1.125x 1.5x",
+	fade: {
+		"": "right 2x",
+		multiline: false
+	},
+	"& code": { font: {
+		"": "monospace",
+		serif: true
+	} }
+} });
+const ButtonContainer = tasty({ styles: {
+	position: "relative",
+	display: "flex",
+	flow: {
+		"": "row-reverse",
+		multiline: "column"
+	},
+	placeContent: "start",
+	"$button-size": {
+		"": "5x",
+		multiline: "4x"
+	},
+	"$first-button-radius": {
+		"": "0 1r 1r 0",
+		multiline: "0 1r 0 0"
+	},
+	"$last-button-radius": {
+		"": "0",
+		multiline: "0 0 0 1r"
+	},
+	"$first-and-last-button-radius": {
+		"": "0 1r 1r 0",
+		multiline: "0 1r 0 1r"
+	},
+	border: "left #clear"
+} });
+const CopySnippetElement = tasty(Card, {
+	qa: "CopySnippet",
+	styles: {
+		display: "grid",
+		gridRows: "minmax(0, 1fr)",
+		fill: "#dark-bg",
+		border: 0,
+		padding: 0,
+		preset: "default",
+		radius: "1r",
+		overflow: "hidden",
+		height: "max-content",
+		Grid: {
+			display: "grid",
+			flow: "row",
+			gridColumns: "minmax(0, 1fr) auto",
+			gridRows: "minmax(0, 1fr)",
+			width: "min 20x",
+			position: "relative"
+		}
+	}
+});
+const ActionButton = tasty(Button, {
+	type: "clear",
+	styles: {
+		width: "4x",
+		padding: 0,
+		placeSelf: "stretch",
+		border: "#clear",
+		shadow: {
+			"": "inset 0 0 0 1ow #purple-03.0",
+			focused: "inset 0 0 0 1ow #purple-03"
+		},
+		outline: false,
+		height: "$button-size",
+		radius: {
+			"": 0,
+			":last-child": "$last-button-radius",
+			":first-child": "$first-button-radius",
+			":first-child & :last-child": "$first-and-last-button-radius"
+		}
+	}
+});
+const CopyButton = tasty(ActionButton, {
+	icon: /* @__PURE__ */ jsx(CopyIcon, {}),
+	"aria-label": "Copy to clipboard"
+});
+const ShowButton = tasty(ActionButton, { "aria-label": "Show hidden parts" });
+const HIDDEN_SYMBOL = "•";
+function replaceSymbolsToHidden(str) {
+	return HIDDEN_SYMBOL.repeat(str.length);
+}
+function CopySnippet(allProps) {
+	const { code = "", title = "Code example", nowrap, prefix = "", language, serif, actions, showTooltip = false, hideText, ...props } = allProps;
+	const toast = useToast();
+	const [showHidden, setShowHidden] = useState(false);
+	async function onCopy() {
+		await copy(code);
+		toast.success(`${title} copied`);
+	}
+	const pristineCode = code.replace(/\n$/, "");
+	const multiline = pristineCode.includes("\n") && !nowrap;
+	let formattedCode = pristineCode.replace(/\r/g, "").split(/\n/g).map((line) => `${prefix}${line}`).join("\n").trim();
+	if (!showHidden) {
+		if (hideText === true) formattedCode = replaceSymbolsToHidden(formattedCode);
+		else if (typeof hideText === "string") formattedCode = formattedCode.replaceAll(hideText, replaceSymbolsToHidden(hideText));
+		else if (Array.isArray(hideText)) hideText.forEach((text) => {
+			formattedCode = formattedCode.replaceAll(text, replaceSymbolsToHidden(text));
+		});
+	}
+	const mods = useMemo(() => {
+		return {
+			nowrap,
+			multiline,
+			serif,
+			hidden: !!hideText
+		};
+	}, [
+		nowrap,
+		multiline,
+		hideText,
+		serif
+	]);
+	const Snippet = /* @__PURE__ */ jsx(CopySnippetElement, {
+		mods,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-element": "Grid",
+			children: [/* @__PURE__ */ jsx(StyledBlock, {
+				mods,
+				children: /* @__PURE__ */ jsx(_PrismCode, {
+					style: {
+						margin: 0,
+						overflow: "visible"
+					},
+					code: formattedCode,
+					language: language || "javascript"
+				})
+			}), /* @__PURE__ */ jsxs(ButtonContainer, {
+				mods,
+				children: [
+					/* @__PURE__ */ jsx(CopyButton, {
+						"aria-label": `Copy ${title}`,
+						onPress: onCopy
+					}),
+					hideText && /* @__PURE__ */ jsx(ShowButton, {
+						icon: showHidden ? /* @__PURE__ */ jsx(EyeInvisibleIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}),
+						onPress: () => setShowHidden(!showHidden)
+					}),
+					actions
+				]
+			})]
+		})
+	});
+	if (showTooltip) return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(ActionElement, { children: Snippet }), /* @__PURE__ */ jsx(_Tooltip, { children: formattedCode })] });
+	return Snippet;
+}
+const _CopySnippet = Object.assign(CopySnippet, { Button: ActionButton });
+_CopySnippet.displayName = "CopySnippet";
+
+//#endregion
+export { _CopySnippet };
+//# sourceMappingURL=CopySnippet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopySnippet.js","names":["PrismCode","Tooltip"],"sources":["../../../../src/components/content/CopySnippet/CopySnippet.tsx"],"sourcesContent":["import copy from 'clipboard-copy';\nimport { ReactNode, useMemo, useState } from 'react';\n\nimport { CopyIcon, EyeIcon, EyeInvisibleIcon } from '../../../icons';\nimport { tasty } from '../../../tasty';\nimport { Action, Button } from '../../actions';\nimport {\n  CubePrismCodeProps,\n  PrismCode,\n} from '../../content/PrismCode/PrismCode';\nimport { useToast } from '../../overlays/Toast';\nimport { Tooltip } from '../../overlays/Tooltip/Tooltip';\nimport { TooltipTrigger } from '../../overlays/Tooltip/TooltipTrigger';\nimport { Card, CubeCardProps } from '../Card/Card';\n\nconst ActionElement = tasty(Action, {\n  styles: {\n    display: 'block',\n    cursor: 'default',\n    width: '100%',\n  },\n});\n\nconst StyledBlock = tasty({\n  styles: {\n    position: 'relative',\n    overflow: {\n      '': 'auto clip',\n      multiline: 'auto',\n    },\n    width: 'initial auto 100%',\n    height: {\n      '': 'max 5x',\n      multiline: 'auto',\n    },\n    boxSizing: 'border-box',\n    whiteSpace: {\n      '': 'initial',\n      nowrap: 'nowrap',\n    },\n    scrollbar: 'styled',\n    padding: '1.125x 1.5x',\n    fade: {\n      '': 'right 2x',\n      multiline: false,\n    },\n\n    '& code': {\n      font: {\n        '': 'monospace',\n        serif: true,\n      },\n    },\n  },\n});\n\nconst ButtonContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    flow: {\n      '': 'row-reverse',\n      multiline: 'column',\n    },\n    placeContent: 'start',\n\n    '$button-size': {\n      '': '5x',\n      multiline: '4x',\n    },\n\n    '$first-button-radius': {\n      '': '0 1r 1r 0',\n      multiline: '0 1r 0 0',\n    },\n\n    '$last-button-radius': {\n      '': '0',\n      multiline: '0 0 0 1r',\n    },\n\n    '$first-and-last-button-radius': {\n      '': '0 1r 1r 0',\n      multiline: '0 1r 0 1r',\n    },\n\n    // Make sure there's a small gap between buttons and the content\n    border: 'left #clear',\n  },\n});\n\nconst CopySnippetElement = tasty(Card, {\n  qa: 'CopySnippet',\n  styles: {\n    display: 'grid',\n    gridRows: 'minmax(0, 1fr)',\n    fill: '#dark-bg',\n    border: 0,\n    padding: 0,\n    preset: 'default',\n    radius: '1r',\n    overflow: 'hidden',\n    height: 'max-content',\n\n    Grid: {\n      display: 'grid',\n      flow: 'row',\n      gridColumns: 'minmax(0, 1fr) auto',\n      gridRows: 'minmax(0, 1fr)',\n      width: 'min 20x',\n      position: 'relative',\n    },\n  },\n});\n\nconst ActionButton = tasty(Button, {\n  type: 'clear',\n  styles: {\n    width: '4x',\n    padding: 0,\n    placeSelf: 'stretch',\n    border: '#clear',\n    shadow: {\n      '': 'inset 0 0 0 1ow #purple-03.0',\n      focused: 'inset 0 0 0 1ow #purple-03',\n    },\n    outline: false,\n    height: '$button-size',\n    radius: {\n      '': 0,\n      ':last-child': '$last-button-radius',\n      ':first-child': '$first-button-radius',\n      ':first-child & :last-child': '$first-and-last-button-radius',\n    },\n  },\n});\n\nconst CopyButton = tasty(ActionButton, {\n  icon: <CopyIcon />,\n  'aria-label': 'Copy to clipboard',\n});\n\nconst ShowButton = tasty(ActionButton, {\n  'aria-label': 'Show hidden parts',\n});\n\nexport interface CubeCopySnippetProps extends CubeCardProps {\n  /** The code snippet */\n  code: string;\n  /** The title of the snippet */\n  title?: string;\n  /** Whether the snippet is single-lined */\n  nowrap?: boolean;\n  /** The prefix for each line of code. Useful for bash snippets. */\n  prefix?: string;\n  /** The code language of the snippet */\n  language?: CubePrismCodeProps['language'];\n  /** Whether the snippet uses a serif font */\n  serif?: boolean;\n  /** Whether to show the tooltip with the full content */\n  showTooltip?: boolean;\n  hideText?: string[] | string | boolean;\n  actions?: ReactNode;\n}\n\n// const HIDDEN_SYMBOL = '●';\nconst HIDDEN_SYMBOL = '•';\n\nfunction replaceSymbolsToHidden(str: string) {\n  return HIDDEN_SYMBOL.repeat(str.length);\n}\n\nfunction CopySnippet(allProps: CubeCopySnippetProps) {\n  const {\n    code = '',\n    title = 'Code example',\n    nowrap,\n    prefix = '',\n    language,\n    serif,\n    actions,\n    showTooltip = false,\n    hideText,\n    ...props\n  } = allProps;\n\n  const toast = useToast();\n\n  const [showHidden, setShowHidden] = useState(false);\n\n  async function onCopy() {\n    await copy(code);\n\n    toast.success(`${title} copied`);\n  }\n\n  const pristineCode = code.replace(/\\n$/, '');\n\n  const multiline = pristineCode.includes('\\n') && !nowrap;\n  let formattedCode = pristineCode\n    .replace(/\\r/g, '')\n    .split(/\\n/g)\n    .map((line) => `${prefix}${line}`)\n    .join('\\n')\n    .trim();\n\n  if (!showHidden) {\n    if (hideText === true) {\n      formattedCode = replaceSymbolsToHidden(formattedCode);\n    } else if (typeof hideText === 'string') {\n      formattedCode = formattedCode.replaceAll(\n        hideText,\n        replaceSymbolsToHidden(hideText),\n      );\n    } else if (Array.isArray(hideText)) {\n      hideText.forEach((text) => {\n        formattedCode = formattedCode.replaceAll(\n          text,\n          replaceSymbolsToHidden(text),\n        );\n      });\n    }\n  }\n\n  const mods = useMemo(() => {\n    return {\n      nowrap,\n      multiline,\n      serif,\n      hidden: !!hideText,\n    };\n  }, [nowrap, multiline, hideText, serif]);\n\n  const Snippet = (\n    <CopySnippetElement mods={mods} {...props}>\n      <div data-element=\"Grid\">\n        <StyledBlock mods={mods}>\n          <PrismCode\n            style={{ margin: 0, overflow: 'visible' }}\n            code={formattedCode}\n            language={language || 'javascript'}\n          />\n        </StyledBlock>\n        <ButtonContainer mods={mods}>\n          <CopyButton aria-label={`Copy ${title}`} onPress={onCopy} />\n          {hideText && (\n            <ShowButton\n              icon={showHidden ? <EyeInvisibleIcon /> : <EyeIcon />}\n              onPress={() => setShowHidden(!showHidden)}\n            />\n          )}\n          {actions}\n        </ButtonContainer>\n      </div>\n    </CopySnippetElement>\n  );\n\n  if (showTooltip) {\n    return (\n      <TooltipTrigger>\n        <ActionElement>{Snippet}</ActionElement>\n        <Tooltip>{formattedCode}</Tooltip>\n      </TooltipTrigger>\n    );\n  }\n\n  return Snippet;\n}\n\nconst _CopySnippet = Object.assign(\n  CopySnippet as typeof CopySnippet & {\n    Button: typeof ActionButton;\n  },\n  {\n    Button: ActionButton,\n  },\n);\n\n(_CopySnippet as any).displayName = 'CopySnippet';\n\nexport { _CopySnippet as CopySnippet };\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+
+import { CubeCopySnippetProps, _CopySnippet } from "./CopySnippet.js";

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

@@ -0,0 +1,82 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, BasePropsWithoutChildren, OuterStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { CubeItemButtonProps } from "../../actions/ItemButton/ItemButton.js";
+import "../../actions/ItemButton/index.js";
+import * as react from "react";
+import { Key, ReactNode } from "react";
+
+//#region src/components/content/Disclosure/Disclosure.d.ts
+interface DisclosureStateContext {
+  isExpanded: boolean;
+  toggle: () => void;
+  expand: () => void;
+  collapse: () => void;
+}
+interface CubeDisclosureProps extends BasePropsWithoutChildren, OuterStyleProps {
+  /** Controls expanded state in controlled mode */
+  isExpanded?: boolean;
+  /** Initial expanded state in uncontrolled mode */
+  defaultExpanded?: boolean;
+  /** Callback fired when expanded state changes */
+  onExpandedChange?: (isExpanded: boolean) => void;
+  /** Disables trigger interactions and force-closes the content */
+  isDisabled?: boolean;
+  /** Render-prop alternative to achieve custom trigger markup */
+  children?: ReactNode | ((state: DisclosureStateContext) => ReactNode);
+  /** Visual shape variant */
+  shape?: 'default' | 'card' | 'sharp';
+  /** Duration for DisplayTransition animation in milliseconds */
+  transitionDuration?: number;
+}
+interface CubeDisclosureTriggerProps extends Omit<CubeItemButtonProps, 'onPress' | 'isDisabled'> {
+  /** Children content for the trigger */
+  children?: ReactNode;
+}
+interface CubeDisclosureContentProps extends BaseProps {
+  /** Children content for the panel */
+  children?: ReactNode;
+}
+interface CubeDisclosureGroupProps extends BaseProps, OuterStyleProps {
+  /** Allow more than one disclosure to be open */
+  allowsMultipleExpanded?: boolean;
+  /** Controlled expanded keys */
+  expandedKeys?: Iterable<Key>;
+  /** Uncontrolled default expanded keys */
+  defaultExpandedKeys?: Iterable<Key>;
+  /** Change handler providing the full expanded keys Set */
+  onExpandedChange?: (keys: Set<Key>) => void;
+  /** Disable all disclosures within group and force-close their content */
+  isDisabled?: boolean;
+  /** Props forwarded to all ItemButton triggers in the group */
+  triggerProps?: Partial<CubeItemButtonProps>;
+  /** Optional panel styles applied to all Content panels in the group */
+  contentStyles?: Styles;
+  children: ReactNode;
+}
+interface CubeDisclosureItemProps extends Omit<BasePropsWithoutChildren, 'id'>, OuterStyleProps {
+  /** Unique identifier for the disclosure item in a group */
+  id?: Key;
+  /** Children content */
+  children?: ReactNode;
+  /** Disables trigger interactions and force-closes the content */
+  isDisabled?: boolean;
+  /** Controls expanded state in controlled mode */
+  isExpanded?: boolean;
+  /** Initial expanded state in uncontrolled mode */
+  defaultExpanded?: boolean;
+  /** Callback fired when expanded state changes */
+  onExpandedChange?: (isExpanded: boolean) => void;
+  /** Visual shape variant */
+  shape?: 'default' | 'card' | 'sharp';
+}
+declare const _Disclosure: react.ForwardRefExoticComponent<CubeDisclosureProps & react.RefAttributes<HTMLDivElement>> & {
+  Trigger: react.ForwardRefExoticComponent<Omit<CubeDisclosureTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+  Content: react.ForwardRefExoticComponent<CubeDisclosureContentProps & react.RefAttributes<HTMLDivElement>>;
+  Group: react.ForwardRefExoticComponent<CubeDisclosureGroupProps & react.RefAttributes<HTMLDivElement>>;
+  Item: react.ForwardRefExoticComponent<CubeDisclosureItemProps & react.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { CubeDisclosureContentProps, CubeDisclosureGroupProps, CubeDisclosureItemProps, CubeDisclosureProps, CubeDisclosureTriggerProps, DisclosureStateContext, _Disclosure };
+//# sourceMappingURL=Disclosure.d.ts.map