@companix/uikit 0.0.36 → 0.0.38

package/dist/Switch/Switch.scss

@@ -0,0 +1,102 @@
+@use '../mixins.scss';
+
+.switch {
+  display: inline-table;
+  user-select: none;
+  touch-action: manipulation;
+  max-width: max-content;
+
+  &[data-disabled] {
+    @include mixins.use-styles(switch, disabled);
+  }
+
+  &-track {
+    cursor: pointer;
+    outline: none;
+    position: relative;
+
+    &:after {
+      visibility: hidden;
+      content: '\00A0';
+    }
+
+    &[data-disabled] {
+      cursor: default;
+      @include mixins.use-styles(switch, track, disabled);
+    }
+
+    &[data-state='checked'] {
+      @include mixins.use-styles(switch, track, checked);
+    }
+
+    &[data-state='unchecked'] {
+      @include mixins.use-styles(switch, track, unchecked);
+    }
+
+    @include mixins.use-styles(switch, track);
+  }
+
+  &-thumb {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    @include mixins.use-styles(switch, thumb);
+    @include mixins.use-size(switch, thumb, size);
+
+    border-radius: 9999px;
+
+    &[data-state='unchecked'] {
+      transform: translate(
+        var(--switch_track_outline_width),
+        calc(var(--switch_track_height) - var(--switch_thumb_size) - var(--switch_track_outline_width))
+      );
+
+      .switch-thumb-icon {
+        @include mixins.use-styles(switch, icon, unchecked);
+      }
+    }
+
+    &[data-state='checked'] {
+      transform: translate(
+        calc(var(--switch_track_width) - var(--switch_thumb_size) - var(--switch_track_outline_width)),
+        calc(var(--switch_track_height) - var(--switch_thumb_size) - var(--switch_track_outline_width))
+      );
+
+      .switch-thumb-icon {
+        @include mixins.use-styles(switch, icon, checked);
+      }
+    }
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      inset: 0;
+
+      @include mixins.use-styles(switch, icon);
+
+      &[data-visible] {
+        @include mixins.use-styles(switch, icon, visible);
+      }
+
+      svg {
+        @include mixins.use-size(switch, icon, size);
+      }
+    }
+  }
+
+  &-label {
+    cursor: pointer;
+    display: table-cell;
+    word-break: break-word;
+
+    &[data-disabled] {
+      cursor: default;
+      @include mixins.use-styles(switch, label, disabled);
+    }
+
+    @include mixins.use-styles(switch, label);
+  }
+}

package/dist/Switch/index.d.ts

@@ -0,0 +1,10 @@
+export interface SwitchProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    checkedIcon?: React.ReactNode;
+    uncheckedIcon?: React.ReactNode;
+}
+declare const Switch: (props: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export { Switch };

package/dist/Tabs/Tabs.scss

@@ -0,0 +1,58 @@
+@use '../mixins.scss';
+
+.tabs {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 0 auto;
+  position: relative;
+
+  @include mixins.use-styles(tab, container);
+}
+
+.tab-indicator-container {
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+
+  @include mixins.use-styles(tab, indicator, container);
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  @include mixins.use-styles(tab, indicator);
+}
+
+.tab {
+  outline: none;
+  font-family: inherit;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  background-color: transparent;
+  user-select: none;
+  position: relative;
+  cursor: pointer;
+  font-family: inherit;
+
+  @include mixins.use-styles(tab);
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    @include mixins.use-styles(tab, disabled);
+  }
+
+  &:not([data-disabled]):not([data-state='active']):hover {
+    @include mixins.use-styles(tab, hover);
+  }
+
+  &[data-state='active'] {
+    @include mixins.use-styles(tab, active);
+  }
+}

package/dist/Tabs/index.d.ts

@@ -0,0 +1,13 @@
+export interface TabsProps {
+    children: React.ReactNode;
+    onChange: (value: string) => void;
+    value: string;
+}
+export declare const Tabs: {
+    ({ children, value, onChange }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    Tab: ({ children, value, ...restProps }: TabProps) => import("react/jsx-runtime").JSX.Element;
+};
+interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+}
+export {};

