@companix/uikit 0.0.32 → 0.0.34

package/dist/Avatar/Avatar.scss

@@ -0,0 +1,64 @@
+@use '../mixins.scss';
+
+.avatar {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  isolation: isolate;
+
+  @include mixins.use-styles(avatar);
+
+  &-image {
+    object-fit: cover;
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: transparent;
+    text-indent: 10000px;
+    border: 0;
+    border-radius: inherit;
+  }
+
+  &-icon {
+    position: absolute;
+    top: auto;
+    left: auto;
+  }
+
+  &-initials {
+    line-height: 1;
+    text-align: center;
+    text-transform: uppercase;
+
+    @include mixins.use-styles(avatar, initials);
+  }
+
+  &-border {
+    box-sizing: border-box;
+    pointer-events: none;
+    border-radius: inherit;
+    transform-origin: left top;
+
+    @include mixins.use-styles(avatar, border);
+  }
+
+  &-content {
+    display: inherit;
+    align-items: inherit;
+    justify-content: inherit;
+    border-radius: inherit;
+  }
+
+  &-border,
+  &-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

package/dist/Avatar/helpers.d.ts

@@ -0,0 +1,10 @@
+export type GetInitialsFontSizeType = (avatarSize: number) => number;
+export declare const getInitialsFontSize: GetInitialsFontSizeType;
+export declare function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36;
+export declare namespace getFallbackIconSizeByImageBaseSize {
+    let MAX_SIZE: 36;
+}
+export declare function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24;
+export declare namespace getBadgeIconSizeByImageBaseSize {
+    let MAX_SIZE: 24;
+}

package/dist/Avatar/index.d.ts

@@ -0,0 +1,8 @@
+import { AvatarSize } from './types';
+export interface AvatarProps extends React.ImgHTMLAttributes<HTMLElement> {
+    size?: AvatarSize;
+    noBorder?: boolean;
+    fallbackIcon?: React.ReactElement;
+    initials?: string;
+}
+export declare const Avatar: ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, size, src, srcSet, useMap, initials, noBorder, fallbackIcon: fallbackIconProp, children }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Avatar/types.d.ts

@@ -0,0 +1,2 @@
+export declare const avatarSizes: readonly [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96];
+export type AvatarSize = (typeof avatarSizes)[number];

package/dist/Icon/index.d.ts

@@ -1,7 +1,6 @@
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
-export interface IconProps {
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
     icon: IconDefinition;
     size?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
-    className?: string;
 }
-export declare const Icon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const Icon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/Segments/Segments.scss

@@ -0,0 +1,57 @@
+@use '../mixins.scss';
+
+.segments {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  transition: all 100ms ease-out;
+
+  &-container {
+    width: 100%;
+    box-sizing: border-box;
+
+    @include mixins.use-styles(segment-control, container);
+  }
+
+  &-slider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: calc(100% / var(--uikit--options));
+    border-radius: inherit;
+    transform: translateX(calc(var(--uikit--current-index) * 100%));
+    transform-origin: 0 0;
+    transition: transform 150ms;
+
+    @include mixins.use-styles(segment-control, slider);
+  }
+
+  &-option {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    cursor: pointer;
+    user-select: none;
+    background: transparent;
+    border: 0;
+    border-radius: inherit;
+    transition: color 100ms ease-out;
+
+    &:not([data-active]):hover {
+      @include mixins.use-styles(segment-control, option, hover);
+    }
+
+    &:not([data-active]):active {
+      @include mixins.use-styles(segment-control, option, active);
+    }
+
+    @include mixins.use-styles(segment-control, option);
+  }
+}

package/dist/Segments/index.d.ts

