@cube-dev/ui-kit 0.114.0 → 0.115.0

package/dist/components/GlobalStyles.js

@@ -0,0 +1,310 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useGlobalStyles } from "../tasty/hooks/useGlobalStyles.js";
+import { useRawCSS } from "../tasty/hooks/useRawCSS.js";
+import { TOKENS } from "../tokens/index.js";
+import { useMemo } from "react";
+
+//#region src/components/GlobalStyles.tsx
+/**
+* Body styles applied via useGlobalStyles.
+* These use tasty syntax and get processed correctly.
+*/
+const BODY_STYLES = {
+	overscrollBehaviorY: "none",
+	fill: "#white",
+	fontFamily: "var(--font)",
+	"-webkit-font-smoothing": "antialiased",
+	"-moz-osx-font-smoothing": "grayscale",
+	margin: 0,
+	padding: 0,
+	color: "#dark-02",
+	preset: "t3",
+	letterSpacing: "0.02em"
+};
+const STATIC_CSS = `
+  @font-face {
+    font-family: text-security-disc;
+    src: url(data:font/woff2;base64,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) format('woff2');
+  }
+
+  kbd {
+    font-family: var(--c2-font-family);
+    font-weight: var(--c2-font-weight);
+    font-size: var(--c2-font-size);
+    border: var(--border-width) solid var(--dark-04-color);
+    background-color: white;
+    color: var(--dark-color);
+    border-radius: var(--radius);
+    padding: 0 var(--outline-width);
+  }
+
+  :not([data-qa$="Icon"]) > .tabler-icon {
+    font-size: var(--icon-size);
+    width: 1em;
+    height: 1em;
+    min-width: 1em;
+    min-height: 1em;
+    max-height: 1em;
+    stroke-width: var(--stroke-width);
+  }
+
+  .cube-animation-spin {
+    animation: cube-animation-spin 1s linear infinite;
+  }
+
+  @keyframes cube-animation-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+  }
+
+  .cube-notification-container {
+    min-width: var(--min-dialog-size);
+    max-width: 340px;
+    width: calc(100vw - 32px);
+    position: fixed;
+    top: 32px;
+    right: 16px;
+    z-index: 999999;
+  }
+
+  .cube-notifications {
+    display: grid;
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+  }
+
+  .cube-notification-enter {
+    opacity: 0;
+    max-height: 0px;
+    margin-bottom: 0px;
+    transform: translate(100%, 0);
+  }
+
+  .cube-notification-enter-active {
+    opacity: 1;
+    max-height: 56px;
+    margin-bottom: 8px;
+    transform: translate(0, 0);
+    transition: all 300ms ease-in;
+  }
+
+  .cube-notification-enter-active > * {
+    margin-bottom: 0px;
+  }
+
+  .cube-notification-exit {
+    opacity: 1;
+    margin-bottom: 8px;
+    max-height: 56px;
+    transform: translate(0, 0);
+  }
+
+  .cube-notification-exit-active {
+    opacity: 0;
+    max-height: 0px;
+    margin-bottom: 0px;
+    transform: translate(100%, 0);
+    transition: all 300ms ease-in;
+  }
+
+  .cube-notification-exit-active > * {
+    margin-bottom: 0px;
+  }
+
+  b, strong {
+    font-weight: var(--bold-font-weight, 700);
+  }
+
+  [type=reset], [type=submit], button, html [type=button] {
+    -webkit-appearance: none;
+  }
+
+  code {
+    font-family: var(--monospace-font);
+  }
+
+  /* Prism Code */
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: var(--dark-color);
+    background: none;
+    font-family: var(--monospace-font);
+    text-align: left;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    border-radius: 6px;
+    border: none;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+  code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: rgb(var(--primary-color-rgb) / .2);
+  }
+
+  pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+  code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: rgb(var(--primary-color-rgb) / .2);
+  }
+
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+
+  /* Code blocks */
+  pre[class*="language-"] {
+    overflow: auto;
+  }
+
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: transparent;
+  }
+
+  /* Inline code */
+  :not(pre) > code[class*="language-"] {
+    border-radius: .3em;
+    white-space: normal;
+  }
+
+  .token.inserted-sign {
+    background-color: #e6ffed;
+    color: #30A666;
+  }
+
+  .token.inserted {
+    color: #30A666;
+  }
+
+  .token.deleted-sign {
+    background-color: #ffeef0;
+    color: var(--danger-color);
+  }
+
+  .token.deleted {
+    color: var(--pink-color);
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: var(--dark-03-color);
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.punctuation {
+    color: #993388;
+  }
+
+  .namespace {
+    opacity: .7;
+  }
+
+  .token.property,
+  .token.boolean,
+  .token.constant,
+  .token.symbol,
+  .token.key,
+  .token.keyword {
+    color: var(--pink-color);
+  }
+
+  .token.entity,
+  .token.number {
+    color: #30A666;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin {
+    color: var(--primary-text-color);
+  }
+
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: var(--dark-color);
+  }
+
+  .token.attr-value {
+    color: var(--dark-color);
+  }
+
+  .token.atrule,
+  .token.keyword {
+    font-weight: 500;
+  }
+
+  .token.function,
+  .token.class-name {
+    color: var(--pink-color);
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: var(--pink-color);
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+`;
+function GlobalStyles(props) {
+	const { bodyStyles, font, monospaceFont } = props;
+	useGlobalStyles("body", useMemo(() => {
+		const styles = { ...TOKENS };
+		Object.assign(styles, BODY_STYLES);
+		if (bodyStyles) Object.assign(styles, bodyStyles);
+		return styles;
+	}, [bodyStyles]));
+	useRawCSS(() => {
+		return `
+  html {
+    overscroll-behavior-y: none;
+    --font: ${font ? `${font}, ` : ""}-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    --monospace-font: ${monospaceFont ? `${monospaceFont}, ` : ""}Menlo, Monaco, Consolas, 'Courier New', monospace;
+  }
+${STATIC_CSS}`;
+	}, [font, monospaceFont]);
+	return null;
+}
+
+//#endregion
+export { GlobalStyles };
+//# sourceMappingURL=GlobalStyles.js.map

