@companix/uikit 0.0.36 → 0.0.38

package/dist/Popover/index.d.ts

@@ -0,0 +1,27 @@
+export type Align = 'start' | 'center' | 'end';
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+export interface PopoverProps {
+    children: React.ReactNode;
+    content: ({ close }: {
+        close: () => void;
+    }) => React.ReactNode;
+    open?: boolean;
+    triggerRef?: React.Ref<HTMLButtonElement>;
+    triggerProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    onOpenChange?: (open: boolean) => void;
+    onAnimationEnd?: () => void;
+    onAnimationStart?: () => void;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    side?: Side;
+    align?: Align;
+    showArrows?: boolean;
+    minimal?: boolean;
+    sideOffset?: number;
+    matchTarget?: 'width' | 'min-width';
+    className?: string;
+    fitMaxHeight?: boolean;
+    disabled?: boolean;
+    zIndex?: number;
+}
+export declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Progress/Progress.scss

@@ -0,0 +1,47 @@
+@use '../mixins.scss';
+
+.progress-bar {
+  @include mixins.use-styles(progress);
+
+  display: block;
+  overflow: hidden;
+  position: relative;
+  border-radius: 100px;
+  width: 100%;
+
+  &-thumb {
+    animation: linear-progress-bar-stripes 0.3s linear infinite reverse;
+    background: linear-gradient(
+      -45deg,
+      hsla(0, 0%, 100%, 0.2) 25%,
+      transparent 0,
+      transparent 50%,
+      hsla(0, 0%, 100%, 0.2) 0,
+      hsla(0, 0%, 100%, 0.2) 75%,
+      transparent 0
+    );
+    background-size: 30px 30px;
+    border-radius: 40px;
+    height: 100%;
+    position: absolute;
+    transition: width 0.2s cubic-bezier(0.4, 1, 0.75, 0.9);
+    width: 100%;
+
+    @include mixins.use-styles(progress, thumb);
+
+    @each $appearance, $v in mixins.$appearances {
+      &[data-appearance='#{$appearance}'] {
+        @include mixins.use-styles(progress, thumb, $appearance);
+      }
+    }
+  }
+}
+
+@keyframes linear-progress-bar-stripes {
+  0% {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 30px 0;
+  }
+}

package/dist/Progress/index.d.ts

