@clickhouse/click-ui 0.0.208 → 0.0.209

package/dist/click-ui.bundled.es.js

@@ -15531,7 +15531,9 @@ const CodeBlock = ({
 };
 const ActionsWrapper = pt.div.withConfig({
   componentId: "sc-6eozxy-0"
-})(["display:flex;justify-content:flex-end;gap:", ";"], (props) => props.theme.click.dialog.space.gap);
+})(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
+  theme: theme2
+}) => theme2.breakpoint.sizes.sm);
 const DialogContent$1 = pt.div.withConfig({
   componentId: "sc-6eozxy-1"
 })(["overflow:hidden;display:flex;flex-direction:column;"]);
@@ -17696,19 +17698,19 @@ const DialogOverlay = pt($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff).withConfig({
 }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
 const ContentArea = pt($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
   componentId: "sc-1wr6otn-2"
-})(["background:", ";border-radius:", ";padding:", " ", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"], ({
+})(["background:", ";border-radius:", ";padding:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
   theme: theme2
 }) => theme2.click.dialog.color.background.default, ({
   theme: theme2
 }) => theme2.click.dialog.radii.all, ({
   theme: theme2
-}) => theme2.click.dialog.space.y, ({
-  theme: theme2
-}) => theme2.click.dialog.space.x, ({
+}) => `${theme2.click.dialog.space.y} ${theme2.click.dialog.space.x}`, ({
   theme: theme2
 }) => theme2.click.dialog.shadow.default, ({
   theme: theme2
-}) => theme2.click.global.color.stroke.default, contentShow);
+}) => theme2.click.global.color.stroke.default, contentShow, ({
+  theme: theme2
+}) => theme2.breakpoint.sizes.sm);
 const TitleArea = pt.div.withConfig({
   componentId: "sc-1wr6otn-3"
 })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
@@ -42465,13 +42467,23 @@ const Toast = ({
 };
 const Viewport = pt($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
   componentId: "sc-tmc8vl-6"
-})(["--viewport-padding:25px;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+})(["--viewport-padding:25px;position:fixed;bottom:0;", ";display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+  $align
+}) => {
+  if ($align === "start") {
+    return "left: 0";
+  }
+  return `
+      right: 0;
+  `;
+}, ({
   theme: theme2
 }) => theme2.click.toast.space.gap, ({
   theme: theme2
 }) => theme2.click.toast.size.width);
 const ToastProvider = ({
   children,
+  align = "end",
   ...props
 }) => {
   const [toasts, setToasts] = useState(/* @__PURE__ */ new Map());
@@ -42504,12 +42516,12 @@ const ToastProvider = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", ...props, children: [
+  return /* @__PURE__ */ jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: align === "start" ? "left" : "right", ...props, children: [
     /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
       children,
       Array.from(toasts).map(([id, toast]) => /* @__PURE__ */ jsx(Toast, { ...toast, onClose: onClose(id) }, id))
     ] }),
-    /* @__PURE__ */ jsx(Viewport, {})
+    /* @__PURE__ */ jsx(Viewport, { $align: align })
   ] });
 };
 function listCacheClear$1() {
@@ -52043,6 +52055,7 @@ export {
   TextAreaField,
   TextField,
   Title$2 as Title,
+  ToastProvider,
   Tooltip,
   VerticalStepper,
   WarningAlert,

package/dist/click-ui.bundled.umd.js

@@ -15547,7 +15547,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const ActionsWrapper = pt.div.withConfig({
     componentId: "sc-6eozxy-0"
-  })(["display:flex;justify-content:flex-end;gap:", ";"], (props) => props.theme.click.dialog.space.gap);
+  })(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.sm);
   const DialogContent$1 = pt.div.withConfig({
     componentId: "sc-6eozxy-1"
   })(["overflow:hidden;display:flex;flex-direction:column;"]);
@@ -17712,19 +17714,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
   const ContentArea = pt($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-1wr6otn-2"
-  })(["background:", ";border-radius:", ";padding:", " ", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"], ({
+  })(["background:", ";border-radius:", ";padding:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
     theme: theme2
   }) => theme2.click.dialog.color.background.default, ({
     theme: theme2
   }) => theme2.click.dialog.radii.all, ({
     theme: theme2
-  }) => theme2.click.dialog.space.y, ({
-    theme: theme2
-  }) => theme2.click.dialog.space.x, ({
+  }) => `${theme2.click.dialog.space.y} ${theme2.click.dialog.space.x}`, ({
     theme: theme2
   }) => theme2.click.dialog.shadow.default, ({
     theme: theme2
-  }) => theme2.click.global.color.stroke.default, contentShow);
+  }) => theme2.click.global.color.stroke.default, contentShow, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.sm);
   const TitleArea = pt.div.withConfig({
     componentId: "sc-1wr6otn-3"
   })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
