@keboola/design 9.1.0 → 11.0.0

package/dist/chunk-ZBKFSPD3.js

@@ -0,0 +1,29 @@
+import { Card } from './chunk-F3FOFY2P.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ChartPanel = ({
+  title,
+  description,
+  titleAs = "h3",
+  toolbar,
+  footer,
+  className,
+  bordered = true,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsxs(Card, { bordered, className: cn("tw:gap-4", className), ...rest, children: [
+  /* @__PURE__ */ jsxs(Card.Header, { className: "tw:flex tw:items-start tw:justify-between tw:gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+      /* @__PURE__ */ jsx(Card.Title, { as: titleAs, children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "tw:m-0 tw:text-sm tw:text-muted-foreground", children: description }) : null
+    ] }),
+    toolbar ? /* @__PURE__ */ jsx("div", { className: "tw:flex tw:shrink-0 tw:items-center tw:gap-2", children: toolbar }) : null
+  ] }),
+  /* @__PURE__ */ jsx(Card.Content, { children }),
+  footer ? /* @__PURE__ */ jsx("div", { className: "tw:border-0 tw:border-t tw:border-solid tw:border-border tw:pt-3 tw:text-sm tw:text-muted-foreground", children: footer }) : null
+] });
+
+export { ChartPanel };
+//# sourceMappingURL=chunk-ZBKFSPD3.js.map
+//# sourceMappingURL=chunk-ZBKFSPD3.js.map

package/dist/chunk-ZBKFSPD3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/ChartPanel/ChartPanel.tsx"],"names":[],"mappings":";;;;AA4BO,IAAM,aAAa,CAAC;AAAA,EACzB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,OAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,IAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACE,IAAA,CAAC,QAAK,QAAA,EAAoB,SAAA,EAAW,GAAG,UAAA,EAAY,SAAS,CAAA,EAAI,GAAG,IAAA,EAClE,QAAA,EAAA;AAAA,kBAAA,IAAA,CAAC,IAAA,CAAK,MAAA,EAAL,EAAY,SAAA,EAAU,oDAAA,EACrB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8BAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,CAAK,KAAA,EAAL,EAAW,EAAA,EAAI,SAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC/B,8BACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4CAAA,EAA8C,uBAAY,CAAA,GACrE;AAAA,KAAA,EACN,CAAA;AAAA,IACC,0BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8CAAA,EAAgD,mBAAQ,CAAA,GACrE;AAAA,GAAA,EACN,CAAA;AAAA,kBACA,GAAA,CAAC,IAAA,CAAK,OAAA,EAAL,EAAc,QAAA,EAAS,CAAA;AAAA,EACvB,yBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sGAAA,EACZ,kBACH,CAAA,GACE;AAAA,CAAA,EACN","file":"chunk-ZBKFSPD3.js","sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Card } from '../../components/Card';\nimport { cn } from '../../utils';\n\ntype RootProps = Omit<ComponentProps<typeof Card>, 'title'> & {\n  /** Panel heading. */\n  title: ReactNode;\n  /** Optional supporting line under the title. */\n  description?: ReactNode;\n  /** Heading level for the title — defaults to `h3`. Set to sit correctly under a page `h1`/`h2`. */\n  titleAs?: ComponentProps<typeof Card.Title>['as'];\n  /** Right-aligned header slot — range picker, legend toggle, menu, etc. */\n  toolbar?: ReactNode;\n  /** Optional footer row (e.g. a source note or an inline legend). */\n  footer?: ReactNode;\n};\n\n/**\n * Signature chart panel — a `Card` shell with a title/description header, an optional toolbar,\n * a chart body, and an optional footer. Pass a `@keboola/design/charts` chart (`LineChart`,\n * `BarChart`, `AreaChart`, `PieChart`) as children; the panel owns the chrome, the chart owns\n * its own responsive container and themed palette.\n *\n * **When to use:** any framed data-viz block on a dashboard.\n * **When NOT to use:** for a KPI number use `StatCard`; for a raw unframed chart drop the chart\n * component directly. Charts follow the active brand's chart palette — never hardcode colours.\n */\nexport const ChartPanel = ({\n  title,\n  description,\n  titleAs = 'h3',\n  toolbar,\n  footer,\n  className,\n  bordered = true,\n  children,\n  ...rest\n}: RootProps) => (\n  <Card bordered={bordered} className={cn('tw:gap-4', className)} {...rest}>\n    <Card.Header className=\"tw:flex tw:items-start tw:justify-between tw:gap-4\">\n      <div className=\"tw:flex tw:flex-col tw:gap-1\">\n        <Card.Title as={titleAs}>{title}</Card.Title>\n        {description ? (\n          <p className=\"tw:m-0 tw:text-sm tw:text-muted-foreground\">{description}</p>\n        ) : null}\n      </div>\n      {toolbar ? (\n        <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">{toolbar}</div>\n      ) : null}\n    </Card.Header>\n    <Card.Content>{children}</Card.Content>\n    {footer ? (\n      <div className=\"tw:border-0 tw:border-t tw:border-solid tw:border-border tw:pt-3 tw:text-sm tw:text-muted-foreground\">\n        {footer}\n      </div>\n    ) : null}\n  </Card>\n);\n\nexport type { RootProps as ChartPanelProps };\n"]}

