@sorocraft/ui 1.2.68 → 1.2.69

package/dist/models/form.d.ts

@@ -1,3 +0,0 @@
-export interface FormErrors {
-    [key: string]: string;
-}

package/dist/models/modal.d.ts

@@ -1,21 +0,0 @@
-import { JSXElementConstructor, LazyExoticComponent, ReactElement } from "react";
-export interface ModalParams {
-    closeModal?: () => void;
-    onClose?: () => void;
-    [key: string]: any;
-}
-export interface ModalType {
-    id: string;
-    params?: ModalParams;
-}
-export interface DrawerType {
-    id: string;
-    params?: ModalParams;
-}
-export interface ModalComponentProps {
-    params: ModalParams;
-}
-export type ModalComponent = JSXElementConstructor<ModalComponentProps> | LazyExoticComponent<({ params }: ModalComponentProps) => ReactElement>;
-export interface ModalsMap {
-    [key: string]: ModalComponent;
-}

package/dist/models/ui.d.ts

@@ -1,27 +0,0 @@
-export type SIZE = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
-export type SIZE_LONG = "xsmall" | "small" | "medium" | "large";
-export declare enum UIElementType {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    DANGER = "danger",
-    SUCCESS = "success",
-    WARNING = "warning",
-    INFO = "info",
-    LIGHT = "light",
-    DEFAULT = "default",
-    DARK = "dark",
-    LIGHT_PRIMARY = "lightPrimary",
-    LIGHT_SUCCESS = "lightSuccess",
-    LIGHT_WARNING = "lightWarning",
-    LIGHT_INFO = "lightInfo",
-    LIGHT_DANGER = "lightDanger",
-    LIGHT_DARK = "lightDark",
-    LIGHT_SECONDARY = "lightSecondary",
-    WHITE_TEXT = "whiteText",
-    BORDERED_PRIMARY = "borderedPrimary",
-    BORDERED_SECONDARY = "borderedSecondary",
-    NO_STYLE = "noStyle"
-}
-export interface DivElementMap {
-    [key: string]: HTMLDivElement | null;
-}

package/dist/styles/scss/animations.scss

