@namuna-nur/ui-kit 1.10.0 → 1.10.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/atoms/index.js +235 -241
- package/lib/molecules/index.js +1210 -1227
- package/lib/shared/assets-icons-2.js +15 -16
- package/lib/src/atoms/Message/Message.d.ts +1 -0
- package/lib/src/atoms/Message/Message.types.d.ts +1 -1
- package/lib/src/molecules/ChatList/ChatList.types.d.ts +2 -2
- package/lib/src/molecules/ChatMessage/ChatMessage.d.ts +1 -1
- package/lib/src/molecules/ChatMessage/ChatMessage.types.d.ts +6 -0
- package/lib/src/molecules/ChatSidebar/ChatSidebar.types.d.ts +3 -3
- package/lib/src/molecules/MultiSelect/MultiSelect.types.d.ts +3 -3
- package/lib/src/molecules/Table/Table.tokens.d.ts +1 -2
- package/lib/src/molecules/Table/Table.types.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
2
|
const l = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentFill", ...t }, /* @__PURE__ */ e.createElement("g", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1.5, clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { d: "M14.17 7.5c1.8.01 2.8.1 3.43.73.73.74.73 1.92.73 4.27v.84c0 2.35 0 3.53-.73 4.26-.73.74-1.91.74-4.27.74H6.67c-2.36 0-3.54 0-4.27-.74-.73-.73-.73-1.9-.73-4.26v-.84c0-2.35 0-3.53.73-4.27.64-.64 1.62-.72 3.43-.73" }), /* @__PURE__ */ e.createElement("path", { strokeLinejoin: "round", d: "M10 1.67V12.5m0 0L7.5 9.58M10 12.5l2.5-2.92" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "a" }, /* @__PURE__ */ e.createElement("path", { fill: "#fff", d: "M0 0h20v20H0z" })))), a = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", ...t }, /* @__PURE__ */ e.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
|
|
3
3
|
maskType: "alpha"
|
|
4
|
-
} }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M0 0h20v20H0z" })), /* @__PURE__ */ e.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { fill: "currentFill", d: "M9.56 12.06 6.54 9.04l-.1-.13-.02-.16q0-.16.11-.3a.4.4 0 0 1 .3-.12h6.34q.18 0 .3.13.11.12.11.29 0 .04-.12.3l-3.02 3.01a1 1 0 0 1-.21.15 1 1 0 0 1-.23.04 1 1 0 0 1-.23-.04 1 1 0 0 1-.2-.15" }))), n = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentFill", viewBox: "0 0 20 20", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M15.6 6.84a.83.83 0 0 0-1.2 0l-3.8 3.82a.83.83 0 0 1-1.2 0L5.6 6.84a.83.83 0 1 0-1.2 1.18l3.83 3.82a2.5 2.5 0 0 0 3.54 0l3.82-3.82a.83.83 0 0 0 0-1.18" })), r = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentFill", d: "M15.6 6.84a.83.83 0 0 0-1.2 0l-3.8 3.82a.83.83 0 0 1-1.2 0L5.6 6.84a.83.83 0 1 0-1.2 1.18l3.83 3.82a2.5 2.5 0 0 0 3.54 0l3.82-3.82a.83.83 0 0 0 0-1.18" })),
|
|
4
|
+
} }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M0 0h20v20H0z" })), /* @__PURE__ */ e.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { fill: "currentFill", d: "M9.56 12.06 6.54 9.04l-.1-.13-.02-.16q0-.16.11-.3a.4.4 0 0 1 .3-.12h6.34q.18 0 .3.13.11.12.11.29 0 .04-.12.3l-3.02 3.01a1 1 0 0 1-.21.15 1 1 0 0 1-.23.04 1 1 0 0 1-.23-.04 1 1 0 0 1-.2-.15" }))), n = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentFill", viewBox: "0 0 20 20", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M15.6 6.84a.83.83 0 0 0-1.2 0l-3.8 3.82a.83.83 0 0 1-1.2 0L5.6 6.84a.83.83 0 1 0-1.2 1.18l3.83 3.82a2.5 2.5 0 0 0 3.54 0l3.82-3.82a.83.83 0 0 0 0-1.18" })), r = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentFill", d: "M15.6 6.84a.83.83 0 0 0-1.2 0l-3.8 3.82a.83.83 0 0 1-1.2 0L5.6 6.84a.83.83 0 1 0-1.2 1.18l3.83 3.82a2.5 2.5 0 0 0 3.54 0l3.82-3.82a.83.83 0 0 0 0-1.18" })), c = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", ...t }, /* @__PURE__ */ e.createElement("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.57, d: "m3.21 6.42 4.5-4.5m0 0 4.49 4.5m-4.5-4.5v11.56" })), h = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 17, height: 17, fill: "none", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentFill", d: "M7.8 4.25h1.4v2.89l2.38-1.66.8 1.16L9.74 8.5l2.66 1.86-.82 1.16-2.36-1.66v2.89H7.79V9.86l-2.36 1.66-.82-1.16L7.27 8.5 4.6 6.64l.82-1.16 2.36 1.66z" })), i = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 21, fill: "currentFill", ...t }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M10.48 1.12a.25.25 0 0 0-.25-.25h-7A2.75 2.75 0 0 0 .48 3.62v14a2.75 2.75 0 0 0 2.75 2.75h10a2.75 2.75 0 0 0 2.75-2.75V7.77a.25.25 0 0 0-.25-.25h-4.5a.75.75 0 0 1-.75-.75zm.75 9.75a.75.75 0 0 1 0 1.5h-6a.75.75 0 1 1 0-1.5zm0 4a.75.75 0 0 1 0 1.5h-6a.75.75 0 1 1 0-1.5z", clipRule: "evenodd" })), s = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "#4A4A4A", d: "M2.67 13.33q-.55 0-.94-.39-.4-.39-.4-.94V4q0-.55.4-.94.39-.4.94-.4h4L8 4h5.33q.55 0 .95.4.39.38.39.93V12q0 .55-.4.94-.39.4-.94.4z" })), o = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 17, height: 22, fill: "currentFill", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M8.34 10.77c-.2-.66-.2-1.94-.08-1.94.34 0 .31 1.53.08 1.94m-.06 1.96c-.32.83-.7 1.8-1.15 2.6.74-.3 1.58-.72 2.54-.91q-.78-.6-1.4-1.7M4.47 17.9c0 .03.53-.23 1.4-1.67-.26.26-1.17 1.02-1.4 1.67m6.55-11.1h5.5v13.58c0 .55-.43.99-.96.99H1.96a1 1 0 0 1-.98-1V1.18c0-.56.43-1 .97-1h8.1V5.8c0 .55.44 1 .97 1m-.32 7.1a4 4 0 0 1-1.73-2.22c.18-.77.47-1.93.25-2.66-.2-1.22-1.72-1.1-1.94-.28-.2.76-.01 1.83.33 3.19a39 39 0 0 1-1.65 3.55c-1.1.58-2.99 1.85-2.21 2.82.22.29.64.42.87.42.72 0 1.44-.75 2.47-2.56 1.04-.36 2.19-.8 3.2-.96.88.48 1.9.8 2.59.8 1.18 0 1.26-1.32.8-1.8-.57-.56-2.2-.4-2.98-.3m5.54-9.38L12.28.46a1 1 0 0 0-.7-.3h-.23v5.3h5.18v-.24a1 1 0 0 0-.29-.7m-3 10.57c.17-.11-.1-.5-1.73-.37 1.5.65 1.73.37 1.73.37" })), w = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 30, fill: "none", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "#424242", fillOpacity: 0.3, d: "M10.42 15c-.29-.94-.28-2.75-.11-2.75.48 0 .43 2.17.11 2.75m-.1 2.77c-.44 1.18-.99 2.53-1.62 3.67 1.05-.4 2.23-1 3.6-1.28a8 8 0 0 1-1.98-2.4m-5.39 7.31c0 .05.76-.32 2-2.36-.38.37-1.66 1.44-2 2.36m9.28-15.7H22v19.21c0 .78-.61 1.4-1.37 1.4H1.38C.6 30 0 29.38 0 28.6V1.4C0 .62.61 0 1.38 0h11.45v7.96c0 .78.62 1.41 1.38 1.41m-.46 10.06a6 6 0 0 1-2.45-3.15c.26-1.09.67-2.74.36-3.77-.27-1.72-2.43-1.55-2.74-.4-.29 1.08-.02 2.59.46 4.52a56 56 0 0 1-2.33 5.02l-.01.01c-1.56.81-4.22 2.6-3.13 3.98.32.4.92.59 1.23.59 1.03 0 2.05-1.05 3.5-3.62 1.48-.5 3.1-1.12 4.53-1.36 1.24.7 2.7 1.14 3.67 1.14 1.67 0 1.79-1.87 1.13-2.54-.8-.8-3.11-.57-4.22-.42m7.85-13.3L15.98.42q-.4-.4-.97-.41h-.34v7.5H22v-.36q0-.58-.4-1m-4.25 14.97c.24-.16-.14-.7-2.45-.53 2.13.93 2.45.53 2.45.53" })), m = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 18, fill: "currentFill", ...t }, /* @__PURE__ */ e.createElement("path", { stroke: "#F9B800", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M1.56 16.6H14.9M2.95 10.1a2 2 0 0 0-.55 1.33v2.67h2.68c.5 0 .99-.2 1.34-.56l7.92-7.92a1.9 1.9 0 0 0 0-2.68l-.78-.78a1.9 1.9 0 0 0-2.69 0z" })), g = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 6, height: 11, fill: "none", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentFill", d: "M5.36 10.17q-.25-.07-.43-.27L.21 5.56c-.16-.15-.26-.32-.18-.52a1 1 0 0 1 .16-.22Q2.6 2.58 5.04.35a.6.6 0 0 1 .64-.13q.16.06.25.19T6 .69a.5.5 0 0 1-.17.32L1.37 5.1l-.06.06.07.08q2.19 2.03 4.4 4.04c.35.31.27.76-.22.88z" })), v = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 6, height: 11, fill: "none", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentFill", d: "M.66.17q.25.09.42.28L5.8 4.79c.16.15.26.32.18.52a1 1 0 0 1-.16.22L.98 10a.6.6 0 0 1-.65.13.5.5 0 0 1-.25-.2.4.4 0 0 1-.07-.27.5.5 0 0 1 .18-.32l4.45-4.1.06-.06-.07-.08Q2.45 3.07.23 1.06C-.12.75-.04.29.45.17z" })), d = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 37, height: 37, fill: "none", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentFill", fillRule: "evenodd", d: "M5.07 5.1a1.16 1.16 0 0 0-1.5 1.54l4.77 10.7h11.7a1.16 1.16 0 0 1 0 2.32H8.34l-4.77 10.7a1.16 1.16 0 0 0 1.5 1.54l29.3-12.33a1.16 1.16 0 0 0 0-2.13z", clipRule: "evenodd" })), p = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 19, height: 19, fill: "none", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "#4A4A4A", fillOpacity: 0.3, d: "M8.33 11.22H.65V8.66h7.68V.98h2.56v7.68h7.68v2.56h-7.68v7.68H8.33z" }), /* @__PURE__ */ e.createElement("path", { stroke: "#4A4A4A", strokeOpacity: 0.3, strokeWidth: 0.03, d: "M10.87 1v7.67h7.68v2.53h-7.68v7.68H8.34V11.2H.66V8.67h7.68V1z" })), E = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentFill", viewBox: "0 0 19 19", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { d: "M4.95 5.54a4.55 4.55 0 1 1 9.1 0 4.55 4.55 0 0 1-9.1 0m4.39 5.75h.32l5.77 1.02h.03c1.07.25 2.21.92 2.43 2.24v.02l.1.7c.2 1.58-1.05 2.74-2.54 2.74H3.55c-1.49 0-2.75-1.16-2.54-2.76l.1-.68v-.03c.22-1.29 1.37-2 2.43-2.23h.02z" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "a" }, /* @__PURE__ */ e.createElement("path", { d: "M0 0h19v19H0z" }))));
|
|
5
5
|
export {
|
|
6
6
|
r as S,
|
|
7
|
-
|
|
7
|
+
E as a,
|
|
8
8
|
a as b,
|
|
9
|
-
c,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
g,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
h as p
|
|
9
|
+
h as c,
|
|
10
|
+
o as d,
|
|
11
|
+
i as e,
|
|
12
|
+
g as f,
|
|
13
|
+
v as g,
|
|
14
|
+
s as h,
|
|
15
|
+
w as i,
|
|
16
|
+
p as j,
|
|
17
|
+
n as k,
|
|
18
|
+
d as l,
|
|
19
|
+
m,
|
|
20
|
+
l as n,
|
|
21
|
+
c as o
|
|
23
22
|
};
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
export declare const Message: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & import('..').MessageType & {
|
|
3
3
|
isMine: boolean;
|
|
4
4
|
senderName: string;
|
|
5
|
+
selected?: boolean;
|
|
5
6
|
firstMessage?: boolean;
|
|
6
7
|
lastMessage?: boolean;
|
|
7
8
|
classNames?: import('..').MessageClasses;
|
|
@@ -11,7 +11,6 @@ export type MessageType = {
|
|
|
11
11
|
};
|
|
12
12
|
export type MessageTokens = {
|
|
13
13
|
base: string;
|
|
14
|
-
bubbleTail: string;
|
|
15
14
|
wrapper: {
|
|
16
15
|
above: string;
|
|
17
16
|
below: string;
|
|
@@ -32,6 +31,7 @@ export type MessageClasses = {
|
|
|
32
31
|
export type MessageProps = HTMLAttributes<HTMLDivElement> & MessageType & {
|
|
33
32
|
isMine: boolean;
|
|
34
33
|
senderName: string;
|
|
34
|
+
selected?: boolean;
|
|
35
35
|
firstMessage?: boolean;
|
|
36
36
|
lastMessage?: boolean;
|
|
37
37
|
classNames?: MessageClasses;
|
|
@@ -2,11 +2,11 @@ import { StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { ChatList, ChatCardProps } from '..';
|
|
3
3
|
export type ChatListStory = StoryObj<typeof ChatList>;
|
|
4
4
|
export type ChatItem = Omit<ChatCardProps, 'classNames' | 'onClick'> & {
|
|
5
|
-
|
|
5
|
+
value: string;
|
|
6
6
|
};
|
|
7
7
|
export type ChatListProps = {
|
|
8
8
|
chats: ChatItem[];
|
|
9
|
-
onSelectChat?: (
|
|
9
|
+
onSelectChat?: (value: string) => void;
|
|
10
10
|
classNames?: {
|
|
11
11
|
wrapper?: string;
|
|
12
12
|
list?: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ChatMessageProps } from '..';
|
|
2
|
-
export declare const ChatMessage: ({ currentUserId, senderId, senderName, messages, avatar, isGroupChat, selectedMessages, onSelectedMessage, visibleSelections, }: ChatMessageProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const ChatMessage: ({ currentUserId, senderId, senderName, messages, avatar, isGroupChat, selectedMessages, onSelectedMessage, visibleSelections, classNames, }: ChatMessageProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -16,4 +16,10 @@ export type ChatMessageProps = {
|
|
|
16
16
|
selectedMessages?: string[];
|
|
17
17
|
onSelectedMessage?: (id: string | undefined) => void;
|
|
18
18
|
visibleSelections?: boolean;
|
|
19
|
+
classNames?: {
|
|
20
|
+
root?: string;
|
|
21
|
+
list?: string;
|
|
22
|
+
item?: string;
|
|
23
|
+
selection?: string;
|
|
24
|
+
};
|
|
19
25
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ChatButtonItem } from '..';
|
|
2
2
|
import { OptionsProps } from '../../types';
|
|
3
3
|
export type SidebarTabItem = ChatButtonItem & {
|
|
4
|
-
|
|
4
|
+
value: string;
|
|
5
5
|
};
|
|
6
6
|
export type ChatSidebarAction = {
|
|
7
7
|
id: string | number;
|
|
@@ -19,8 +19,8 @@ export type ChatSidebarAction = {
|
|
|
19
19
|
};
|
|
20
20
|
export type ChatSidebarProps = {
|
|
21
21
|
tabs: SidebarTabItem[];
|
|
22
|
-
activeTabId:
|
|
23
|
-
onTabChange: (value:
|
|
22
|
+
activeTabId: string;
|
|
23
|
+
onTabChange: (value: string) => void;
|
|
24
24
|
popoverOptions?: OptionsProps[];
|
|
25
25
|
activePopoverValue?: string;
|
|
26
26
|
onPopoverSelect?: (value: string) => void;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { StoryObj } from '@storybook/react';
|
|
2
|
-
import { Dispatch, SetStateAction } from 'react';
|
|
3
2
|
import { MultiSelect } from '..';
|
|
4
3
|
import { SelectStatusType } from '../../types';
|
|
5
4
|
export type MultiSelectStory = StoryObj<typeof MultiSelect>;
|
|
@@ -28,7 +27,7 @@ export type MultiSelectTokens = {
|
|
|
28
27
|
arrowIcon: string;
|
|
29
28
|
wrapperInput: string;
|
|
30
29
|
input: string;
|
|
31
|
-
|
|
30
|
+
popoverLabel: string;
|
|
32
31
|
noItemsFound: string;
|
|
33
32
|
buttons: string;
|
|
34
33
|
button: {
|
|
@@ -51,8 +50,9 @@ export type MultiSelectProps = {
|
|
|
51
50
|
isSearchable?: boolean;
|
|
52
51
|
status: SelectStatusType;
|
|
53
52
|
options: MultiSelectOption[];
|
|
53
|
+
inputPlaceholder?: string;
|
|
54
54
|
selectedItems: MultiSelectOption[];
|
|
55
|
-
setSelectedItems:
|
|
55
|
+
setSelectedItems: (items: MultiSelectOption[]) => void;
|
|
56
56
|
classNames?: {
|
|
57
57
|
wrapper?: string;
|
|
58
58
|
label?: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const tableTokens: {
|
|
2
2
|
root: string;
|
|
3
|
-
|
|
3
|
+
container: string;
|
|
4
4
|
table: string;
|
|
5
5
|
tableHeader: string;
|
|
6
6
|
firstHeaderCell: string;
|
|
@@ -8,7 +8,6 @@ export declare const tableTokens: {
|
|
|
8
8
|
firstBodyCell: string;
|
|
9
9
|
bodyCell: string;
|
|
10
10
|
row: string;
|
|
11
|
-
footerCell: string;
|
|
12
11
|
emptyRow: string;
|
|
13
12
|
headerText: string;
|
|
14
13
|
sortIcon: string;
|