package/dist/chunk-ZOERRQ6A.js

@@ -0,0 +1,79 @@
+import { Loader2, Microsoft } from './chunk-RQVK4IYC.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  signin: "Sign in with Microsoft",
+  signup: "Sign up with Microsoft",
+  continue: "Continue with Microsoft"
+};
+var MICROSOFT_FONT_STACK = "'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
+var CLASSES = [
+  "tailwindcss-preflight",
+  "tw:inline-flex",
+  "tw:items-center",
+  "tw:justify-center",
+  "tw:gap-3",
+  "tw:h-[41px]",
+  "tw:px-3",
+  "tw:rounded-none",
+  "tw:border",
+  "tw:text-[15px]",
+  // Literal weight (Microsoft spec = 400). The `tw:font-*` scale is brand-overridable
+  // (`--font-weight-*`), and this button must stay brand-independent.
+  "tw:font-[400]",
+  "tw:leading-none",
+  "tw:whitespace-nowrap",
+  "tw:select-none",
+  "tw:cursor-pointer",
+  "tw:transition-colors",
+  "tw:[&_svg]:shrink-0",
+  // focus — Microsoft's brand blue ring, independent of the active brand.
+  "tw:focus-visible:outline-hidden",
+  "tw:focus-visible:ring-2",
+  "tw:focus-visible:ring-[#0067b8]/60",
+  // disabled
+  "tw:disabled:cursor-not-allowed",
+  "tw:disabled:opacity-60",
+  // light treatment — the base.
+  "tw:bg-white",
+  "tw:text-[#5e5e5e]",
+  "tw:border-[#8c8c8c]",
+  "tw:hover:not-disabled:bg-[#f3f3f3]",
+  // dark treatment — auto-applied under html[data-theme=dark] (the ancestor
+  // selector out-specifies the plain light classes above).
+  "tw:[[data-theme=dark]_&]:bg-[#2f2f2f]",
+  "tw:[[data-theme=dark]_&]:text-white",
+  "tw:[[data-theme=dark]_&]:border-[#2f2f2f]",
+  "tw:[[data-theme=dark]_&]:hover:not-disabled:bg-[#3b3b3b]"
+];
+var MicrosoftButton = ({
+  ref,
+  label = "signin",
+  isLoading = false,
+  disabled = false,
+  type = "button",
+  className,
+  children,
+  style,
+  ...buttonProps
+}) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    ...buttonProps,
+    ref,
+    type,
+    disabled: disabled || isLoading,
+    "aria-disabled": disabled || isLoading,
+    style: { fontFamily: MICROSOFT_FONT_STACK, ...style },
+    className: cn(CLASSES, className),
+    children: [
+      isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "tw:size-[21px] tw:shrink-0 tw:animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Microsoft, { className: "tw:size-[21px]" }),
+      /* @__PURE__ */ jsx("span", { children: children ?? LABELS[label] })
+    ]
+  }
+);
+
+export { MicrosoftButton };
+//# sourceMappingURL=chunk-ZOERRQ6A.js.map
+//# sourceMappingURL=chunk-ZOERRQ6A.js.map

