@clickhouse/click-ui 0.0.86 → 0.0.87

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from "react";
+import { Orientation } from '../../components';
+type AlignItemsOptions = "start" | "center" | "end";
+type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+type GrowShrinkOptions = "0" | "1" | "2" | "3" | "4" | "5" | "6";
+type JustifyContentOptions = "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end" | "left" | "right";
+type PaddingOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+type WrapOptions = "nowrap" | "wrap" | "wrap-reverse";
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    alignItems?: AlignItemsOptions;
+    children?: React.ReactNode;
+    fillWidth?: boolean;
+    gap?: GapOptions;
+    grow?: GrowShrinkOptions;
+    shrink?: GrowShrinkOptions;
+    isResponsive?: boolean;
+    justifyContent?: JustifyContentOptions;
+    maxWidth?: string;
+    minWidth?: string;
+    orientation?: Orientation;
+    padding?: PaddingOptions;
+    wrap?: WrapOptions;
+}
+declare const Container: ({ alignItems, children, fillWidth, gap, grow, shrink, isResponsive, justifyContent, maxWidth, minWidth, orientation, padding, wrap, ...props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export { Container };

package/dist/components/Icon/IconCommon.d.ts

@@ -11,6 +11,7 @@ export declare const ICONS_MAP: {
     "auth-sms": (props: import("react").SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     backups: (props: import("react").SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "bar-chart": (props: import("react").SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    bell: (props: import("react").SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     beta: (props: import("react").SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     blog: (props: import("react").SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     book: (props: import("react").SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/types.d.ts

@@ -4,7 +4,7 @@ import { FlagName, FlagProps } from "../icons/Flags";
 import { LogoName } from "../Logos/types";
 import { PaymentName, PaymentProps } from "../icons/Payments";
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "download", "download-in-circle", "email", "empty", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "metrics", "metrics-alt", "no-cloud", "payment", "pencil", "pie-chart", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "support", "table", "taxi", "trash", "upload", "url", "user", "users", "warning", "waves"];
+export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "download", "download-in-circle", "email", "empty", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "metrics", "metrics-alt", "no-cloud", "payment", "pencil", "pie-chart", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "support", "table", "taxi", "trash", "upload", "url", "user", "users", "warning", "waves"];
 export type IconName = (typeof ICON_NAMES)[number];
 export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
     name: IconName;

package/dist/components/icons/Bell.d.ts

@@ -0,0 +1,3 @@
+import { SVGAttributes } from "react";
+declare const Bell: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Bell;

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ export { CardHorizontal } from "./CardHorizontal/CardHorizontal";
 export { CardPromotion } from "./CardPromotion/CardPromotion";
 export { Checkbox } from "./Checkbox/Checkbox";
 export { CodeBlock } from "./CodeBlock/CodeBlock";
+export { Container } from "./Container/Container";
 export { Dialog } from "./Dialog/Dialog";
 export { ConfirmationDialog } from "./ConfirmationDialog/ConfirmationDialog";
 export { EllipsisContent } from "./EllipsisContent/EllipsisContent";

package/dist/components/types.d.ts

@@ -12,6 +12,7 @@ import { PasswordFieldProps } from "./Input/PasswordField";
 import { NumberFieldProps } from "./Input/NumberField";
 import { LabelProps } from "./Label/Label";
 import { HoverCardProps } from "@radix-ui/react-hover-card";
+import { ContainerProps } from "./Container/Container";
 import { ContextMenuProps } from "@radix-ui/react-context-menu";
 import { CheckboxProps } from "./Checkbox/Checkbox";
 import { CardPrimaryProps } from "./CardPrimary/CardPrimary";
@@ -57,6 +58,7 @@ export type { ButtonProps };
 export type { CardSecondaryProps, BadgeState };
 export type { CardPrimaryProps };
 export type { CheckboxProps };
+export type { ContainerProps };
 export type { ContextMenuProps };
 export type { HoverCardProps };
 export type { LabelProps };

package/dist/styles/types.d.ts

@@ -2555,6 +2555,28 @@ export interface Theme {
                 };
             };
         };
+        "container": {
+            "space": {
+                "none": string;
+                "xxs": string;
+                "xs": string;
+                "sm": string;
+                "md": string;
+                "lg": string;
+                "xl": string;
+                "xxl": string;
+            };
+            "gap": {
+                "none": string;
+                "xxs": string;
+                "xs": string;
+                "sm": string;
+                "md": string;
+                "lg": string;
+                "xl": string;
+                "xxl": string;
+            };
+        };
         "global": {
             "color": {
                 "background": {
@@ -2991,10 +3013,20 @@ export interface Theme {
         "5": string;
         "6": string;
         "7": string;
+        "8": string;
     };
     "shadow": {
         "1": string;
         "2": string;
         "3": string;
     };
+    "breakpoint": {
+        "sizes": {
+            "sm": string;
+            "md": string;
+            "lg": string;
+            "xl": string;
+            "2xl": string;
+        };
+    };
 }

package/dist/styles/variables.json.d.ts

@@ -2555,6 +2555,28 @@ declare const _default: {
         }
       }
     },
+    "container": {
+      "space": {
+        "none": "0",
+        "xxs": "0.25rem",
+        "xs": "0.5rem",
+        "sm": "0.75rem",
+        "md": "1rem",
+        "lg": "1.5rem",
+        "xl": "2rem",
+        "xxl": "4rem"
+      },
+      "gap": {
+        "none": "0",
+        "xxs": "0.25rem",
+        "xs": "0.5rem",
+        "sm": "0.75rem",
+        "md": "1rem",
+        "lg": "1.5rem",
+        "xl": "2rem",
+        "xxl": "4rem"
+      }
+    },
     "global": {
       "color": {
         "background": {
@@ -2990,12 +3012,22 @@ declare const _default: {
     "4": "1rem",
     "5": "1.5rem",
     "6": "2rem",
-    "7": "2.5rem"
+    "7": "2.5rem",
+    "8": "4rem"
   },
   "shadow": {
     "1": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)",
     "2": "0 4px 4px 0 rgba(88, 92, 98, 0.06), inset 5px 0 10px 0 rgba(104, 105, 111, 0.1)",
     "3": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+  },
+  "breakpoint": {
+    "sizes": {
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px",
+      "2xl": "1536px"
+    }
   }
 };
 

package/package.json

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