colibri-ui 0.7.80 → 0.7.81

package/Chip/Chip.module.css

@@ -16,7 +16,7 @@
   transition-timing-function: ease;
 }
 .inner_active {
-  background: rgb(237, 237, 237);
+  background: var(--palette-bg-1);
 }
 .inner_inactive {
   background: var(--palette-white);
@@ -43,15 +43,18 @@
 }
 .inner[data-size=s] {
   border-radius: 32px;
-  height: 32px;
+  font-size: 15px;
+  line-height: 32px;
 }
 .inner[data-size=m] {
   border-radius: 36px;
-  height: 36px;
+  font-size: 16px;
+  line-height: 36px;
 }
 .inner[data-size=l] {
   border-radius: 44px;
-  height: 44px;
+  font-size: 18px;
+  line-height: 44px;
 }
 
 .content {

package/Chip/index.d.ts

@@ -1,14 +1,4 @@
-import React from "react";
-import type { FC, ReactNode } from "react";
-type Size = "s" | "m" | "l";
-type Props = {
-    size?: Size;
-    testID?: string;
-    isActive?: boolean;
-    iconOnRight?: React.ReactNode;
-    onClick?: () => void;
-    onIconOnRightClick?: () => void;
-    children?: ReactNode;
-};
+import type { Props } from "./index.props";
+import type { FC } from "react";
 declare const Chip: FC<Props>;
 export default Chip;

package/Chip/index.props.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type Size = "s" | "m" | "l";
+export type Props = {
+    size?: Size;
+    testID?: string;
+    isActive?: boolean;
+    iconOnRight?: React.ReactNode;
+    onClick?: () => void;
+    onIconOnRightClick?: () => void;
+    children?: ReactNode;
+};
+export {};

package/TabsMenu/Tab/Tab.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import type { TabProps } from "./Tab.props";
+declare const Tab: FC<TabProps>;
+export default Tab;

package/TabsMenu/Tab/Tab.module.css

@@ -0,0 +1,61 @@
+.tab {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 16px;
+  padding: 0 20px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition-duration: 0.3s;
+  transition-property: background, box-shadow, transform;
+  transition-timing-function: ease;
+  user-select: none;
+  white-space: nowrap;
+}
+.tab[data-size=s] {
+  border-radius: 32px;
+  font-size: 15px;
+  line-height: 32px;
+}
+.tab[data-size=m] {
+  border-radius: 36px;
+  font-size: 16px;
+  line-height: 36px;
+}
+.tab[data-size=l] {
+  border-radius: 44px;
+  font-size: 18px;
+  line-height: 44px;
+}
+.tab_active {
+  background: var(--palette-bg-1);
+}
+.tab_inactive {
+  background: var(--palette-white);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.tab_inactive:hover {
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.tab_inactive:active {
+  background: rgba(0, 0, 0, 0.02);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  outline: 0;
+  transition-duration: 0.15s;
+}
+@media (hover: none) {
+  .tab_inactive:hover {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+  }
+  .tab_inactive:active {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  }
+}
+.tab_first {
+  margin-left: 0;
+}
+.tab_disabled {
+  background: #f7f8f9;
+  box-shadow: none;
+  color: var(--palette-bg-3);
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/TabsMenu/Tab/Tab.props.d.ts

@@ -0,0 +1,16 @@
+import type { Size } from "../index.props";
+import type { KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from "react";
+export type TabProps = {
+    id?: string;
+    active?: boolean;
+    disabled?: boolean;
+    first?: boolean;
+    content?: ReactNode;
+    onClick?: MouseEventHandler<HTMLLIElement>;
+    innerRef?: RefObject<HTMLLIElement>;
+    className?: string;
+    role?: string;
+    tabIndex?: number;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    size?: Size;
+};

package/TabsMenu/TabsMenu.module.css

@@ -0,0 +1,4 @@
+.root {
+  margin: 0;
+  padding: 0;
+}

package/TabsMenu/index.d.ts

@@ -0,0 +1,4 @@
+import type { TabsMenuProps } from "./index.props";
+import type { FC } from "react";
+declare const TabsMenu: FC<TabsMenuProps>;
+export default TabsMenu;

package/TabsMenu/index.props.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from "react";
+import type { TabProps } from "./Tab/Tab.props";
+export type Size = "s" | "m" | "l";
+export type TabsMenuProps = {
+    activeTab?: string;
+    onChange?: (tabId: string) => void;
+    tabs: TabProps[];
+    tabsRefs?: RefObject<HTMLLIElement>[];
+    innerRef?: RefObject<HTMLUListElement>;
+    className?: string;
+    size?: Size;
+};

package/TabsMenu/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/TabsMenu/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/esm/Chip/Chip.module.css

@@ -16,7 +16,7 @@
   transition-timing-function: ease;
 }
 .inner_active {
-  background: rgb(237, 237, 237);
+  background: var(--palette-bg-1);
 }
 .inner_inactive {
   background: var(--palette-white);
@@ -43,15 +43,18 @@
 }
 .inner[data-size=s] {
   border-radius: 32px;
-  height: 32px;
+  font-size: 15px;
+  line-height: 32px;
 }
 .inner[data-size=m] {
   border-radius: 36px;
-  height: 36px;
+  font-size: 16px;
+  line-height: 36px;
 }
 .inner[data-size=l] {
   border-radius: 44px;
-  height: 44px;
+  font-size: 18px;
+  line-height: 44px;
 }
 
 .content {

package/esm/Chip/index.d.ts

@@ -1,14 +1,4 @@
-import React from "react";
-import type { FC, ReactNode } from "react";
-type Size = "s" | "m" | "l";
-type Props = {
-    size?: Size;
-    testID?: string;
-    isActive?: boolean;
-    iconOnRight?: React.ReactNode;
-    onClick?: () => void;
-    onIconOnRightClick?: () => void;
-    children?: ReactNode;
-};
+import type { Props } from "./index.props";
+import type { FC } from "react";
 declare const Chip: FC<Props>;
 export default Chip;

package/esm/Chip/index.props.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type Size = "s" | "m" | "l";
+export type Props = {
+    size?: Size;
+    testID?: string;
+    isActive?: boolean;
+    iconOnRight?: React.ReactNode;
+    onClick?: () => void;
+    onIconOnRightClick?: () => void;
+    children?: ReactNode;
+};
+export {};

package/esm/TabsMenu/Tab/Tab.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import type { TabProps } from "./Tab.props";
+declare const Tab: FC<TabProps>;
+export default Tab;

package/esm/TabsMenu/Tab/Tab.module.css

@@ -0,0 +1,61 @@
+.tab {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 16px;
+  padding: 0 20px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition-duration: 0.3s;
+  transition-property: background, box-shadow, transform;
+  transition-timing-function: ease;
+  user-select: none;
+  white-space: nowrap;
+}
+.tab[data-size=s] {
+  border-radius: 32px;
+  font-size: 15px;
+  line-height: 32px;
+}
+.tab[data-size=m] {
+  border-radius: 36px;
+  font-size: 16px;
+  line-height: 36px;
+}
+.tab[data-size=l] {
+  border-radius: 44px;
+  font-size: 18px;
+  line-height: 44px;
+}
+.tab_active {
+  background: var(--palette-bg-1);
+}
+.tab_inactive {
+  background: var(--palette-white);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.tab_inactive:hover {
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.tab_inactive:active {
+  background: rgba(0, 0, 0, 0.02);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  outline: 0;
+  transition-duration: 0.15s;
+}
+@media (hover: none) {
+  .tab_inactive:hover {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+  }
+  .tab_inactive:active {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  }
+}
+.tab_first {
+  margin-left: 0;
+}
+.tab_disabled {
+  background: #f7f8f9;
+  box-shadow: none;
+  color: var(--palette-bg-3);
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/esm/TabsMenu/Tab/Tab.props.d.ts

@@ -0,0 +1,16 @@
+import type { Size } from "../index.props";
+import type { KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from "react";
+export type TabProps = {
+    id?: string;
+    active?: boolean;
+    disabled?: boolean;
+    first?: boolean;
+    content?: ReactNode;
+    onClick?: MouseEventHandler<HTMLLIElement>;
+    innerRef?: RefObject<HTMLLIElement>;
+    className?: string;
+    role?: string;
+    tabIndex?: number;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    size?: Size;
+};

package/esm/TabsMenu/TabsMenu.module.css

@@ -0,0 +1,4 @@
+.root {
+  margin: 0;
+  padding: 0;
+}

package/esm/TabsMenu/index.d.ts

@@ -0,0 +1,4 @@
+import type { TabsMenuProps } from "./index.props";
+import type { FC } from "react";
+declare const TabsMenu: FC<TabsMenuProps>;
+export default TabsMenu;

package/esm/TabsMenu/index.props.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from "react";
+import type { TabProps } from "./Tab/Tab.props";
+export type Size = "s" | "m" | "l";
+export type TabsMenuProps = {
+    activeTab?: string;
+    onChange?: (tabId: string) => void;
+    tabs: TabProps[];
+    tabsRefs?: RefObject<HTMLLIElement>[];
+    innerRef?: RefObject<HTMLUListElement>;
+    className?: string;
+    size?: Size;
+};

package/esm/lib/keyboard.d.ts

@@ -0,0 +1,4 @@
+export type Keys = Record<string, string> & Record<KeyboardKeys, string>;
+export type KeyboardKeys = "BACKSPACE" | "TAB" | "ENTER" | "CAPS_LOCK" | "ESC" | "SPACE" | "PAGE_UP" | "PAGE_DOWN" | "END" | "HOME" | "LEFT" | "UP" | "RIGHT" | "DOWN" | "INSERT" | "DELETE" | string;
+export declare const Keys: Keys;
+export declare function isKey(eventKey: string, keys: Array<KeyboardKeys | string>): boolean;

package/lib/keyboard.d.ts

@@ -0,0 +1,4 @@
+export type Keys = Record<string, string> & Record<KeyboardKeys, string>;
+export type KeyboardKeys = "BACKSPACE" | "TAB" | "ENTER" | "CAPS_LOCK" | "ESC" | "SPACE" | "PAGE_UP" | "PAGE_DOWN" | "END" | "HOME" | "LEFT" | "UP" | "RIGHT" | "DOWN" | "INSERT" | "DELETE" | string;
+export declare const Keys: Keys;
+export declare function isKey(eventKey: string, keys: Array<KeyboardKeys | string>): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.80",
+  "version": "0.7.81",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},