package/dist/chunk-ZOERRQ6A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/MicrosoftButton/MicrosoftButton.tsx"],"names":[],"mappings":";;;;AAMA,IAAM,MAAA,GAAS;AAAA,EACb,MAAA,EAAQ,wBAAA;AAAA,EACR,MAAA,EAAQ,wBAAA;AAAA,EACR,QAAA,EAAU;AACZ,CAAA;AAGA,IAAM,oBAAA,GAAuB,iDAAA;AAE7B,IAAM,OAAA,GAAU;AAAA,EACd,uBAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,mBAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA;AAAA;AAAA,EAGA,eAAA;AAAA,EACA,iBAAA;AAAA,EACA,sBAAA;AAAA,EACA,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA,sBAAA;AAAA,EACA,qBAAA;AAAA;AAAA,EAGA,iCAAA;AAAA,EACA,yBAAA;AAAA,EACA,oCAAA;AAAA;AAAA,EAGA,gCAAA;AAAA,EACA,wBAAA;AAAA;AAAA,EAGA,aAAA;AAAA,EACA,mBAAA;AAAA,EACA,qBAAA;AAAA,EACA,oCAAA;AAAA;AAAA;AAAA,EAIA,uCAAA;AAAA,EACA,qCAAA;AAAA,EACA,2CAAA;AAAA,EACA;AACF,CAAA;AAOO,IAAM,kBAAkB,CAAC;AAAA,EAC9B,GAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,SAAA,GAAY,KAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,QAAA;AAAA,EACP,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACE,IAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACE,GAAG,WAAA;AAAA,IACJ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAU,QAAA,IAAY,SAAA;AAAA,IACtB,iBAAe,QAAA,IAAY,SAAA;AAAA,IAC3B,KAAA,EAAO,EAAE,UAAA,EAAY,oBAAA,EAAsB,GAAG,KAAA,EAAM;AAAA,IACpD,SAAA,EAAW,EAAA,CAAG,OAAA,EAAS,SAAS,CAAA;AAAA,IAE/B,QAAA,EAAA;AAAA,MAAA,SAAA,mBACC,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,4CAAA,EAA6C,aAAA,EAAY,QAAO,CAAA,mBAEnF,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAU,gBAAA,EAAiB,CAAA;AAAA,sBAExC,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,QAAA,IAAY,MAAA,CAAO,KAAK,CAAA,EAAE;AAAA;AAAA;AACnC","file":"chunk-ZOERRQ6A.js","sourcesContent":["import type { ComponentPropsWithRef } from 'react';\n\nimport { Loader2, Microsoft } from '../../icons';\nimport { cn } from '../../utils';\n\n/** The same Microsoft mark supports these call-to-action wordings. */\nconst LABELS = {\n  signin: 'Sign in with Microsoft',\n  signup: 'Sign up with Microsoft',\n  continue: 'Continue with Microsoft',\n} as const;\n\n/** Microsoft specifies the Segoe UI typeface; fall back gracefully when it isn't loaded. */\nconst MICROSOFT_FONT_STACK = \"'Segoe UI', 'Helvetica Neue', Arial, sans-serif\";\n\nconst CLASSES = [\n  'tailwindcss-preflight',\n  'tw:inline-flex',\n  'tw:items-center',\n  'tw:justify-center',\n  'tw:gap-3',\n  'tw:h-[41px]',\n  'tw:px-3',\n  'tw:rounded-none',\n  'tw:border',\n  'tw:text-[15px]',\n  // Literal weight (Microsoft spec = 400). The `tw:font-*` scale is brand-overridable\n  // (`--font-weight-*`), and this button must stay brand-independent.\n  'tw:font-[400]',\n  'tw:leading-none',\n  'tw:whitespace-nowrap',\n  'tw:select-none',\n  'tw:cursor-pointer',\n  'tw:transition-colors',\n  'tw:[&_svg]:shrink-0',\n\n  // focus — Microsoft's brand blue ring, independent of the active brand.\n  'tw:focus-visible:outline-hidden',\n  'tw:focus-visible:ring-2',\n  'tw:focus-visible:ring-[#0067b8]/60',\n\n  // disabled\n  'tw:disabled:cursor-not-allowed',\n  'tw:disabled:opacity-60',\n\n  // light treatment — the base.\n  'tw:bg-white',\n  'tw:text-[#5e5e5e]',\n  'tw:border-[#8c8c8c]',\n  'tw:hover:not-disabled:bg-[#f3f3f3]',\n\n  // dark treatment — auto-applied under html[data-theme=dark] (the ancestor\n  // selector out-specifies the plain light classes above).\n  'tw:[[data-theme=dark]_&]:bg-[#2f2f2f]',\n  'tw:[[data-theme=dark]_&]:text-white',\n  'tw:[[data-theme=dark]_&]:border-[#2f2f2f]',\n  'tw:[[data-theme=dark]_&]:hover:not-disabled:bg-[#3b3b3b]',\n];\n\ntype Props = ComponentPropsWithRef<'button'> & {\n  label?: keyof typeof LABELS;\n  isLoading?: boolean;\n};\n\nexport const MicrosoftButton = ({\n  ref,\n  label = 'signin',\n  isLoading = false,\n  disabled = false,\n  type = 'button',\n  className,\n  children,\n  style,\n  ...buttonProps\n}: Props) => (\n  <button\n    {...buttonProps}\n    ref={ref}\n    type={type}\n    disabled={disabled || isLoading}\n    aria-disabled={disabled || isLoading}\n    style={{ fontFamily: MICROSOFT_FONT_STACK, ...style }}\n    className={cn(CLASSES, className)}\n  >\n    {isLoading ? (\n      <Loader2 className=\"tw:size-[21px] tw:shrink-0 tw:animate-spin\" aria-hidden=\"true\" />\n    ) : (\n      <Microsoft className=\"tw:size-[21px]\" />\n    )}\n    <span>{children ?? LABELS[label]}</span>\n  </button>\n);\n"]}