package/dist/components/GlobalStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalStyles.js","names":[],"sources":["../../src/components/GlobalStyles.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useGlobalStyles, useRawCSS } from '../tasty';\nimport { TOKENS } from '../tokens';\n\nimport type { Styles } from '../tasty';\n\ninterface GlobalStylesProps {\n  bodyStyles?: { [key: string]: string };\n  fonts?: boolean;\n  fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';\n  publicUrl?: string;\n  font?: string;\n  monospaceFont?: string;\n  /** @deprecated Tokens are now always applied via useGlobalStyles */\n  applyLegacyTokens?: boolean;\n}\n\n/**\n * Body styles applied via useGlobalStyles.\n * These use tasty syntax and get processed correctly.\n */\nconst BODY_STYLES: Styles = {\n  overscrollBehaviorY: 'none',\n  fill: '#white',\n  fontFamily: 'var(--font)',\n  '-webkit-font-smoothing': 'antialiased',\n  '-moz-osx-font-smoothing': 'grayscale',\n  margin: 0,\n  padding: 0,\n  color: '#dark-02',\n  preset: 't3',\n  letterSpacing: '0.02em',\n};\n\n// Static CSS that doesn't depend on props\nconst STATIC_CSS = `\n  @font-face {\n    font-family: text-security-disc;\n    src: url(data:font/woff2;base64,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) format('woff2');\n  }\n\n  kbd {\n    font-family: var(--c2-font-family);\n    font-weight: var(--c2-font-weight);\n    font-size: var(--c2-font-size);\n    border: var(--border-width) solid var(--dark-04-color);\n    background-color: white;\n    color: var(--dark-color);\n    border-radius: var(--radius);\n    padding: 0 var(--outline-width);\n  }\n\n  :not([data-qa$=\"Icon\"]) > .tabler-icon {\n    font-size: var(--icon-size);\n    width: 1em;\n    height: 1em;\n    min-width: 1em;\n    min-height: 1em;\n    max-height: 1em;\n    stroke-width: var(--stroke-width);\n  }\n\n  .cube-animation-spin {\n    animation: cube-animation-spin 1s linear infinite;\n  }\n\n  @keyframes cube-animation-spin {\n    from {\n        transform: rotate(0deg);\n    }\n    to {\n        transform: rotate(360deg);\n    }\n  }\n\n  .cube-notification-container {\n    min-width: var(--min-dialog-size);\n    max-width: 340px;\n    width: calc(100vw - 32px);\n    position: fixed;\n    top: 32px;\n    right: 16px;\n    z-index: 999999;\n  }\n\n  .cube-notifications {\n    display: grid;\n    grid-auto-flow: row;\n    grid-template-columns: 1fr;\n  }\n\n  .cube-notification-enter {\n    opacity: 0;\n    max-height: 0px;\n    margin-bottom: 0px;\n    transform: translate(100%, 0);\n  }\n\n  .cube-notification-enter-active {\n    opacity: 1;\n    max-height: 56px;\n    margin-bottom: 8px;\n    transform: translate(0, 0);\n    transition: all 300ms ease-in;\n  }\n\n  .cube-notification-enter-active > * {\n    margin-bottom: 0px;\n  }\n\n  .cube-notification-exit {\n    opacity: 1;\n    margin-bottom: 8px;\n    max-height: 56px;\n    transform: translate(0, 0);\n  }\n\n  .cube-notification-exit-active {\n    opacity: 0;\n    max-height: 0px;\n    margin-bottom: 0px;\n    transform: translate(100%, 0);\n    transition: all 300ms ease-in;\n  }\n\n  .cube-notification-exit-active > * {\n    margin-bottom: 0px;\n  }\n\n  b, strong {\n    font-weight: var(--bold-font-weight, 700);\n  }\n\n  [type=reset], [type=submit], button, html [type=button] {\n    -webkit-appearance: none;\n  }\n\n  code {\n    font-family: var(--monospace-font);\n  }\n\n  /* Prism Code */\n  code[class*=\"language-\"],\n  pre[class*=\"language-\"] {\n    color: var(--dark-color);\n    background: none;\n    font-family: var(--monospace-font);\n    text-align: left;\n    font-weight: normal;\n    font-size: 14px;\n    line-height: 20px;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    border-radius: 6px;\n    border: none;\n\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n  }\n\n  pre[class*=\"language-\"]::-moz-selection, pre[class*=\"language-\"] ::-moz-selection,\n  code[class*=\"language-\"]::-moz-selection, code[class*=\"language-\"] ::-moz-selection {\n    text-shadow: none;\n    background: rgb(var(--primary-color-rgb) / .2);\n  }\n\n  pre[class*=\"language-\"]::selection, pre[class*=\"language-\"] ::selection,\n  code[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection {\n    text-shadow: none;\n    background: rgb(var(--primary-color-rgb) / .2);\n  }\n\n  @media print {\n    code[class*=\"language-\"],\n    pre[class*=\"language-\"] {\n      text-shadow: none;\n    }\n  }\n\n  /* Code blocks */\n  pre[class*=\"language-\"] {\n    overflow: auto;\n  }\n\n  :not(pre) > code[class*=\"language-\"],\n  pre[class*=\"language-\"] {\n    background: transparent;\n  }\n\n  /* Inline code */\n  :not(pre) > code[class*=\"language-\"] {\n    border-radius: .3em;\n    white-space: normal;\n  }\n\n  .token.inserted-sign {\n    background-color: #e6ffed;\n    color: #30A666;\n  }\n\n  .token.inserted {\n    color: #30A666;\n  }\n\n  .token.deleted-sign {\n    background-color: #ffeef0;\n    color: var(--danger-color);\n  }\n\n  .token.deleted {\n    color: var(--pink-color);\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: var(--dark-03-color);\n  }\n\n  .token.tag,\n  .token.operator,\n  .token.punctuation {\n    color: #993388;\n  }\n\n  .namespace {\n    opacity: .7;\n  }\n\n  .token.property,\n  .token.boolean,\n  .token.constant,\n  .token.symbol,\n  .token.key,\n  .token.keyword {\n    color: var(--pink-color);\n  }\n\n  .token.entity,\n  .token.number {\n    color: #30A666;\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin {\n    color: var(--primary-text-color);\n  }\n\n  .token.url,\n  .language-css .token.string,\n  .style .token.string {\n    color: var(--dark-color);\n  }\n\n  .token.attr-value {\n    color: var(--dark-color);\n  }\n\n  .token.atrule,\n  .token.keyword {\n    font-weight: 500;\n  }\n\n  .token.function,\n  .token.class-name {\n    color: var(--pink-color);\n  }\n\n  .token.regex,\n  .token.important,\n  .token.variable {\n    color: var(--pink-color);\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: bold;\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.entity {\n    cursor: help;\n  }\n`;\n\nexport function GlobalStyles(props: GlobalStylesProps) {\n  const { bodyStyles, font, monospaceFont } = props;\n\n  // Merge token styles with body styles\n  const bodyTokenStyles = useMemo((): Styles => {\n    // Start with design tokens\n    const styles: Styles = { ...TOKENS };\n\n    // Add base body styles\n    Object.assign(styles, BODY_STYLES);\n\n    // Override with custom body styles if provided\n    // Keys are passed through as-is (tasty handles both camelCase and kebab-case)\n    if (bodyStyles) {\n      Object.assign(styles, bodyStyles);\n    }\n\n    return styles;\n  }, [bodyStyles]);\n\n  // Apply tokens and body styles via useGlobalStyles\n  useGlobalStyles('body', bodyTokenStyles);\n\n  // Apply static CSS and font definitions via useRawCSS\n  useRawCSS(() => {\n    const fontValue = font ? `${font}, ` : '';\n    const monospaceFontValue = monospaceFont ? `${monospaceFont}, ` : '';\n\n    return `\n  html {\n    overscroll-behavior-y: none;\n    --font: ${fontValue}-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n    --monospace-font: ${monospaceFontValue}Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n${STATIC_CSS}`;\n  }, [font, monospaceFont]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,cAAsB;CAC1B,qBAAqB;CACrB,MAAM;CACN,YAAY;CACZ,0BAA0B;CAC1B,2BAA2B;CAC3B,QAAQ;CACR,SAAS;CACT,OAAO;CACP,QAAQ;CACR,eAAe;CAChB;AAGD,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyQnB,SAAgB,aAAa,OAA0B;CACrD,MAAM,EAAE,YAAY,MAAM,kBAAkB;AAoB5C,iBAAgB,QAjBQ,cAAsB;EAE5C,MAAM,SAAiB,EAAE,GAAG,QAAQ;AAGpC,SAAO,OAAO,QAAQ,YAAY;AAIlC,MAAI,WACF,QAAO,OAAO,QAAQ,WAAW;AAGnC,SAAO;IACN,CAAC,WAAW,CAAC,CAGwB;AAGxC,iBAAgB;AAId,SAAO;;;cAHW,OAAO,GAAG,KAAK,MAAM,GAMnB;wBALO,gBAAgB,GAAG,cAAc,MAAM,GAM3B;;EAEzC;IACG,CAAC,MAAM,cAAc,CAAC;AAEzB,QAAO"}

package/dist/components/GridProvider.d.ts

@@ -0,0 +1,18 @@
+
+import { Styles } from "../tasty/styles/types.js";
+import "../tasty/index.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/GridProvider.d.ts
+interface CubeGridProviderProps {
+  children: ReactNode;
+  columns?: number;
+  gap?: Styles['gap'];
+  width?: Styles['width'];
+  initialWidth?: Styles['width'];
+}
+declare const GridProvider: react.ForwardRefExoticComponent<CubeGridProviderProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeGridProviderProps, GridProvider };
+//# sourceMappingURL=GridProvider.d.ts.map

