@companix/uikit 0.0.34 → 0.0.36

package/dist/SelectTags/SelectTags.scss

@@ -1,67 +0,0 @@
-@use '../mixins.scss';
-
-.select-tags {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  .form-input {
-    padding-left: var(--form_space, 0);
-  }
-
-  &-empty {
-    @include mixins.use-styles(tag, empty);
-  }
-
-  &-container {
-    display: flex;
-    align-items: center;
-    cursor: text;
-
-    .expand-icon {
-      margin: 0px var(--form_space, 0);
-    }
-  }
-}
-
-.tag {
-  display: flex;
-  align-items: center;
-  cursor: default;
-  user-select: none;
-
-  @include mixins.use-styles(tag);
-
-  &-name {
-    @include mixins.use-styles(tag, name);
-  }
-
-  &-close-button {
-    cursor: pointer;
-    @include mixins.use-styles(tag, close);
-
-    &:hover {
-      @include mixins.use-styles(tag, close, hover);
-    }
-  }
-
-  &-close-icon {
-    @include mixins.use-size(tag, close, size);
-  }
-
-  &-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    align-self: stretch;
-    flex-wrap: wrap;
-    min-width: 0;
-    position: relative;
-
-    @include mixins.use-styles(tag, container);
-
-    &:not([data-readonly]) {
-      padding-bottom: 0;
-    }
-  }
-}

package/dist/SelectTags/index.d.ts

@@ -1,17 +0,0 @@
-import { Option } from '../types';
-export interface SelectTagsProps<T> {
-    options: Option<T>[];
-    onChange: (event: T[]) => void;
-    placeholder?: string;
-    value: T[];
-    children?: React.ReactNode;
-    disabled?: boolean;
-    readOnly?: boolean;
-    closeAfterSelect?: boolean;
-    emptyText?: string;
-    size?: 'sm' | 'md' | 'lg';
-    fill?: boolean;
-    inputRef?: React.Ref<HTMLInputElement>;
-    required?: boolean;
-}
-export declare const SelectTags: <T extends string | number>(props: SelectTagsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Spinner/Spinner.scss

@@ -1,14 +0,0 @@
-@keyframes spinner-border {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.spinner-border {
-  display: inline-block;
-  border-style: solid;
-  border-color: currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: 0.75s linear infinite spinner-border;
-}

package/dist/Spinner/index.d.ts

@@ -1,7 +0,0 @@
-export interface SpinnerProps {
-    size?: number;
-    width?: number;
-    color?: string;
-    className?: string;
-}
-export declare const Spinner: ({ size, className, width, color }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Switch/Switch.scss

@@ -1,102 +0,0 @@
-@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

@@ -1,10 +0,0 @@
-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

@@ -1,58 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-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

@@ -1,34 +0,0 @@
-.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

@@ -1,7 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

package/dist/TimePicker/index.d.ts

@@ -1,10 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,155 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,28 +0,0 @@
-@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

@@ -1,7 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

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