@mesalvo/react-ui 0.0.31889

package/dist/src/types/types.d.ts

@@ -0,0 +1,216 @@
+import { Locale } from '@mesalvo/ts-definitions';
+import { ReactNode } from 'react';
+import { CountryCode } from '../i18n';
+import { IconName } from '../models';
+import { PrivilegeType } from '../models/privileges/types';
+import { AlignEnum, BooleanEnum, BrandColorsEnum, ColorsEnum, DirectionEnum, FileTypes, GetValuesEnum, HeadingLevelEnum, HttpStatusEnum, MainSizesEnum, Methods, OrientationsEnum, RoundedSizesEnum, ScopesEnum, SidesEnum, SizesEnum, SortDirectionEnum, StateColorsEnum, TriggerReasonEnum } from './enums';
+export type Identification = string | number;
+export type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+/**
+ * @name OnOff
+ * @description Type for booleans, on and off states
+  
+
+ */
+export type OnOff = Record<BooleanEnum, string>;
+/**
+ * @name StateColors
+ * @description Type for the different state colors
+  
+
+ */
+export type StateColors = Record<StateColorsEnum, string>;
+/**
+ * @name BrandColors
+ * @description Type for the different brand colors
+  
+
+ */
+export type BrandColors = Record<BrandColorsEnum, string>;
+/**
+ * @name ColorsType
+ * @description Type for the different colors, including state and brand colors
+  
+
+ */
+export type ColorsType = Record<GetValuesEnum<typeof ColorsEnum>, string>;
+/**
+ * @name Colors
+ * @description Type for the different colors, including state and brand colors, and custom colors if provided by the user
+  
+
+ */
+export type Colors = keyof typeof ColorsEnum;
+/**
+ * @name HeadingLevel
+ * @description Type for the different heading levels, from h1 to h6
+  
+
+ */
+export type HeadingLevel = keyof typeof HeadingLevelEnum;
+/**
+ * @name Positions
+ * @description Type for the different positions, from top-left to bottom-right, and center, center-left, center-right, top-center and bottom-center
+ * @see PositionsEnum for the different positions
+ * @alias PositionsEnum
+  
+
+ *
+ */
+export interface Positions {
+    "bottom-left": string;
+    "bottom-right": string;
+    "bottom-center": string;
+    "top-left": string;
+    "top-center": string;
+    "top-right": string;
+    "center-left": string;
+    center: string;
+    "center-right": string;
+}
+/**
+ * @name MainSizes
+ * @description Type for the main different sizes, from xs to xl
+ * @see MainSizesEnum for the different sizes
+
+ */
+export type MainSizesType = Record<GetValuesEnum<typeof MainSizesEnum>, string>;
+/**
+ * @name MainSizesElastic
+ * @description Type for the main different sizes, from xs to xl, it also includes any value provided by the user
+ * @see MainSizesEnum for the different sizes of the library
+ * @property {string} [key] - Any value provided by the user
+  
+
+ */
+export type MainSizes = keyof typeof MainSizesEnum;
+/**
+ * @name Sizes
+ * @description Type for the different sizes, from xs to 7xl, dynamic from the SizesEnum enum
+ * @see SizesEnum for the different sizes
+  
+
+ */
+export type Sizes = Record<GetValuesEnum<typeof SizesEnum>, string>;
+/**
+ * @name RoundedSizes
+ * @description Type for the different rounded sizes, from xs to 7xl, dynamic from the RoundedSizesEnum enum
+ * @see RoundedSizesEnum for the different sizes
+  
+
+ */
+export type RoundedSizes = keyof typeof RoundedSizesEnum;
+/**
+ * @name RoundedSizesTypes
+ * @description Type for the different rounded sizes, from xs to 7xl, dynamic from the RoundedSizesEnum enum
+ * @see RoundedSizesEnum for the different sizes
+ * @extends RoundedSizesType
+  
+
+ */
+export type RoundedSizesTypes = Record<GetValuesEnum<typeof RoundedSizesEnum>, string>;
+/**
+ * @name RoundedSizesElastic
+ * @description Type for the different rounded sizes, from xs to 7xl, dynamic from the RoundedSizesEnum enum, it also includes any value provided by the user
+ * @see RoundedSizesEnum for the different sizes
+ * @extends RoundedSizesType
+  
+
+ */
+export interface RoundedSizesElastic extends RoundedSizesTypes {
+    [key: string]: string;
+}
+/**
+ * @name ContentPositions
+ * @description Interface for the different content positions
+  
+
+ */
+export interface ContentPositions {
+    center: string;
+}
+/**
+ * @name TriggerReason
+ * @description Type for the different trigger reasons, from click to hover, dynamic from the TriggerReasonEnum enum
+ * @see TriggerReasonEnum for the different trigger reasons
+  
+
+ */
+export type TriggerReason = `${TriggerReasonEnum}`;
+/**
+ * @name Direction
+ * @description Type for the different directions, from top to bottom, dynamic from the DirectionEnum enum
+ * @see DirectionEnum for the different directions
+  
+
+ */
+export type Direction = `${DirectionEnum}`;
+export type Side = `${SidesEnum}`;
+export type Align = `${AlignEnum}`;
+export type Orientation = `${OrientationsEnum}`;
+export type ClassName = string | undefined;
+export type WithClassName<P = unknown> = P & {
+    className?: ClassName;
+};
+export interface Resource {
+    component: ReactNode;
+    privilege?: PrivilegeType;
+}
+export interface CompleteResource {
+    list?: Resource;
+    edit?: Resource;
+    create?: Resource;
+}
+export interface MenuItem {
+    path: string;
+    privilege?: PrivilegeType;
+    icon: IconName;
+    action?: () => void;
+    label: string;
+    subMenus?: SubMenuMultiple[];
+}
+export interface SubMenuMultiple {
+    name?: string;
+    privilege?: PrivilegeType;
+    items?: SubMenu[];
+}
+export interface SubMenu {
+    path: string;
+    privilege?: {
+        view?: PrivilegeType;
+        manage?: PrivilegeType;
+    };
+    label: string;
+}
+export type Menu = MenuItem[];
+export interface Language {
+    locale: Locale;
+    country?: CountryCode;
+    language: string;
+    flagCode?: CountryCode;
+    basedOn?: Locale[];
+}
+export type Translation = Record<string, string>;
+export type AllTranslations = Record<Locale, Translation>;
+export type SomeTranslations = Partial<AllTranslations>;
+export type Method = `${Methods}`;
+export type HttpStatusLabel = keyof typeof HttpStatusEnum;
+export type HttpStatus = `${HttpStatusEnum}`;
+export type SortDirection = `${SortDirectionEnum}`;
+export type GenericObject = Record<string, any>;
+export type FileType = `${FileTypes}`;
+export type Scope = `${ScopesEnum}`;
+export type DescriptionAndFields = {
+    description: string;
+    fields: Record<string, string>;
+};
+export type WithDebug = {
+    debug?: boolean;
+};
+export interface DataMustHaveId {
+    id: string;
+    [key: string]: any;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types/types.ts"],"names":[],"mappings":"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"}

package/dist/theme/animations/blur.css

@@ -0,0 +1,40 @@
+@theme {
+  --animate-blur: from-blur 0.5s ease-in-out;
+  --animate-to-blur: from-blur 0.5s ease-in-out reverse;
+
+  --animate-blur-pulse: blur-pulse 1.5s ease-in-out infinite;
+  --animate-blur-flash: blur-flash 0.8s ease-in-out;
+}
+
+@keyframes from-blur {
+  from {
+    filter: blur(var(--blur-amount));
+  }
+  to {
+    filter: blur(0);
+  }
+}
+@keyframes blur-pulse {
+  0%,
+  100% {
+    filter: blur(var(--blur-amount));
+  }
+  50% {
+    filter: blur(0);
+  }
+}
+
+@keyframes blur-flash {
+  0% {
+    filter: blur(var(--blur-amount));
+    opacity: 0;
+  }
+  50% {
+    filter: blur(0);
+    opacity: 1;
+  }
+  100% {
+    filter: blur(var(--blur-amount));
+    opacity: 0;
+  }
+}

package/dist/theme/animations/customs.css

@@ -0,0 +1,27 @@
+@theme {
+  --animate-spinner-dash: spinner-dash 1.5s ease-in-out infinite;
+  --animate-spinner-rotation: spinner-rotation 2s linear infinite;
+}
+
+
+@keyframes spinner-dash {
+ 0% {
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+ }
+
+ 50% {
+  stroke-dasharray: 90, 200;
+  stroke-dashoffset: -35px;
+ }
+
+ 100% {
+  stroke-dashoffset: -125px;
+ }
+}
+
+@keyframes spinner-rotation {
+ 100% {
+  transform: rotate(360deg);
+ }
+}

package/dist/theme/animations/fade.css

@@ -0,0 +1,172 @@
+@theme {
+  --animate-fade-in: fade-in 0.3s ease-out;
+  --animate-fade-out: fade-out 0.3s ease-in;
+
+  --animate-fade-in-down: fade-in-down 0.3s ease-out;
+  --animate-fade-out-up: fade-out-up 0.3s ease-in;
+
+  --animate-fade-in-up: fade-in-up 0.3s ease-out;
+  --animate-fade-out-down: fade-out-down 0.3s ease-in;
+
+  --animate-fade-in-left: fade-in-left 0.3s ease-out;
+  --animate-fade-out-right: fade-out-right 0.3s ease-in;
+
+  --animate-fade-in-right: fade-in-right 0.3s ease-out;
+  --animate-fade-out-left: fade-out-left 0.3s ease-in;
+
+  --animate-fade-in-scale: fade-in-scale 0.3s ease-out;
+  --animate-fade-out-scale: fade-out-scale 0.3s ease-in;
+
+  --animate-fade-in-rotate: fade-in-rotate 0.3s ease-out;
+  --animate-fade-out-rotate: fade-out-rotate 0.3s ease-in;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(var(--movement-distance));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-out-up {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(var(--movement-distance));
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--movement-distance)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-out-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--movement-distance)));
+  }
+}
+
+@keyframes fade-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(var(--movement-distance));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fade-out-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(var(--movement-distance));
+  }
+}
+
+@keyframes fade-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(calc(-1 * var(--movement-distance)));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fade-out-left {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(-1 * var(--movement-distance)));
+  }
+}
+
+@keyframes fade-in-scale {
+  from {
+    opacity: 0;
+    transform: scale(var(--fade-scale));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fade-out-scale {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(var(--fade-scale));
+  }
+}
+
+@keyframes fade-in-rotate {
+  from {
+    opacity: 0;
+    transform: rotate(var(--rotation));
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0);
+  }
+}
+
+@keyframes fade-out-rotate {
+  from {
+    opacity: 1;
+    transform: rotate(0);
+  }
+  to {
+    opacity: 0;
+    transform: rotate(var(--rotation));
+  }
+}