@@ -0,0 +1,11 @@
+interface SegmentOption<T> {
+    label: React.ReactNode;
+    value: T;
+}
+export interface SegmentsProps<T> {
+    value: T;
+    onChange: (value: T) => void;
+    options: SegmentOption<T>[];
+}
+export declare const Segments: <T extends number | string>({ value, onChange, options }: SegmentsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ThemeProvider/script.d.ts

@@ -4,4 +4,5 @@ interface ColorSchemeScriptProps {
     defaultColorScheme: ColorSchemeExtendedType;
 }
 export declare const ColorSchemeScript: import('react').MemoExoticComponent<({ storageKey, defaultColorScheme }: ColorSchemeScriptProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const colorSchemeScript: (storageKey: string, defaultColorScheme: "light" | "dark") => void;
 export {};

package/dist/bundle.es.js

@@ -1,79 +1,88 @@
-import { Button as e } from "./bundle.es2.js";
-import { ButtonGroup as p } from "./bundle.es3.js";
-import { Spinner as x } from "./bundle.es4.js";
-import { Scrollable as a } from "./bundle.es5.js";
-import { ImitateScroll as l } from "./bundle.es6.js";
-import { Popover as c } from "./bundle.es7.js";
-import { Tooltip as u } from "./bundle.es8.js";
-import { Select as T } from "./bundle.es9.js";
-import { Input as D } from "./bundle.es10.js";
-import { OptionItem as P } from "./bundle.es11.js";
-import { NumberInput as h } from "./bundle.es12.js";
-import { OptionsList as v } from "./bundle.es13.js";
-import { Checkbox as B } from "./bundle.es14.js";
-import { Switch as k } from "./bundle.es15.js";
-import { Radio as y, RadioGroup as G } from "./bundle.es16.js";
-import { Drawer as O } from "./bundle.es17.js";
-import { Dialog as F } from "./bundle.es18.js";
-import { AlertDialog as j } from "./bundle.es19.js";
-import { LoadingButton as z } from "./bundle.es20.js";
-import { Tabs as H } from "./bundle.es21.js";
-import { Countdown as K } from "./bundle.es22.js";
-import { TextArea as Q } from "./bundle.es23.js";
-import { SelectTags as V } from "./bundle.es24.js";
-import { DatePicker as X } from "./bundle.es25.js";
-import { DateInput as Z } from "./bundle.es26.js";
-import { FileOverlay as $ } from "./bundle.es27.js";
-import { FormGroup as ro } from "./bundle.es28.js";
-import { TimePicker as to } from "./bundle.es29.js";
-import { Icon as mo } from "./bundle.es30.js";
-import { ProgressBar as fo } from "./bundle.es31.js";
-import { ThemeProvider as io, useTheme as lo } from "./bundle.es32.js";
-import { useLocalStorage as co } from "./bundle.es33.js";
-import { createAlertAgent as uo } from "./bundle.es34.js";
-import { createToaster as To } from "./bundle.es35.js";
-import { Toast as Do } from "./bundle.es36.js";
-import { DialogShell as Po, createDialogsRegistry as ho } from "./bundle.es37.js";
-import { createPopoversRegistry as vo } from "./bundle.es38.js";
+import { Avatar as e } from "./bundle.es2.js";
+import { avatarSizes as p } from "./bundle.es3.js";
+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 { 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 P } from "./bundle.es12.js";
+import { Input as A } from "./bundle.es13.js";
+import { OptionItem as B } from "./bundle.es14.js";
+import { NumberInput as k } from "./bundle.es15.js";
+import { OptionsList as y } from "./bundle.es16.js";
+import { Checkbox as G } from "./bundle.es17.js";
+import { Switch as O } from "./bundle.es18.js";
+import { Radio as z, RadioGroup as N } from "./bundle.es19.js";
+import { Drawer as q } from "./bundle.es20.js";
+import { Dialog as H } from "./bundle.es21.js";
+import { AlertDialog as K } from "./bundle.es22.js";
+import { LoadingButton as Q } from "./bundle.es23.js";
+import { Tabs as V } from "./bundle.es24.js";
+import { Countdown as X } from "./bundle.es25.js";
+import { TextArea as Z } from "./bundle.es26.js";
+import { SelectTags 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 { ThemeProvider as uo, useTheme as go } from "./bundle.es35.js";
+import { ColorSchemeScript as ho, colorSchemeScript as Do } from "./bundle.es36.js";
+import { useLocalStorage as Io } from "./bundle.es37.js";
+import { createAlertAgent as Ao } from "./bundle.es38.js";
+import { createToaster as Bo } from "./bundle.es39.js";
+import { Toast as ko } from "./bundle.es40.js";
+import { DialogShell as yo, createDialogsRegistry as Co } from "./bundle.es41.js";
+import { createPopoversRegistry as Lo } from "./bundle.es42.js";
 export {
-  j as AlertDialog,
-  e as Button,
-  p as ButtonGroup,
-  B as Checkbox,
-  K as Countdown,
-  Z as DateInput,
-  X as DatePicker,
-  F as Dialog,
-  Po as DialogShell,
-  O as Drawer,
-  $ as FileOverlay,
-  ro as FormGroup,
-  mo as Icon,
-  l as ImitateScroll,
-  D as Input,
-  z as LoadingButton,
-  h as NumberInput,
-  P as OptionItem,
-  v as OptionsList,
-  c as Popover,
-  fo as ProgressBar,
-  y as Radio,
-  G as RadioGroup,
-  a as Scrollable,
-  T as Select,
-  V as SelectTags,
-  x as Spinner,
-  k as Switch,
-  H as Tabs,
-  Q as TextArea,
-  io as ThemeProvider,
-  to as TimePicker,
-  Do as Toast,
-  u as Tooltip,
-  uo as createAlertAgent,
-  ho as createDialogsRegistry,
-  vo as createPopoversRegistry,
-  To as createToaster,
-  co as useLocalStorage,
-  lo as useTheme
+  K as AlertDialog,
+  e as Avatar,
+  x as Button,
+  a as ButtonGroup,
+  G as Checkbox,
+  ho as ColorSchemeScript,
+  X as Countdown,
+  to as DateInput,
+  ro as DatePicker,
+  H as Dialog,
+  yo as DialogShell,
+  q as Drawer,
+  mo as FileOverlay,
+  fo as FormGroup,
+  co as Icon,
+  S as ImitateScroll,
+  A as Input,
+  Q as LoadingButton,
+  k as NumberInput,
+  B as OptionItem,
+  y as OptionsList,
+  h as Popover,
+  so as ProgressBar,
+  z as Radio,
+  N as RadioGroup,
+  n as Scrollable,
+  g as Segments,
+  P as Select,
+  $ as SelectTags,
+  l as Spinner,
+  O as Switch,
+  V as Tabs,
+  Z as TextArea,
+  uo as ThemeProvider,
+  io as TimePicker,
+  ko as Toast,
+  v as Tooltip,
+  p as avatarSizes,
+  Do as colorSchemeScript,
+  Ao as createAlertAgent,
+  Co as createDialogsRegistry,
+  Lo as createPopoversRegistry,
+  Bo as createToaster,
+  Io as useLocalStorage,
+  go as useTheme
 };

package/dist/bundle.es10.js

@@ -1,43 +1,82 @@
-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.es43.js";
-import { InputContainer as I } from "./bundle.es44.js";
-import g from "classnames";
-const N = b(
-  ({
-    onChange: m,
-    onValueChange: f,
-    readOnly: i,
-    inputClassName: o,
-    value: p,
-    placeholder: n,
-    mask: d,
-    inputType: s = "text",
-    maskChar: u,
-    inputRef: a,
-    ...e
-  }, l) => {
-    const r = R(null);
-    return /* @__PURE__ */ t(I, { ref: l, inputRef: r, ...e, children: /* @__PURE__ */ t(
-      x,
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-popover";
+import { attr as B } from "@companix/utils-browser";
+import M from "classnames";
+import { forwardRef as j, useRef as k } from "react";
+const D = j((a, i) => {
+  const {
+    children: n,
+    sideOffset: s,
+    matchTarget: l,
+    onAnimationEnd: c,
+    onAnimationStart: m,
+    onOpenAutoFocus: d,
+    onCloseAutoFocus: f,
+    triggerRef: p,
+    triggerProps: h,
+    open: g,
+    content: u,
+    onOpenChange: v,
+    align: C,
+    disabled: x,
+    minimal: w,
+    className: L,
+    fitMaxHeight: N = !0,
+    zIndex: O = 100,
+    side: A,
+    showArrows: P
+  } = a, e = k(null), b = () => {
+    e.current && e.current.click();
+  }, y = (R) => {
+    x && R.preventDefault();
+  };
+  return /* @__PURE__ */ t(o.Root, { open: g, onOpenChange: v, children: [
+    /* @__PURE__ */ r(o.Trigger, { ref: p, ...h, onClick: y, asChild: !0, children: n }),
+    /* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ t(
+      o.Content,
       {
-        type: s,
-        ref: c([r, a]),
-        className: g("form-input form-input-base", o),
-        "aria-disabled": e.disabled,
-        onChange: m,
-        onValueChange: f,
-        value: p,
-        placeholder: n,
-        disabled: e.disabled,
-        readOnly: i,
-        maskChar: u,
-        mask: d
+        ref: i,
+        className: M("popover", L),
+        side: A,
+        align: C,
+        "data-appearance": w ? "minimal" : "default",
+        "data-match-target": l,
+        sideOffset: s ?? 6,
+        avoidCollisions: !0,
+        arrowPadding: 10,
+        style: { zIndex: O },
+        onAnimationStart: m,
+        onAnimationEnd: c,
+        onOpenAutoFocus: d,
+        onCloseAutoFocus: f,
+        children: [
+          /* @__PURE__ */ r(o.Close, { ref: e, style: { display: "none" } }),
+          P && /* @__PURE__ */ r(o.Arrow, { width: 30, height: 11, asChild: !0, children: /* @__PURE__ */ r("div", { className: "popover-arrow", children: /* @__PURE__ */ t("svg", { className: "popover-arrow-icon", viewBox: "0 0 30 11", width: 30, height: 11, children: [
+            /* @__PURE__ */ r(
+              "path",
+              {
+                className: "popover-arrow-border",
+                d: "M 18.112 -2.704 C 19.127 -3.64 19.999 -5.626 19.999 -7.001 L 19.999 18.999 C 19.999 17.621 19.131 15.642 18.111 14.702 L 10.927 8.084 C 9.69 6.944 9.694 5.05 10.927 3.914 L 18.112 -2.704 Z",
+                style: { transformBox: "fill-box", transformOrigin: "50% 50%" },
+                transform: "matrix(0, -1, 1, 0, 0.000001, 0)"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                className: "popover-arrow-fill",
+                d: "M 17.789 -2.965 C 19.009 -4.09 19.999 -6.341 19.999 -7.995 L 19.999 -10.001 L 19.999 19.999 L 19.999 17.994 C 19.999 16.34 19.016 14.094 17.789 12.964 L 10.606 6.348 C 9.796 5.602 9.804 4.388 10.606 3.648 L 17.789 -2.966 L 17.789 -2.965 Z",
+                style: { transformBox: "fill-box", transformOrigin: "50% 50%" },
+                transform: "matrix(0, -1, 1, 0, 0, 0)"
+              }
+            )
+          ] }) }) }),
+          /* @__PURE__ */ r("div", { className: "popover-content", "data-fit-max-height": B(N), children: u({ close: b }) })
+        ]
       }
-    ) });
-  }
-);
+    ) })
+  ] });
+});
 export {
-  N as Input
+  D as Popover
 };

