@companix/uikit 0.0.84 → 0.0.86

package/dist/TextArea/index.d.ts

@@ -4,4 +4,4 @@ export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     fill?: boolean;
     textAreaRef?: React.Ref<HTMLTextAreaElement>;
 }
-export declare const TextArea: ({ onResize, grow, value, onChange, disabled, required, rows, fill, textAreaRef, ...textAreaProps }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextArea: ({ onResize, grow, value, onChange, disabled, required, rows, fill, textAreaRef, className, ...textAreaProps }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/WriteBar/WireBar.scss

@@ -0,0 +1,119 @@
+@use '../mixins.scss';
+
+.write-bar {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+
+  @include mixins.use-styles(write-bar);
+
+  &-content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 0 6px;
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+    align-items: flex-end;
+    position: relative;
+  }
+
+  &-form {
+    position: relative;
+    display: flex;
+    flex: 1;
+    min-inline-size: 0;
+
+    textarea {
+      box-sizing: border-box;
+      flex: 1;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      resize: none;
+      background: transparent;
+      border: 0;
+      height: 56px;
+      max-height: 280px;
+      padding: 16px 12px;
+      width: 100%;
+      min-width: 0;
+
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &::-webkit-scrollbar-corner {
+        visibility: hidden;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        visibility: hidden;
+      }
+
+      &::placeholder {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        opacity: 1;
+
+        @include mixins.use-styles(write-bar, placeholder);
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  &-icon {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    position: relative;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    opacity: 0.72;
+    height: 56px;
+    min-width: 44px;
+    width: 44px;
+    transition: all 150ms;
+
+    &[data-hidden] {
+      transform: scale(0);
+    }
+
+    &[data-mode='attach'] {
+      @include mixins.use-styles(write-bar, icon, attach);
+    }
+
+    &[data-mode='send'] {
+      @include mixins.use-styles(write-bar, icon, send);
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+
+    svg {
+      height: 22px;
+      width: 20px;
+    }
+  }
+}

package/dist/WriteBar/index.d.ts

@@ -0,0 +1,24 @@
+import { IconDefinition } from '../Icon';
+export interface WriteBarProps extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'autoComplete' | 'cols' | 'dirName' | 'disabled' | 'maxLength' | 'minLength' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'rows' | 'value' | 'wrap' | 'onChange' | 'onFocus' | 'onBlur'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur'> {
+    containerRef?: React.Ref<HTMLDivElement>;
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+    before?: React.ReactNode;
+    inlineAfter?: React.ReactNode;
+    after?: React.ReactNode;
+    onHeightChange?: VoidFunction;
+    shadow?: boolean;
+    header?: React.ReactNode;
+    children?: never;
+}
+export declare const WriteBar: {
+    ({ before, inlineAfter, after, onHeightChange, shadow, containerRef, header, textareaRef, autoComplete, cols, dirName, disabled, maxLength, minLength, name, placeholder, readOnly, required, value, wrap, rows, onChange, onFocus, onBlur, id, inputMode, defaultValue, autoFocus, tabIndex, spellCheck, ...restProps }: WriteBarProps): import("react/jsx-runtime").JSX.Element;
+    IconButton({ icon, mode, onClick, isLoading, isHidden }: WriteBarIconProps): import("react/jsx-runtime").JSX.Element;
+};
+interface WriteBarIconProps {
+    icon: IconDefinition;
+    onClick?: () => void;
+    mode: 'send' | 'attach';
+    isLoading?: boolean;
+    isHidden?: boolean;
+}
+export {};

package/dist/bundle.es.js

@@ -4,99 +4,105 @@ import { Button as x } from "./bundle.es4.js";
 import { ButtonGroup as a } from "./bundle.es5.js";
 import { Spinner as l } from "./bundle.es6.js";
 import { Scrollable as n } from "./bundle.es7.js";
-import { ImitateScroll as s } from "./bundle.es8.js";
+import { ImitateScroll as S } from "./bundle.es8.js";
 import { Segments as g } from "./bundle.es9.js";
 import { Popover as h } from "./bundle.es10.js";
 import { Tooltip as v } from "./bundle.es11.js";
-import { Select as B } from "./bundle.es12.js";
-import { SelectTags as R } from "./bundle.es13.js";
+import { Select as D } from "./bundle.es12.js";
+import { SelectTags as d } from "./bundle.es13.js";
 import { Input as k } from "./bundle.es14.js";
-import { OptionItem as b } from "./bundle.es15.js";
-import { NumberInput as L } from "./bundle.es16.js";
+import { OptionItem as L } from "./bundle.es15.js";
+import { NumberInput as w } from "./bundle.es16.js";
 import { OptionsList as C } from "./bundle.es17.js";
 import { Checkbox as O } from "./bundle.es18.js";
-import { Switch as z } from "./bundle.es19.js";
-import { Radio as j, RadioGroup as q } from "./bundle.es20.js";
-import { Drawer as H } from "./bundle.es21.js";
-import { Dialog as K } from "./bundle.es22.js";
-import { AlertDialog as Q } from "./bundle.es23.js";
-import { LoadingButton as V } from "./bundle.es24.js";
+import { Switch as F } from "./bundle.es19.js";
+import { Radio as W, RadioGroup as j } from "./bundle.es20.js";
+import { Drawer as E } from "./bundle.es21.js";
+import { Dialog as J } from "./bundle.es22.js";
+import { AlertDialog as M } from "./bundle.es23.js";
+import { LoadingButton as U } from "./bundle.es24.js";
 import { Tabs as X } from "./bundle.es25.js";
 import { Countdown as Z } from "./bundle.es26.js";
 import { TextArea as $ } from "./bundle.es27.js";
-import { DatePicker as ro } from "./bundle.es28.js";
-import { DateInput as to } from "./bundle.es29.js";
-import { FileOverlay as mo } from "./bundle.es30.js";
-import { FormGroup as fo } from "./bundle.es31.js";
-import { TimePicker as io } from "./bundle.es32.js";
-import { Icon as co } from "./bundle.es33.js";
-import { ProgressBar as So } from "./bundle.es34.js";
-import { Skeleton as uo } from "./bundle.es35.js";
-import { Blank as To } from "./bundle.es36.js";
-import { ProgressRing as Po } from "./bundle.es37.js";
-import { ThemeProvider as Do, useTheme as Bo } from "./bundle.es38.js";
-import { ColorSchemeScript as Ro, colorSchemeScript as ko } from "./bundle.es39.js";
-import { useLocalStorage as bo } from "./bundle.es40.js";
-import { useBooleanState as Lo } from "./bundle.es41.js";
-import { createAlertAgent as Co } from "./bundle.es42.js";
-import { createToaster as Oo } from "./bundle.es43.js";
-import { Toast as zo } from "./bundle.es44.js";
-import { DialogShell as jo, DrawerShell as qo, createPopupRegistry as Eo } from "./bundle.es45.js";
-import { createPopoversRegistry as Jo } from "./bundle.es46.js";
-import { createScope as Mo, createStaticScope as Qo } from "./bundle.es47.js";
-import { RemoveListener as Vo } from "./bundle.es48.js";
+import { DatePicker as or } from "./bundle.es28.js";
+import { DateInput as tr } from "./bundle.es29.js";
+import { FileOverlay as mr } from "./bundle.es30.js";
+import { FormGroup as fr } from "./bundle.es31.js";
+import { TimePicker as ir } from "./bundle.es32.js";
+import { Icon as cr } from "./bundle.es33.js";
+import { ProgressBar as sr } from "./bundle.es34.js";
+import { Skeleton as ur } from "./bundle.es35.js";
+import { Blank as Tr } from "./bundle.es36.js";
+import { ProgressRing as Pr } from "./bundle.es37.js";
+import { WriteBar as Br } from "./bundle.es38.js";
+import { ThemeProvider as Rr, useTheme as dr } from "./bundle.es39.js";
+import { ColorSchemeScript as kr, colorSchemeScript as Ar } from "./bundle.es40.js";
+import { useLocalStorage as br } from "./bundle.es41.js";
+import { useBooleanState as yr } from "./bundle.es42.js";
+import { useResizeTextarea as Gr } from "./bundle.es43.js";
+import { useLoading as zr } from "./bundle.es44.js";
+import { createAlertAgent as Nr } from "./bundle.es45.js";
+import { createToaster as jr } from "./bundle.es46.js";
+import { Toast as Er } from "./bundle.es47.js";
+import { DialogShell as Jr, DrawerShell as Kr, createPopupRegistry as Mr } from "./bundle.es48.js";
+import { createPopoversRegistry as Ur } from "./bundle.es49.js";
+import { createScope as Xr, createStaticScope as Yr } from "./bundle.es50.js";
+import { RemoveListener as _r } from "./bundle.es51.js";
 export {
-  Q as AlertDialog,
+  M as AlertDialog,
   e as Avatar,
-  To as Blank,
+  Tr as Blank,
   x as Button,
   a as ButtonGroup,
   O as Checkbox,
-  Ro as ColorSchemeScript,
+  kr as ColorSchemeScript,
   Z as Countdown,
-  to as DateInput,
-  ro as DatePicker,
-  K as Dialog,
-  jo as DialogShell,
-  H as Drawer,
-  qo as DrawerShell,
-  mo as FileOverlay,
-  fo as FormGroup,
-  co as Icon,
-  s as ImitateScroll,
+  tr as DateInput,
+  or as DatePicker,
+  J as Dialog,
+  Jr as DialogShell,
+  E as Drawer,
+  Kr as DrawerShell,
+  mr as FileOverlay,
+  fr as FormGroup,
+  cr as Icon,
+  S as ImitateScroll,
   k as Input,
-  V as LoadingButton,
-  L as NumberInput,
-  b as OptionItem,
+  U as LoadingButton,
+  w as NumberInput,
+  L as OptionItem,
   C as OptionsList,
   h as Popover,
-  So as ProgressBar,
-  Po as ProgressRing,
-  j as Radio,
-  q as RadioGroup,
-  Vo as RemoveListener,
+  sr as ProgressBar,
+  Pr as ProgressRing,
+  W as Radio,
+  j as RadioGroup,
+  _r as RemoveListener,
   n as Scrollable,
   g as Segments,
-  B as Select,
-  R as SelectTags,
-  uo as Skeleton,
+  D as Select,
+  d as SelectTags,
+  ur as Skeleton,
   l as Spinner,
-  z as Switch,
+  F as Switch,
   X as Tabs,
   $ as TextArea,
-  Do as ThemeProvider,
-  io as TimePicker,
-  zo as Toast,
+  Rr as ThemeProvider,
+  ir as TimePicker,
+  Er as Toast,
   v as Tooltip,
+  Br as WriteBar,
   p as avatarSizes,
-  ko as colorSchemeScript,
-  Co as createAlertAgent,
-  Jo as createPopoversRegistry,
-  Eo as createPopupRegistry,
-  Mo as createScope,
-  Qo as createStaticScope,
-  Oo as createToaster,
-  Lo as useBooleanState,
-  bo as useLocalStorage,
-  Bo as useTheme
+  Ar as colorSchemeScript,
+  Nr as createAlertAgent,
+  Ur as createPopoversRegistry,
+  Mr as createPopupRegistry,
+  Xr as createScope,
+  Yr as createStaticScope,
+  jr as createToaster,
+  yr as useBooleanState,
+  zr as useLoading,
+  br as useLocalStorage,
+  Gr as useResizeTextarea,
+  dr as useTheme
 };

package/dist/bundle.es12.js

@@ -1,10 +1,10 @@
 import { jsx as l } from "react/jsx-runtime";
 import { useRef as L, useMemo as j, useImperativeHandle as k } from "react";
 import { Popover as q } from "./bundle.es10.js";
-import { useFroozeClosing as w } from "./bundle.es51.js";
-import { SelectInput as H } from "./bundle.es52.js";
-import { useScrollListController as M } from "./bundle.es53.js";
-import { OptionsPopover as N } from "./bundle.es54.js";
+import { useFroozeClosing as w } from "./bundle.es54.js";
+import { SelectInput as H } from "./bundle.es55.js";
+import { useScrollListController as M } from "./bundle.es56.js";
+import { OptionsPopover as N } from "./bundle.es57.js";
 import { mergeRefs as W } from "react-merge-refs";
 const Z = (t) => {
   const {

package/dist/bundle.es13.js

@@ -3,12 +3,12 @@ import { mergeRefs as T } from "react-merge-refs";
 import { useState as M, useRef as h, useMemo as j } from "react";
 import { matchPattern as q } from "@companix/utils-js";
 import { faXmark as V, faChevronDown as $ } from "@companix/icons-solid";
-import { useFroozeClosing as B } from "./bundle.es51.js";
+import { useFroozeClosing as B } from "./bundle.es54.js";
 import { Popover as L } from "./bundle.es10.js";
 import { Icon as g } from "./bundle.es33.js";
 import { attr as l, getActiveElementByAnotherElement as X, contains as G } from "@companix/utils-browser";
-import { OptionsPopover as H } from "./bundle.es54.js";
-import { arrays as v } from "./bundle.es55.js";
+import { OptionsPopover as H } from "./bundle.es57.js";
+import { arrays as v } from "./bundle.es58.js";
 const ne = (r) => {
   const {
     closeAfterSelect: C,

package/dist/bundle.es14.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as b, useRef as R } from "react";
 import { mergeRefs as c } from "react-merge-refs";
-import { InputElement as x } from "./bundle.es56.js";
-import { InputContainer as I } from "./bundle.es57.js";
+import { InputElement as x } from "./bundle.es59.js";
+import { InputContainer as I } from "./bundle.es60.js";
 import g from "classnames";
 const N = b(
   ({

package/dist/bundle.es16.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import C from "classnames";
 import { forwardRef as j, useRef as w } from "react";
 import { mergeRefs as y } from "react-merge-refs";
-import { InputContainer as F } from "./bundle.es57.js";
+import { InputContainer as F } from "./bundle.es60.js";
 import { NumericFormat as V } from "react-number-format";
 const D = j(
   ({

package/dist/bundle.es2.js

@@ -1,6 +1,6 @@
 import { jsxs as I, jsx as a } from "react/jsx-runtime";
 import { box as g } from "@companix/utils-browser";
-import { getInitialsFontSize as h } from "./bundle.es49.js";
+import { getInitialsFontSize as h } from "./bundle.es52.js";
 const k = 24, y = ({
   alt: n,
   crossOrigin: i,

package/dist/bundle.es21.js

@@ -3,7 +3,7 @@ import d from "classnames";
 import * as e from "@radix-ui/react-dialog";
 import { VisuallyHidden as i } from "@radix-ui/react-visually-hidden";
 import { customCSS as p } from "@companix/utils-browser";
-import { RemoveListener as f } from "./bundle.es48.js";
+import { RemoveListener as f } from "./bundle.es51.js";
 const h = ({
   open: t,
   onClosed: l,

package/dist/bundle.es22.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import f from "classnames";
 import * as o from "@radix-ui/react-dialog";
 import { VisuallyHidden as a } from "@radix-ui/react-visually-hidden";
-import { RemoveListener as v } from "./bundle.es48.js";
+import { RemoveListener as v } from "./bundle.es51.js";
 const g = (l) => {
   const { size: n = "s", open: r, onOpenChange: s, children: c, onClosed: t, disableEsc: p, className: d } = l, m = (h) => {
     p && h.preventDefault();

package/dist/bundle.es23.js

@@ -1,7 +1,7 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-alert-dialog";
 import { Button as c } from "./bundle.es4.js";
-import { RemoveListener as N } from "./bundle.es48.js";
+import { RemoveListener as N } from "./bundle.es51.js";
 import { VisuallyHidden as u } from "@radix-ui/react-visually-hidden";
 const C = ({
   open: d,

package/dist/bundle.es24.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Button as m } from "./bundle.es4.js";
-import { useLoading as p } from "./bundle.es58.js";
+import { useLoading as p } from "./bundle.es44.js";
 const g = ({ onClick: o, appearance: r = "primary", ...i }) => {
   const { isLoading: n, isError: t, handleClick: a } = p({ onClick: o });
   return /* @__PURE__ */ e(

package/dist/bundle.es25.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as d } from "react/jsx-runtime";
-import { useTabSlider as b, makeTabId as l } from "./bundle.es50.js";
+import { useTabSlider as b, makeTabId as l } from "./bundle.es53.js";
 import * as n from "@radix-ui/react-tabs";
 import { useRef as m, useId as f, createContext as T, useContext as c } from "react";
 const o = T({ baseId: "", containerRef: {} }), u = ({ children: s, value: e, onChange: r }) => {

package/dist/bundle.es27.js

@@ -1,38 +1,40 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useResizeTextarea as x } from "./bundle.es59.js";
-import { attr as e, callMultiple as u } from "@companix/utils-browser";
-import { useEffect as z } from "react";
-import { mergeRefs as R } from "react-merge-refs";
-const q = ({
-  onResize: m,
-  grow: a = !1,
-  value: t,
-  onChange: s,
+import { jsx as m } from "react/jsx-runtime";
+import u from "classnames";
+import { useResizeTextarea as z } from "./bundle.es43.js";
+import { attr as e, callMultiple as R } from "@companix/utils-browser";
+import { useEffect as T } from "react";
+import { mergeRefs as g } from "react-merge-refs";
+const E = ({
+  onResize: f,
+  grow: t = !1,
+  value: a,
+  onChange: i,
   disabled: o,
-  required: i,
+  required: s,
   rows: l = 2,
   fill: p = !1,
   textAreaRef: c,
+  className: n,
   ...d
 }) => {
-  const [n, r] = x(m, a);
-  return z(r, [r, t]), /* @__PURE__ */ f(
+  const [x, r] = z(f, t);
+  return T(r, [r, a]), /* @__PURE__ */ m(
     "div",
     {
       className: "form form-textarea",
-      "data-required": e(i),
+      "data-required": e(s),
       "data-disabled": e(o),
       "data-fill": e(p),
-      children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ m(
         "textarea",
         {
-          className: "form-input",
-          "data-grow": e(a),
-          value: t,
-          ref: R([c, n]),
+          className: u("form-input", n),
+          "data-grow": e(t),
+          value: a,
+          ref: g([c, x]),
           rows: l,
           disabled: o,
-          onChange: u(s, r),
+          onChange: R(i, r),
           ...d
         }
       )
@@ -40,5 +42,5 @@ const q = ({
   );
 };
 export {
-  q as TextArea
+  E as TextArea
 };

package/dist/bundle.es28.js

@@ -2,11 +2,11 @@ import { jsx as u } from "react/jsx-runtime";
 import { Popover as T } from "./bundle.es10.js";
 import { Input as w } from "./bundle.es14.js";
 import { useState as A, useRef as j } from "react";
-import { Calendar as E } from "./bundle.es60.js";
-import { useDayDisableCheker as N } from "./bundle.es61.js";
+import { Calendar as E } from "./bundle.es61.js";
+import { useDayDisableCheker as N } from "./bundle.es62.js";
 import { getNum as h, formatTime as v } from "@companix/utils-js";
-import { removeDigits as O } from "./bundle.es55.js";
-import { SelectRightElements as Y } from "./bundle.es62.js";
+import { removeDigits as O } from "./bundle.es58.js";
+import { SelectRightElements as Y } from "./bundle.es63.js";
 const i = {
   char: "-",
   toString: (e) => {

package/dist/bundle.es29.js

@@ -1,8 +1,8 @@
 import { jsxs as D, jsx as h } from "react/jsx-runtime";
 import { useMemo as M, useEffect as C } from "react";
 import { Select as c } from "./bundle.es12.js";
-import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es55.js";
-import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es63.js";
+import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es58.js";
+import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es64.js";
 const B = ({
   min: o = j,
   max: e = N,

package/dist/bundle.es32.js

@@ -1,8 +1,8 @@
 import { jsx as g } from "react/jsx-runtime";
 import { useRef as b, useMemo as I, useState as E, useCallback as A } from "react";
 import { getNum as S } from "@companix/utils-js";
-import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es55.js";
-import { SelectRightElements as z } from "./bundle.es62.js";
+import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es58.js";
+import { SelectRightElements as z } from "./bundle.es63.js";
 import { Select as F } from "./bundle.es12.js";
 import { Input as G } from "./bundle.es14.js";
 const o = {

package/dist/bundle.es37.js

@@ -1,5 +1,5 @@
 import { jsxs as e, jsx as s } from "react/jsx-runtime";
-import { getInitialsFontSize as l } from "./bundle.es49.js";
+import { getInitialsFontSize as l } from "./bundle.es52.js";
 import { clamp as i, customCSS as m, px as n } from "@companix/utils-browser";
 const u = ({
   appearance: o = "primary",