@bothub-chat/ui 2.39.0 → 2.39.1

package/dist/components/badge-select-dropdown/styled.js

@@ -1,3 +1,3 @@
-import{animated as o}from"@react-spring/web";import{styled as e,css as r}from"styled-components";import{ArrowDownIcon as t}from"../../icons/arrow-down/index.js";import{colorToRgba as n}from"../../utils/colorToRgba.js";import{Typography as a}from"../typography/index.js";const i=e(a).attrs({variant:"body-s-medium"}).withConfig({displayName:"styled__BadgeSelectDropdownSpanStyled",componentId:"sc-obte8v-0"})([""]),d=e.button.withConfig({displayName:"styled__BadgeSelectDropdownTrigger",componentId:"sc-obte8v-1"})(["border:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;column-gap:8px;min-width:98px;padding:6px 12px;border-radius:14px;background:",";color:",";"],(({theme:o,$active:e,$colorButtonOpened:r})=>e?r||"light"===o.mode?o.colors.grayScale.gray2:n(o.colors.accent.primaryLight,.5):"light"===o.mode?o.colors.grayScale.gray4:o.colors.grayScale.gray3),(({theme:o})=>o.colors.base.white)),p=e(o.ul).withConfig({displayName:"styled__BadgeSelectDropdownList",componentId:"sc-obte8v-2"})(["padding:0;margin:0;display:none;color:white;position:absolute;top:38px;left:0;transform-origin:top center;z-index:2;padding:8px;border:1px solid;border-radius:8px;border-color:",";background:",";backdrop-filter:blur(16px);"," flex-direction:column;gap:1px;"],(({theme:o})=>o.colors.grayScale.gray2),(({theme:o})=>n(o.colors.grayScale.gray4,.75)),(({$open:o})=>o&&r`
+import{animated as o}from"@react-spring/web";import{styled as e,css as r}from"styled-components";import{ArrowDownIcon as t}from"../../icons/arrow-down/index.js";import{colorToRgba as n}from"../../utils/colors/colorToRgba.js";import"../../utils/colors/calculateAccentColors.js";import{Typography as a}from"../typography/index.js";const i=e(a).attrs({variant:"body-s-medium"}).withConfig({displayName:"styled__BadgeSelectDropdownSpanStyled",componentId:"sc-obte8v-0"})([""]),s=e.button.withConfig({displayName:"styled__BadgeSelectDropdownTrigger",componentId:"sc-obte8v-1"})(["border:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;column-gap:8px;min-width:98px;padding:6px 12px;border-radius:14px;background:",";color:",";"],(({theme:o,$active:e,$colorButtonOpened:r})=>e?r||"light"===o.mode?o.colors.grayScale.gray2:n(o.colors.accent.primaryLight,.5):"light"===o.mode?o.colors.grayScale.gray4:o.colors.grayScale.gray3),(({theme:o})=>o.colors.base.white)),d=e(o.ul).withConfig({displayName:"styled__BadgeSelectDropdownList",componentId:"sc-obte8v-2"})(["padding:0;margin:0;display:none;color:white;position:absolute;top:38px;left:0;transform-origin:top center;z-index:2;padding:8px;border:1px solid;border-radius:8px;border-color:",";background:",";backdrop-filter:blur(16px);"," flex-direction:column;gap:1px;"],(({theme:o})=>o.colors.grayScale.gray2),(({theme:o})=>n(o.colors.grayScale.gray4,.75)),(({$open:o})=>o&&r`
       display: flex;
-    `)),s=e.div.withConfig({displayName:"styled__BadgeSelectDropdownWrapper",componentId:"sc-obte8v-3"})(["position:relative;"]),l=e(t).attrs({size:16}).withConfig({displayName:"styled__BadgeSelectDropdownTogglerArrow",componentId:"sc-obte8v-4"})(["transform:",";pointer-events:none;transition:transform 0.2s ease-in-out;"],(({$open:o})=>!0===o?"rotateZ(-180deg)":"rotateZ(0)"));export{p as BadgeSelectDropdownList,i as BadgeSelectDropdownSpanStyled,l as BadgeSelectDropdownTogglerArrow,d as BadgeSelectDropdownTrigger,s as BadgeSelectDropdownWrapper};
+    `)),l=e.div.withConfig({displayName:"styled__BadgeSelectDropdownWrapper",componentId:"sc-obte8v-3"})(["position:relative;"]),p=e(t).attrs({size:16}).withConfig({displayName:"styled__BadgeSelectDropdownTogglerArrow",componentId:"sc-obte8v-4"})(["transform:",";pointer-events:none;transition:transform 0.2s ease-in-out;"],(({$open:o})=>!0===o?"rotateZ(-180deg)":"rotateZ(0)"));export{d as BadgeSelectDropdownList,i as BadgeSelectDropdownSpanStyled,p as BadgeSelectDropdownTogglerArrow,s as BadgeSelectDropdownTrigger,l as BadgeSelectDropdownWrapper};