@@ -42481,13 +42483,23 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   const Viewport = pt($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
     componentId: "sc-tmc8vl-6"
-  })(["--viewport-padding:25px;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+  })(["--viewport-padding:25px;position:fixed;bottom:0;", ";display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+    $align
+  }) => {
+    if ($align === "start") {
+      return "left: 0";
+    }
+    return `
+      right: 0;
+  `;
+  }, ({
     theme: theme2
   }) => theme2.click.toast.space.gap, ({
     theme: theme2
   }) => theme2.click.toast.size.width);
   const ToastProvider = ({
     children,
+    align = "end",
     ...props
   }) => {
     const [toasts, setToasts] = React.useState(/* @__PURE__ */ new Map());
@@ -42520,12 +42532,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         });
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: align === "start" ? "left" : "right", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
         children,
         Array.from(toasts).map(([id, toast]) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toast, onClose: onClose(id) }, id))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Viewport, {})
+      /* @__PURE__ */ jsxRuntime.jsx(Viewport, { $align: align })
     ] });
   };
   function listCacheClear$1() {
@@ -52058,6 +52070,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.TextAreaField = TextAreaField;
   exports2.TextField = TextField;
   exports2.Title = Title$2;
+  exports2.ToastProvider = ToastProvider;
   exports2.Tooltip = Tooltip;
   exports2.VerticalStepper = VerticalStepper;
   exports2.WarningAlert = WarningAlert;

package/dist/click-ui.es.js

@@ -14363,7 +14363,9 @@ const CodeBlock = ({
 };
 const ActionsWrapper = styled.div.withConfig({
   componentId: "sc-6eozxy-0"
-})(["display:flex;justify-content:flex-end;gap:", ";"], (props) => props.theme.click.dialog.space.gap);
+})(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
+  theme: theme2
+}) => theme2.breakpoint.sizes.sm);
 const DialogContent$1 = styled.div.withConfig({
   componentId: "sc-6eozxy-1"
 })(["overflow:hidden;display:flex;flex-direction:column;"]);
@@ -16528,19 +16530,19 @@ const DialogOverlay = styled($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff).withConf
 }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
 const ContentArea = styled($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
   componentId: "sc-1wr6otn-2"
-})(["background:", ";border-radius:", ";padding:", " ", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"], ({
+})(["background:", ";border-radius:", ";padding:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
   theme: theme2
 }) => theme2.click.dialog.color.background.default, ({
   theme: theme2
 }) => theme2.click.dialog.radii.all, ({
   theme: theme2
-}) => theme2.click.dialog.space.y, ({
-  theme: theme2
-}) => theme2.click.dialog.space.x, ({
+}) => `${theme2.click.dialog.space.y} ${theme2.click.dialog.space.x}`, ({
   theme: theme2
 }) => theme2.click.dialog.shadow.default, ({
   theme: theme2
-}) => theme2.click.global.color.stroke.default, contentShow);
+}) => theme2.click.global.color.stroke.default, contentShow, ({
+  theme: theme2
+}) => theme2.breakpoint.sizes.sm);
 const TitleArea = styled.div.withConfig({
   componentId: "sc-1wr6otn-3"
 })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
@@ -41297,13 +41299,23 @@ const Toast = ({
 };
 const Viewport = styled($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
   componentId: "sc-tmc8vl-6"
-})(["--viewport-padding:25px;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+})(["--viewport-padding:25px;position:fixed;bottom:0;", ";display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+  $align
+}) => {
+  if ($align === "start") {
+    return "left: 0";
+  }
+  return `
+      right: 0;
+  `;
+}, ({
   theme: theme2
 }) => theme2.click.toast.space.gap, ({
   theme: theme2
 }) => theme2.click.toast.size.width);
 const ToastProvider = ({
   children,
+  align = "end",
   ...props
 }) => {
   const [toasts, setToasts] = useState(/* @__PURE__ */ new Map());
@@ -41336,12 +41348,12 @@ const ToastProvider = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", ...props, children: [
+  return /* @__PURE__ */ jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: align === "start" ? "left" : "right", ...props, children: [
     /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
       children,
       Array.from(toasts).map(([id, toast]) => /* @__PURE__ */ jsx(Toast, { ...toast, onClose: onClose(id) }, id))
     ] }),
