@companix/uikit 0.1.14 → 0.1.16

package/dist/DrawerMobile/MobileDrawer.scss

@@ -0,0 +1,71 @@
+// Mobile drawer specific styles – placement and open/close animations come from Drawer.scss
+// (we reuse .drawer and .drawer-overlay classes + data-direction="bottom").
+
+.drawer-mobile {
+  touch-action: none;
+  will-change: transform;
+
+  &[data-animate='false'] {
+    animation: none !important;
+  }
+
+  // Extend the drawer's background below the viewport so that dampened
+  // over-drag past the top edge doesn't reveal a gap.
+  &::after {
+    content: '';
+    position: absolute;
+    background: inherit;
+    background-color: inherit;
+    top: 100%;
+    bottom: initial;
+    left: 0;
+    right: 0;
+    height: 200%;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    user-select: none;
+  }
+}
+
+.drawer-overlay {
+  &[data-animate='false'] {
+    animation: none !important;
+  }
+}
+
+// Handle visuals
+.drawer-handle {
+  display: block;
+  position: relative;
+  opacity: 0.7;
+  background: #e2e2e4;
+  margin-left: auto;
+  margin-right: auto;
+  height: 5px;
+  width: 32px;
+  border-radius: 1rem;
+  touch-action: pan-y;
+  margin-top: 8px;
+  margin-bottom: 8px;
+
+  &:hover,
+  &:active {
+    opacity: 1;
+  }
+}
+
+.drawer-handle-hitarea {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem); // 44px
+  height: max(100%, 2.75rem); // 44px
+  touch-action: inherit;
+
+  @media (pointer: fine) {
+    width: 100%;
+    height: 100%;
+  }
+}

package/dist/DrawerMobile/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const TRANSITIONS: {
+    DURATION: number;
+    EASE: number[];
+};
+export declare const VELOCITY_THRESHOLD = 0.4;
+export declare const CLOSE_THRESHOLD = 0.25;
+export declare const SCROLL_LOCK_TIMEOUT = 100;
+export declare const DRAG_CLASS = "drawer-dragging";
+export declare const WINDOW_TOP_OFFSET = 26;

package/dist/DrawerMobile/context.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+interface DrawerContextValue {
+    drawerRef: React.RefObject<HTMLDivElement>;
+    overlayRef: React.RefObject<HTMLDivElement>;
+    onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
+    onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
+    isOpen: boolean;
+    isDragging: boolean;
+    keyboardIsOpen: React.MutableRefObject<boolean>;
+    closeDrawer: () => void;
+    shouldAnimate: React.MutableRefObject<boolean>;
+    onClosed?: () => void;
+    disableEsc?: boolean;
+}
+export declare const DrawerContext: React.Context<DrawerContextValue>;
+export declare const useDrawerContext: () => DrawerContextValue;
+export {};

package/dist/DrawerMobile/helpers.d.ts

@@ -0,0 +1,13 @@
+interface Style {
+    [key: string]: string;
+}
+export declare function set(el: Element | HTMLElement | null | undefined, styles: Style, ignoreCache?: boolean): void;
+export declare function reset(el: Element | HTMLElement | null, prop?: string): void;
+export declare function getTranslate(element: HTMLElement): number | null;
+export declare function dampenValue(v: number): number;
+export declare function isInput(target: Element): boolean;
+export declare function isIOS(): boolean | undefined;
+export declare function isMobileFirefox(): boolean | undefined;
+type PossibleRef<T> = React.Ref<T> | undefined;
+export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+export {};

package/dist/DrawerMobile/index.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export interface MobileDrawerProps {
+    open: boolean;
+    onOpenChange: (value: boolean) => void;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    disableEsc?: boolean;
+    onClosed?: () => void;
+    size?: string;
+}
+export declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MobileDrawer: {
+    ({ children, size, ...props }: MobileDrawerProps): import("react/jsx-runtime").JSX.Element;
+    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/DrawerMobile/types.d.ts

@@ -0,0 +1,5 @@
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+export type MobileDrawerContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    size?: string;
+};
+export type MobileDrawerOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;

package/dist/DrawerMobile/use-prevent-scroll.d.ts

@@ -0,0 +1,5 @@
+interface PreventScrollOptions {
+    isDisabled?: boolean;
+}
+export declare function usePreventScroll(options?: PreventScrollOptions): void;
+export {};

package/dist/Popup/index.d.ts