package/dist/chunk-ZSTGUKHU.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/EmptySearchContent.tsx
+var EmptySearchContent = ({ children = "No results found." }) => {
+  return /* @__PURE__ */ jsx("div", { className: "tw:px-0 tw:py-[30px] tw:text-center tw:text-sm tw:text-muted-foreground", children });
+};
+
+export { EmptySearchContent };
+//# sourceMappingURL=chunk-ZSTGUKHU.js.map
+//# sourceMappingURL=chunk-ZSTGUKHU.js.map

package/dist/chunk-ZSTGUKHU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySearchContent.tsx"],"names":[],"mappings":";;;AAMO,IAAM,kBAAA,GAAqB,CAAC,EAAE,QAAA,GAAW,qBAAoB,KAAa;AAC/E,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yEAAA,EACZ,QAAA,EACH,CAAA;AAEJ","file":"chunk-ZSTGUKHU.js","sourcesContent":["import type { ReactNode } from 'react';\n\ntype Props = {\n  children?: ReactNode;\n};\n\nexport const EmptySearchContent = ({ children = 'No results found.' }: Props) => {\n  return (\n    <div className=\"tw:px-0 tw:py-[30px] tw:text-center tw:text-sm tw:text-muted-foreground\">\n      {children}\n    </div>\n  );\n};\n"]}

package/dist/chunk-ZUEHDL27.js