package/dist/components/button/styled.js

@@ -24,7 +24,7 @@ import{styled as a,css as r,keyframes as e}from"styled-components";const o=a=>e`
   100% {
     box-shadow: 0px 0px 0px 1px ${a} inset;
   }
-`,s=a.button.withConfig({displayName:"styled__ButtonStyled",componentId:"sc-1gc24ba-0"})(["display:inline-flex;justify-content:center;align-items:center;gap:10px;border:none;cursor:",";"," "," "," "," "," "," "," "," transition:background 0.3s ease-out,opacity 0.3s ease-out,box-shadow 0.2s ease-in-out,transform 0.3s ease-out;"],(({$disabled:a,$skeleton:r,$variant:e})=>a?"not-allowed":r?"progress":"help"===e?"help":"pointer"),(({theme:a,$disabled:e,$variant:s,$skeleton:n,$color:c})=>{switch(s){case"primary":return r`
+`,s=a.button.withConfig({displayName:"styled__ButtonStyled",componentId:"sc-1gc24ba-0"})(["display:inline-flex;justify-content:center;align-items:center;gap:10px;border:none;cursor:",";"," "," "," "," "," "," "," "," transition:background-color 0.3s ease-out,opacity 0.3s ease-out,box-shadow 0.2s ease-in-out,transform 0.3s ease-out;"],(({$disabled:a,$skeleton:r,$variant:e})=>a?"not-allowed":r?"progress":"help"===e?"help":"pointer"),(({theme:a,$disabled:e,$variant:s,$skeleton:n,$color:c})=>{switch(s){case"primary":return r`
           background: ${null!=c?c:e||n?a.default.colors.grayScale.gray2:a.colors.accent.primary};
           box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
           opacity: 1;
@@ -170,7 +170,7 @@ import{styled as a,css as r,keyframes as e}from"styled-components";const o=a=>e`
           fill: ${a.colors.base.black};
         }
       }
-    `)),n=a.span.withConfig({displayName:"styled__ButtonText",componentId:"sc-1gc24ba-1"})(["display:inline-flex;width:auto;font-weight:500;transition:color 0.3s ease-out;color:",";",""],(({theme:a,$variant:r,$disabled:e})=>{if(e)return a.colors.grayScale.gray1;switch(r){case"primary":case"primary-transparent":return a.default.colors.base.white;case"primary-outline":return"light"===a.mode?a.default.colors.base.black:a.colors.base.white;default:return a.colors.base.white}}),(({$size:a})=>"md"===a?r`
+    `)),n=a.span.withConfig({displayName:"styled__ButtonText",componentId:"sc-1gc24ba-1"})(["display:inline-flex;width:auto;font-weight:500;transition:color 0.3s ease-out;color:",";",""],(({theme:a,$variant:r,$disabled:e})=>{if(e)return a.colors.grayScale.gray1;if("custom"===a.scheme)return a.colors.custom.interface.text;switch(r){case"primary":case"primary-transparent":return a.bright?"dark"===a.mode?a.colors.base.black:a.colors.base.white:a.default.colors.base.white;case"primary-outline":return"light"===a.mode?a.default.colors.base.black:a.colors.base.white;default:return a.colors.base.white}}),(({$size:a})=>"md"===a?r`
           font-size: 18px;
         `:r`
           font-size: 15px;

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,8 @@
+export type ColorPickerChangeEventHandler = (color: string) => unknown;
+export interface ColorPickerProps {
+    label?: string;
+    preview?: boolean;
+    color?: string;
+    onChange?: ColorPickerChangeEventHandler;
+}
+export declare const ColorPicker: React.FC<ColorPickerProps>;

package/dist/components/color-picker/index.js

@@ -0,0 +1 @@
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useRef as o,useState as n,useCallback as l}from"react";import{ColorPickerStyled as t,ColorPickerLabel as c,ColorPickerBottom as i,ColorPickerHex as m,ColorPickerPreview as a}from"./styled.js";import{ColorPickerMenu as s}from"./menu/index.js";const d=({label:d,preview:f=!0,color:p="#1c64f2",onChange:h})=>{const u=o(null),[C,g]=n(!1),j=l((r=>{null==h||h(r)}),[]);return r(t,{ref:u,children:[d&&e(c,{children:d}),r(i,{$active:C,onClick:()=>g(!C),children:[e(m,{children:p}),f&&e(a,{style:{backgroundColor:p}})]}),C&&e(s,{color:p,parentRef:u,onChange:j,onClose:()=>g(!1)})]})};export{d as ColorPicker};

package/dist/components/color-picker/menu/index.d.ts

@@ -0,0 +1,9 @@
+export type ColorPickerMenuChangeEventHandler = (hex: string) => unknown;
+export type ColorPickerMenuEventHandler = () => unknown;
+export interface ColorPickerMenuProps {
+    color?: string;
+    parentRef?: React.MutableRefObject<HTMLDivElement | null>;
+    onChange?: ColorPickerMenuChangeEventHandler;
+    onClose?: ColorPickerMenuEventHandler;
+}
+export declare const ColorPickerMenu: React.FC<ColorPickerMenuProps>;

package/dist/components/color-picker/menu/index.js

@@ -0,0 +1 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as n,useRef as o,useCallback as r,useEffect as i}from"react";import{ColorPickerMenuStyled as l,ColorPickerMenuHeader as c,ColorPickerMenuHeaderLeft as u,ColorPickerMenuHeaderHexCodeInput as s,ColorPickerMenuPreview as d,ColorPickerMenuCloseButton as a,ColorPickerMenuArea as m,ColorPickerMenuSelector as h,ColorPickerMenuHueSlider as v}from"./styled.js";import"../../../theme/index.js";import{hexToRgb as p}from"../../../utils/colors/hexToRgb.js";import{hsvToRgb as f}from"../../../utils/colors/hsvToRgb.js";import{rgbToHex as g}from"../../../utils/colors/rgbToHex.js";import{rgbToHsv as w}from"../../../utils/colors/rgbToHsv.js";import{useTheme as M}from"../../../theme/hook.js";const C=({color:C,parentRef:j,onChange:x,onClose:b})=>{const k=M(),[E,y]=n(180),[L,R]=n(100),[$,B]=n(100),[T,D]=n((null!=C?C:k.colors.accent.primary).toUpperCase()),[X,F]=n(!1),H=o(!0),U=o(null),A=o(null),I=r((t=>{if(!U.current)return;const e=U.current.getBoundingClientRect(),{width:n}=e,o=t.clientX-e.left,r=Math.max(0,Math.min(359,Math.round(o/n*360)));y(r)}),[]),W=r((t=>{if(!A.current)return;const e=A.current.getBoundingClientRect(),{width:n,height:o}=e,r=t.clientX-e.left,i=t.clientY-e.top,l=Math.max(0,Math.min(100,Math.round(r/n*100))),c=Math.max(0,Math.min(100,Math.round(100-i/o*100)));R(l),B(c)}),[]),Y=r(((t,e)=>{e(t);const n=t=>{e(t)},o=()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",o)}),[]),q=r((t=>{var e;H.current||(null===(e=null==j?void 0:j.current)||void 0===e?void 0:e.contains(t.target))||null==b||b()}),[]),z=r((t=>{const e=t.target.value.toUpperCase();if(/^#[\dABCDEF]{0,6}$/.test(e)){if(7===e.length){const t=p(e),[n,o,r]=w(t);return y(n),R(o),void B(r)}D(e)}}),[]),G=r((()=>{D("#")}),[]);i((()=>{var t,e,n;const o=null===(e=null===(t=null==j?void 0:j.current)||void 0===t?void 0:t.getBoundingClientRect)||void 0===e?void 0:e.call(t);window.innerWidth-(null!==(n=null==o?void 0:o.right)&&void 0!==n?n:0)<=250?F(!0):F(!1)}),[]),i((()=>{if(!H.current||!C)return;const t=p(C),[e,n,o]=w(t);y(e),R(n),B(o)}),[]),i((()=>{if(H.current)return void(H.current=!1);const t=f([E,L,$]),e=g(t);D(e),null==x||x(e)}),[E,L,$]),i((()=>(window.addEventListener("click",q),()=>{window.removeEventListener("click",q)})),[]);const J=`hsl(${E}, 100%, 50%)`,K=E/360*100+"%",N=`${L}%`,O=100-$+"%";return t(l,{$centeredX:X,children:[t(c,{children:[t(u,{children:[e(s,{value:T,onInput:z,onFocus:G}),e(d,{style:{backgroundColor:T}})]}),e(a,{onClick:b})]}),e(m,{ref:A,style:{background:`\n          linear-gradient(to right, white, ${J}), \n          linear-gradient(to top, black, transparent)\n        `},onMouseDown:t=>Y(t,W),children:e(h,{style:{top:O,left:N}})}),e(v,{ref:U,onMouseDown:t=>Y(t,I),children:e(h,{style:{top:"50%",left:K}})})]})};export{C as ColorPickerMenu};