@clickhouse/click-ui 0.0.169 → 0.0.171

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,8 @@
+export interface DatePickerProps {
+    date?: Date;
+    disabled?: boolean;
+    futureDatesDisabled?: boolean;
+    onSelectDate: (selectedDate: Date) => void;
+    placeholder?: string;
+}
+export declare const DatePicker: ({ date, disabled, futureDatesDisabled, onSelectDate, placeholder, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -69,6 +69,7 @@ export declare const ICONS_MAP: {
     "folder-open": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     gear: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     gift: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    globe: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "git-merge": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     history: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     home: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -122,6 +123,7 @@ export declare const ICONS_MAP: {
     sparkle: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     speaker: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     speed: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    square: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     star: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     stop: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     support: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Input/InputWrapper.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
 export interface WrapperProps {
+    className?: string;
     id: string;
     label?: ReactNode;
     labelColor?: string;
@@ -11,7 +12,7 @@ export interface WrapperProps {
     dir?: "start" | "end";
     resize?: "none" | "vertical" | "horizontal" | "both";
 }
-export declare const InputWrapper: ({ id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputWrapper: ({ className, id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const InputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 export declare const NumberInputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLInputElement> | null | undefined;
@@ -19,7 +20,7 @@ export declare const NumberInputElement: import('styled-components/dist/types').
     $hideControls?: boolean;
 }>> & string;
 export declare const TextAreaElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
-export declare const TextAreaWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<WrapperProps, never>> & string & Omit<({ id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const TextAreaWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<WrapperProps, never>> & string & Omit<({ className, id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const IconButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $show?: boolean;
 }>> & string;

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

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

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

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

package/dist/components/index.d.ts

@@ -19,6 +19,7 @@ export { CardPromotion } from './CardPromotion/CardPromotion';
 export { Checkbox } from './Checkbox/Checkbox';
 export { CodeBlock } from './CodeBlock/CodeBlock';
 export { Container } from './Container/Container';
+export { DatePicker } from './DatePicker/DatePicker';
 export { Dialog } from './Dialog/Dialog';
 export { ConfirmationDialog } from './ConfirmationDialog/ConfirmationDialog';
 export { EllipsisContent } from './EllipsisContent/EllipsisContent';

package/dist/styles/types.d.ts

@@ -2645,6 +2645,10 @@ export interface Theme {
                     "width": string;
                     "height": string;
                 };
+                "widest": {
+                    "width": string;
+                    "height": string;
+                };
             };
             "typography": {
                 "default": {
@@ -2847,6 +2851,73 @@ export interface Theme {
                 };
             };
         };
+        "datePicker": {
+            "dateOption": {
+                "space": {
+                    "gap": string;
+                };
+                "radii": {
+                    "default": string;
+                    "range": string;
+                };
+                "stroke": string;
+                "size": {
+                    "height": string;
+                    "width": string;
+                };
+                "typography": {
+                    "label": {
+                        "default": string;
+                        "hover": string;
+                        "active": string;
+                        "disabled": string;
+                        "range": string;
+                    };
+                };
+                "color": {
+                    "label": {
+                        "default": string;
+                        "hover": string;
+                        "active": string;
+                        "disabled": string;
+                        "range": string;
+                    };
+                    "background": {
+                        "default": string;
+                        "hover": string;
+                        "active": string;
+                        "disabled": string;
+                        "range": string;
+                    };
+                    "stroke": {
+                        "default": string;
+                        "hover": string;
+                        "active": string;
+                        "disabled": string;
+                        "range": string;
+                    };
+                };
+            };
+            "space": {
+                "gap": string;
+            };
+            "typography": {
+                "daytitle": {
+                    "default": string;
+                };
+                "title": {
+                    "default": string;
+                };
+            };
+            "color": {
+                "title": {
+                    "default": string;
+                };
+                "daytitle": {
+                    "default": string;
+                };
+            };
+        };
         "global": {
             "color": {
                 "background": {

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

@@ -774,6 +774,41 @@ declare const _default: {
         }
       }
     },
+    "datePicker": {
+      "dateOption": {
+        "color": {
+          "label": {
+            "default": "#161517",
+            "hover": "#161517",
+            "active": "#ffffff",
+            "disabled": "#a0a0a0",
+            "range": "#161517"
+          },
+          "background": {
+            "default": "#ffffff",
+            "hover": "#ffffff",
+            "active": "#151515",
+            "disabled": "#ffffff",
+            "range": "#e6e7e9"
+          },
+          "stroke": {
+            "default": "#ffffff",
+            "hover": "#151515",
+            "active": "#151515",
+            "disabled": "#ffffff",
+            "range": "#e6e7e9"
+          }
+        }
+      },
+      "color": {
+        "title": {
+          "default": "lch(10.2 1.39 305)"
+        },
+        "daytitle": {
+          "default": "#696e79"
+        }
+      }
+    },
     "global": {
       "color": {
         "text": {

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

@@ -1486,6 +1486,41 @@ declare const _default: {
         }
       }
     },
+    "datePicker": {
+      "dateOption": {
+        "color": {
+          "label": {
+            "default": "#ffffff",
+            "hover": "#ffffff",
+            "active": "#1F1F1C",
+            "disabled": "#a0a0a0",
+            "range": "#ffffff"
+          },
+          "background": {
+            "default": "#1F1F1C",
+            "hover": "#1F1F1C",
+            "active": "#FAFF69",
+            "disabled": "#1F1F1C",
+            "range": "#323232"
+          },
+          "stroke": {
+            "default": "#1F1F1C",
+            "hover": "#FAFF69",
+            "active": "#FAFF69",
+            "disabled": "#1F1F1C",
+            "range": "#323232"
+          }
+        }
+      },
+      "color": {
+        "title": {
+          "default": "rgb(97.5% 97.5% 97.5%)"
+        },
+        "daytitle": {
+          "default": "#b3b6bd"
+        }
+      }
+    },
     "global": {
       "color": {
         "background": {

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

@@ -1092,8 +1092,8 @@ declare const _default: {
             },
             "stroke": {
               "default": "#62de85",
-              "hover": "#66FF73",
-              "active": "#66FF73",
+              "hover": "#62de85",
+              "active": "#62de85",
               "disabled": "#c0c0c0"
             },
             "check": {
@@ -2644,6 +2644,10 @@ declare const _default: {
         "narrow": {
           "width": "21rem",
           "height": "100%"
+        },
+        "widest": {
+          "width": "55rem",
+          "height": "100vh"
         }
       },
       "typography": {
@@ -2847,6 +2851,73 @@ declare const _default: {
         }
       }
     },
+    "datePicker": {
+      "dateOption": {
+        "space": {
+          "gap": "2px"
+        },
+        "radii": {
+          "default": "0.25rem",
+          "range": "0"
+        },
+        "stroke": "1px",
+        "size": {
+          "height": "2rem",
+          "width": "2rem"
+        },
+        "typography": {
+          "label": {
+            "default": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;",
+            "hover": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;",
+            "active": "600 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;",
+            "disabled": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;",
+            "range": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;"
+          }
+        },
+        "color": {
+          "label": {
+            "default": "#161517",
+            "hover": "#161517",
+            "active": "#ffffff",
+            "disabled": "#a0a0a0",
+            "range": "#161517"
+          },
+          "background": {
+            "default": "#ffffff",
+            "hover": "#ffffff",
+            "active": "#151515",
+            "disabled": "#ffffff",
+            "range": "#e6e7e9"
+          },
+          "stroke": {
+            "default": "#ffffff",
+            "hover": "#151515",
+            "active": "#151515",
+            "disabled": "#ffffff",
+            "range": "#e6e7e9"
+          }
+        }
+      },
+      "space": {
+        "gap": "0.25rem"
+      },
+      "typography": {
+        "daytitle": {
+          "default": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;"
+        },
+        "title": {
+          "default": "600 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;"
+        }
+      },
+      "color": {
+        "title": {
+          "default": "lch(11.1 1.37 305)"
+        },
+        "daytitle": {
+          "default": "#696e79"
+        }
+      }
+    },
     "global": {
       "color": {
         "background": {

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

@@ -613,8 +613,8 @@ declare const _default: {
             },
             "stroke": {
               "default": "#62de85",
-              "hover": "#66FF73",
-              "active": "#66FF73",
+              "hover": "#62de85",
+              "active": "#62de85",
               "disabled": "#c0c0c0"
             },
             "check": {
@@ -1473,6 +1473,41 @@ declare const _default: {
         }
       }
     },
+    "datePicker": {
+      "dateOption": {
+        "color": {
+          "label": {
+            "default": "#161517",
+            "hover": "#161517",
+            "active": "#ffffff",
+            "disabled": "#a0a0a0",
+            "range": "#161517"
+          },
+          "background": {
+            "default": "#ffffff",
+            "hover": "#ffffff",
+            "active": "#151515",
+            "disabled": "#ffffff",
+            "range": "#e6e7e9"
+          },
+          "stroke": {
+            "default": "#ffffff",
+            "hover": "#151515",
+            "active": "#151515",
+            "disabled": "#ffffff",
+            "range": "#e6e7e9"
+          }
+        }
+      },
+      "color": {
+        "title": {
+          "default": "lch(11.1 1.37 305)"
+        },
+        "daytitle": {
+          "default": "#696e79"
+        }
+      }
+    },
     "global": {
       "color": {
         "background": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.169",
+  "version": "0.0.171",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
@@ -43,6 +43,7 @@
     "publish:click-ui": "npm run test && npm run build && npm publish"
   },
   "dependencies": {
+    "@h6s/calendar": "^2.0.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",