@companix/uikit 0.0.36 → 0.0.38

package/dist/DialogAlert/Alert.d.ts

@@ -0,0 +1,19 @@
+import { InternButtonProps } from '../Button';
+interface ActionProps extends Omit<InternButtonProps, 'children'> {
+    onClick?: () => void;
+}
+export interface AlertDialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (value: boolean) => void;
+    onUnMounted?: () => void;
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    confirm?: ActionProps;
+    cancel?: ActionProps;
+    cancelDefaultText?: string;
+    disableCancel?: boolean;
+}
+export declare const AlertDialog: ({ open, defaultOpen, onOpenChange, onUnMounted, icon, title, description, cancelDefaultText, cancel, disableCancel, confirm }: AlertDialogProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DialogAlert/Alert.scss

@@ -0,0 +1,52 @@
+@use '../mixins.scss';
+
+.alert {
+  max-height: max-content;
+
+  @include mixins.use-styles(alert);
+
+  &-container {
+    @include mixins.use-styles(alert, container);
+  }
+
+  &-overlay {
+    @include mixins.use-styles(alert, overlay);
+  }
+
+  &-body {
+    display: flex;
+    flex-direction: row;
+
+    @include mixins.use-styles(alert, body);
+  }
+
+  &-title {
+    @include mixins.use-styles(alert, title);
+  }
+
+  &-description {
+    @include mixins.use-styles(alert, description);
+  }
+
+  &-icon {
+    @include mixins.use-styles(alert, icon);
+
+    svg {
+      @include mixins.use-size(alert, icon, size);
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+
+    @include mixins.use-styles(alert, content);
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: end;
+
+    @include mixins.use-styles(alert, footer);
+  }
+}

package/dist/DialogAlert/Viewport.d.ts

@@ -0,0 +1,8 @@
+import { InnerAlert } from '.';
+import { AlertDialogProps } from './Alert';
+export interface ViewportRef {
+    showAlert: (alert: InnerAlert) => void;
+}
+export interface AlertBaseProps extends Pick<AlertDialogProps, 'cancelDefaultText'> {
+}
+export declare const Viewport: import('react').ForwardRefExoticComponent<AlertBaseProps & import('react').RefAttributes<ViewportRef>>;

package/dist/DialogAlert/index.d.ts

@@ -0,0 +1,11 @@
+import { AlertDialogProps } from './Alert';
+import { AlertBaseProps } from './Viewport';
+export interface AlertOptions extends Omit<AlertDialogProps, 'open' | 'onOpenChange'> {
+}
+export interface InnerAlert extends AlertOptions {
+    id: string;
+}
+export declare const createAlertAgent: (options?: AlertBaseProps) => {
+    show: (value: Omit<InnerAlert, "id">) => void;
+    Viewport: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/Drawer/Drawer.scss

@@ -0,0 +1,112 @@
+@use '../mixins.scss';
+
+.drawer {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  z-index: 1000;
+  outline: none;
+  pointer-events: auto;
+  position: fixed;
+  z-index: 9999;
+
+  @include mixins.use-styles(drawer);
+
+  &-overlay {
+    inset: 0;
+    overflow: auto;
+    position: fixed;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    outline: none;
+    z-index: 9999;
+
+    @include mixins.use-styles(drawer, overlay);
+
+    &[data-state='open'] {
+      @include mixins.use-styles(drawer, overlay, in);
+    }
+
+    &[data-state='closed'] {
+      @include mixins.use-styles(drawer, overlay, out);
+    }
+  }
+
+  // animations
+
+  &[data-state='open'] {
+    &[data-direction='left'] {
+      @include mixins.use-styles(drawer, in, left);
+    }
+
+    &[data-direction='right'] {
+      @include mixins.use-styles(drawer, in, right);
+    }
+
+    &[data-direction='top'] {
+      @include mixins.use-styles(drawer, in, top);
+    }
+
+    &[data-direction='bottom'] {
+      @include mixins.use-styles(drawer, in, bottom);
+    }
+  }
+
+  &[data-state='closed'] {
+    &[data-direction='left'] {
+      @include mixins.use-styles(drawer, out, left);
+    }
+
+    &[data-direction='right'] {
+      @include mixins.use-styles(drawer, out, right);
+    }
+
+    &[data-direction='top'] {
+      @include mixins.use-styles(drawer, out, top);
+    }
+
+    &[data-direction='bottom'] {
+      @include mixins.use-styles(drawer, out, bottom);
+    }
+  }
+
+  // placement
+
+  &[data-direction='left'] {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--drawer-size, 50%);
+    border-top-right-radius: var(--drawer_radius, 0);
+    border-bottom-right-radius: var(--drawer_radius, 0);
+  }
+
+  &[data-direction='right'] {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--drawer-size, 50%);
+    border-top-left-radius: var(--drawer_radius, 0);
+    border-bottom-left-radius: var(--drawer_radius, 0);
+  }
+
+  &[data-direction='bottom'] {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: var(--drawer-size, 50%);
+    border-top-right-radius: var(--drawer_radius, 0);
+    border-top-left-radius: var(--drawer_radius, 0);
+  }
+
+  &[data-direction='top'] {
+    left: 0;
+    right: 0;
+    top: 0;
+    height: var(--drawer-size, 50%);
+    border-bottom-right-radius: var(--drawer_radius, 0);
+    border-bottom-left-radius: var(--drawer_radius, 0);
+  }
+}

package/dist/Drawer/index.d.ts

@@ -0,0 +1,13 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export interface DrawerProps {
+    open: boolean;
+    onOpenChange: (value: boolean) => void;
+    children: React.ReactNode;
+    direction?: 'bottom' | 'top' | 'left' | 'right';
+    className?: string;
+    size?: string;
+}
+export declare const Drawer: {
+    ({ open, onOpenChange, children, size, direction, className }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    Close: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+};

package/dist/File/index.d.ts

@@ -0,0 +1,10 @@
+export interface FileOverlayProps {
+    multiple?: true;
+    onChange?: (file: File[]) => void;
+    children: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    mimes?: ('image' | 'video' | 'audio' | 'text' | 'application')[];
+}
+declare const FileOverlay: ({ onChange, disabled, children, multiple, mimes, className }: FileOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export { FileOverlay };

package/dist/FormGroup/FormGroup.scss

@@ -0,0 +1,32 @@
+@use '../mixins.scss';
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+
+  &[data-fill] {
+    width: 100%;
+  }
+
+  &-label {
+    @include mixins.truncate-text();
+    @include mixins.use-styles(form-group, label);
+  }
+
+  &-caption {
+    @include mixins.truncate-text();
+    @include mixins.use-styles(form-group, caption);
+
+    &[data-appearance='neutral'] {
+      @include mixins.use-styles(form-group, caption, neutral);
+    }
+
+    &[data-appearance='positive'] {
+      @include mixins.use-styles(form-group, caption, positive);
+    }
+
+    &[data-appearance='negative'] {
+      @include mixins.use-styles(form-group, caption, negative);
+    }
+  }
+}

package/dist/FormGroup/index.d.ts

@@ -0,0 +1,9 @@
+export interface FormGroupProps {
+    label: React.ReactNode;
+    children: React.ReactNode;
+    caption?: React.ReactNode;
+    apperance?: 'neutral' | 'positive' | 'negative';
+    fill?: boolean;
+    className?: string;
+}
+export declare const FormGroup: (props: FormGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Icon/icon.scss

@@ -0,0 +1,18 @@
+@use '../mixins.scss';
+
+$icon-sizes: xxxs, xxs, xs, s, m, l, xl, xxl, xxxl;
+
+@each $size in $icon-sizes {
+  .icon-size-#{$size} {
+    @include mixins.use-size(icon, size, $size);
+  }
+}
+
+:where(svg:not([fill])) {
+  fill: currentcolor;
+}
+
+.icon {
+  // display: inline-block;
+  flex-shrink: 0;
+}

package/dist/Icon/index.d.ts

@@ -0,0 +1,7 @@
+export type IconPathData = string | string[];
+export type IconDefinition = [number, number, (string | number)[], string, IconPathData];
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+    icon: IconDefinition;
+    size?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
+}
+export declare const Icon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/Input/Form.scss

@@ -0,0 +1,67 @@
+@use '../mixins.scss';
+
+@mixin use-size($size) {
+  &[data-size='#{$size}'] {
+    .form-input {
+      @include mixins.use-styles(form, size, $size);
+    }
+  }
+}
+
+.form {
+  position: relative;
+
+  @include mixins.use-styles(form);
+
+  @include use-size(sm);
+  @include use-size(md);
+  @include use-size(lg);
+
+  &-space-margin {
+    margin: 0px var(--form_space, 0);
+  }
+
+  &:hover {
+    @include mixins.use-styles(form, hover);
+  }
+
+  &:active {
+    @include mixins.use-styles(form, active);
+  }
+
+  &[data-fill] {
+    width: 100%;
+  }
+
+  &[data-required] {
+    @include mixins.use-styles(form, required);
+  }
+
+  &[data-disabled] {
+    @include mixins.use-styles(form, disabled);
+
+    .form-input {
+      cursor: inherit;
+    }
+  }
+
+  &:focus-within {
+    @include mixins.use-styles(form, focus);
+  }
+}
+
+.form-input {
+  outline: none;
+  width: 100%;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  &::placeholder {
+    user-select: none;
+
+    @include mixins.use-styles(form, placeholder);
+  }
+}

package/dist/Input/Input.d.ts

@@ -0,0 +1,14 @@
+import { InputContainerProps } from './InputContainer';
+export interface InputProps extends Omit<InputContainerProps, 'inputRef' | 'children'> {
+    placeholder?: string;
+    value?: string;
+    readOnly?: boolean;
+    onValueChange?: (value: string, targetElement: HTMLInputElement) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputRef?: React.Ref<HTMLInputElement>;
+    inputClassName?: string;
+    inputType?: React.HTMLInputTypeAttribute;
+    mask?: string;
+    maskChar?: string;
+}
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Input/Input.scss

@@ -0,0 +1,47 @@
+.form-input-base {
+  padding: 0px var(--form_space, 0);
+  border-radius: var(--form_border-radius);
+
+  &-left-element {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+  }
+
+  &-right-element {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.inline-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  &-container {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    align-self: stretch;
+    overflow: hidden;
+    height: var(--form_size_md_height);
+  }
+
+  &-title {
+    padding: 0px var(--form_space, 0);
+    opacity: 0;
+  }
+}

package/dist/Input/InputContainer.d.ts

@@ -0,0 +1,11 @@
+export interface InputContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    leftElement?: React.ReactNode;
+    rightElement?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    fill?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    inputRef: React.RefObject<HTMLInputElement>;
+    children: React.ReactNode;
+}
+export declare const InputContainer: import('react').ForwardRefExoticComponent<InputContainerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Input/InputElement.d.ts

@@ -0,0 +1,9 @@
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'value' | 'defaultValue'> {
+    defaultValue?: string;
+    value?: string;
+    mask?: string;
+    maskChar?: string;
+    onValueChange?: (value: string, targetElement: HTMLInputElement) => void;
+}
+export declare const InputElement: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/LoadingButton/index.d.ts

@@ -0,0 +1,5 @@
+import { ButtonProps } from '../Button';
+import { UseLoadingProps } from '../__hooks/use-loading';
+export interface LoadingButtonProps extends UseLoadingProps, Omit<ButtonProps, 'onClick'> {
+}
+export declare const LoadingButton: ({ onClick, appearance, ...rest }: LoadingButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/NumberInput/index.d.ts

@@ -0,0 +1,23 @@
+import { InputContainerProps } from '../Input/InputContainer';
+export interface ReactNumberFormatParams {
+    thousandSeparator?: boolean | string;
+    decimalSeparator?: string;
+    allowedDecimalSeparators?: Array<string>;
+    thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan' | 'none';
+    decimalScale?: number;
+    fixedDecimalScale?: boolean;
+    allowNegative?: boolean;
+    allowLeadingZeros?: boolean;
+    suffix?: string;
+    prefix?: string;
+}
+export interface NumberInputProps extends Omit<InputContainerProps, 'inputRef' | 'children'>, ReactNumberFormatParams {
+    placeholder?: string;
+    value?: number | null;
+    readOnly?: boolean;
+    onValueChange?: (value: number | null) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputRef?: React.Ref<HTMLInputElement>;
+    inputClassName?: string;
+}
+export declare const NumberInput: import('react').ForwardRefExoticComponent<NumberInputProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/OptionItem/Option.scss

@@ -0,0 +1,89 @@
+@use '../mixins.scss';
+
+.option-list {
+  display: flex;
+  flex-direction: column;
+
+  @include mixins.use-styles(option, list);
+}
+
+.option {
+  display: flex;
+  align-items: center;
+
+  @include mixins.use-styles(option);
+
+  &-icon {
+    @include mixins.use-styles(option, icon);
+
+    svg {
+      @include mixins.use-size(option, icon, size);
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-width: 0;
+    max-width: 100%;
+
+    &-inner {
+      @include mixins.use-styles(option, content, layout);
+    }
+  }
+
+  &-title {
+    word-break: break-word;
+  }
+
+  &-label {
+    @include mixins.use-styles(option, label);
+  }
+
+  &-check {
+    @include mixins.use-styles(option, check);
+
+    svg {
+      @include mixins.use-size(option, check, size);
+    }
+  }
+
+  & > * {
+    margin-right: 8px;
+  }
+
+  & > :last-child {
+    margin-right: 0;
+  }
+
+  &:not([data-disabled]) {
+    cursor: pointer;
+
+    &:hover {
+      @include mixins.use-styles(option, hover);
+    }
+
+    &:active {
+      @include mixins.use-styles(option, active);
+    }
+  }
+
+  &[data-selected] {
+    @include mixins.use-styles(option, selected);
+  }
+
+  &[data-disabled] {
+    user-select: none;
+
+    @include mixins.use-styles(option, disabled);
+  }
+
+  &[data-minimal] {
+    @include mixins.use-styles(option, minimal);
+
+    &[data-selected] {
+      @include mixins.use-styles(option, minimal, selected);
+    }
+  }
+}

package/dist/OptionItem/OptionItem.d.ts

@@ -0,0 +1,6 @@
+import { Option } from '../types';
+export interface OptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, Omit<Option<unknown>, 'value'> {
+    active?: boolean;
+    minimal?: boolean;
+}
+export declare const OptionItem: import('react').ForwardRefExoticComponent<OptionProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/OptionItem/OptionsList.d.ts

@@ -0,0 +1,7 @@
+export interface OptionsListProps {
+    children: React.ReactNode;
+    maxHeight?: number;
+    scrollboxRef?: React.Ref<HTMLDivElement>;
+    optionsWrapperRef?: React.Ref<HTMLDivElement>;
+}
+export declare const OptionsList: ({ children, maxHeight, scrollboxRef, optionsWrapperRef }: OptionsListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Popover/Popover.scss

@@ -0,0 +1,80 @@
+@use '../mixins.scss';
+
+.popover {
+  outline: none;
+  @include mixins.use-styles(popover);
+
+  &[data-match-target='width'] {
+    width: var(--radix-popover-trigger-width);
+  }
+
+  &[data-match-target='min-width'] {
+    min-width: var(--radix-popover-trigger-width);
+  }
+
+  &-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    &[data-fit-max-height] {
+      max-height: var(--radix-popover-content-available-height);
+    }
+
+    @include mixins.use-styles(popover, content);
+  }
+
+  &-arrow {
+    position: relative;
+
+    &-icon {
+      position: relative;
+    }
+
+    &-border {
+      fill: #111418;
+      fill-opacity: 0.1;
+    }
+
+    &-fill {
+      fill: mixins.get-var-name(popover, content, background);
+    }
+
+    &:before {
+      border-radius: 1px;
+      content: '';
+      display: block;
+      position: absolute;
+      transform: rotate(45deg);
+      height: 20px;
+      margin: 5px;
+      width: 20px;
+      box-shadow: 1px 1px 6px rgba(17, 20, 24, 0.2);
+      margin-top: -14px;
+    }
+  }
+
+  &[data-appearance='default'] {
+    &[data-state='open'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, default, in);
+    }
+
+    &[data-state='closed'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, default, out);
+    }
+  }
+
+  &[data-appearance='minimal'] {
+    &[data-state='open'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, minimal, in);
+    }
+
+    &[data-state='closed'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, minimal, out);
+    }
+  }
+}