package/dist/components/GridProvider.js

@@ -0,0 +1,56 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../tasty/tasty.js";
+import { filterBaseProps } from "../tasty/utils/filter-base-props.js";
+import { useCombinedRefs } from "../utils/react/useCombinedRefs.js";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/GridProvider.tsx
+const GridElement = tasty({ styles: { display: "contents" } });
+const COLUMN_WIDTH = "(($grid-width - ($column-gap * ($columns-amount - 1))) / $columns-amount)";
+const GridProvider = forwardRef(function GridProvider(props, outerRef) {
+	let ref = useCombinedRefs(outerRef);
+	let { children, columns = 2, gap = "0", width: forcedWidth, initialWidth } = props;
+	let [width, setWidth] = useState(forcedWidth || initialWidth || "100vw");
+	const resizeCallback = useCallback(() => {
+		const el = ref?.current?.parentElement;
+		if (!el) return;
+		const computedStyle = getComputedStyle(el);
+		setWidth(`${el.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight)}px`);
+	}, [
+		ref,
+		columns,
+		gap
+	]);
+	useEffect(() => {
+		if (forcedWidth) return;
+		const el = ref && ref.current && ref.current.parentNode;
+		if (!el) return;
+		let sensor;
+		import("../utils/ResizeSensor.js").then((module) => module.ResizeSensor).then((ResizeSensor) => {
+			sensor = new ResizeSensor(el, resizeCallback);
+		});
+		return () => {
+			if (sensor) sensor.detach();
+		};
+	}, [resizeCallback]);
+	useEffect(() => {
+		if (forcedWidth) return;
+		resizeCallback();
+	}, [resizeCallback]);
+	return /* @__PURE__ */ jsx(GridElement, {
+		...filterBaseProps(props, { eventProps: true }),
+		ref,
+		styles: {
+			"--grid-width": width,
+			"--columns-amount": columns,
+			"--column-gap": gap,
+			"--column-width": COLUMN_WIDTH
+		},
+		children
+	});
+});
+
+//#endregion
+export { GridProvider };
+//# sourceMappingURL=GridProvider.js.map

