@companix/uikit 0.0.34 → 0.0.36

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.34",
+  "version": "0.0.36",
+  "main": "./dist/bundle.es.js",
   "module": "./dist/bundle.es.js",
-  "types": "./dist/index.d.ts",
+  "types": "./src/index.ts",
   "type": "module",
   "files": [
     "dist"
@@ -22,10 +23,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@companix/utils-browser": "*",
-    "@companix/utils-js": "*",
-    "@fortawesome/free-regular-svg-icons": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@companix/icons-solid": "file:../../icons/solid",
+    "@companix/utils-browser": "file:../utils-browser",
+    "@companix/utils-js": "file:../utils-js",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -41,9 +41,6 @@
     "react-number-format": "^5.4.4"
   },
   "devDependencies": {
-    "@blueprintjs/core": "^6.2.1",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@react-aria/interactions": "^3.25.3",
     "@rollup/plugin-eslint": "^9.0.5",
     "@rollup/plugin-typescript": "^11.1.6",
     "@tailwindcss/vite": "^4.1.12",
@@ -68,4 +65,4 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.4"
   }
-}
+}

package/dist/Avatar/Avatar.scss

@@ -1,64 +0,0 @@
-@use '../mixins.scss';
-
-.avatar {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  background-size: cover;
-  isolation: isolate;
-
-  @include mixins.use-styles(avatar);
-
-  &-image {
-    object-fit: cover;
-    display: block;
-    width: 100%;
-    height: 100%;
-    color: transparent;
-    text-indent: 10000px;
-    border: 0;
-    border-radius: inherit;
-  }
-
-  &-icon {
-    position: absolute;
-    top: auto;
-    left: auto;
-  }
-
-  &-initials {
-    line-height: 1;
-    text-align: center;
-    text-transform: uppercase;
-
-    @include mixins.use-styles(avatar, initials);
-  }
-
-  &-border {
-    box-sizing: border-box;
-    pointer-events: none;
-    border-radius: inherit;
-    transform-origin: left top;
-
-    @include mixins.use-styles(avatar, border);
-  }
-
-  &-content {
-    display: inherit;
-    align-items: inherit;
-    justify-content: inherit;
-    border-radius: inherit;
-  }
-
-  &-border,
-  &-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}

package/dist/Avatar/helpers.d.ts

@@ -1,10 +0,0 @@
-export type GetInitialsFontSizeType = (avatarSize: number) => number;
-export declare const getInitialsFontSize: GetInitialsFontSizeType;
-export declare function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36;
-export declare namespace getFallbackIconSizeByImageBaseSize {
-    let MAX_SIZE: 36;
-}
-export declare function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24;
-export declare namespace getBadgeIconSizeByImageBaseSize {
-    let MAX_SIZE: 24;
-}

package/dist/Avatar/index.d.ts

@@ -1,8 +0,0 @@
-import { AvatarSize } from './types';
-export interface AvatarProps extends React.ImgHTMLAttributes<HTMLElement> {
-    size?: AvatarSize;
-    noBorder?: boolean;
-    fallbackIcon?: React.ReactElement;
-    initials?: string;
-}
-export declare const Avatar: ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, size, src, srcSet, useMap, initials, noBorder, fallbackIcon: fallbackIconProp, children }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Avatar/types.d.ts

@@ -1,2 +0,0 @@
-export declare const avatarSizes: readonly [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96];
-export type AvatarSize = (typeof avatarSizes)[number];

package/dist/Button/Button.scss