package/dist/TextArea/TextArea.scss

@@ -0,0 +1,34 @@
+.form-textarea {
+  display: flex;
+
+  textarea {
+    padding: var(--form_space-y, 0px) var(--form_space, 0px);
+    border-radius: var(--form_border-radius);
+    border-style: solid;
+    border-width: 2px;
+    border-top-width: 0;
+    border-left-width: 0;
+    border-color: transparent;
+    min-height: max-content;
+    resize: vertical;
+    display: block;
+
+    ::-webkit-search-cancel-button {
+      display: none;
+    }
+
+    ::-webkit-search-decoration {
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    ::-ms-clear {
+      display: none;
+    }
+
+    &[data-grow] {
+      resize: none;
+      border: none;
+    }
+  }
+}

package/dist/TextArea/index.d.ts

@@ -0,0 +1,7 @@
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    grow?: boolean;
+    onResize?: (el: HTMLTextAreaElement) => void;
+    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;

package/dist/ThemeProvider/helpers.d.ts

@@ -0,0 +1,4 @@
+import { ColorSchemeExtendedType } from './types';
+export declare const getColorScheme: (key: string, defaultColorScheme: ColorSchemeExtendedType) => ColorSchemeExtendedType;
+export declare const getSystemColorScheme: (e?: MediaQueryList | MediaQueryListEvent) => "dark" | "light";
+export declare const updateDOM: (colorScheme: ColorSchemeExtendedType) => void;

package/dist/ThemeProvider/index.d.ts

@@ -0,0 +1,12 @@
+import { ColorSchemeExtendedType, ColorSchemeType } from './types';
+export interface UseColorSchemeProps {
+    setColorScheme: (scheme: ColorSchemeExtendedType) => void;
+    colorScheme?: ColorSchemeExtendedType;
+    resolvedColorScheme?: ColorSchemeType;
+}
+export declare const useTheme: () => UseColorSchemeProps;
+export interface ThemeProviderProps extends React.PropsWithChildren {
+    storageKey?: string;
+    defaultColorScheme?: ColorSchemeExtendedType;
+}
+export declare const ThemeProvider: (props: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ThemeProvider/script.d.ts

@@ -0,0 +1,8 @@
+import { ColorSchemeExtendedType } from './types';
+interface ColorSchemeScriptProps {
+    storageKey: string;
+    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/ThemeProvider/types.d.ts

@@ -0,0 +1,2 @@
+export type ColorSchemeType = 'light' | 'dark';
+export type ColorSchemeExtendedType = ColorSchemeType | 'system';

package/dist/TimePicker/index.d.ts

@@ -0,0 +1,10 @@
+import { InputProps } from '../Input/Input';
+import { TimeFormat } from '..';
+export interface TimePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'rightElement'> {
+    required?: boolean;
+    value: TimeFormat | null;
+    onChange: (value: TimeFormat | null) => void;
+    clearButton?: boolean;
+    clearButtonIcon?: boolean;
+}
+export declare const TimePicker: (props: TimePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Toaster/Toast.d.ts

@@ -0,0 +1,15 @@
+import { ToastOptions } from '.';
+interface ToastProps extends ToastOptions {
+    id: string;
+    onClosed: () => void;
+    onClosing: () => void;
+    onInitialized: (ref: HTMLLIElement) => void;
+}
+export declare const Toast: {
+    (options: ToastProps): import("react/jsx-runtime").JSX.Element;
+    Close({ closeIcon, className }?: {
+        closeIcon?: React.ReactNode;
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/Toaster/Toaster.scss

@@ -0,0 +1,155 @@
+@use '../mixins.scss';
+
+@mixin use-appearance($appearance) {
+  &[data-appearance='#{$appearance}'] {
+    @include mixins.use-styles(toaster, $appearance);
+
+    .toaster {
+      &-icon {
+        @include mixins.use-styles(toaster, $appearance, icon);
+      }
+
+      &-title {
+        @include mixins.use-styles(toaster, $appearance, title);
+      }
+
+      &-description {
+        @include mixins.use-styles(toaster, $appearance, description);
+      }
+    }
+  }
+}
+
+.toaster {
+  pointer-events: all;
+  position: absolute;
+  outline: none;
+  opacity: 1;
+  transition: transform 0.4s, opacity 0.4s, height 0.4s, box-shadow 0.2s;
+  transform: var(--y);
+  display: flex;
+  align-items: center;
+
+  @include mixins.use-styles(toaster);
+
+  // appearance
+
+  @include use-appearance(primary);
+  @include use-appearance(neutral);
+  @include use-appearance(negative);
+  @include use-appearance(positive);
+  @include use-appearance(warning);
+
+  &[data-expanded]:not([data-mounted]) {
+    opacity: 0;
+    --y: translateY(calc(var(--lift) * -100% - var(--toaster_viewport_offset, 0)));
+  }
+
+  &[data-expanded][data-mounted] {
+    --y: translateY(calc(var(--lift) * var(--offset)));
+  }
+
+  &[data-state='closed'] {
+    animation: toastOut 400ms, toastFadeOut 400ms;
+  }
+
+  &-viewport {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    left: var(--toaster_viewport_offset);
+    right: var(--toaster_viewport_offset);
+    z-index: 40;
+    outline: none;
+    pointer-events: none;
+    gap: var(--toasters-gap, 0);
+
+    &[data-side='top'] {
+      top: var(--toaster_viewport_offset);
+
+      .toaster {
+        --lift: 1;
+        top: 0;
+      }
+    }
+
+    &[data-side='bottom'] {
+      bottom: var(--toaster_viewport_offset);
+      top: auto;
+
+      .toaster {
+        --lift: -1;
+        bottom: 0;
+      }
+    }
+
+    &[data-align='center'] {
+      align-items: center;
+    }
+
+    &[data-align='right'] {
+      align-items: flex-end;
+    }
+
+    &[data-align='left'] {
+      align-items: flex-start;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    @include mixins.use-styles(toaster, content);
+  }
+
+  &-title {
+    @include mixins.use-styles(toaster, title);
+  }
+
+  &-description {
+    @include mixins.use-styles(toaster, description);
+  }
+
+  &-close-placement {
+    top: var(--toaster_close_space, 0);
+    right: var(--toaster_close_space, 0);
+    position: absolute;
+  }
+
+  &-close {
+    cursor: pointer;
+    transition: color 0.2s;
+
+    @include mixins.use-styles(toaster, close);
+
+    &:hover {
+      @include mixins.use-styles(toaster, close, hover);
+    }
+
+    svg {
+      @include mixins.use-size(toaster, close, size);
+    }
+  }
+
+  &-icon {
+    @include mixins.use-styles(toaster, icon);
+
+    svg {
+      @include mixins.use-size(toaster, icon, size);
+    }
+  }
+}
+
+@keyframes toastOut {
+  to {
+    transform: translateY(calc(var(--lift) * -100% - var(--toaster_viewport_offset)));
+  }
+}
+
+@keyframes toastFadeOut {
+  to {
+    opacity: 0;
+  }
+}

package/dist/Toaster/Viewport.d.ts

@@ -0,0 +1,13 @@
+import { InnerToast } from '.';
+export interface ViewportProps {
+    side?: 'top' | 'bottom';
+    align?: 'center' | 'left' | 'right';
+    gap?: number;
+    swipeThreshold?: number;
+    duration?: number;
+    closeIcon?: React.ReactNode;
+}
+export interface ViewportRef {
+    showToast: (toast: InnerToast) => void;
+}
+export declare const Viewport: import('react').ForwardRefExoticComponent<ViewportProps & import('react').RefAttributes<ViewportRef>>;

package/dist/Toaster/index.d.ts

@@ -0,0 +1,20 @@
+import { ViewportProps } from './Viewport';
+export interface ToastOptions {
+    id?: string;
+    appearance?: 'primary' | 'neutral' | 'positive' | 'negative' | 'warning';
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    duration?: number;
+    closeIcon?: React.ReactNode;
+    closable?: boolean;
+}
+export interface InnerToast extends ToastOptions {
+    id: string;
+}
+export declare const createToaster: (rootProps?: ViewportProps) => {
+    api: {
+        show: (toast: ToastOptions) => string;
+    };
+    Viewport: (props?: ViewportProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/Tooltip/Tooltip.scss

@@ -0,0 +1,28 @@
+@use '../mixins.scss';
+
+.tooltip .popover {
+  &-content {
+    @include mixins.use-styles(tooltip);
+    max-height: none;
+  }
+
+  &-arrow {
+    &-fill {
+      fill: mixins.get-var-name(tooltip, background);
+    }
+  }
+}
+
+.tooltip {
+  &[data-appearance='default'] {
+    &[data-state='open'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(tooltip, in);
+    }
+
+    &[data-state='closed'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(tooltip, out);
+    }
+  }
+}

package/dist/Tooltip/index.d.ts

@@ -0,0 +1,7 @@
+import { Side } from '../Popover';
+export interface TooltipProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    side?: Side;
+}
+export declare const Tooltip: ({ children, content, side }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/__helpers/createDialogRegistry.d.ts

@@ -0,0 +1,26 @@
+import { DialogProps } from '../Dialog';
+export interface PopupProps<T> {
+    data: T;
+    close: () => void;
+}
+type PopupSignature = (options: PopupProps<any>) => JSX.Element;
+type Store = {
+    [name: string]: PopupSignature;
+};
+type UnwrapProps<T extends PopupSignature> = Parameters<T>[0] extends PopupProps<infer Q> ? Q : never;
+type OpenAgent<T extends Store> = {
+    [P in keyof T]: (data: UnwrapProps<T[P]>) => void;
+};
+type CloseAgent<T extends Store> = {
+    [key in keyof T]: () => void;
+};
+type PopupsRegistry<T extends Store> = {
+    Overlay: () => JSX.Element;
+    Close: CloseAgent<T>;
+    Open: OpenAgent<T>;
+};
+export declare const createDialogsRegistry: <T extends Store>(mapping: T) => PopupsRegistry<T>;
+interface PopupLayer extends Omit<DialogProps, 'open' | 'onOpenChange' | 'onClosed'> {
+}
+export declare const DialogShell: ({ children, ...props }: PopupLayer) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/__helpers/createPopoversRegistry.d.ts

@@ -0,0 +1,19 @@
+import { PopoverProps } from '../Popover';
+export type PopoverContentProps<T> = {
+    data: T;
+    close: () => void;
+};
+type PopoverSignature = (options: PopoverContentProps<any>) => JSX.Element;
+type Store = {
+    [name: string]: PopoverSignature;
+};
+type UnwrapProps<T extends PopoverSignature> = Parameters<T>[0] extends PopoverContentProps<infer Q> ? Q : never;
+type PopoversStore<T extends Store> = {
+    [P in keyof T]: (props: Omit<PopoverProps, 'content'> & (UnwrapProps<T[P]> extends never ? {
+        data?: unknown;
+    } : {
+        data: UnwrapProps<T[P]>;
+    })) => JSX.Element;
+};
+export declare const createPopoversRegistry: <T extends Store>(mapping: T) => PopoversStore<T>;
+export {};

package/dist/__hooks/use-frooze-closing.d.ts

@@ -0,0 +1,5 @@
+export declare const useFroozeClosing: () => {
+    popoverRef: import('react').RefObject<HTMLDivElement>;
+    handleAnimationEnd: () => void;
+    froozePopoverPosition: () => void;
+};

package/dist/__hooks/use-input-padding.d.ts

@@ -0,0 +1,5 @@
+declare const useInputPadding: (inputRef: React.RefObject<HTMLInputElement>, deps?: React.DependencyList) => {
+    rightRef: import('react').RefObject<HTMLSpanElement>;
+    leftRef: import('react').RefObject<HTMLSpanElement>;
+};
+export { useInputPadding };

package/dist/__hooks/use-loading.d.ts

@@ -0,0 +1,8 @@
+export interface UseLoadingProps<T = unknown> {
+    onClick: (startLoad: () => void, value: T) => Promise<any>;
+}
+export declare const useLoading: <T = unknown>({ onClick }: UseLoadingProps<T>) => {
+    handleClick: (value: T) => void;
+    isLoading: boolean;
+    isError: boolean;
+};

package/dist/__hooks/use-local-storage.d.ts

@@ -0,0 +1 @@
+export declare const useLocalStorage: <T>(token: string, defaultValue: T) => [T, React.Dispatch<React.SetStateAction<T>>];

package/dist/__hooks/use-popover-position.d.ts

@@ -0,0 +1,8 @@
+export declare const usePopoverLeftValue: () => {
+    popoverRef: import('react').RefObject<HTMLDivElement>;
+    getLeftValue: () => string;
+};
+export declare const useButtonWidth: () => {
+    buttonRef: import('react').RefObject<HTMLButtonElement>;
+    getWidthValue: () => string;
+};

package/dist/__hooks/use-previos.d.ts

@@ -0,0 +1,2 @@
+export declare const usePrevious: <T>(value: T) => T | undefined;
+export declare const usePreviousChanged: <T>(value: T) => T | undefined;

package/dist/__hooks/use-resize.d.ts

@@ -0,0 +1,3 @@
+type ResizeText = [React.RefObject<HTMLTextAreaElement>, () => void];
+declare const useResizeTextarea: (onResize: ((el: HTMLTextAreaElement) => void) | undefined, grow: boolean) => ResizeText;
+export { useResizeTextarea };

package/dist/__hooks/use-scrollbox.d.ts

@@ -0,0 +1,7 @@
+interface UseScrollListControllerReturn {
+    scrollBoxRef: React.RefObject<HTMLDivElement>;
+    optionsWrapperRef: React.RefObject<HTMLDivElement>;
+    scrollToElement: (index: number, position?: 'center' | 'top') => void;
+}
+export declare const useScrollListController: () => UseScrollListControllerReturn;
+export {};

package/dist/__hooks/use-update.d.ts

@@ -0,0 +1 @@
+export declare const useEffectWithLayout: (callback: () => void, deps?: React.DependencyList | undefined) => void;

package/dist/__hooks/useCalendar.d.ts

@@ -0,0 +1,17 @@
+import { CalendarProps } from '../Calendar/Calendar';
+export interface UseCalendarDependencies extends Pick<CalendarProps, 'minDateTime' | 'maxDateTime' | 'shouldDisableDate' | 'disableFuture' | 'disablePast'> {
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    minDateTime?: Date;
+    maxDateTime?: Date;
+    value?: Date | null;
+}
+export declare const useCalendar: ({ value, disablePast, disableFuture, shouldDisableDate, minDateTime, maxDateTime }: UseCalendarDependencies) => {
+    viewDate: Date;
+    setViewDate: import('react').Dispatch<import('react').SetStateAction<Date>>;
+    setPrevMonth: () => void;
+    setNextMonth: () => void;
+    isDayDisabled: (day: Date, withTime?: boolean) => boolean;
+    isMonthDisabled: (month: number, year?: number) => boolean;
+    isYearDisabled: (year: number) => boolean;
+};

package/dist/__hooks/useCalendarOptions-copy.d.ts

@@ -0,0 +1,22 @@
+export declare const defaultMax: Date;
+export declare const defaultMin: Date;
+interface Options {
+    min?: Date;
+    max?: Date;
+    now: Date;
+}
+export declare const useCalendarOptions2: ({ min, max, now }: Options) => {
+    years: {
+        title: string;
+        value: number;
+    }[];
+    months: {
+        title: string;
+        value: number;
+    }[];
+    days: {
+        title: string;
+        value: number;
+    }[];
+};
+export {};