@companix/uikit 0.0.93 → 0.0.95

package/dist/DropArea/DropArea.scss

@@ -0,0 +1,117 @@
+@use '../mixins.scss';
+
+.drop-area {
+  z-index: 2;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  @include mixins.use-styles(drop-area);
+
+  &-hidden {
+    display: none;
+  }
+}
+
+.drop-target {
+  --margin: 12px;
+
+  position: relative;
+  width: calc(100% - var(--margin) * 2);
+  height: calc(100% - var(--margin) * 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--margin);
+  -webkit-transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
+
+  &-area {
+    pointer-events: none;
+    display: grid;
+    grid-template: 'icon' 56px 'info' auto/auto;
+    grid-gap: var(--margin);
+  }
+
+  &-icon {
+    grid-area: icon;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s ease;
+
+    @include mixins.use-styles(drop-target, icon);
+
+    svg {
+      @include mixins.use-size(drop-target, icon, size);
+    }
+  }
+
+  &-info {
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-title {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 24px;
+    transition: color 0.2s ease;
+  }
+
+  &-text {
+    margin-top: 8px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    text-align: center;
+    white-space: pre-wrap;
+
+    @include mixins.use-styles(drop-target, text);
+  }
+
+  &-border {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 8px;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &-border rect {
+    fill: none;
+    stroke-width: 2.5;
+    stroke-dasharray: 6.5;
+    transition: stroke 0.2s ease, stroke-width 0.2s ease;
+
+    @include mixins.use-styles(drop-target, rect);
+  }
+
+  &-hovered {
+    rect {
+      stroke-width: 4.5;
+      @include mixins.use-styles(drop-target, hovered, rect);
+    }
+
+    .drop-target-title,
+    .drop-target-icon {
+      @include mixins.use-styles(drop-target, hovered);
+    }
+  }
+
+  & + & {
+    margin-top: 0;
+  }
+}

package/dist/DropArea/index.d.ts

@@ -0,0 +1,14 @@
+export interface DropTargetProps {
+    title: string;
+    text?: string;
+    icon: React.ReactNode;
+    onDrop: (e: React.DragEvent<HTMLDivElement>) => void;
+}
+export interface DropAreaProps extends Omit<DropTargetProps, 'onDrop'> {
+    onFilesAdd: (files: File[]) => void;
+}
+export declare const DropArea: ({ onFilesAdd, ...props }: DropAreaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DropAreaProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useDragEnter: () => (event: React.DragEvent<HTMLDivElement>) => void;

package/dist/bundle.es.js

@@ -8,17 +8,17 @@ import { ImitateScroll as S } from "./bundle.es8.js";
 import { Segments as D } from "./bundle.es9.js";
 import { Popover as h } from "./bundle.es10.js";
 import { Tooltip as T } from "./bundle.es11.js";
-import { Select as y } from "./bundle.es12.js";
-import { SelectTags as P } from "./bundle.es13.js";
-import { Input as b } from "./bundle.es14.js";
-import { OptionItem as B } from "./bundle.es15.js";
+import { Select as P } from "./bundle.es12.js";
+import { SelectTags as y } from "./bundle.es13.js";
+import { Input as O } from "./bundle.es14.js";
+import { OptionItem as b } from "./bundle.es15.js";
 import { NumberInput as I } from "./bundle.es16.js";
 import { OptionsList as C } from "./bundle.es17.js";
 import { Checkbox as w } from "./bundle.es18.js";
 import { Switch as W } from "./bundle.es19.js";
 import { Radio as F, RadioGroup as N } from "./bundle.es20.js";
-import { Drawer as j } from "./bundle.es21.js";
-import { Dialog as E } from "./bundle.es22.js";
+import { Drawer as E } from "./bundle.es21.js";
+import { Dialog as q } from "./bundle.es22.js";
 import { AlertDialog as J } from "./bundle.es23.js";
 import { LoadingButton as Q } from "./bundle.es24.js";
 import { Tabs as V } from "./bundle.es25.js";
@@ -35,20 +35,21 @@ import { Skeleton as ur } from "./bundle.es35.js";
 import { Blank as gr } from "./bundle.es36.js";
 import { ProgressRing as dr } from "./bundle.es37.js";
 import { WriteBar as kr } from "./bundle.es38.js";
-import { ThemeProvider as Or, useTheme as Pr } from "./bundle.es39.js";
-import { ColorSchemeScript as br, colorSchemeScript as vr } from "./bundle.es40.js";
-import { useLocalStorage as Ar } from "./bundle.es41.js";
-import { useBooleanState as Mr } from "./bundle.es42.js";
-import { useResizeTextarea as Lr } from "./bundle.es43.js";
-import { useLoading as Gr } from "./bundle.es44.js";
-import { createAlertAgent as zr } from "./bundle.es45.js";
-import { createToaster as Nr } from "./bundle.es46.js";
-import { Toast as jr } from "./bundle.es47.js";
-import { DialogShell as Er, DrawerShell as Hr, createPopupRegistry as Jr } from "./bundle.es48.js";
-import { createPopoversRegistry as Qr } from "./bundle.es49.js";
-import { createScope as Vr, createStaticScope as Xr } from "./bundle.es50.js";
-import { RemoveListener as _r } from "./bundle.es51.js";
-import { MONDAY as re, addMonths as ee, createDayDisableChecker as oe, endOfDay as te, endOfWeek as pe, isDayMinMaxRestricted as me, isSameDate as ae, setMonth as fe, setYear as xe, startOfDay as ie, startOfWeek as se, subMonths as ne, useDayDisableCheker as ce } from "./bundle.es52.js";
+import { DropArea as vr, DropAreaProvider as yr, useDragEnter as Ar } from "./bundle.es39.js";
+import { ThemeProvider as Rr, useTheme as br } from "./bundle.es40.js";
+import { ColorSchemeScript as Ir, colorSchemeScript as Mr } from "./bundle.es41.js";
+import { useLocalStorage as Lr } from "./bundle.es42.js";
+import { useBooleanState as Gr } from "./bundle.es43.js";
+import { useResizeTextarea as zr } from "./bundle.es44.js";
+import { useLoading as Nr } from "./bundle.es45.js";
+import { createAlertAgent as Er } from "./bundle.es46.js";
+import { createToaster as qr } from "./bundle.es47.js";
+import { Toast as Jr } from "./bundle.es48.js";
+import { DialogShell as Qr, DrawerShell as Ur, createPopupRegistry as Vr } from "./bundle.es49.js";
+import { createPopoversRegistry as Zr } from "./bundle.es50.js";
+import { createScope as $r, createStaticScope as re } from "./bundle.es51.js";
+import { RemoveListener as oe } from "./bundle.es52.js";
+import { MONDAY as pe, addMonths as me, createDayDisableChecker as ae, endOfDay as fe, endOfWeek as xe, isDayMinMaxRestricted as ie, isSameDate as se, setMonth as ne, setYear as ce, startOfDay as le, startOfWeek as Se, subMonths as ue, useDayDisableCheker as De } from "./bundle.es53.js";
 export {
   J as AlertDialog,
   o as Avatar,
@@ -56,67 +57,70 @@ export {
   a as Button,
   x as ButtonGroup,
   w as Checkbox,
-  br as ColorSchemeScript,
+  Ir as ColorSchemeScript,
   Z as Countdown,
   tr as DateInput,
   er as DatePicker,
-  E as Dialog,
-  Er as DialogShell,
-  j as Drawer,
-  Hr as DrawerShell,
+  q as Dialog,
+  Qr as DialogShell,
+  E as Drawer,
+  Ur as DrawerShell,
+  vr as DropArea,
+  yr as DropAreaProvider,
   mr as FileOverlay,
   fr as FormGroup,
   nr as Icon,
   S as ImitateScroll,
-  b as Input,
+  O as Input,
   Q as LoadingButton,
-  re as MONDAY,
+  pe as MONDAY,
   I as NumberInput,
-  B as OptionItem,
+  b as OptionItem,
   C as OptionsList,
   h as Popover,
   lr as ProgressBar,
   dr as ProgressRing,
   F as Radio,
   N as RadioGroup,
-  _r as RemoveListener,
+  oe as RemoveListener,
   c as Scrollable,
   D as Segments,
-  y as Select,
-  P as SelectTags,
+  P as Select,
+  y as SelectTags,
   ur as Skeleton,
   s as Spinner,
   W as Switch,
   V as Tabs,
   $ as TextArea,
-  Or as ThemeProvider,
+  Rr as ThemeProvider,
   ir as TimePicker,
-  jr as Toast,
+  Jr as Toast,
   T as Tooltip,
   kr as WriteBar,
-  ee as addMonths,
+  me as addMonths,
   p as avatarSizes,
-  vr as colorSchemeScript,
-  zr as createAlertAgent,
-  oe as createDayDisableChecker,
-  Qr as createPopoversRegistry,
-  Jr as createPopupRegistry,
-  Vr as createScope,
-  Xr as createStaticScope,
-  Nr as createToaster,
-  te as endOfDay,
-  pe as endOfWeek,
-  me as isDayMinMaxRestricted,
-  ae as isSameDate,
-  fe as setMonth,
-  xe as setYear,
-  ie as startOfDay,
-  se as startOfWeek,
-  ne as subMonths,
-  Mr as useBooleanState,
-  ce as useDayDisableCheker,
-  Gr as useLoading,
-  Ar as useLocalStorage,
-  Lr as useResizeTextarea,
-  Pr as useTheme
+  Mr as colorSchemeScript,
+  Er as createAlertAgent,
+  ae as createDayDisableChecker,
+  Zr as createPopoversRegistry,
+  Vr as createPopupRegistry,
+  $r as createScope,
+  re as createStaticScope,
+  qr as createToaster,
+  fe as endOfDay,
+  xe as endOfWeek,
+  ie as isDayMinMaxRestricted,
+  se as isSameDate,
+  ne as setMonth,
+  ce as setYear,
+  le as startOfDay,
+  Se as startOfWeek,
+  ue as subMonths,
+  Gr as useBooleanState,
+  De as useDayDisableCheker,
+  Ar as useDragEnter,
+  Nr as useLoading,
+  Lr as useLocalStorage,
+  zr as useResizeTextarea,
+  br 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.es55.js";
-import { SelectInput as H } from "./bundle.es56.js";
-import { useScrollListController as M } from "./bundle.es57.js";
-import { OptionsPopover as N } from "./bundle.es58.js";
+import { useFroozeClosing as w } from "./bundle.es56.js";
+import { SelectInput as H } from "./bundle.es57.js";
+import { useScrollListController as M } from "./bundle.es58.js";
+import { OptionsPopover as N } from "./bundle.es59.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.es55.js";
+import { useFroozeClosing as B } from "./bundle.es56.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.es58.js";
-import { arrays as v } from "./bundle.es59.js";
+import { OptionsPopover as H } from "./bundle.es59.js";
+import { arrays as v } from "./bundle.es60.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.es60.js";
-import { InputContainer as I } from "./bundle.es61.js";
+import { InputElement as x } from "./bundle.es61.js";
+import { InputContainer as I } from "./bundle.es62.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.es61.js";
+import { InputContainer as F } from "./bundle.es62.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.es53.js";
+import { getInitialsFontSize as h } from "./bundle.es54.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.es51.js";
+import { RemoveListener as f } from "./bundle.es52.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.es51.js";
+import { RemoveListener as v } from "./bundle.es52.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.es51.js";
+import { RemoveListener as N } from "./bundle.es52.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.es44.js";
+import { useLoading as p } from "./bundle.es45.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.es54.js";
+import { useTabSlider as b, makeTabId as l } from "./bundle.es55.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,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import u from "classnames";
-import { useResizeTextarea as z } from "./bundle.es43.js";
+import { useResizeTextarea as z } from "./bundle.es44.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";

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.es62.js";
-import { useDayDisableCheker as N } from "./bundle.es52.js";
+import { Calendar as E } from "./bundle.es63.js";
+import { useDayDisableCheker as N } from "./bundle.es53.js";
 import { getNum as h, formatTime as v } from "@companix/utils-js";
-import { removeDigits as O } from "./bundle.es59.js";
-import { SelectRightElements as Y } from "./bundle.es63.js";
+import { removeDigits as O } from "./bundle.es60.js";
+import { SelectRightElements as Y } from "./bundle.es64.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.es59.js";
-import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es64.js";
+import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es60.js";
+import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es65.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.es59.js";
-import { SelectRightElements as z } from "./bundle.es63.js";
+import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es60.js";
+import { SelectRightElements as z } from "./bundle.es64.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.es53.js";
+import { getInitialsFontSize as l } from "./bundle.es54.js";
 import { clamp as i, customCSS as m, px as n } from "@companix/utils-browser";
 const u = ({
   appearance: o = "primary",

package/dist/bundle.es38.js

@@ -1,41 +1,42 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import m from "classnames";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import d from "classnames";
 import { Spinner as F } from "./bundle.es6.js";
 import { Icon as G } from "./bundle.es33.js";
-import { useResizeTextarea as H } from "./bundle.es43.js";
+import { useResizeTextarea as H } from "./bundle.es44.js";
 import { callMultiple as J, attr as K } from "@companix/utils-browser";
 import { mergeRefs as L } from "react-merge-refs";
-const O = ({
+import { useEffect as O } from "react";
+const P = ({
   // WriteBarProps
   before: r,
-  inlineAfter: o,
+  inlineAfter: s,
   after: i,
   onHeightChange: t,
-  shadow: s = !1,
+  shadow: m = !1,
   containerRef: a,
-  attachbar: c,
-  contentClassName: d,
+  attachbar: f,
+  contentClassName: l,
   // textarea props
-  textareaRef: l,
-  autoComplete: f,
-  cols: p,
-  dirName: P,
-  disabled: h,
-  maxLength: x,
-  minLength: b,
-  name: u,
-  placeholder: w,
-  readOnly: N,
-  required: v,
-  value: z,
-  wrap: R,
-  rows: g,
-  onChange: j,
-  onFocus: B,
-  onBlur: I,
-  id: T,
-  inputMode: A,
-  defaultValue: C,
+  textareaRef: p,
+  autoComplete: h,
+  cols: x,
+  dirName: Q,
+  disabled: b,
+  maxLength: u,
+  minLength: w,
+  name: N,
+  placeholder: z,
+  readOnly: v,
+  required: R,
+  value: n,
+  wrap: g,
+  rows: j,
+  onChange: B,
+  onFocus: I,
+  onBlur: T,
+  id: A,
+  inputMode: C,
+  defaultValue: E,
   autoFocus: M,
   tabIndex: S,
   spellCheck: W,
@@ -43,33 +44,33 @@ const O = ({
   onKeyDown: q,
   ...y
 }) => {
-  const [D, E] = H(t, !0);
-  return /* @__PURE__ */ n("div", { ref: a, ...y, className: m("write-bar", k), children: [
-    c,
-    /* @__PURE__ */ n("div", { className: m("write-bar-content", d), children: [
+  const [D, o] = H(t, !0);
+  return O(o, [o, n]), /* @__PURE__ */ c("div", { ref: a, ...y, className: d("write-bar", k), children: [
+    f,
+    /* @__PURE__ */ c("div", { className: d("write-bar-content", l), children: [
       r && /* @__PURE__ */ e("div", { className: "write-bar-before", children: r }),
       /* @__PURE__ */ e("div", { className: "write-bar-form", children: /* @__PURE__ */ e(
         "textarea",
         {
-          ref: L([l, D]),
-          id: T,
-          onChange: J(j, E),
-          autoComplete: f,
-          cols: p,
-          disabled: h,
-          maxLength: x,
-          minLength: b,
-          name: u,
-          placeholder: w,
-          readOnly: N,
-          required: v,
-          value: z,
-          wrap: R,
-          rows: g,
-          onFocus: B,
-          onBlur: I,
-          inputMode: A,
-          defaultValue: C,
+          ref: L([p, D]),
+          id: A,
+          onChange: J(B, o),
+          autoComplete: h,
+          cols: x,
+          disabled: b,
+          maxLength: u,
+          minLength: w,
+          name: N,
+          placeholder: z,
+          readOnly: v,
+          required: R,
+          value: n,
+          wrap: g,
+          rows: j,
+          onFocus: I,
+          onBlur: T,
+          inputMode: C,
+          defaultValue: E,
           autoFocus: M,
           tabIndex: S,
           spellCheck: W,
@@ -80,12 +81,12 @@ const O = ({
     ] })
   ] });
 };
-O.IconButton = ({
+P.IconButton = ({
   Component: r = "button",
-  icon: o,
+  icon: s,
   mode: i,
   onClick: t,
-  isLoading: s,
+  isLoading: m,
   isHidden: a
 }) => /* @__PURE__ */ e(
   r,
@@ -94,9 +95,9 @@ O.IconButton = ({
     className: "write-bar-icon",
     "data-mode": i,
     "data-hidden": K(a),
-    children: s ? /* @__PURE__ */ e(F, { size: 18 }) : /* @__PURE__ */ e(G, { icon: o, size: "xxs" })
+    children: m ? /* @__PURE__ */ e(F, { size: 18 }) : /* @__PURE__ */ e(G, { icon: s, size: "xxs" })
   }
 );
 export {
-  O as WriteBar
+  P as WriteBar
 };