@@ -1,128 +0,0 @@
-@use '../mixins.scss';
-
-// scheme: bth-[appearance]-[mode]-[property]--[state]
-//
-// appearance:  primary, neutral, positive, negative
-// mode: default, outline, minimal
-// state: enabled, hovered, pressed, disabled, loading
-// property: text, background, shadow, border
-
-@mixin use-mode($appearance, $mode) {
-  @include mixins.use-styles(button, $appearance, $mode, enabled);
-
-  &:hover {
-    @include mixins.use-styles(button, $appearance, $mode, hovered);
-  }
-
-  &[data-active],
-  &:active {
-    @include mixins.use-styles(button, $appearance, $mode, pressed);
-  }
-
-  &[data-loading] {
-    @include mixins.use-styles(button, $appearance, $mode, loading);
-  }
-
-  &[disabled] {
-    cursor: not-allowed;
-    @include mixins.use-styles(button, $appearance, $mode, disabled);
-  }
-}
-
-@mixin use-appearance($appearance) {
-  &[data-appearance='#{$appearance}'] {
-    &[data-mode='default'] {
-      @include use-mode($appearance, default);
-    }
-
-    &[data-mode='outline'] {
-      @include use-mode($appearance, outline);
-    }
-
-    &[data-mode='minimal'] {
-      @include use-mode($appearance, minimal);
-    }
-  }
-}
-
-.button {
-  overflow: visible;
-  box-sizing: border-box;
-  -moz-user-focus: ignore;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-decoration: none;
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  @include mixins.use-styles(button);
-  @include mixins.items-spacing(8px);
-
-  // fill
-
-  &[data-fill] {
-    width: 100%;
-  }
-
-  // align
-
-  &[data-align='center'] {
-    justify-content: center;
-
-    & > .button-text {
-      text-align: center;
-    }
-  }
-
-  &[data-align='left'] {
-    justify-content: left;
-
-    & > .button-text {
-      flex: 1 1 auto;
-      text-align: left;
-    }
-  }
-
-  &[data-align='right'] {
-    justify-content: right;
-
-    & > .button-text {
-      flex: 1 1 auto;
-      text-align: right;
-    }
-  }
-
-  // sizes
-
-  &[data-size='sm'] {
-    @include mixins.use-styles(button, size, sm);
-  }
-
-  &[data-size='md'] {
-    @include mixins.use-styles(button, size, md);
-  }
-
-  &[data-size='lg'] {
-    @include mixins.use-styles(button, size, lg);
-  }
-
-  // text
-
-  &-text {
-    @include mixins.truncate-text();
-  }
-
-  // appearance
-
-  @include use-appearance(primary);
-  @include use-appearance(neutral);
-  @include use-appearance(negative);
-  @include use-appearance(positive);
-}

package/dist/Button/index.d.ts

@@ -1,21 +0,0 @@
-export type Appearance = 'primary' | 'neutral' | 'positive' | 'negative';
-export type Mode = 'default' | 'outline' | 'minimal';
-export type Size = 'sm' | 'md' | 'lg';
-export interface InternButtonProps {
-    icon?: React.ReactNode;
-    iconRight?: React.ReactNode;
-    appearance?: Appearance;
-    mode?: Mode;
-    size?: Size;
-    fill?: boolean;
-    align?: 'left' | 'center' | 'right';
-    loading?: boolean;
-    active?: boolean;
-    text?: React.ReactNode;
-    children?: React.ReactNode;
-    className?: string;
-    Component?: React.ElementType;
-}
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, InternButtonProps {
-}
-export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/ButtonGroup/ButtonGroup.scss