package/dist/bundle.es11.js

@@ -1,38 +1,28 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import N from "classnames";
-import { Icon as v } from "./bundle.es30.js";
-import { attr as t } from "@companix/utils-browser";
-import { forwardRef as k } from "react";
-import { f as x } from "./bundle.es45.js";
-const E = k(
-  ({ title: s, icon: c, active: e, label: n, disabled: a, minimal: r, onClick: d, className: l, ...m }, p) => {
-    const f = (h) => {
-      a || d?.(h);
-    };
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        ref: p,
-        ...m,
-        className: N("option", l),
-        "data-selected": t(e),
-        "data-disabled": t(a),
-        "data-minimal": t(r),
-        onClick: f,
-        children: [
-          /* @__PURE__ */ i("div", { className: "option-content", children: [
-            c && /* @__PURE__ */ o("div", { className: "option-icon", children: c }),
-            /* @__PURE__ */ i("div", { className: "option-content-layout", children: [
-              /* @__PURE__ */ o("div", { className: "option-title", children: s }),
-              n && /* @__PURE__ */ o("div", { className: "option-label", children: n })
-            ] })
-          ] }),
-          e && !r && /* @__PURE__ */ o("div", { className: "option-check", children: /* @__PURE__ */ o(v, { icon: x.faCheck }) })
-        ]
-      }
-    );
-  }
-);
+import { jsx as n } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Popover as m } from "./bundle.es10.js";
+const f = ({ children: e, content: t, side: r }) => {
+  const [s, o] = p(!1);
+  return /* @__PURE__ */ n(
+    m,
+    {
+      showArrows: !0,
+      className: "tooltip",
+      open: s,
+      side: r,
+      content: () => t,
+      triggerProps: {
+        onMouseEnter: () => {
+          o(!0);
+        },
+        onMouseLeave: () => {
+          o(!1);
+        }
+      },
+      children: e
+    }
+  );
+};
 export {
-  E as OptionItem
+  f as Tooltip
 };