@@ -0,0 +1,5 @@
+export interface ProgressBarProps {
+    appearance?: 'primary' | 'neutral' | 'positive' | 'negative';
+    value: number;
+}
+export declare const ProgressBar: ({ appearance, value }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Radio/Radio.scss

@@ -0,0 +1,148 @@
+@use '../mixins.scss';
+
+.radio {
+  display: inline-table;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  max-width: max-content;
+
+  @include mixins.use-styles(radio);
+
+  &:not([data-required]):not([data-disabled]):hover {
+    .radio-box[data-state='unchecked'] {
+      @include mixins.use-styles(radio, box, hover);
+    }
+  }
+
+  &:not([data-required]):not([data-disabled]):active {
+    .radio-box[data-state='unchecked'] {
+      @include mixins.use-styles(radio, box, active);
+    }
+  }
+
+  &[data-disabled] {
+    @include mixins.use-styles(radio, disabled);
+  }
+
+  &[data-required] {
+    @include mixins.use-styles(radio, required);
+
+    .radio-box {
+      &::before {
+        content: ' ';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+
+        @include mixins.use-styles(radio, required, box);
+        border-radius: mixins.get-var-name(radio, box, border-radius);
+      }
+    }
+  }
+
+  &[data-size='sm'] {
+    @include mixins.use-styles(radio, size, sm);
+
+    .radio-box {
+      @include mixins.use-size(radio, size, sm, box);
+    }
+
+    .radio-mark {
+      @include mixins.use-size(radio, size, sm, mark);
+    }
+  }
+
+  &[data-size='md'] {
+    @include mixins.use-styles(radio, size, md);
+
+    .radio-box {
+      @include mixins.use-size(radio, size, md, box);
+    }
+
+    .radio-mark {
+      @include mixins.use-size(radio, size, md, mark);
+    }
+  }
+
+  &-box {
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.1s linear;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include mixins.use-styles(radio, box);
+
+    &[data-disabled] {
+      cursor: default;
+    }
+
+    &:after {
+      visibility: hidden;
+      content: '\00A0';
+    }
+
+    &[data-state='checked'] {
+      @include mixins.use-styles(radio, box, checked);
+    }
+  }
+
+  &-mark {
+    position: absolute;
+    @include mixins.use-styles(radio, mark);
+
+    &[data-state='checked'] {
+      @include mixins.use-styles(radio, mark, in);
+    }
+
+    &[data-state='unchecked'] {
+      @include mixins.use-styles(radio, mark, out);
+    }
+  }
+
+  &-label {
+    cursor: pointer;
+    display: table-cell;
+    word-break: break-word;
+
+    &[data-disabled] {
+      cursor: default;
+    }
+
+    @include mixins.use-styles(radio, label);
+  }
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  @include mixins.use-styles(radio, group);
+}
+
+// .radio-icon {
+//   width: 16px;
+//   height: 16px;
+//   background-color: transparent;
+//   border: 1px solid #ffffff75;
+//   border-radius: 100px;
+
+//   &[data-checked] {
+//     background-color: #fff;
+//   }
+// }
+
+// .radio {
+//   display: flex;
+//   align-items: center;
+//   outline: none;
+//   cursor: pointer;
+//   gap: 6px;
+// }

package/dist/Radio/index.d.ts

@@ -0,0 +1,20 @@
+export interface RadioOption<T> {
+    value: T;
+    label: React.ReactNode;
+}
+export interface RadioGroupProps<T> {
+    options: RadioOption<T>[];
+    onChange: (event: T) => void;
+    value: T | null;
+    disabled?: boolean;
+    required?: boolean;
+    size?: 'sm' | 'md';
+}
+export declare const RadioGroup: <T extends string>(props: RadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
+interface RadioProps extends RadioOption<string> {
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    required?: boolean;
+}
+export declare const Radio: ({ value, label, size, disabled, required }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Scrollable/ImitateScroll.d.ts

@@ -0,0 +1,10 @@
+export interface ImitateScrollProps {
+    children: React.ReactNode;
+    thumbClassName: string;
+    thumbColor?: string;
+    trackWidth?: number;
+    thumbMargin?: number;
+    scrollableClassName?: string;
+}
+declare const ImitateScroll: ({ children, thumbClassName, scrollableClassName, thumbMargin, trackWidth }: ImitateScrollProps) => import("react/jsx-runtime").JSX.Element;
+export { ImitateScroll };

package/dist/Scrollable/Scrollable.scss

@@ -0,0 +1,50 @@
+.scrollable::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
+}
+
+.scrollable::-webkit-scrollbar-thumb {
+  background-clip: padding-box;
+  border: var(--thumb-padding) solid transparent;
+  border-radius: 999px;
+  background-color: var(--thumb-color);
+}
+
+.scrollable::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+.scrollable-hover-interaction::-webkit-scrollbar-thumb,
+.scrollable-hover-interaction::-webkit-scrollbar-track {
+  visibility: hidden;
+}
+.scrollable-hover-interaction:hover::-webkit-scrollbar-thumb,
+.scrollable-hover-interaction:hover::-webkit-scrollbar-track {
+  visibility: visible;
+}
+
+.scrollable-border-position::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+
+  border-right-width: 0px;
+  border-bottom-width: 0px;
+
+  border-left-width: calc(var(--thumb-padding) * 2);
+  border-top-width: calc(var(--thumb-padding) * 2);
+}
+
+.hidden-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.hidden-scroll::-webkit-scrollbar-thumb {
+  display: none;
+}
+
+.hidden-scroll::-webkit-scrollbar-track {
+  display: none;
+}
+
+.hidden-scroll::-webkit-scrollbar-corner {
+  display: none;
+}

package/dist/Scrollable/index.d.ts

@@ -0,0 +1,33 @@
+interface OuterImplementation {
+    implementation: 'outer';
+    shadowPadding?: number;
+    scrollbarWidth: number;
+    noneCorrect?: boolean;
+}
+interface EdgeImplementation {
+    implementation: 'edge';
+    scrollbarWidth: number;
+    padding: number;
+}
+interface InnerImplementation {
+    implementation: 'inner';
+    padding: number;
+}
+interface ScrollableProps {
+    heightAuto?: boolean;
+    scrollX?: boolean;
+    scrollY?: boolean;
+    interactionKind?: 'static' | 'hover';
+    thumbPos?: 'center' | 'border';
+    thumbPadding?: number;
+    thumbColor?: string;
+    onWheel?: React.WheelEventHandler<HTMLDivElement>;
+    onScroll?: React.UIEventHandler<HTMLDivElement>;
+    maxHeight?: number;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+type Implementation = InnerImplementation | OuterImplementation | EdgeImplementation;
+declare const Scrollable: import('react').ForwardRefExoticComponent<(ScrollableProps & Implementation) & import('react').RefAttributes<HTMLDivElement>>;
+export { Scrollable };

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/Select/Select.scss

@@ -0,0 +1,80 @@
+@use '../mixins.scss';
+
+.select {
+  cursor: pointer;
+  max-width: 100%;
+
+  &-layout {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: inherit;
+  }
+
+  &-placeholder {
+    user-select: none;
+
+    @include mixins.use-styles(form, placeholder);
+  }
+
+  &-content {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    align-self: stretch;
+    overflow: hidden;
+
+    &:first-child {
+      padding-left: var(--form_space, 0);
+    }
+
+    &-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &-element {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  &-close-button {
+    pointer-events: auto;
+    cursor: pointer;
+    padding: 0px var(--form_space, 0);
+    height: 100%;
+    outline: none;
+    color: var(--select_clean_color);
+
+    &:hover {
+      color: var(--select_clean_hover_color);
+    }
+  }
+
+  &-expand {
+    margin-right: var(--form_space, 0);
+
+    &:first-child {
+      margin-left: var(--form_space, 0);
+    }
+  }
+}
+
+// expand icon
+
+.expand-icon {
+  color: var(--select_expand_color);
+  transition: transform 0.2s;
+}
+
+.form {
+  &[data-state='open'] {
+    .expand-icon {
+      transform: rotate(180deg);
+    }
+  }
+}

package/dist/Select/SelectInput.d.ts

@@ -0,0 +1,15 @@
+export interface SelectFormProps extends React.HTMLAttributes<HTMLDivElement> {
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    leftElement?: React.ReactNode;
+    placeholder?: string;
+    value?: string | number;
+    size?: 'sm' | 'md' | 'lg';
+    fill?: boolean;
+    clearButton?: boolean;
+    clearButtonIcon?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+    onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const SelectInput: import('react').ForwardRefExoticComponent<SelectFormProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Select/SelectOptions.d.ts

@@ -0,0 +1,12 @@
+import { Option } from '..';
+interface SelectPopoverProps<T> {
+    scrollboxRef?: React.RefObject<HTMLDivElement>;
+    optionsWrapperRef?: React.RefObject<HTMLDivElement>;
+    options: Option<T>[];
+    minimalOptions?: boolean;
+    active?: T | null;
+    onSelect?: (value: T) => void;
+    onOpened?: () => void;
+}
+export declare const SelectOptions: <T>(props: SelectPopoverProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Select/SelectRight.d.ts

@@ -0,0 +1,8 @@
+interface SelectRightElementsProps {
+    onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    clearButton?: boolean;
+    clearButtonIcon?: React.ReactNode;
+    value: boolean;
+}
+export declare const SelectRightElements: (props: SelectRightElementsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Select/index.d.ts

@@ -0,0 +1,24 @@
+import { Option } from '../types';
+import { SelectFormProps } from './SelectInput';
+interface Cleanable<T> {
+    clearButton: true;
+    onChange: (event: T | null) => void;
+}
+interface UnCleanable<T> {
+    clearButton?: false;
+    onChange: (event: T) => void;
+}
+type DependedValueType<T> = Cleanable<T> | UnCleanable<T>;
+export type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'closeButton'> & DependedValueType<T> & {
+    value: T | null;
+    options: Option<T>[];
+    children?: React.ReactNode;
+    minimalOptions?: boolean;
+    matchTarget?: 'width' | 'min-width';
+    popoverRef?: React.Ref<HTMLDivElement>;
+    scrollRef?: React.Ref<{
+        scrollTo: (index: number) => void;
+    }>;
+};
+export declare const Select: <T>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/SelectTags/SelectTags.scss

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

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

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

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