@companix/uikit 0.0.34 → 0.0.36

package/dist/Popover/Popover.scss

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

package/dist/Popover/index.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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