@@ -1,115 +0,0 @@
-@keyframes flexWide {
-	from {
-		flex: 0;
-	}
-
-	to {
-		flex: 1;
-	}
-}
-
-@keyframes slidein {
-	from {
-		transform: translateX(0%);
-	}
-	to {
-		transform: translateX(-100%);
-	}
-}
-
-@keyframes fadeInOut {
-	0% {
-		opacity: 0.5;
-	}
-	50% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0.5;
-	}
-}
-
-@keyframes heightAnimation {
-	0% {
-		height: 0%;
-	}
-
-	100% {
-		height: 100%;
-	}
-}
-
-@keyframes fadein {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
-/* Firefox < 16 */
-@-moz-keyframes fadein {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
-/* Safari, Chrome and Opera > 12.1 */
-@-webkit-keyframes fadein {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
-/* Internet Explorer */
-@-ms-keyframes fadein {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
-@keyframes floatAnimation {
-	0% {
-		transform: translateY(0);
-	}
-	100% {
-		transform: translateY(-20px);
-	}
-}
-
-@keyframes bottomSheet {
-	from {
-		transform: translate(0, 100%);
-	}
-	to {
-		transform: translate(0, 0);
-	}
-}
-
-@keyframes slideRightToLeft {
-	from {
-		transform: translateX(100%);
-	}
-	to {
-		transform: translateX(0%);
-	}
-}
-
-@keyframes rotation {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}

package/dist/styles/scss/colors.scss

@@ -1,140 +0,0 @@
-$color-gray-100: #f5f8fa;
-$color-gray-200: #eff2f5;
-$color-gray-300: #e4e6ef;
-$color-gray-400: #b5b5c3;
-$color-gray-500: #a1a5b7;
-$color-gray-600: #7e8299;
-$color-gray-700: #5e6278;
-$color-gray-800: #3f4254;
-$color-gray-900: #181c32;
-$color-border: $color-gray-200;
-$color-border-dashed: $color-gray-300;
-$color-blue: #009ef6;
-$color-indigo: #6610f2;
-$color-purple: #6f42c1;
-$color-pink: #d63384;
-$color-red: #dc3545;
-$color-orange: #fd7e14;
-$color-yellow: #ffc107;
-$color-green: #198754;
-$color-teal: #20c997;
-$color-cyan: #0dcaf0;
-$color-gray: #7e8299;
-$color-gray-dark: $color-gray-800;
-$color-white: #ffffff;
-$color-black: #000000;
-// THEME COLORS
-$color-light: $color-gray-100;
-$color-light-active: $color-gray-300;
-$color-light-inverse: $color-gray-600;
-$color-primary: var(--sorocraft-color-primary, #2d3436);
-$color-primary-light: var(--sorocraft-color-primary-light, #f5f8fa);
-$color-primary-active: var(--sorocraft-color-primary-active, #212526);
-$color-primary-inverse: var(--sorocraft-color-primary-inverse, $color-white);
-$color-secondary: var(--sorocraft-color-secondary, #16a085);
-$color-secondary-inverse: $color-white;
-$color-secondary-active: var(--sorocraft-color-secondary-active, #0bb7af);
-$color-secondary-light: rgba($color-secondary, 0.1);
-$color-secondary-extra-light: var(--sorocraft-color-secondary-extra-light, #dcfdfd);
-$color-success: #1bc5bd;
-$color-success-light: #c9f7f5;
-$color-success-active: #0bb7af;
-$color-success-inverse: $color-white;
-$color-info: #7239ea;
-$color-info-inverse: $color-white;
-$color-info-light: #f8f5ff;
-$color-info-active: #5014d0;
-$color-warning: #ffc700;
-$color-warning-inverse: $color-white;
-$color-warning-light: #fff8dd;
-$color-warning-active: #f1bc00;
-$color-danger: #f1416c;
-$color-danger-inverse: $color-white;
-$color-dark: $color-gray-900;
-$color-dark-inverse: $color-white;
-$color-dark-light: $color-gray-200;
-$color-dark-active: #131628;
-$color-danger-light: #fff5f8;
-$color-danger-active: #d9214e;
-$color-link: #1b84ff;
-$color-link-active: #056ee9;
-$color-link-light: #e9f3ff;
-$color-link-inverse: #ffffff;
-// END THEME COLORS
-$color-light-rgb: 245, 248, 250;
-$color-primary-rgb: 4, 200, 200;
-$color-success-rgb: 0, 158, 247;
-$color-info-rgb: 114, 57, 234;
-$color-warning-rgb: 255, 199, 0;
-$color-danger-rgb: 241, 65, 108;
-$color-dark-rgb: 24, 28, 50;
-$color-white-rgb: 255, 255, 255;
-$color-black-rgb: 0, 0, 0;
-$color-body-color-rgb: 24, 28, 50;
-$color-body-bg-rgb: 255, 255, 255;
-$color-body-bg: #f3f6f9;
-$color-link-hover: #36d3d3;
-$color-sidebar-bg: $color-white;
-
-/* Text */
-$color-text-muted: $color-gray-500;
-$color-body-text: $color-gray-900;
-$color-message-bg: $color-white;
-$color-active-message-bg: $color-secondary-extra-light;
-
-/* Input */
-$color-input-plaintext: $color-gray-700;
-$color-input-bg: $color-white;
-$color-input-disabled-bg: $color-gray-200;
-$color-input-disabled-border: $color-gray-300;
-$color-input: $color-gray-700;
-$color-input-border: $color-gray-300;
-$color-input-focus-bg: $color-white;
-$color-input-focus-border: $color-gray-400;
-$color-input-focus: $color-gray-700;
-$color-input-solid-bg: $color-gray-100;
-$color-input-solid-bg-focus: #eef3f7;
-$color-input-solid-placeholder: $color-gray-500;
-$color-input-solid: $color-gray-700;
-
-/* Button */
-$btn-disabled-color: $color-white;
-$btn-disabled-bg: $color-primary;
-$btn-disabled-border-color: $color-primary;
-$btn-color: $color-body-text;
-
-$color-tooltip: $color-gray-800;
-$color-tooltip-bg: $color-white;
-
-/* TABLE */
-$color-table: $color-gray-900;
-$color-table-bg: transparent;
-$color-table-border: $color-gray-200;
-$color-table-accent-bg: transparent;
-$color-table-striped: $color-gray-900;
-$color-table-striped-bg: rgba(245, 248, 250, 0.75);
-$color-table-active: $color-gray-900;
-$color-table-active-bg: $color-gray-100;
-$color-table-hover: $color-gray-900;
-$color-table-hover-bg: $color-gray-100;
-$color-table-caption: $color-gray-500;
-$color-table-loading-message-bg: $color-white;
-$color-table-loading-message: $color-gray-700;
-
-/* Modal */
-$color-modal-divider: $color-gray-200;
-
-/* Bagde */
-$color-badge: $color-gray-100;
-$color-badge-text: $color-gray-500;
-
-/* Menu */
-$menu-dropdown-bg-color: $color-white;
-$color-divider: $color-gray-200;
-$color-darker-divider: $color-gray-400;
-
-/* Notification */
-$color-unseen-notification: $color-gray-200;
-
-/* BRANDS */
-$color-whatsapp: #25d366;

package/dist/styles/scss/functions/toRem.scss

@@ -1,13 +0,0 @@
-@use "sass:list";
-@use "sass:math";
-
-@use "../variables" as variables;
-
-@function toRem($value...) {
-	$result: ();
-
-	@each $val in $value {
-		$result: list.append($result, math.div($val, variables.$base-font-size) * 1rem);
-	}
-	@return $result;
-}

package/dist/styles/scss/mixins.scss

@@ -1,261 +0,0 @@
-@use "./colors.scss" as *;
-@use "./variables.scss" as *;
-@use "./functions/toRem.scss" as functions;
-@use "./responsive.scss" as *;
-@use "sass:list";
-@use "sass:map";
-
-@mixin flexCentered {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-@mixin noSelection {
-	-webkit-touch-callout: none; /* iOS Safari */
-	-webkit-user-select: none; /* Safari */
-	-khtml-user-select: none; /* Konqueror HTML */
-	-moz-user-select: none; /* Old versions of Firefox */
-	-ms-user-select: none; /* Internet Explorer/Edge */
-	user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
-}
-
-@mixin thickScrollbar {
-	scrollbar-color: rgba($color: $color-primary, $alpha: 0.3) transparent;
-
-	&::-webkit-scrollbar {
-		height: 8px;
-		width: 8px;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: rgba($color: $color-primary, $alpha: 0.3);
-	}
-}
-
-@mixin cardStyle() {
-	background-color: $color-white;
-	border-radius: $card-border-radius;
-	margin-bottom: 2rem;
-	box-shadow: $card-box-shadow;
-}
-
-/* RESPONSIVE */
-
-$xxs: 375px;
-$xs: 430px;
-$sm: 580px;
-$msm: 660px;
-$md: 768px;
-$lm: 844px;
-$lg: 1024px;
-$xl: 1200px;
-$xxl: 1440px;
-
-@mixin media-xxl-down {
-	@media (max-width: #{$xxl}) {
-		@content;
-	}
-}
-
-@mixin media-xl-down {
-	@media (max-width: #{$xl}) {
-		@content;
-	}
-}
-
-@mixin media-lg-down {
-	@media (max-width: #{$lg}) {
-		@content;
-	}
-}
-
-@mixin media-lm-down {
-	@media (max-width: #{$lm}) {
-		@content;
-	}
-}
-
-@mixin media-md-down {
-	@media (max-width: #{$md}) {
-		@content;
-	}
-}
-
-@mixin media-msm-down {
-	@media (max-width: #{$msm}) {
-		@content;
-	}
-}
-
-@mixin media-xs-down {
-	@media (max-width: #{$xs}) {
-		@content;
-	}
-}
-
-@mixin media-xxs-down {
-	@media (max-width: #{$xxs}) {
-		@content;
-	}
-}
-
-@mixin media-xxl-up {
-	@media (min-width: #{$xxl}) {
-		@content;
-	}
-}
-
-@mixin media-xl-up {
-	@media (min-width: #{$xl}) {
-		@content;
-	}
-}
-
-@mixin media-lg-up {
-	@media (min-width: #{$lg}) {
-		@content;
-	}
-}
-
-@mixin media-lm-up {
-	@media (min-width: #{$lm}) {
-		@content;
-	}
-}
-
-@mixin media-md-up {
-	@media (min-width: #{$md}) {
-		@content;
-	}
-}
-
-@mixin media-sm-up {
-	@media (min-width: #{$sm}) {
-		@content;
-	}
-}
-
-@mixin media-xs-up {
-	@media (min-width: #{$xs}) {
-		@content;
-	}
-}
-
-@mixin media-xxs-up {
-	@media (min-width: #{$xxs}) {
-		@content;
-	}
-}
-
-@mixin apply-ui-type-styles($styles) {
-	background-color: list.nth($styles, 1);
-	color: list.nth($styles, 2);
-	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-
-	i {
-		color: list.nth($styles, 2);
-	}
-
-	svg {
-		stroke: list.nth($styles, 2) !important;
-		transition: stroke 0.2s ease-in-out;
-
-		path {
-			stroke: list.nth($styles, 2) !important;
-			transition: stroke 0.2s ease-in-out;
-		}
-	}
-
-	.action {
-		background-color: list.nth($styles, 3);
-
-		svg {
-			stroke: list.nth($styles, 4) !important;
-			transition: stroke 0.2s ease-in-out;
-
-			path {
-				stroke: list.nth($styles, 4) !important;
-				transition: stroke 0.2s ease-in-out;
-			}
-		}
-	}
-
-	&:hover,
-	&.active {
-		background-color: list.nth($styles, 3);
-		color: list.nth($styles, 4);
-
-		svg {
-			stroke: list.nth($styles, 4) !important;
-
-			path {
-				stroke: list.nth($styles, 4) !important;
-			}
-		}
-
-		.action {
-			background-color: list.nth($styles, 1);
-
-			svg {
-				stroke: list.nth($styles, 2) !important;
-
-				path {
-					stroke: list.nth($styles, 2) !important;
-				}
-			}
-		}
-	}
-}
-
-@mixin gradientUnderline($color) {
-	background: $color;
-	background-position: 0 100%;
-	background-size: 100% 2px;
-	background-repeat: repeat-x;
-}
-
-@mixin maxLine($lineCount) {
-	display: -webkit-box;
-	line-clamp: $lineCount;
-	-webkit-line-clamp: $lineCount;
-	-webkit-box-orient: vertical;
-}
-
-@mixin avatar-size($size) {
-	width: functions.toRem(map.get($avatar-sizes, $size));
-	height: functions.toRem(map.get($avatar-sizes, $size));
-}
-
-// Headings with responsive font sizes
-@mixin heading($default, $xl: null, $lg: null, $md: null, $sm: null) {
-	font-size: $default;
-	margin-bottom: 1rem;
-	line-height: calc($default * 1.5);
-
-	@if $xl {
-		@include media-xl-down {
-			font-size: $xl;
-			line-height: calc($xl * 1.5);
-		}
-	}
-	@if $lg {
-		@include media-lg-down {
-			font-size: $lg;
-			line-height: calc($lg * 1.5);
-		}
-	}
-	@if $md {
-		@include media-md-down {
-			font-size: $md;
-			line-height: calc($md * 1.5);
-		}
-	}
-	@if $sm {
-		@include media(down, mobile-md) {
-			font-size: $sm;
-			line-height: calc($sm * 1.5);
-		}
-	}
-}

package/dist/styles/scss/responsive.scss

@@ -1,36 +0,0 @@
-@use "sass:map";
-
-$breakpoints: (
-	mobile-xxs: 320px,
-	mobile-xs: 375px,
-	mobile-sm: 480px,
-	mobile-md: 576px,
-	tablet-sm: 768px,
-	tablet-md: 992px,
-	tablet-lg: 1024px,
-	desktop-sm: 1200px,
-	desktop-md: 1440px,
-	desktop-lg: 1920px,
-);
-
-// Enhanced media query mixin
-@mixin media($type, $start, $end: null) {
-	$start-value: map.get($breakpoints, $start);
-	$end-value: if($end, map.get($breakpoints, $end), null);
-
-	@if $type == "range" and $start-value and $end-value {
-		@media (min-width: #{$start-value}) and (max-width: #{$end-value}) {
-			@content;
-		}
-	} @else if $type == "down" and $start-value {
-		@media (max-width: #{$start-value}) {
-			@content;
-		}
-	} @else if $type == "up" and $start-value {
-		@media (min-width: #{$start-value}) {
-			@content;
-		}
-	} @else {
-		@error "Invalid type `#{$type}` or breakpoint `#{$start}` or `#{$end}`.";
-	}
-}

package/dist/styles/scss/utils.scss

@@ -1,6 +0,0 @@
-@forward "./colors.scss";
-@forward "./functions/toRem.scss";
-@forward "./variables.scss";
-@forward "./mixins";
-@forward "./animations";
-@forward "./responsive.scss";