@@ -0,0 +1,65 @@
+import { cn } from './chunk-LXLIQ2D6.js';
+import { Separator, Group } from 'react-resizable-panels';
+export { Panel, useDefaultLayout } from 'react-resizable-panels';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var resizableHandleVariants = cva([
+  // base styles
+  "tw:bg-border",
+  "tw:relative",
+  "tw:flex",
+  "tw:w-px",
+  "tw:items-center",
+  "tw:justify-center",
+  // focus styles
+  "tw:focus-visible:ring-ring",
+  "tw:focus-visible:ring-1",
+  "tw:focus-visible:ring-offset-1",
+  "tw:focus-visible:ring-offset-ring-offset",
+  "tw:focus-visible:outline-hidden",
+  // after pseudo-element for horizontal
+  "tw:after:absolute",
+  "tw:after:inset-y-0",
+  "tw:after:left-1/2",
+  "tw:after:w-1",
+  "tw:after:-translate-x-1/2",
+  // horizontal separator (vertical panel group): center a full-width 4px hit target;
+  // top-1/2 + bottom-auto override the base inset-y-0 so the height takes effect
+  "tw:aria-[orientation=horizontal]:h-px",
+  "tw:aria-[orientation=horizontal]:w-full",
+  "tw:aria-[orientation=horizontal]:after:left-0",
+  "tw:aria-[orientation=horizontal]:after:top-1/2",
+  "tw:aria-[orientation=horizontal]:after:bottom-auto",
+  "tw:aria-[orientation=horizontal]:after:h-1",
+  "tw:aria-[orientation=horizontal]:after:w-full",
+  "tw:aria-[orientation=horizontal]:after:translate-x-0",
+  "tw:aria-[orientation=horizontal]:after:-translate-y-1/2",
+  // handle icon rotation for horizontal separator
+  "tw:[&[aria-orientation=horizontal]>div]:rotate-90"
+]);
+var ResizableHandle = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(Separator, { className: resizableHandleVariants({ className }), ...props });
+};
+var ResizablePanelGroup = ({
+  className,
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      orientation,
+      className: cn(
+        "tw:flex tw:h-full tw:w-full",
+        orientation === "vertical" && "tw:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+};
+
+export { ResizableHandle, ResizablePanelGroup };
+//# sourceMappingURL=chunk-ZUEHDL27.js.map
+//# sourceMappingURL=chunk-ZUEHDL27.js.map

package/dist/chunk-ZUEHDL27.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Resizable/ResizableHandle.tsx","../src/components/Resizable/ResizablePanelGroup.tsx"],"names":["jsx"],"mappings":";;;;;;AAMA,IAAM,0BAA0B,GAAA,CAAI;AAAA;AAAA,EAElC,cAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,mBAAA;AAAA;AAAA,EAGA,4BAAA;AAAA,EACA,yBAAA;AAAA,EACA,gCAAA;AAAA,EACA,0CAAA;AAAA,EACA,iCAAA;AAAA;AAAA,EAGA,mBAAA;AAAA,EACA,oBAAA;AAAA,EACA,mBAAA;AAAA,EACA,cAAA;AAAA,EACA,2BAAA;AAAA;AAAA;AAAA,EAIA,uCAAA;AAAA,EACA,yCAAA;AAAA,EACA,+CAAA;AAAA,EACA,gDAAA;AAAA,EACA,oDAAA;AAAA,EACA,4CAAA;AAAA,EACA,+CAAA;AAAA,EACA,sDAAA;AAAA,EACA,yDAAA;AAAA;AAAA,EAGA;AACF,CAAC,CAAA;AAEM,IAAM,kBAAkB,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,KAAwC;AAC5F,EAAA,uBAAO,GAAA,CAAC,aAAU,SAAA,EAAW,uBAAA,CAAwB,EAAE,SAAA,EAAW,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAClF;ACxCO,IAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAG;AACL,CAAA,KAAoC;AAClC,EAAA,uBACEA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,6BAAA;AAAA,QACA,gBAAgB,UAAA,IAAc,aAAA;AAAA,QAC9B;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-ZUEHDL27.js","sourcesContent":["import type { ComponentProps } from 'react';\nimport { Separator } from 'react-resizable-panels';\nimport { cva } from 'class-variance-authority';\n\n// v4 renders the separator with `aria-orientation`: a separator between horizontally-arranged\n// panels is vertical (default here); one between vertically-stacked panels is horizontal.\nconst resizableHandleVariants = cva([\n  // base styles\n  'tw:bg-border',\n  'tw:relative',\n  'tw:flex',\n  'tw:w-px',\n  'tw:items-center',\n  'tw:justify-center',\n\n  // focus styles\n  'tw:focus-visible:ring-ring',\n  'tw:focus-visible:ring-1',\n  'tw:focus-visible:ring-offset-1',\n  'tw:focus-visible:ring-offset-ring-offset',\n  'tw:focus-visible:outline-hidden',\n\n  // after pseudo-element for horizontal\n  'tw:after:absolute',\n  'tw:after:inset-y-0',\n  'tw:after:left-1/2',\n  'tw:after:w-1',\n  'tw:after:-translate-x-1/2',\n\n  // horizontal separator (vertical panel group): center a full-width 4px hit target;\n  // top-1/2 + bottom-auto override the base inset-y-0 so the height takes effect\n  'tw:aria-[orientation=horizontal]:h-px',\n  'tw:aria-[orientation=horizontal]:w-full',\n  'tw:aria-[orientation=horizontal]:after:left-0',\n  'tw:aria-[orientation=horizontal]:after:top-1/2',\n  'tw:aria-[orientation=horizontal]:after:bottom-auto',\n  'tw:aria-[orientation=horizontal]:after:h-1',\n  'tw:aria-[orientation=horizontal]:after:w-full',\n  'tw:aria-[orientation=horizontal]:after:translate-x-0',\n  'tw:aria-[orientation=horizontal]:after:-translate-y-1/2',\n\n  // handle icon rotation for horizontal separator\n  'tw:[&[aria-orientation=horizontal]>div]:rotate-90',\n]);\n\nexport const ResizableHandle = ({ className, ...props }: ComponentProps<typeof Separator>) => {\n  return <Separator className={resizableHandleVariants({ className })} {...props} />;\n};\n","import type { ComponentProps } from 'react';\nimport { Group } from 'react-resizable-panels';\n\nimport { cn } from '../../utils';\n\nexport { useDefaultLayout } from 'react-resizable-panels';\n\nexport const ResizablePanelGroup = ({\n  className,\n  orientation = 'horizontal',\n  ...props\n}: ComponentProps<typeof Group>) => {\n  return (\n    <Group\n      orientation={orientation}\n      className={cn(\n        'tw:flex tw:h-full tw:w-full',\n        orientation === 'vertical' && 'tw:flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"]}

package/dist/editors.d.ts

@@ -7,7 +7,7 @@ import { SqlDialectName } from '@keboola/codemirror-lang-sql';
 export { SqlDialectName } from '@keboola/codemirror-lang-sql';
 import { M as MergeConflict, C as ChangeClassification } from './constants-D3gaMY-W.js';
 
-declare const LANGUAGE_MODES: readonly ["application/json", "text/plain", "text/x-python", "text/x-sql", "text/x-mysql", "text/x-pgsql", "text/x-mssql", "text/x-sfsql", "text/x-plsql", "text/x-rsrc", "text/x-sh", "text/x-toml", "text/jsonnet", "text/x-dbt", "text/javascript", "text/typescript"];
+declare const LANGUAGE_MODES: readonly ["application/json", "text/plain", "text/x-python", "text/x-sql", "text/x-mysql", "text/x-pgsql", "text/x-mssql", "text/x-sfsql", "text/x-bqsql", "text/x-plsql", "text/x-rsrc", "text/x-sh", "text/x-toml", "text/jsonnet", "text/x-dbt", "text/javascript", "text/typescript"];
 type LANGUAGE_MODE = (typeof LANGUAGE_MODES)[number];
 declare const isLanguageMode: (mode: string) => mode is LANGUAGE_MODE;
 
@@ -19,6 +19,16 @@ type EditorVariable = {
 type Props$2 = {
     value: string;
     previousValue?: string;
+    /**
+     * `'field'` draws the chrome an `InputGroup` draws — surface, border, radius,
+     * focus ring, read-only wash — for an editor that is one control among others
+     * in a form. It sizes to its content, so don't pin its height.
+     *
+     * `'plain'` (the default) is the full-bleed surface of an editor that *is* the
+     * panel: a modal body, a chat block, a fixed-height viewer already framed by
+     * whatever contains it.
+     */
+    variant?: 'plain' | 'field';
     mode?: LANGUAGE_MODE;
     placeholder?: string;
     /** Names the editable region for screen readers — the editor has no visible label of its own. */
@@ -75,6 +85,11 @@ type Props$2 = {
     completeAny?: boolean;
     help?: ReactNode;
     helpPostfix?: ReactNode;
+    /**
+     * Extra actions for the toolbar that floats over the editor's top-right corner,
+     * beside the copy button. The toolbar is a 28px chip, so pass `size="icon-xs"`
+     * buttons — a default-sized one grows the chip and de-aligns the copy button.
+     */
     renderAdditionalButtons?: (value?: string) => ReactNode;
     className?: string;
 } & ({
@@ -84,7 +99,7 @@ type Props$2 = {
     readOnly?: boolean;
     onChange: (value: string) => void;
 });
-declare const CodeEditor: ({ value, previousValue, onChange, mode, placeholder, ariaLabel, searchQuery, searchMatchIndex, readOnly, inputLocked, autocompletions, completionSource, variables, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className, }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const CodeEditor: ({ value, previousValue, onChange, variant, mode, placeholder, ariaLabel, searchQuery, searchMatchIndex, readOnly, inputLocked, autocompletions, completionSource, variables, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className, }: Props$2) => react_jsx_runtime.JSX.Element;
 
 type HighlightedLines = {
     from: number;
@@ -121,13 +136,22 @@ type Props$1 = {
      * a stable object, or it rebuilds its whole extension tree on every render.
      */
     schema?: SQLNamespace;
+    /**
+     * Completions the caller knows and the schema does not — a table the code writes to
+     * before it exists, say. Added to the schema, keyword and variable completions; unlike
+     * `CodeEditor`'s prop of the same name, it replaces nothing.
+     *
+     * Compared by identity: build it in a `useMemo` or the editor rebuilds its whole
+     * extension tree on every render.
+     */
+    completionSource?: CompletionSource;
     variables?: EditorVariable[];
     defaultSchema?: string;
     defaultDatabase?: string;
     highlightLines?: HighlightedLines;
     dialect?: SqlDialectName;
 };
-declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, variables, defaultDatabase, defaultSchema, highlightLines, dialect, }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, completionSource, variables, defaultDatabase, defaultSchema, highlightLines, dialect, }: Props$1) => react_jsx_runtime.JSX.Element;
 
 type Props = {
     mergeValue: string;