package/dist/components/GridProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridProvider.js","names":[],"sources":["../../src/components/GridProvider.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useEffect, useState } from 'react';\n\nimport { filterBaseProps, Styles, tasty } from '../tasty';\nimport { useCombinedRefs } from '../utils/react';\n\nconst GridElement = tasty({\n  styles: {\n    display: 'contents',\n  },\n});\n\nconst COLUMN_WIDTH =\n  '(($grid-width - ($column-gap * ($columns-amount - 1))) / $columns-amount)';\n\nexport interface CubeGridProviderProps {\n  children: ReactNode;\n  columns?: number;\n  gap?: Styles['gap'];\n  width?: Styles['width'];\n  initialWidth?: Styles['width'];\n}\n\nexport const GridProvider = forwardRef<HTMLDivElement, CubeGridProviderProps>(\n  function GridProvider(props, outerRef) {\n    let ref = useCombinedRefs(outerRef);\n\n    let {\n      children,\n      columns = 2,\n      gap = '0',\n      width: forcedWidth,\n      initialWidth,\n    } = props;\n\n    let [width, setWidth] = useState<Styles['width']>(\n      forcedWidth || initialWidth || '100vw',\n    );\n\n    const resizeCallback = useCallback(() => {\n      const el = ref?.current?.parentElement;\n\n      if (!el) return;\n\n      const computedStyle = getComputedStyle(el);\n      const containerWidth =\n        el.clientWidth -\n        parseFloat(computedStyle.paddingLeft) -\n        parseFloat(computedStyle.paddingRight);\n\n      setWidth(`${containerWidth}px`);\n    }, [ref, columns, gap]);\n\n    useEffect(() => {\n      if (forcedWidth) return;\n\n      const el = ref && ref.current && ref.current.parentNode;\n\n      if (!el) return;\n\n      let sensor;\n\n      import('../utils/ResizeSensor')\n        .then((module) => module.ResizeSensor)\n        .then((ResizeSensor) => {\n          sensor = new ResizeSensor(el, resizeCallback);\n        });\n\n      return () => {\n        if (sensor) {\n          sensor.detach();\n        }\n      };\n    }, [resizeCallback]);\n\n    useEffect(() => {\n      if (forcedWidth) return;\n\n      resizeCallback();\n    }, [resizeCallback]);\n\n    return (\n      <GridElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={{\n          '--grid-width': width,\n          '--columns-amount': columns,\n          '--column-gap': gap,\n          '--column-width': COLUMN_WIDTH,\n        }}\n      >\n        {children}\n      </GridElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AAKA,MAAM,cAAc,MAAM,EACxB,QAAQ,EACN,SAAS,YACV,EACF,CAAC;AAEF,MAAM,eACJ;AAUF,MAAa,eAAe,WAC1B,SAAS,aAAa,OAAO,UAAU;CACrC,IAAI,MAAM,gBAAgB,SAAS;CAEnC,IAAI,EACF,UACA,UAAU,GACV,MAAM,KACN,OAAO,aACP,iBACE;CAEJ,IAAI,CAAC,OAAO,YAAY,SACtB,eAAe,gBAAgB,QAChC;CAED,MAAM,iBAAiB,kBAAkB;EACvC,MAAM,KAAK,KAAK,SAAS;AAEzB,MAAI,CAAC,GAAI;EAET,MAAM,gBAAgB,iBAAiB,GAAG;AAM1C,WAAS,GAJP,GAAG,cACH,WAAW,cAAc,YAAY,GACrC,WAAW,cAAc,aAAa,CAEb,IAAI;IAC9B;EAAC;EAAK;EAAS;EAAI,CAAC;AAEvB,iBAAgB;AACd,MAAI,YAAa;EAEjB,MAAM,KAAK,OAAO,IAAI,WAAW,IAAI,QAAQ;AAE7C,MAAI,CAAC,GAAI;EAET,IAAI;AAEJ,SAAO,4BACJ,MAAM,WAAW,OAAO,aAAa,CACrC,MAAM,iBAAiB;AACtB,YAAS,IAAI,aAAa,IAAI,eAAe;IAC7C;AAEJ,eAAa;AACX,OAAI,OACF,QAAO,QAAQ;;IAGlB,CAAC,eAAe,CAAC;AAEpB,iBAAgB;AACd,MAAI,YAAa;AAEjB,kBAAgB;IACf,CAAC,eAAe,CAAC;AAEpB,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACL,QAAQ;GACN,gBAAgB;GAChB,oBAAoB;GACpB,gBAAgB;GAChB,kBAAkB;GACnB;EAEA;GACW;EAGnB"}

package/dist/components/HiddenInput.js

@@ -0,0 +1,32 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../tasty/tasty.js";
+
+//#region src/components/HiddenInput.tsx
+const HiddenInput = tasty({
+	as: "input",
+	styles: {
+		display: "block",
+		fontFamily: "inherit",
+		fontSize: "100%",
+		lineHeight: "1.15",
+		margin: "0",
+		overflow: "visible",
+		boxSizing: "border-box",
+		padding: "0",
+		position: "absolute",
+		inset: "0",
+		opacity: "0.0001",
+		zIndex: "1",
+		width: "100%",
+		height: "100%",
+		cursor: {
+			"": "default",
+			button: "$pointer",
+			disabled: "not-allowed"
+		}
+	}
+});
+
+//#endregion
+export { HiddenInput };
+//# sourceMappingURL=HiddenInput.js.map

package/dist/components/HiddenInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenInput.js","names":[],"sources":["../../src/components/HiddenInput.tsx"],"sourcesContent":["import { tasty } from '../tasty';\n\nexport const HiddenInput = tasty({\n  as: 'input',\n  styles: {\n    display: 'block',\n    fontFamily: 'inherit',\n    fontSize: '100%',\n    lineHeight: '1.15',\n    margin: '0',\n    overflow: 'visible',\n    boxSizing: 'border-box',\n    padding: '0',\n    position: 'absolute',\n    inset: '0',\n    opacity: '0.0001',\n    zIndex: '1',\n    width: '100%',\n    height: '100%',\n    cursor: {\n      '': 'default',\n      button: '$pointer',\n      disabled: 'not-allowed',\n    },\n  },\n});\n"],"mappings":";;;;AAEA,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,SAAS;EACT,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,QAAQ;GACR,UAAU;GACX;EACF;CACF,CAAC"}

package/dist/components/Root.d.ts

@@ -0,0 +1,30 @@
+
+import { BaseProps } from "../tasty/types.js";
+import "../tasty/index.js";
+import { NavigationAdapter } from "../providers/navigation.types.js";
+import { TrackingProps } from "../providers/TrackingProvider.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Root.d.ts
+interface CubeRootProps extends BaseProps {
+  tokens?: {
+    [key: string]: string;
+  };
+  bodyStyles?: {
+    [key: string]: string;
+  };
+  fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+  fonts?: boolean;
+  publicUrl?: string;
+  navigation?: NavigationAdapter;
+  font?: string;
+  monospaceFont?: string;
+  /** @deprecated Tokens are now always applied via GlobalStyles */
+  applyLegacyTokens?: boolean;
+  tracking?: TrackingProps;
+  cursorStrategy?: 'web' | 'native';
+}
+declare function Root(allProps: CubeRootProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CubeRootProps, Root };
+//# sourceMappingURL=Root.d.ts.map

package/dist/components/Root.js

@@ -0,0 +1,131 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../tasty/utils/styles.js";
+import { configure } from "../tasty/config.js";
+import { BASE_STYLES, BLOCK_STYLES } from "../tasty/styles/list.js";
+import { tasty } from "../tasty/tasty.js";
+import { filterBaseProps } from "../tasty/utils/filter-base-props.js";
+import { EventBusProvider } from "../utils/react/useEventBus.js";
+import { PortalProvider } from "./portal/PortalProvider.js";
+import { VERSION } from "../version.js";
+import { Provider } from "../provider.js";
+import { TrackingProvider } from "../providers/TrackingProvider.js";
+import { GlobalStyles } from "./GlobalStyles.js";
+import { AlertDialogApiProvider } from "./overlays/AlertDialog/AlertDialogApiProvider.js";
+import { OverlayProvider } from "./overlays/Notifications/OverlayProvider.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ModalProvider } from "react-aria";
+
+//#region src/components/Root.tsx
+configure({
+	units: {
+		x: "var(--gap)",
+		r: "var(--radius)",
+		cr: "var(--card-radius)",
+		bw: "var(--border-width)",
+		ow: "var(--outline-width)"
+	},
+	recipes: {
+		reset: {
+			margin: 0,
+			padding: 0,
+			border: 0,
+			outline: 0,
+			boxSizing: "border-box"
+		},
+		button: {
+			appearance: "none",
+			touchAction: "manipulation",
+			textDecoration: "none",
+			"-webkit-tap-highlight-color": "transparent",
+			fill: "#clear",
+			color: "inherit",
+			cursor: {
+				"": "default",
+				":is(a)": "pointer",
+				":is(button)": "$pointer",
+				disabled: "not-allowed"
+			}
+		},
+		input: {
+			appearance: "none",
+			wordSpacing: "initial",
+			color: "inherit",
+			fill: "#clear"
+		},
+		"input-autofill": {
+			"@autofill": ":-webkit-autofill",
+			"-webkit-text-fill-color": {
+				"": "currentColor",
+				"@autofill | (@autofill & :hover) | (@autofill & :focus)": "#primary"
+			},
+			caretColor: { "@autofill | (@autofill & :hover) | (@autofill & :focus)": "#primary" },
+			shadow: { "@autofill | (@autofill & :hover) | (@autofill & :focus)": "0 0 0 9999rem rgb(255 255 255) inset" },
+			preset: { "@autofill | (@autofill & :hover) | (@autofill & :focus)": "inherit" },
+			"-webkit-opacity": {
+				"": false,
+				"[disabled]": "1"
+			}
+		},
+		"input-placeholder": {
+			"-webkit-text-fill-color": "var(--placeholder-color, initial)",
+			color: "var(--placeholder-color, initial)"
+		},
+		"input-search-cancel-button": {
+			hide: true,
+			appearance: "none"
+		}
+	}
+});
+const RootElement = tasty({
+	id: "cube-ui-kit-root",
+	styles: {
+		display: "contents",
+		color: "#dark-02",
+		preset: "t3"
+	}
+});
+const STYLES = [...BASE_STYLES, ...BLOCK_STYLES];
+function Root(allProps) {
+	let { children, bodyStyles, fontDisplay = "swap", fonts, publicUrl, navigation, font, monospaceFont, applyLegacyTokens: _applyLegacyTokens, tracking, cursorStrategy = "web", style, tokens, ...props } = allProps;
+	const ref = useRef(null);
+	const [rootRef, setRootRef] = useState();
+	useEffect(() => {
+		if (!rootRef) setRootRef(ref?.current);
+	}, []);
+	const styles = extractStyles(props, STYLES);
+	return /* @__PURE__ */ jsx(Provider, {
+		navigation,
+		root: rootRef,
+		children: /* @__PURE__ */ jsx(TrackingProvider, {
+			event: tracking?.event,
+			children: /* @__PURE__ */ jsxs(RootElement, {
+				ref,
+				"data-tasty": VERSION,
+				"data-font-display": fontDisplay,
+				...filterBaseProps(props, { eventProps: true }),
+				styles,
+				style: {
+					"--pointer": cursorStrategy === "web" ? "pointer" : "default",
+					...style
+				},
+				tokens,
+				children: [/* @__PURE__ */ jsx(GlobalStyles, {
+					bodyStyles,
+					publicUrl,
+					fonts,
+					font,
+					monospaceFont,
+					fontDisplay
+				}), /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(PortalProvider, {
+					value: ref,
+					children: /* @__PURE__ */ jsx(EventBusProvider, { children: /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(AlertDialogApiProvider, { children }) }) })
+				}) })]
+			})
+		})
+	});
+}
+
+//#endregion
+export { Root };
+//# sourceMappingURL=Root.js.map

