@clickhouse/click-ui 0.0.10 → 0.0.12

package/dist/components/Collapsible/Collapsible.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from "react";
+import { HorizontalDirection, IconName } from '../../components';
+export interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {
+    open?: boolean;
+    onOpenChange?: (value: boolean) => void;
+}
+export declare const Collapsible: {
+    ({ open: openProp, onOpenChange: onOpenChangeProp, children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+    Header: {
+        ({ indicatorDir, icon, iconDir, children, ...props }: CollapsipleHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        ({ onClick: onClickProp, children, indicatorDir, icon, iconDir, ...props }: CollapsipleTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element | undefined;
+        displayName: string;
+    };
+};
+interface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: IconName;
+    iconDir?: HorizontalDirection;
+    indicatorDir?: HorizontalDirection;
+}
+interface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    icon?: IconName;
+    iconDir?: HorizontalDirection;
+    indicatorDir?: HorizontalDirection;
+}
+export {};

package/dist/components/Collapsible/Collapsible.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Collapsible/IconWrapper.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { HorizontalDirection, IconName } from '../../components';
+export declare const IconWrapper: ({ icon, iconDir, children, }: {
+    icon?: IconName | undefined;
+    iconDir?: HorizontalDirection | undefined;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SidebarCollapsibleItem/SidebarCollapsibleItem.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { HorizontalDirection, IconName } from '../../components';
+export interface SidebarCollapsibleItemProps extends HTMLAttributes<HTMLDivElement> {
+    label: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (value: boolean) => void;
+    iconDir?: HorizontalDirection;
+    icon?: IconName;
+    indicatorDir?: HorizontalDirection;
+    selected?: boolean;
+    level?: number;
+}
+declare const SidebarCollapsibleItem: ({ label, children, open, onOpenChange, iconDir, indicatorDir, icon, level, selected, ...props }: SidebarCollapsibleItemProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export { SidebarCollapsibleItem };

package/dist/components/SidebarCollapsibleItem/SidebarCollapsibleItem.stories.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    component: ({ label, children, open, onOpenChange, iconDir, indicatorDir, icon, level, selected, ...props }: import('../../components').SidebarCollapsibleItemProps) => import("react/jsx-runtime").JSX.Element | undefined;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Default: {
+    args: {
+        icon: string;
+        selected: boolean;
+        label: import("react/jsx-runtime").JSX.Element;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { HorizontalDirection, IconName } from '../../components';
+export interface SidebarCollapsibleTitleProps extends React.HTMLAttributes<HTMLButtonElement> {
+    label: ReactNode;
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (value: boolean) => void;
+    iconDir?: HorizontalDirection;
+    icon?: IconName;
+    selected?: boolean;
+}
+export declare const SidebarCollapsibleTitle: ({ label, children, open, onOpenChange, iconDir, icon, selected, ...props }: SidebarCollapsibleTitleProps) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.stories.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    component: ({ label, children, open, onOpenChange, iconDir, icon, selected, ...props }: import('../../components').SidebarCollapsibleTitleProps) => import("react/jsx-runtime").JSX.Element | undefined;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Default: {
+    args: {
+        icon: string;
+        label: string;
+        selected: boolean;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SidebarNavigationItem/SidebarNavigationItem.d.ts

@@ -1,17 +1,15 @@
-/// <reference types="react" />
-import { IconName } from '../../components/Icon/types';
-interface DefaultSidebarNavigationItemProps extends React.HTMLAttributes<HTMLButtonElement> {
-    collapsible?: false | undefined | null;
-    label?: undefined;
+import { HTMLAttributes, ReactNode } from "react";
+import { HorizontalDirection, IconName } from '../../components';
+export interface SidebarNavigationItemProps extends HTMLAttributes<HTMLButtonElement> {
+    label: ReactNode;
+    selected?: boolean;
+    level?: number;
     icon?: IconName;
-    children: React.ReactNode;
+    iconDir?: HorizontalDirection;
 }
-interface CollapsibleSidebarNavigationItemProps extends React.HTMLAttributes<HTMLButtonElement> {
-    collapsible: true;
-    label: string;
-    icon?: IconName;
-    children: React.ReactNode;
-}
-export type SidebarNavigationItemProps = DefaultSidebarNavigationItemProps | CollapsibleSidebarNavigationItemProps;
-declare const SidebarNavigationItem: ({ icon, collapsible, children, label, }: SidebarNavigationItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const SidebarNavigationItem: ({ label, level, icon, selected, iconDir, ...props }: SidebarNavigationItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarItemWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $collapsible?: boolean | undefined;
+    $level: number;
+}>>;
 export { SidebarNavigationItem };

package/dist/components/SidebarNavigationItem/SidebarNavigationItem.stories.d.ts

@@ -1,5 +1,5 @@
 declare const _default: {
-    component: ({ icon, collapsible, children, label, }: import('../../components').SidebarNavigationItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ label, level, icon, selected, iconDir, ...props }: import('../../components').SidebarNavigationItemProps) => import("react/jsx-runtime").JSX.Element;
     title: string;
     tags: string[];
 };
@@ -7,14 +7,7 @@ export default _default;
 export declare const Default: {
     args: {
         icon: string;
-        children: import("react/jsx-runtime").JSX.Element;
-    };
-};
-export declare const Collapsible: {
-    args: {
-        icon: string;
-        collapsible: boolean;
-        label: string;
-        children: import("react/jsx-runtime").JSX.Element;
+        selected: boolean;
+        label: import("react/jsx-runtime").JSX.Element;
     };
 };

package/dist/components/SidebarNavigationItem/SidebarNavigationItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SidebarNavigationTitle/SidebarNavigationTitle.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { HorizontalDirection, IconName } from '../../components';
+export interface SidebarNavigationTitleProps extends HTMLAttributes<HTMLButtonElement> {
+    label: ReactNode;
+    selected?: boolean;
+    icon?: IconName;
+    iconDir?: HorizontalDirection;
+}
+export declare const SidebarNavigationTitle: ({ label, icon, iconDir, selected, ...props }: SidebarNavigationTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarTitleWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $collapsible?: boolean | undefined;
+}>>;

package/dist/components/SidebarNavigationTitle/SidebarNavigationTitle.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    component: ({ label, icon, iconDir, selected, ...props }: import('../../components').SidebarNavigationTitleProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Default: {
+    args: {
+        icon: string;
+        selected: boolean;
+        label: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/components/SidebarNavigationTitle/SidebarNavigationTitle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Switch/Switch.d.ts

@@ -1,8 +1,8 @@
+/// <reference types="react" />
 import * as RadixSwitch from "@radix-ui/react-switch";
 interface RootProps {
     checked: boolean;
     disabled?: boolean;
 }
-type SwitchProps = RootProps & RadixSwitch.SwitchProps;
-export declare const Switch: ({ checked, disabled, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: import("react").ForwardRefExoticComponent<RootProps & RadixSwitch.SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/index.d.ts

@@ -13,7 +13,6 @@ export { CardPrimary } from "./CardPrimary/CardPrimary";
 export { Checkbox } from "./Checkbox/Checkbox";
 export { ContextMenu } from "./ContextMenu/ContextMenu";
 export { default as Flags } from "./icons/Flags";
-export { FileTabs } from "./FileTabs/FileTabs";
 export { HoverCard } from "./HoverCard/HoverCard";
 export { NumberField } from "./Input/NumberField";
 export { PasswordField } from "./Input/PasswordField";
@@ -22,6 +21,9 @@ export { RadioGroup } from "./RadioGroup/RadioGroup";
 export { SearchField } from "./Input/SearchField";
 export { Select } from "./Select/Select";
 export { SidebarNavigationItem } from "./SidebarNavigationItem/SidebarNavigationItem";
+export { SidebarCollapsibleItem } from "./SidebarCollapsibleItem/SidebarCollapsibleItem";
+export { SidebarNavigationTitle } from "./SidebarNavigationTitle/SidebarNavigationTitle";
+export { SidebarCollapsibleTitle } from "./SidebarCollapsibleTitle/SidebarCollapsibleTitle";
 export { Spacer } from "./Spacer/Spacer";
 export { Switch } from "./Switch/Switch";
 export { Tabs } from "./Tabs/Tabs";

package/dist/components/types.d.ts

@@ -23,7 +23,11 @@ import { AvatarProps } from "./Avatar/Avatar";
 import { AlertProps } from "./Alert/Alert";
 import { IconButtonProps } from "./IconButton/IconButton";
 import { IconName } from "./Icon/types";
+import { SidebarNavigationTitleProps } from "./SidebarNavigationTitle/SidebarNavigationTitle";
+import { SidebarCollapsibleItemProps } from "./SidebarCollapsibleItem/SidebarCollapsibleItem";
+import { SidebarCollapsibleTitleProps } from "./SidebarCollapsibleTitle/SidebarCollapsibleTitle";
 export type States = "default" | "active" | "disabled" | "error" | "hover";
+export type HorizontalDirection = "start" | "end";
 export type { IconName };
 export type { IconButtonProps };
 export type { AlertProps };
@@ -44,6 +48,9 @@ export type { RadioGroupProps, RadioGroupItemProps };
 export type { SearchFieldProps };
 export type { SelectProps };
 export type { SidebarNavigationItemProps };
+export type { SidebarNavigationTitleProps };
+export type { SidebarCollapsibleItemProps };
+export type { SidebarCollapsibleTitleProps };
 export type { SpacerProps };
 export type { TabsProps };
 export type { TextProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
@@ -9,12 +9,12 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/click-ui.es.js",
+      "import": "./dist/click-ui.js",
       "require": "./dist/click-ui.umd.js"
     }
   },
   "main": "./dist/click-ui.umd.js",
-  "module": "./dist/click-ui.es.js",
+  "module": "./dist/click-ui.js",
   "types": "./dist/index.d.ts",
   "keywords": [
     "click-ui",
@@ -103,6 +103,6 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": ">= 5"
+    "styled-components": "^6.0.6"
   }
 }