package/dist/theme/animations/flip.css

@@ -0,0 +1,69 @@
+@theme {
+  --animate-flip-x: flip-x 0.6s ease-in-out;
+  --animate-flip-y: flip-y 0.6s ease-in-out;
+
+  --animate-to-flip-x: flip-x 0.6s ease-in-out reverse;
+  --animate-to-flip-y: flip-y 0.6s ease-in-out reverse;
+
+  --animate-flip-pulse: flip-pulse 1.2s ease-in-out infinite;
+  --animate-flip-flash-x: flip-flash-x 0.8s ease-in-out;
+  --animate-flip-flash-y: flip-flash-y 0.8s ease-in-out;
+}
+
+@keyframes flip-x {
+  from {
+    transform: perspective(400px) rotateX(0);
+  }
+  to {
+    transform: perspective(400px) rotateX(180deg);
+  }
+}
+
+@keyframes flip-y {
+  from {
+    transform: perspective(400px) rotateY(0);
+  }
+  to {
+    transform: perspective(400px) rotateY(180deg);
+  }
+}
+
+@keyframes flip-pulse {
+  0%,
+  100% {
+    transform: perspective(400px) rotateY(0);
+  }
+  50% {
+    transform: perspective(400px) rotateY(180deg);
+  }
+}
+
+@keyframes flip-flash-x {
+  0% {
+    transform: perspective(400px) rotateX(0);
+    opacity: 0;
+  }
+  50% {
+    transform: perspective(400px) rotateX(180deg);
+    opacity: 1;
+  }
+  100% {
+    transform: perspective(400px) rotateX(0);
+    opacity: 0;
+  }
+}
+
+@keyframes flip-flash-y {
+  0% {
+    transform: perspective(400px) rotateY(0);
+    opacity: 0;
+  }
+  50% {
+    transform: perspective(400px) rotateY(180deg);
+    opacity: 1;
+  }
+  100% {
+    transform: perspective(400px) rotateY(0);
+    opacity: 0;
+  }
+}