package/dist/components/Root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Root.js","names":[],"sources":["../../src/components/Root.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { ModalProvider } from 'react-aria';\n\nimport { Provider } from '../provider';\nimport { NavigationAdapter } from '../providers/navigation.types';\nimport { TrackingProps, TrackingProvider } from '../providers/TrackingProvider';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BLOCK_STYLES,\n  configure,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '../tasty';\nimport { EventBusProvider } from '../utils/react/useEventBus';\nimport { VERSION } from '../version';\n\nimport { GlobalStyles } from './GlobalStyles';\nimport { AlertDialogApiProvider } from './overlays/AlertDialog';\nimport { OverlayProvider } from './overlays/Notifications/OverlayProvider';\nimport { PortalProvider } from './portal';\n\nconfigure({\n  units: {\n    x: 'var(--gap)',\n    r: 'var(--radius)',\n    cr: 'var(--card-radius)',\n    bw: 'var(--border-width)',\n    ow: 'var(--outline-width)',\n  },\n  recipes: {\n    reset: {\n      margin: 0,\n      padding: 0,\n      border: 0,\n      outline: 0,\n      boxSizing: 'border-box',\n    },\n    button: {\n      appearance: 'none',\n      touchAction: 'manipulation',\n      textDecoration: 'none',\n      '-webkit-tap-highlight-color': 'transparent',\n      fill: '#clear',\n      color: 'inherit',\n      cursor: {\n        '': 'default',\n        ':is(a)': 'pointer',\n        ':is(button)': '$pointer',\n        disabled: 'not-allowed',\n      },\n    },\n    input: {\n      appearance: 'none',\n      wordSpacing: 'initial',\n      color: 'inherit',\n      fill: '#clear',\n    },\n    'input-autofill': {\n      '@autofill': ':-webkit-autofill',\n      '-webkit-text-fill-color': {\n        '': 'currentColor',\n        '@autofill | (@autofill & :hover) | (@autofill & :focus)': '#primary',\n      },\n      caretColor: {\n        '@autofill | (@autofill & :hover) | (@autofill & :focus)': '#primary',\n      },\n      shadow: {\n        '@autofill | (@autofill & :hover) | (@autofill & :focus)':\n          '0 0 0 9999rem rgb(255 255 255) inset',\n      },\n      preset: {\n        '@autofill | (@autofill & :hover) | (@autofill & :focus)': 'inherit',\n      },\n      '-webkit-opacity': {\n        '': false,\n        '[disabled]': '1',\n      },\n    },\n    'input-placeholder': {\n      '-webkit-text-fill-color': 'var(--placeholder-color, initial)',\n      color: 'var(--placeholder-color, initial)',\n    },\n    'input-search-cancel-button': {\n      hide: true,\n      appearance: 'none',\n    },\n  },\n});\n\nconst RootElement = tasty({\n  id: 'cube-ui-kit-root',\n  styles: {\n    display: 'contents',\n    color: '#dark-02',\n    preset: 't3',\n  },\n});\n\nconst STYLES = [...BASE_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeRootProps extends BaseProps {\n  tokens?: { [key: string]: string };\n  bodyStyles?: { [key: string]: string };\n  fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';\n  fonts?: boolean;\n  publicUrl?: string;\n  navigation?: NavigationAdapter;\n  font?: string;\n  monospaceFont?: string;\n  /** @deprecated Tokens are now always applied via GlobalStyles */\n  applyLegacyTokens?: boolean;\n  tracking?: TrackingProps;\n  cursorStrategy?: 'web' | 'native';\n}\n\nexport function Root(allProps: CubeRootProps) {\n  let {\n    children,\n    /** Raw css styles for body element */\n    bodyStyles,\n    fontDisplay = 'swap',\n    fonts,\n    publicUrl,\n    navigation,\n    font,\n    monospaceFont,\n    applyLegacyTokens: _applyLegacyTokens, // deprecated, ignored\n    tracking,\n    cursorStrategy = 'web',\n    style,\n    tokens,\n    ...props\n  } = allProps;\n\n  const ref = useRef(null);\n\n  const [rootRef, setRootRef] = useState();\n\n  useEffect(() => {\n    if (!rootRef) {\n      // @ts-ignore\n      setRootRef(ref?.current);\n    }\n  }, []);\n\n  const styles = extractStyles(props, STYLES);\n\n  return (\n    <Provider navigation={navigation} root={rootRef}>\n      <TrackingProvider event={tracking?.event}>\n        <RootElement\n          ref={ref}\n          data-tasty={VERSION}\n          data-font-display={fontDisplay}\n          {...filterBaseProps(props, { eventProps: true })}\n          styles={styles}\n          style={{\n            '--pointer': cursorStrategy === 'web' ? 'pointer' : 'default',\n            ...style,\n          }}\n          tokens={tokens}\n        >\n          <GlobalStyles\n            bodyStyles={bodyStyles}\n            publicUrl={publicUrl}\n            fonts={fonts}\n            font={font}\n            monospaceFont={monospaceFont}\n            fontDisplay={fontDisplay}\n          />\n          <ModalProvider>\n            <PortalProvider value={ref}>\n              <EventBusProvider>\n                <OverlayProvider>\n                  <AlertDialogApiProvider>{children}</AlertDialogApiProvider>\n                </OverlayProvider>\n              </EventBusProvider>\n            </PortalProvider>\n          </ModalProvider>\n        </RootElement>\n      </TrackingProvider>\n    </Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,UAAU;CACR,OAAO;EACL,GAAG;EACH,GAAG;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACD,SAAS;EACP,OAAO;GACL,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,SAAS;GACT,WAAW;GACZ;EACD,QAAQ;GACN,YAAY;GACZ,aAAa;GACb,gBAAgB;GAChB,+BAA+B;GAC/B,MAAM;GACN,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,UAAU;IACV,eAAe;IACf,UAAU;IACX;GACF;EACD,OAAO;GACL,YAAY;GACZ,aAAa;GACb,OAAO;GACP,MAAM;GACP;EACD,kBAAkB;GAChB,aAAa;GACb,2BAA2B;IACzB,IAAI;IACJ,2DAA2D;IAC5D;GACD,YAAY,EACV,2DAA2D,YAC5D;GACD,QAAQ,EACN,2DACE,wCACH;GACD,QAAQ,EACN,2DAA2D,WAC5D;GACD,mBAAmB;IACjB,IAAI;IACJ,cAAc;IACf;GACF;EACD,qBAAqB;GACnB,2BAA2B;GAC3B,OAAO;GACR;EACD,8BAA8B;GAC5B,MAAM;GACN,YAAY;GACb;EACF;CACF,CAAC;AAEF,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,SAAS,CAAC,GAAG,aAAa,GAAG,aAAa;AAiBhD,SAAgB,KAAK,UAAyB;CAC5C,IAAI,EACF,UAEA,YACA,cAAc,QACd,OACA,WACA,YACA,MACA,eACA,mBAAmB,oBACnB,UACA,iBAAiB,OACjB,OACA,QACA,GAAG,UACD;CAEJ,MAAM,MAAM,OAAO,KAAK;CAExB,MAAM,CAAC,SAAS,cAAc,UAAU;AAExC,iBAAgB;AACd,MAAI,CAAC,QAEH,YAAW,KAAK,QAAQ;IAEzB,EAAE,CAAC;CAEN,MAAM,SAAS,cAAc,OAAO,OAAO;AAE3C,QACE,oBAAC;EAAqB;EAAY,MAAM;YACtC,oBAAC;GAAiB,OAAO,UAAU;aACjC,qBAAC;IACM;IACL,cAAY;IACZ,qBAAmB;IACnB,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;IACxC;IACR,OAAO;KACL,aAAa,mBAAmB,QAAQ,YAAY;KACpD,GAAG;KACJ;IACO;eAER,oBAAC;KACa;KACD;KACJ;KACD;KACS;KACF;MACb,EACF,oBAAC,2BACC,oBAAC;KAAe,OAAO;eACrB,oBAAC,8BACC,oBAAC,6BACC,oBAAC,0BAAwB,WAAkC,GAC3C,GACD;MACJ,GACH;KACJ;IACG;GACV"}

package/dist/components/actions/Action/Action.d.ts

@@ -0,0 +1,20 @@
+
+import { AllBaseProps, BaseStyleProps, ContainerStyleProps, TagName, TextStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { NavigateArg } from "../../../providers/navigation.types.js";
+import "../use-action.js";
+import * as react from "react";
+import { AriaButtonProps } from "react-aria";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/actions/Action/Action.d.ts
+interface CubeActionProps<T extends TagName = 'a' | 'button' | 'span' | 'div'> extends Omit<AllBaseProps<T>, 'htmlType'>, BaseStyleProps, ContainerStyleProps, TextStyleProps, Omit<AriaButtonProps, 'type'> {
+  to?: NavigateArg;
+  label?: string;
+  htmlType?: 'button' | 'submit' | 'reset' | undefined;
+  download?: string;
+}
+declare const Action: react.ForwardRefExoticComponent<Omit<CubeActionProps<"a" | "button" | "div" | "span">, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { Action, CubeActionProps };
+//# sourceMappingURL=Action.d.ts.map