@@ -6,10 +6,12 @@ export interface PopupLayotProps {
     defaultOpen?: boolean;
     disableEsc?: boolean;
     onClosed?: () => void;
-    overlay?: React.HTMLAttributes<HTMLDivElement>;
-    content?: React.HTMLAttributes<HTMLDivElement> & {
+    overlay?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
+    overlayRef?: React.Ref<HTMLDivElement>;
+    content?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
         [data: `data-${string}`]: string | undefined;
     };
+    contentRef?: React.Ref<HTMLDivElement>;
 }
 export declare const PopupLayout: {
     (props: PopupLayotProps): import("react/jsx-runtime").JSX.Element;

package/dist/Scrollable/Scrollable.scss

@@ -45,11 +45,6 @@
   border-top-width: calc(var(--thumb-padding) * 2);
 }
 
-.hidden-scroll {
-  overflow-y: scroll;
-  height: 100%;
-}
-
 .hidden-scroll::-webkit-scrollbar {
   display: none;
 }

package/dist/__helpers/createPopupRegistry.d.ts

@@ -1,5 +1,6 @@
 import { DialogProps } from '../Dialog';
 import { DrawerProps } from '../Drawer';
+import { MobileDrawerProps } from '..';
 export interface PopupProps<T> {
     data: T;
     close: () => void;
@@ -33,4 +34,7 @@ export declare const DialogShell: ({ children, ...props }: DialogShellProps) =>
 interface DrawerShellProps extends Omit<DrawerProps, 'open' | 'onOpenChange' | 'onClosed'> {
 }
 export declare const DrawerShell: ({ children, ...props }: DrawerShellProps) => import("react/jsx-runtime").JSX.Element;
+interface MobileDrawerShellProps extends Omit<MobileDrawerProps, 'open' | 'onOpenChange' | 'onClosed'> {
+}
+export declare const MobileDrawerShell: ({ children, ...props }: MobileDrawerShellProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/bundle.es.js

@@ -1,141 +1,144 @@
 import { Avatar as o } from "./bundle.es2.js";
 import { avatarSizes as p } from "./bundle.es3.js";
-import { getBadgeIconSizeByImageBaseSize as a, getFallbackIconSizeByImageBaseSize as x, getInitialsFontSize as f } from "./bundle.es4.js";
+import { getBadgeIconSizeByImageBaseSize as m, getFallbackIconSizeByImageBaseSize as x, getInitialsFontSize as f } from "./bundle.es4.js";
 import { Button as s } from "./bundle.es5.js";
-import { ButtonGroup as l } from "./bundle.es6.js";
+import { ButtonGroup as n } from "./bundle.es6.js";
 import { Spinner as S } from "./bundle.es7.js";
 import { Scrollable as g } from "./bundle.es8.js";
 import { ImitateScroll as d } from "./bundle.es9.js";
 import { Segments as P } from "./bundle.es10.js";
-import { Popover as y } from "./bundle.es11.js";
-import { Tooltip as T } from "./bundle.es12.js";
-import { Select as v } from "./bundle.es13.js";
-import { SelectTags as A } from "./bundle.es14.js";
-import { Input as R } from "./bundle.es15.js";
-import { OptionItem as L } from "./bundle.es16.js";
-import { NumberInput as C } from "./bundle.es17.js";
+import { Popover as b } from "./bundle.es11.js";
+import { Tooltip as I } from "./bundle.es12.js";
+import { Select as k } from "./bundle.es13.js";
+import { SelectTags as w } from "./bundle.es14.js";
+import { Input as M } from "./bundle.es15.js";
+import { OptionItem as R } from "./bundle.es16.js";
+import { NumberInput as L } from "./bundle.es17.js";
 import { OptionsList as F } from "./bundle.es18.js";
 import { Checkbox as G } from "./bundle.es19.js";
 import { Switch as E } from "./bundle.es20.js";
 import { Radio as j, RadioGroup as q } from "./bundle.es21.js";
 import { Drawer as J } from "./bundle.es22.js";
-import { Dialog as Q } from "./bundle.es23.js";
-import { PopupLayout as V } from "./bundle.es24.js";
-import { AlertDialog as Z } from "./bundle.es25.js";
-import { LoadingButton as $ } from "./bundle.es26.js";
-import { Tabs as re } from "./bundle.es27.js";
-import { Countdown as te } from "./bundle.es28.js";
-import { TextArea as me } from "./bundle.es29.js";
-import { DatePicker as xe } from "./bundle.es30.js";
-import { DateInput as ie } from "./bundle.es31.js";
-import { FileOverlay as ne } from "./bundle.es32.js";
-import { FormGroup as ce } from "./bundle.es33.js";
-import { TimePicker as ue } from "./bundle.es34.js";
-import { Icon as De } from "./bundle.es35.js";
-import { ProgressBar as he } from "./bundle.es36.js";
-import { Skeleton as Be } from "./bundle.es37.js";
-import { Blank as Ie } from "./bundle.es38.js";
-import { ProgressRing as ke } from "./bundle.es39.js";
-import { WriteBar as be } from "./bundle.es40.js";
-import { Editor as Oe } from "./bundle.es41.js";
-import { DropArea as ze, DropAreaProvider as Le, useDragEnter as we } from "./bundle.es42.js";
-import { Table as Me } from "./bundle.es43.js";
-import { ThemeProvider as Ne, useTheme as Ge } from "./bundle.es44.js";
-import { ColorSchemeScript as Ee, colorSchemeScript as Ye } from "./bundle.es45.js";
-import { LocalStorageProvider as qe, useLocalStorage as He } from "./bundle.es46.js";
-import { useBooleanState as Ke } from "./bundle.es47.js";
-import { useResizeTextarea as Ue } from "./bundle.es48.js";
-import { useLoading as Xe } from "./bundle.es49.js";
-import { NowContextProvider as _e, useNow as $e } from "./bundle.es50.js";
-import { createAlertAgent as rr } from "./bundle.es51.js";
-import { createToaster as tr } from "./bundle.es52.js";
-import { Toast as mr } from "./bundle.es53.js";
-import { DialogShell as xr, DrawerShell as fr, createPopupRegistry as ir, usePopup as sr } from "./bundle.es54.js";
-import { createPopoversRegistry as lr } from "./bundle.es55.js";
-import { createScope as Sr, createStaticScope as ur } from "./bundle.es56.js";
-import { RemoveListener as Dr } from "./bundle.es57.js";
-import { MONDAY as hr, addMonths as Pr, createDayDisableChecker as Br, endOfDay as yr, endOfWeek as Ir, isDayMinMaxRestricted as Tr, isSameDate as kr, setMonth as vr, setYear as br, startOfDay as Ar, startOfWeek as Or, subMonths as Rr, useDayDisableCheker as zr } from "./bundle.es58.js";
+import { MobileDrawer as Q } from "./bundle.es23.js";
+import { Dialog as V } from "./bundle.es24.js";
+import { PopupLayout as Z } from "./bundle.es25.js";
+import { AlertDialog as $ } from "./bundle.es26.js";
+import { LoadingButton as re } from "./bundle.es27.js";
+import { Tabs as te } from "./bundle.es28.js";
+import { Countdown as ae } from "./bundle.es29.js";
+import { TextArea as xe } from "./bundle.es30.js";
+import { DatePicker as ie } from "./bundle.es31.js";
+import { DateInput as le } from "./bundle.es32.js";
+import { FileOverlay as ce } from "./bundle.es33.js";
+import { FormGroup as ue } from "./bundle.es34.js";
+import { TimePicker as De } from "./bundle.es35.js";
+import { Icon as he } from "./bundle.es36.js";
+import { ProgressBar as Be } from "./bundle.es37.js";
+import { Skeleton as ye } from "./bundle.es38.js";
+import { Blank as Te } from "./bundle.es39.js";
+import { ProgressRing as ve } from "./bundle.es40.js";
+import { WriteBar as Ae } from "./bundle.es41.js";
+import { Editor as Oe } from "./bundle.es42.js";
+import { DropArea as ze, DropAreaProvider as Le, useDragEnter as Ce } from "./bundle.es43.js";
+import { Table as Ne } from "./bundle.es44.js";
+import { ThemeProvider as We, useTheme as Ee } from "./bundle.es45.js";
+import { ColorSchemeScript as je, colorSchemeScript as qe } from "./bundle.es46.js";
+import { LocalStorageProvider as Je, useLocalStorage as Ke } from "./bundle.es47.js";
+import { useBooleanState as Ue } from "./bundle.es48.js";
+import { useResizeTextarea as Xe } from "./bundle.es49.js";
+import { useLoading as _e } from "./bundle.es50.js";
+import { NowContextProvider as er, useNow as rr } from "./bundle.es51.js";
+import { createAlertAgent as tr } from "./bundle.es52.js";
+import { createToaster as ar } from "./bundle.es53.js";
+import { Toast as xr } from "./bundle.es54.js";
+import { DialogShell as ir, DrawerShell as sr, MobileDrawerShell as lr, createPopupRegistry as nr, usePopup as cr } from "./bundle.es55.js";
+import { createPopoversRegistry as ur } from "./bundle.es56.js";
+import { createScope as Dr, createStaticScope as dr } from "./bundle.es57.js";
+import { RemoveListener as Pr } from "./bundle.es58.js";
+import { MONDAY as br, addMonths as yr, createDayDisableChecker as Ir, endOfDay as Tr, endOfWeek as kr, isDayMinMaxRestricted as vr, isSameDate as wr, setMonth as Ar, setYear as Mr, startOfDay as Or, startOfWeek as Rr, subMonths as zr, useDayDisableCheker as Lr } from "./bundle.es59.js";
 export {
-  Z as AlertDialog,
+  $ as AlertDialog,
   o as Avatar,
-  Ie as Blank,
+  Te as Blank,
   s as Button,
-  l as ButtonGroup,
+  n as ButtonGroup,
   G as Checkbox,
-  Ee as ColorSchemeScript,
-  te as Countdown,
-  ie as DateInput,
-  xe as DatePicker,
-  Q as Dialog,
-  xr as DialogShell,
+  je as ColorSchemeScript,
+  ae as Countdown,
+  le as DateInput,
+  ie as DatePicker,
+  V as Dialog,
+  ir as DialogShell,
   J as Drawer,
-  fr as DrawerShell,
+  sr as DrawerShell,
   ze as DropArea,
   Le as DropAreaProvider,
   Oe as Editor,
-  ne as FileOverlay,
-  ce as FormGroup,
-  De as Icon,
+  ce as FileOverlay,
+  ue as FormGroup,
+  he as Icon,
   d as ImitateScroll,
-  R as Input,
-  $ as LoadingButton,
-  qe as LocalStorageProvider,
-  hr as MONDAY,
-  _e as NowContextProvider,
-  C as NumberInput,
-  L as OptionItem,
+  M as Input,
+  re as LoadingButton,
+  Je as LocalStorageProvider,
+  br as MONDAY,
+  Q as MobileDrawer,
+  lr as MobileDrawerShell,
+  er as NowContextProvider,
+  L as NumberInput,
+  R as OptionItem,
   F as OptionsList,
-  y as Popover,
-  V as PopupLayout,
-  he as ProgressBar,
-  ke as ProgressRing,
+  b as Popover,
+  Z as PopupLayout,
+  Be as ProgressBar,
+  ve as ProgressRing,
   j as Radio,
   q as RadioGroup,
-  Dr as RemoveListener,
+  Pr as RemoveListener,
   g as Scrollable,
   P as Segments,
-  v as Select,
-  A as SelectTags,
-  Be as Skeleton,
+  k as Select,
+  w as SelectTags,
+  ye as Skeleton,
   S as Spinner,
   E as Switch,
-  Me as Table,
-  re as Tabs,
-  me as TextArea,
-  Ne as ThemeProvider,
-  ue as TimePicker,
-  mr as Toast,
-  T as Tooltip,
-  be as WriteBar,
-  Pr as addMonths,
+  Ne as Table,
+  te as Tabs,
+  xe as TextArea,
+  We as ThemeProvider,
+  De as TimePicker,
+  xr as Toast,
+  I as Tooltip,
+  Ae as WriteBar,
+  yr as addMonths,
   p as avatarSizes,
-  Ye as colorSchemeScript,
-  rr as createAlertAgent,
-  Br as createDayDisableChecker,
-  lr as createPopoversRegistry,
-  ir as createPopupRegistry,
-  Sr as createScope,
-  ur as createStaticScope,
-  tr as createToaster,
-  yr as endOfDay,
-  Ir as endOfWeek,
-  a as getBadgeIconSizeByImageBaseSize,
+  qe as colorSchemeScript,
+  tr as createAlertAgent,
+  Ir as createDayDisableChecker,
+  ur as createPopoversRegistry,
+  nr as createPopupRegistry,
+  Dr as createScope,
+  dr as createStaticScope,
+  ar as createToaster,
+  Tr as endOfDay,
+  kr as endOfWeek,
+  m as getBadgeIconSizeByImageBaseSize,
   x as getFallbackIconSizeByImageBaseSize,
   f as getInitialsFontSize,
-  Tr as isDayMinMaxRestricted,
-  kr as isSameDate,
-  vr as setMonth,
-  br as setYear,
-  Ar as startOfDay,
-  Or as startOfWeek,
-  Rr as subMonths,
-  Ke as useBooleanState,
-  zr as useDayDisableCheker,
-  we as useDragEnter,
-  Xe as useLoading,
-  He as useLocalStorage,
-  $e as useNow,
-  sr as usePopup,
-  Ue as useResizeTextarea,
-  Ge as useTheme
+  vr as isDayMinMaxRestricted,
+  wr as isSameDate,
+  Ar as setMonth,
+  Mr as setYear,
+  Or as startOfDay,
+  Rr as startOfWeek,
+  zr as subMonths,
+  Ue as useBooleanState,
+  Lr as useDayDisableCheker,
+  Ce as useDragEnter,
+  _e as useLoading,
+  Ke as useLocalStorage,
+  rr as useNow,
+  cr as usePopup,
+  Xe as useResizeTextarea,
+  Ee as useTheme
 };

package/dist/bundle.es10.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { makeTabId as c, useTabSlider as i } from "./bundle.es59.js";
+import { makeTabId as c, useTabSlider as i } from "./bundle.es60.js";
 import { attr as o } from "@companix/utils-browser";
 import { useRef as u, useId as f } from "react";
 const h = ({ value: s, onChange: t, options: a }) => {

package/dist/bundle.es13.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.es11.js";
-import { useFroozeClosing as w } from "./bundle.es60.js";
-import { SelectInput as H } from "./bundle.es61.js";
-import { useScrollListController as M } from "./bundle.es62.js";
-import { OptionsPopover as N } from "./bundle.es63.js";
+import { useFroozeClosing as w } from "./bundle.es61.js";
+import { SelectInput as H } from "./bundle.es62.js";
+import { useScrollListController as M } from "./bundle.es63.js";
+import { OptionsPopover as N } from "./bundle.es64.js";
 import { mergeRefs as W } from "react-merge-refs";
 const Z = (t) => {
   const {

package/dist/bundle.es14.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.es60.js";
+import { useFroozeClosing as B } from "./bundle.es61.js";
 import { Popover as L } from "./bundle.es11.js";
-import { Icon as g } from "./bundle.es35.js";
+import { Icon as g } from "./bundle.es36.js";
 import { attr as l, getActiveElementByAnotherElement as X, contains as G } from "@companix/utils-browser";
-import { OptionsPopover as H } from "./bundle.es63.js";
-import { arrays as v } from "./bundle.es64.js";
+import { OptionsPopover as H } from "./bundle.es64.js";
+import { arrays as v } from "./bundle.es65.js";
 const ne = (r) => {
   const {
     closeAfterSelect: C,

package/dist/bundle.es15.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.es65.js";
-import { InputContainer as I } from "./bundle.es66.js";
+import { InputElement as x } from "./bundle.es66.js";
+import { InputContainer as I } from "./bundle.es67.js";
 import g from "classnames";
 const N = b(
   ({

package/dist/bundle.es16.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import N from "classnames";
-import { Icon as v } from "./bundle.es35.js";
+import { Icon as v } from "./bundle.es36.js";
 import { attr as t } from "@companix/utils-browser";
 import { forwardRef as k } from "react";
 import { faCheck as x } from "@companix/icons-solid";

package/dist/bundle.es17.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.es66.js";
+import { InputContainer as F } from "./bundle.es67.js";
 import { NumericFormat as V } from "react-number-format";
 const D = j(
   ({

package/dist/bundle.es19.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import b from "classnames";
 import * as s from "@radix-ui/react-checkbox";
-import { Icon as x } from "./bundle.es35.js";
+import { Icon as x } from "./bundle.es36.js";
 import { faCheck as k } from "@companix/icons-solid";
 import { useId as f } from "react";
 import { attr as c } from "@companix/utils-browser";

package/dist/bundle.es22.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import p from "classnames";
 import { customCSS as c } from "@companix/utils-browser";
-import { PopupLayout as r } from "./bundle.es24.js";
+import { PopupLayout as r } from "./bundle.es25.js";
 const i = ({ direction: o, children: e, size: t, className: a, ...m }) => /* @__PURE__ */ s(
   r,
   {