@@ -1,18 +0,0 @@
-.button-group {
-  display: flex;
-
-  &[data-fill] {
-    width: 100%;
-  }
-
-  & > .button:not(:first-child) {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  & > .button:not(:last-child) {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-    margin-right: -1px;
-  }
-}

package/dist/ButtonGroup/index.d.ts

@@ -1,6 +0,0 @@
-export interface ButtonGroupProps {
-    children: React.ReactNode;
-    className?: string;
-    fill?: boolean;
-}
-export declare const ButtonGroup: import('react').ForwardRefExoticComponent<ButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Calendar/Calendar.d.ts

@@ -1,14 +0,0 @@
-export interface CalendarProps {
-    value?: Date | null;
-    disablePast?: boolean;
-    disableFuture?: boolean;
-    enableTime?: boolean;
-    disablePickers?: boolean;
-    showNeighboringMonth?: boolean;
-    onChange?: (value: Date) => void;
-    shouldDisableDate?: (value: Date) => boolean;
-    viewDate?: Date;
-    minDateTime?: Date;
-    maxDateTime?: Date;
-}
-export declare const Calendar: ({ disablePickers, value, onChange, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Calendar/Calendar.scss

@@ -1,125 +0,0 @@
-@use '../mixins.scss';
-
-.calendar {
-  @include mixins.use-styles(calendar);
-
-  &-header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @include mixins.use-styles(calendar, header);
-  }
-
-  &-navigation {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    outline: none;
-    cursor: pointer;
-
-    @include mixins.use-styles(calendar, navigation);
-    @include mixins.use-size(calendar, navigation, size);
-
-    &[data-side='left'] {
-      left: 0;
-    }
-
-    &[data-side='right'] {
-      right: 0;
-    }
-
-    &:hover {
-      @include mixins.use-styles(calendar, navigation, hover);
-    }
-
-    &:active {
-      @include mixins.use-styles(calendar, navigation, active);
-    }
-
-    svg {
-      @include mixins.use-size(calendar, navigation, icon, size);
-    }
-  }
-
-  &-pickers {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  &-names {
-    display: flex;
-  }
-
-  &-name {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @include mixins.use-styles(calendar, name);
-  }
-
-  &-days {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-  }
-
-  &-day {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-
-    @include mixins.use-styles(calendar, day);
-
-    &:not([data-disabled]) {
-      cursor: pointer;
-
-      &:hover {
-        @include mixins.use-styles(calendar, day, hover);
-      }
-
-      &[data-active] {
-        @include mixins.use-styles(calendar, day, active);
-      }
-
-      &[data-selected] {
-        @include mixins.use-styles(calendar, day, selected);
-
-        .calendar-day-number::after {
-          background-color: #ffffff;
-        }
-      }
-
-      &[data-void] {
-        background-color: unset;
-        cursor: default;
-      }
-    }
-
-    &[data-disabled] {
-      @include mixins.use-styles(calendar, day, disabled);
-    }
-
-    &[data-today] {
-      .calendar-day-number {
-        position: relative;
-
-        &::after {
-          position: absolute;
-          height: 2px;
-          border-radius: 10px;
-          content: '';
-          display: block;
-          width: 100%;
-          bottom: 0px;
-          right: 0;
-          background-color: #529ef4;
-        }
-      }
-    }
-  }
-}

package/dist/Calendar/CalendarHeader.d.ts

@@ -1,10 +0,0 @@
-export interface CalendarHeaderProps {
-    viewDate: Date;
-    disablePickers?: boolean;
-    isMonthDisabled?: (monthNumber: number, year?: number) => boolean;
-    isYearDisabled?: (yearNumber: number) => boolean;
-    onChange: (viewDate: Date) => void;
-    onNextMonth?: () => void;
-    onPrevMonth?: () => void;
-}
-export declare const CalendarHeader: ({ viewDate, onChange, isMonthDisabled, isYearDisabled, onNextMonth, onPrevMonth }: CalendarHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Checkbox/Checkbox.scss

@@ -1,115 +0,0 @@
-@use '../mixins.scss';
-
-.checkbox {
-  display: inline-table;
-  user-select: none;
-  touch-action: manipulation;
-  max-width: max-content;
-
-  @include mixins.use-styles(checkbox);
-
-  &:not([data-disabled]):not([data-required]):hover {
-    .checkbox-box[data-state='unchecked'] {
-      @include mixins.use-styles(checkbox, box, hover);
-    }
-  }
-
-  &:not([data-disabled]):not([data-required]):active {
-    .checkbox-box[data-state='unchecked'] {
-      @include mixins.use-styles(checkbox, box, active);
-    }
-  }
-
-  &:not([data-disabled]) {
-    .checkbox-box[data-state='checked'] {
-      @include mixins.use-styles(checkbox, box, checked);
-    }
-  }
-
-  &[data-disabled] {
-    @include mixins.use-styles(checkbox, disabled);
-  }
-
-  &[data-required] {
-    @include mixins.use-styles(checkbox, required);
-
-    .checkbox-box::before {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0;
-
-      @include mixins.use-styles(checkbox, required, box);
-
-      border-radius: mixins.get-var-name(checkbox, box, border-radius);
-    }
-  }
-
-  &[data-size='sm'] {
-    @include mixins.use-styles(checkbox, size, sm);
-
-    .checkbox-box {
-      @include mixins.use-size(checkbox, size, sm, box);
-    }
-  }
-
-  &[data-size='md'] {
-    @include mixins.use-styles(checkbox, size, md);
-
-    .checkbox-box {
-      @include mixins.use-size(checkbox, size, md, box);
-    }
-  }
-
-  &-box {
-    cursor: pointer;
-    outline: none;
-    transition: background-color 0.1s linear;
-    display: inline-block;
-    position: relative;
-    z-index: 0;
-
-    @include mixins.use-styles(checkbox, box);
-
-    &[data-disabled] {
-      cursor: default;
-    }
-
-    &:after {
-      visibility: hidden;
-      content: '\00A0';
-    }
-  }
-
-  &-label {
-    cursor: pointer;
-    display: table-cell;
-    word-break: break-word;
-
-    &[data-disabled] {
-      cursor: default;
-    }
-
-    @include mixins.use-styles(checkbox, label);
-  }
-
-  &-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 3;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-
-    &[data-state='checked'] {
-      @include mixins.use-styles(checkbox, icon, in);
-    }
-
-    &[data-state='unchecked'] {
-      @include mixins.use-styles(checkbox, icon, out);
-    }
-  }
-}

package/dist/Checkbox/index.d.ts

@@ -1,10 +0,0 @@
-export interface CheckboxProps {
-    checked: boolean;
-    onCheckedChange: (checked: boolean) => void;
-    size?: 'sm' | 'md';
-    label?: React.ReactNode;
-    disabled?: boolean;
-    required?: boolean;
-}
-declare const Checkbox: ({ checked, required, disabled, onCheckedChange, size, label }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
-export { Checkbox };

package/dist/Countdown/index.d.ts

@@ -1,6 +0,0 @@
-export interface CountDownProps {
-    expiration: number;
-    separator?: string;
-    onExpired?: VoidFunction;
-}
-export declare const Countdown: ({ expiration, separator, onExpired }: CountDownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DateInput/DateInput.scss

@@ -1,11 +0,0 @@
-.data-input {
-  display: flex;
-  gap: 8px;
-  width: 100%;
-
-  .form {
-    input {
-      width: 100%;
-    }
-  }
-}

package/dist/DateInput/index.d.ts

@@ -1,13 +0,0 @@
-import { DateFormat } from '..';
-export interface DateInputProps {
-    min?: DateFormat;
-    max?: DateFormat;
-    noDaySelect?: boolean;
-    noYearSelect?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    value: DateFormat;
-    onChange: (e: DateFormat) => void;
-}
-export declare const DateInput: ({ min, max, disabled, value, noDaySelect, noYearSelect, onChange, required, size }: DateInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DatePicker/index.d.ts

@@ -1,9 +0,0 @@
-import { InputProps } from '../Input/Input';
-import { CalendarProps } from '../Calendar/Calendar';
-export interface DatePickerProps extends Omit<CalendarProps, 'onChange'>, Omit<InputProps, 'value' | 'onChange' | 'rightElement'> {
-    onChange?: (value: Date | null) => void;
-    clearButton?: boolean;
-    clearButtonIcon?: boolean;
-    children?: React.ReactNode;
-}
-export declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Dialog/Dialog.scss

@@ -1,25 +0,0 @@
-@use '../mixins.scss';
-
-.dialog {
-  &-container {
-    @include mixins.use-styles(dialog, container);
-  }
-
-  &-overlay {
-    @include mixins.use-styles(dialog, overlay);
-  }
-
-  @include mixins.use-styles(dialog);
-}
-
-.dialog-container {
-  @each $size, $v in (xxs, xs, s, m, l, xl, xxl, full) {
-    &[data-size='#{$size}'] {
-      @include mixins.use-styles(dialog, size, $size, container);
-
-      .dialog {
-        @include mixins.use-styles(dialog, size, $size);
-      }
-    }
-  }
-}