package/dist/theme/animations/grow.css

@@ -0,0 +1,191 @@
+@theme {
+  --animate-grow-complete: grow-complete 0.3s ease-out;
+  --animate-grow-out-complete: grow-out-complete 0.3s ease-in;
+  --animate-grow: grow 0.3s ease-out;
+  --animate-grow-x: grow-x 0.5s ease-out;
+  --animate-grow-y: grow-y 0.5s ease-out;
+  --animate-grow-out: grow-out 0.3s ease-in;
+  --animate-grow-out-x: grow-out-x 0.5s ease-in;
+  --animate-grow-out-y: grow-out-y 0.5s ease-in;
+
+  --animate-grow-x-in-left: grow-x-in-left 0.3s ease-out;
+  --animate-grow-x-in-right: grow-x-in-right 0.3s ease-out;
+  --animate-grow-y-in-top: grow-y-in-top 0.3s ease-out;
+  --animate-grow-y-in-bottom: grow-y-in-bottom 0.3s ease-out;
+  --animate-grow-x-out-left: grow-x-out-left 0.3s ease-in;
+  --animate-grow-x-out-right: grow-x-out-right 0.3s ease-in;
+  --animate-grow-y-out-top: grow-y-out-top 0.3s ease-in;
+  --animate-grow-y-out-bottom: grow-y-out-bottom 0.3s ease-in;
+}
+
+@keyframes grow-complete {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes grow-out-complete {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes grow {
+  from {
+    transform: scale(var(--smaller-scale));
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes grow-x {
+  from {
+    transform: scaleX(var(--smaller-scale));
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes grow-y {
+  from {
+    transform: scaleY(var(--smaller-scale));
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes grow-out {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(var(--smaller-scale));
+  }
+}
+
+@keyframes grow-out-x {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(var(--smaller-scale));
+  }
+}
+
+@keyframes grow-out-y {
+  from {
+    transform: scaleY(1);
+  }
+  to {
+    transform: scaleY(var(--smaller-scale));
+  }
+}
+
+/* Crecer desde la izquierda */
+@keyframes grow-x-in-left {
+  from {
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  to {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+}
+
+/* Crecer desde la derecha */
+@keyframes grow-x-in-right {
+  from {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+  to {
+    transform: scaleX(1);
+    transform-origin: right;
+  }
+}
+
+/* Crecer desde arriba */
+@keyframes grow-y-in-top {
+  from {
+    transform: scaleY(0);
+    transform-origin: top;
+  }
+  to {
+    transform: scaleY(1);
+    transform-origin: top;
+  }
+}
+
+/* Crecer desde abajo */
+@keyframes grow-y-in-bottom {
+  from {
+    transform: scaleY(0);
+    transform-origin: bottom;
+  }
+  to {
+    transform: scaleY(1);
+    transform-origin: bottom;
+  }
+}
+
+/* Reducirse hacia la izquierda */
+@keyframes grow-x-out-left {
+  from {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  to {
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+}
+
+/* Reducirse hacia la derecha */
+@keyframes grow-x-out-right {
+  from {
+    transform: scaleX(1);
+    transform-origin: right;
+  }
+  to {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+}
+
+/* Reducirse hacia arriba */
+@keyframes grow-y-out-top {
+  from {
+    transform: scaleY(1);
+    transform-origin: top;
+  }
+  to {
+    transform: scaleY(0);
+    transform-origin: top;
+  }
+}
+
+/* Reducirse hacia abajo */
+@keyframes grow-y-out-bottom {
+  from {
+    transform: scaleY(1);
+    transform-origin: bottom;
+  }
+  to {
+    transform: scaleY(0);
+    transform-origin: bottom;
+  }
+}