-    /* @__PURE__ */ jsx(Viewport, {})
+    /* @__PURE__ */ jsx(Viewport, { $align: align })
   ] });
 };
 function listCacheClear$1() {
@@ -50875,6 +50887,7 @@ export {
   TextAreaField,
   TextField,
   Title$2 as Title,
+  ToastProvider,
   Tooltip,
   VerticalStepper,
   WarningAlert,

package/dist/click-ui.umd.js

@@ -14378,7 +14378,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const ActionsWrapper = styled.styled.div.withConfig({
     componentId: "sc-6eozxy-0"
-  })(["display:flex;justify-content:flex-end;gap:", ";"], (props) => props.theme.click.dialog.space.gap);
+  })(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.sm);
   const DialogContent$1 = styled.styled.div.withConfig({
     componentId: "sc-6eozxy-1"
   })(["overflow:hidden;display:flex;flex-direction:column;"]);
@@ -16543,19 +16545,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
   const ContentArea = styled.styled($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-1wr6otn-2"
-  })(["background:", ";border-radius:", ";padding:", " ", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"], ({
+  })(["background:", ";border-radius:", ";padding:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
     theme: theme2
   }) => theme2.click.dialog.color.background.default, ({
     theme: theme2
   }) => theme2.click.dialog.radii.all, ({
     theme: theme2
-  }) => theme2.click.dialog.space.y, ({
-    theme: theme2
-  }) => theme2.click.dialog.space.x, ({
+  }) => `${theme2.click.dialog.space.y} ${theme2.click.dialog.space.x}`, ({
     theme: theme2
   }) => theme2.click.dialog.shadow.default, ({
     theme: theme2
-  }) => theme2.click.global.color.stroke.default, contentShow);
+  }) => theme2.click.global.color.stroke.default, contentShow, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.sm);
   const TitleArea = styled.styled.div.withConfig({
     componentId: "sc-1wr6otn-3"
   })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
@@ -41312,13 +41314,23 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   const Viewport = styled.styled($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
     componentId: "sc-tmc8vl-6"
-  })(["--viewport-padding:25px;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+  })(["--viewport-padding:25px;position:fixed;bottom:0;", ";display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+    $align
+  }) => {
+    if ($align === "start") {
+      return "left: 0";
+    }
+    return `
+      right: 0;
+  `;
+  }, ({
     theme: theme2
   }) => theme2.click.toast.space.gap, ({
     theme: theme2
   }) => theme2.click.toast.size.width);
   const ToastProvider = ({
     children,
+    align = "end",
     ...props
   }) => {
     const [toasts, setToasts] = React.useState(/* @__PURE__ */ new Map());
@@ -41351,12 +41363,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         });
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: align === "start" ? "left" : "right", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
         children,
         Array.from(toasts).map(([id, toast]) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toast, onClose: onClose(id) }, id))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Viewport, {})
+      /* @__PURE__ */ jsxRuntime.jsx(Viewport, { $align: align })
     ] });
   };
   function listCacheClear$1() {
@@ -50889,6 +50901,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.TextAreaField = TextAreaField;
   exports2.TextField = TextField;
   exports2.Title = Title$2;
+  exports2.ToastProvider = ToastProvider;
   exports2.Tooltip = Tooltip;
   exports2.VerticalStepper = VerticalStepper;
   exports2.WarningAlert = WarningAlert;

package/dist/components/ClickUIProvider/ClickUIProvider.d.ts

@@ -1,12 +1,12 @@
 import { TooltipProviderProps } from '@radix-ui/react-tooltip';
-import { ToastProps } from '@radix-ui/react-toast';
+import { ToastProviderProps } from '../Toast/Toast';
 import { ThemeName } from '../../theme';
 import { ReactNode } from 'react';
 
 interface Props {
     config?: {
         tooltip?: Omit<TooltipProviderProps, "children">;
-        toast?: Omit<ToastProps, "children">;
+        toast?: Omit<ToastProviderProps, "children">;
     };
     theme: ThemeName;
     children: ReactNode;

package/dist/components/Toast/Toast.d.ts

@@ -18,4 +18,7 @@ export interface ToastProps {
         altText: string;
     }>;
 }
-export declare const ToastProvider: ({ children, ...props }: RadixUIToast.ToastProps) => import("react/jsx-runtime").JSX.Element;
+export interface ToastProviderProps extends RadixUIToast.ToastProps {
+    align?: "start" | "end";
+}
+export declare const ToastProvider: ({ children, align, ...props }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -69,3 +69,4 @@ export { createToast } from './Toast/toastEmitter';
 export { UserIcon as ProfileIcon } from './icons/UserIcon';
 export { default as VerticalStepper } from './VerticalStepper/VerticalStepper';
 export { MultiAccordion } from './MultiAccordion/MultiAccordion';
+export { ToastProvider } from './Toast/Toast';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.208",
+  "version": "0.0.209",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",