@bikdotai/bik-component-library 0.0.788-beta.4 → 0.0.788-beta.5

package/dist/cjs/editor/BikEditor.styles.js

@@ -27,7 +27,7 @@
 			margin-top: 2px;
 		}
 
-		&.is-editor-empty::before {
+		p.is-editor-empty:first-child::before {
 			content: attr(data-placeholder);
 			float: left;
 			color: #adb5bd;

package/dist/cjs/editor/extensions/editorDropdown.styles.js

@@ -1,27 +1,24 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const n=o.default.div`
-	background: ${r.COLORS.surface.standard};
-	border: 1px solid ${r.COLORS.stroke.primary};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);const n=o.default.div`
+	background: ${t.COLORS.surface.standard};
+	border: 1px solid ${t.COLORS.stroke.primary};
 	border-radius: 8px;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 	padding: 4px;
-	min-width: 180px;
+	min-width: 330px;
 	max-height: 260px;
 	overflow-y: auto;
 	font-size: 14px;
-	color: ${r.COLORS.content.primary};
+	color: ${t.COLORS.content.primary};
 `,a=o.default.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	padding: 6px 10px;
+	padding: 12px 16px;
+	min-height: 43px;
 	border-radius: 6px;
 	cursor: pointer;
-	color: ${r.COLORS.content.primary};
-	background: ${e=>{let{$isActive:t}=e;return t?r.COLORS.surface.hovered:"transparent"}};
-
-	&:hover {
-		background: ${r.COLORS.surface.hovered};
-	}
+	color: ${t.COLORS.content.primary};
+	background: ${e=>{let{$isActive:r}=e;return r?t.COLORS.surface.hovered:"transparent"}};
 `,i=o.default.img`
 	width: 24px;
 	height: 24px;
@@ -30,19 +27,19 @@
 	flex-shrink: 0;
 `,p=o.default.span`
 	font-weight: 500;
-	color: ${r.COLORS.content.primary};
+	color: ${t.COLORS.content.primary};
 `,s=o.default.span`
 	width: 8px;
 	height: 8px;
 	border-radius: 50%;
-	background: ${e=>{let{$online:t}=e;return t?r.COLORS.content.positive:r.COLORS.content.placeholder}};
+	background: ${e=>{let{$online:r}=e;return r?t.COLORS.content.positive:t.COLORS.content.placeholder}};
 	margin-left: auto;
 	flex-shrink: 0;
 `,d=o.default.span`
 	font-weight: 500;
-	color: ${r.COLORS.content.primary};
-`,c=o.default.span`
+	color: ${t.COLORS.content.primary};
+`,l=o.default.span`
 	font-size: 12px;
-	color: ${r.COLORS.content.secondary};
+	color: ${t.COLORS.content.secondary};
 	margin-left: auto;
-`;exports.DropdownContainer=n,exports.DropdownItem=a,exports.MentionAvatar=i,exports.MentionLabel=p,exports.MentionPresenceDot=s,exports.SlashDescription=c,exports.SlashLabel=d;
+`;exports.DropdownContainer=n,exports.DropdownItem=a,exports.MentionAvatar=i,exports.MentionLabel=p,exports.MentionPresenceDot=s,exports.SlashDescription=l,exports.SlashLabel=d;

package/dist/cjs/editor/extensions/mention/MentionDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),r=require("../editorDropdown.styles.js");const t=n.forwardRef(((t,o)=>{let{items:i,query:s,command:l,renderItem:a,renderDropdown:d}=t;const[c,u]=n.useState(0),p=e=>{i[e]&&l(i[e])};return n.useImperativeHandle(o,(()=>({onKeyDown:e=>{let{event:n}=e;return"ArrowUp"===n.key?(u((e=>(e+i.length-1)%i.length)),!0):"ArrowDown"===n.key?(u((e=>(e+1)%i.length)),!0):"Enter"===n.key&&(p(c),!0)}}))),n.useEffect((()=>u(0)),[i]),i.length?d?e.jsx(e.Fragment,{children:d({items:i,query:s,activeIndex:c,onSelect:e=>l(e)})}):e.jsx(r.DropdownContainer,{children:i.map(((n,t)=>e.jsx(r.DropdownItem,Object.assign({$isActive:t===c,onClick:()=>p(t)},{children:a?a(n,t===c):e.jsxs(e.Fragment,{children:[n.avatarUrl&&e.jsx(r.MentionAvatar,{src:n.avatarUrl,alt:""}),e.jsx(r.MentionLabel,{children:n.label}),void 0!==n.isOnline&&e.jsx(r.MentionPresenceDot,{$online:n.isOnline})]})}),n.id)))}):null}));t.displayName="MentionDropdown",exports.MentionDropdown=t;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),r=require("../editorDropdown.styles.js");const t=n.forwardRef(((t,o)=>{let{items:i,query:s,command:l,renderItem:a,renderDropdown:d}=t;const[c,u]=n.useState(0),p=e=>{i[e]&&l(i[e])};return n.useImperativeHandle(o,(()=>({onKeyDown:e=>{let{event:n}=e;return"ArrowUp"===n.key?(u((e=>(e+i.length-1)%i.length)),!0):"ArrowDown"===n.key?(u((e=>(e+1)%i.length)),!0):"Enter"===n.key&&(p(c),!0)}}))),n.useEffect((()=>u(0)),[i]),i.length?d?e.jsx(e.Fragment,{children:d({items:i,query:s,activeIndex:c,onSelect:e=>l(e)})}):e.jsx(r.DropdownContainer,{children:i.map(((n,t)=>e.jsx(r.DropdownItem,Object.assign({$isActive:t===c,onMouseEnter:()=>u(t),onClick:()=>p(t)},{children:a?a(n,t===c):e.jsxs(e.Fragment,{children:[n.avatarUrl&&e.jsx(r.MentionAvatar,{src:n.avatarUrl,alt:""}),e.jsx(r.MentionLabel,{children:n.label}),void 0!==n.isOnline&&e.jsx(r.MentionPresenceDot,{$online:n.isOnline})]})}),n.id)))}):null}));t.displayName="MentionDropdown",exports.MentionDropdown=t;

package/dist/cjs/editor/extensions/slashCommand/SlashCommandMenu.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),n=require("../editorDropdown.styles.js");const t=r.forwardRef(((t,s)=>{let{items:i,query:o,command:l,renderItem:a,renderDropdown:d}=t;const[c,u]=r.useState(0),m=e=>{i[e]&&l(i[e])};return r.useImperativeHandle(s,(()=>({onKeyDown:e=>{let{event:r}=e;return"ArrowUp"===r.key?(u((e=>(e+i.length-1)%i.length)),!0):"ArrowDown"===r.key?(u((e=>(e+1)%i.length)),!0):"Enter"===r.key&&(m(c),!0)}}))),r.useEffect((()=>u(0)),[i]),i.length?d?e.jsx(e.Fragment,{children:d({items:i,query:o,activeIndex:c,onSelect:e=>l(e)})}):e.jsx(n.DropdownContainer,{children:i.map(((r,t)=>e.jsx(n.DropdownItem,Object.assign({$isActive:t===c,onClick:()=>m(t)},{children:a?a(r,t===c):e.jsxs(e.Fragment,{children:[e.jsx(n.SlashLabel,{children:r.label}),r.description&&e.jsx(n.SlashDescription,{children:r.description})]})}),r.id)))}):null}));t.displayName="SlashCommandMenu",exports.SlashCommandMenu=t;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),n=require("../editorDropdown.styles.js");const t=r.forwardRef(((t,s)=>{let{items:o,query:i,command:l,renderItem:a,renderDropdown:d}=t;const[c,u]=r.useState(0),m=e=>{o[e]&&l(o[e])};return r.useImperativeHandle(s,(()=>({onKeyDown:e=>{let{event:r}=e;return"ArrowUp"===r.key?(u((e=>(e+o.length-1)%o.length)),!0):"ArrowDown"===r.key?(u((e=>(e+1)%o.length)),!0):"Enter"===r.key&&(m(c),!0)}}))),r.useEffect((()=>u(0)),[o]),o.length?d?e.jsx(e.Fragment,{children:d({items:o,query:i,activeIndex:c,onSelect:e=>l(e)})}):e.jsx(n.DropdownContainer,{children:o.map(((r,t)=>e.jsx(n.DropdownItem,Object.assign({$isActive:t===c,onMouseEnter:()=>u(t),onClick:()=>m(t)},{children:a?a(r,t===c):e.jsxs(e.Fragment,{children:[e.jsx(n.SlashLabel,{children:r.label}),r.description&&e.jsx(n.SlashDescription,{children:r.description})]})}),r.id)))}):null}));t.displayName="SlashCommandMenu",exports.SlashCommandMenu=t;

package/dist/esm/editor/BikEditor.styles.js

@@ -27,7 +27,7 @@ import e from"styled-components";const o=e.div`
 			margin-top: 2px;
 		}
 
-		&.is-editor-empty::before {
+		p.is-editor-empty:first-child::before {
 			content: attr(data-placeholder);
 			float: left;
 			color: #adb5bd;

package/dist/esm/editor/extensions/editorDropdown.styles.js

@@ -1,27 +1,24 @@
-import r from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const e=r.div`
+import r from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const t=r.div`
 	background: ${o.surface.standard};
 	border: 1px solid ${o.stroke.primary};
 	border-radius: 8px;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 	padding: 4px;
-	min-width: 180px;
+	min-width: 330px;
 	max-height: 260px;
 	overflow-y: auto;
 	font-size: 14px;
 	color: ${o.content.primary};
-`,t=r.div`
+`,e=r.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	padding: 6px 10px;
+	padding: 12px 16px;
+	min-height: 43px;
 	border-radius: 6px;
 	cursor: pointer;
 	color: ${o.content.primary};
-	background: ${r=>{let{$isActive:e}=r;return e?o.surface.hovered:"transparent"}};
-
-	&:hover {
-		background: ${o.surface.hovered};
-	}
+	background: ${r=>{let{$isActive:t}=r;return t?o.surface.hovered:"transparent"}};
 `,n=r.img`
 	width: 24px;
 	height: 24px;
@@ -31,18 +28,18 @@ import r from"styled-components";import{COLORS as o}from"../../constants/Theme.j
 `,i=r.span`
 	font-weight: 500;
 	color: ${o.content.primary};
-`,a=r.span`
+`,p=r.span`
 	width: 8px;
 	height: 8px;
 	border-radius: 50%;
-	background: ${r=>{let{$online:e}=r;return e?o.content.positive:o.content.placeholder}};
+	background: ${r=>{let{$online:t}=r;return t?o.content.positive:o.content.placeholder}};
 	margin-left: auto;
 	flex-shrink: 0;
-`,p=r.span`
+`,a=r.span`
 	font-weight: 500;
 	color: ${o.content.primary};
-`,d=r.span`
+`,s=r.span`
 	font-size: 12px;
 	color: ${o.content.secondary};
 	margin-left: auto;
-`;export{e as DropdownContainer,t as DropdownItem,n as MentionAvatar,i as MentionLabel,a as MentionPresenceDot,d as SlashDescription,p as SlashLabel};
+`;export{t as DropdownContainer,e as DropdownItem,n as MentionAvatar,i as MentionLabel,p as MentionPresenceDot,s as SlashDescription,a as SlashLabel};

package/dist/esm/editor/extensions/mention/MentionDropdown.js

@@ -1 +1 @@
-import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import{forwardRef as t,useState as o,useImperativeHandle as i,useEffect as l}from"react";import{DropdownContainer as a,DropdownItem as c,MentionAvatar as d,MentionLabel as s,MentionPresenceDot as m}from"../editorDropdown.styles.js";const p=t(((t,p)=>{let{items:h,query:y,command:w,renderItem:u,renderDropdown:v}=t;const[g,D]=o(0),k=e=>{h[e]&&w(h[e])};return i(p,(()=>({onKeyDown:e=>{let{event:r}=e;return"ArrowUp"===r.key?(D((e=>(e+h.length-1)%h.length)),!0):"ArrowDown"===r.key?(D((e=>(e+1)%h.length)),!0):"Enter"===r.key&&(k(g),!0)}}))),l((()=>D(0)),[h]),h.length?v?e(r,{children:v({items:h,query:y,activeIndex:g,onSelect:e=>w(e)})}):e(a,{children:h.map(((t,o)=>e(c,Object.assign({$isActive:o===g,onClick:()=>k(o)},{children:u?u(t,o===g):n(r,{children:[t.avatarUrl&&e(d,{src:t.avatarUrl,alt:""}),e(s,{children:t.label}),void 0!==t.isOnline&&e(m,{$online:t.isOnline})]})}),t.id)))}):null}));p.displayName="MentionDropdown";export{p as MentionDropdown};
+import{jsx as e,Fragment as n,jsxs as r}from"react/jsx-runtime";import{forwardRef as t,useState as o,useImperativeHandle as i,useEffect as l}from"react";import{DropdownContainer as a,DropdownItem as c,MentionAvatar as d,MentionLabel as s,MentionPresenceDot as m}from"../editorDropdown.styles.js";const p=t(((t,p)=>{let{items:h,query:y,command:u,renderItem:w,renderDropdown:v}=t;const[g,D]=o(0),k=e=>{h[e]&&u(h[e])};return i(p,(()=>({onKeyDown:e=>{let{event:n}=e;return"ArrowUp"===n.key?(D((e=>(e+h.length-1)%h.length)),!0):"ArrowDown"===n.key?(D((e=>(e+1)%h.length)),!0):"Enter"===n.key&&(k(g),!0)}}))),l((()=>D(0)),[h]),h.length?v?e(n,{children:v({items:h,query:y,activeIndex:g,onSelect:e=>u(e)})}):e(a,{children:h.map(((t,o)=>e(c,Object.assign({$isActive:o===g,onMouseEnter:()=>D(o),onClick:()=>k(o)},{children:w?w(t,o===g):r(n,{children:[t.avatarUrl&&e(d,{src:t.avatarUrl,alt:""}),e(s,{children:t.label}),void 0!==t.isOnline&&e(m,{$online:t.isOnline})]})}),t.id)))}):null}));p.displayName="MentionDropdown";export{p as MentionDropdown};

package/dist/esm/editor/extensions/slashCommand/SlashCommandMenu.js

@@ -1 +1 @@
-import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import{forwardRef as t,useState as o,useImperativeHandle as i,useEffect as l}from"react";import{DropdownContainer as c,DropdownItem as d,SlashLabel as m,SlashDescription as s}from"../editorDropdown.styles.js";const a=t(((t,a)=>{let{items:h,query:p,command:y,renderItem:u,renderDropdown:w}=t;const[g,k]=o(0),D=e=>{h[e]&&y(h[e])};return i(a,(()=>({onKeyDown:e=>{let{event:r}=e;return"ArrowUp"===r.key?(k((e=>(e+h.length-1)%h.length)),!0):"ArrowDown"===r.key?(k((e=>(e+1)%h.length)),!0):"Enter"===r.key&&(D(g),!0)}}))),l((()=>k(0)),[h]),h.length?w?e(r,{children:w({items:h,query:p,activeIndex:g,onSelect:e=>y(e)})}):e(c,{children:h.map(((t,o)=>e(d,Object.assign({$isActive:o===g,onClick:()=>D(o)},{children:u?u(t,o===g):n(r,{children:[e(m,{children:t.label}),t.description&&e(s,{children:t.description})]})}),t.id)))}):null}));a.displayName="SlashCommandMenu";export{a as SlashCommandMenu};
+import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import{forwardRef as t,useState as o,useImperativeHandle as i,useEffect as l}from"react";import{DropdownContainer as c,DropdownItem as d,SlashLabel as m,SlashDescription as s}from"../editorDropdown.styles.js";const a=t(((t,a)=>{let{items:h,query:p,command:u,renderItem:y,renderDropdown:w}=t;const[g,k]=o(0),D=e=>{h[e]&&u(h[e])};return i(a,(()=>({onKeyDown:e=>{let{event:r}=e;return"ArrowUp"===r.key?(k((e=>(e+h.length-1)%h.length)),!0):"ArrowDown"===r.key?(k((e=>(e+1)%h.length)),!0):"Enter"===r.key&&(D(g),!0)}}))),l((()=>k(0)),[h]),h.length?w?e(r,{children:w({items:h,query:p,activeIndex:g,onSelect:e=>u(e)})}):e(c,{children:h.map(((t,o)=>e(d,Object.assign({$isActive:o===g,onMouseEnter:()=>k(o),onClick:()=>D(o)},{children:y?y(t,o===g):n(r,{children:[e(m,{children:t.label}),t.description&&e(s,{children:t.description})]})}),t.id)))}):null}));a.displayName="SlashCommandMenu";export{a as SlashCommandMenu};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.788-beta.4",
+	"version": "0.0.788-beta.5",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",