@dynamic-framework/ui-react 2.0.0-dev.1 → 2.0.0-dev.2

package/dist/types/components/DTabs/DTabs.d.ts

@@ -2,11 +2,11 @@ import type { PropsWithChildren } from 'react';
 import DTabContent from './components/DTabContent';
 import type { BaseProps } from '../interface';
 export type DTabOption = {
-    label: string;
+    label: string | React.ReactNode;
     tab: string;
     disabled?: boolean;
 };
-export type TabVariant = 'tabs' | 'pills' | 'underline';
+export type TabVariant = 'tabs' | 'pills' | 'underline' | 'toggle-button-group';
 type Props = BaseProps & PropsWithChildren<{
     classNameTab?: string;
     onChange?: (option: DTabOption) => void;

package/dist/types/components/DTimeline/DTimeline.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { BaseProps } from '../interface';
+export type DTimelineItem = {
+    title: string;
+    description?: string;
+    time?: string;
+    icon?: string;
+    status?: 'success' | 'warning' | 'danger' | 'info';
+    children?: React.ReactNode;
+};
+type Props = BaseProps & {
+    items: DTimelineItem[];
+};
+export default function DTimeline({ className, style, dataAttributes, items, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DTimeline/index.d.ts

@@ -0,0 +1,2 @@
+import DTimeline from './DTimeline';
+export default DTimeline;

package/dist/types/components/DToastContainer/useDToast.d.ts

@@ -1,12 +1,12 @@
 import { Renderable, Toast, ValueFunction } from 'react-hot-toast';
+import { ComponentStateColor } from '../interface';
 type ToastData = {
     title: string;
     description?: string;
     timestamp?: string;
     icon?: string;
     closeIcon?: string;
-    theme?: string;
-    soft?: boolean;
+    color?: ComponentStateColor;
 };
 type Props = Partial<Pick<Toast, 'id' | 'duration' | 'position'>>;
 export default function useDToast(): {

package/dist/types/components/DTooltip/DTooltip.d.ts

@@ -9,9 +9,8 @@ export type Props = BaseProps & PropsWithChildren<{
     withFocus?: boolean;
     withClick?: boolean;
     open?: boolean;
-    theme?: string;
     size?: ComponentSize;
     placement?: Placement;
     Component: ReactNode;
 }>;
-export default function DTooltip({ className, childrenClassName, style, offSet, padding, withFocus, withClick, withHover, open, theme, placement, size, Component, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DTooltip({ className, childrenClassName, style, offSet, padding, withFocus, withClick, withHover, open, placement, size, Component, children, }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/index.d.ts

@@ -1,6 +1,7 @@
 export { default as DAlert } from './DAlert';
 export { default as DAvatar } from './DAvatar';
 export { default as DBadge } from './DBadge';
+export { default as DBox } from './DBox';
 export { default as DBoxFile } from './DBoxFile';
 export { default as DButton } from './DButton';
 export { default as DButtonIcon } from './DButtonIcon';
@@ -11,13 +12,12 @@ export { default as DCollapse } from './DCollapse';
 export { default as DCurrencyText } from './DCurrencyText';
 export { default as DDatePicker } from './DDatePicker';
 export { default as DIcon } from './DIcon';
+export { default as DLayout, DLayoutPane, } from './DLayout';
 export { default as DIconBase } from './DIconBase';
 export { default as DInput } from './DInput';
 export { default as DInputMask } from './DInputMask';
 export { default as DInputCounter } from './DInputCounter';
-export { default as DInputCurrencyBase } from './DInputCurrencyBase';
 export { default as DInputCurrency } from './DInputCurrency';
-export { default as DInputSearch } from './DInputSearch';
 export { default as DInputPassword } from './DInputPassword';
 export { default as DInputCheck } from './DInputCheck';
 export { default as DInputPin } from './DInputPin';
@@ -26,25 +26,22 @@ export type { DInputSelectDefaultOption, DInputSelectProps } from './DInputSelec
 export { default as DInputSwitch } from './DInputSwitch';
 export { default as DInputRange } from './DInputRange';
 export { default as DSelect } from './DSelect';
-export { default as DList, DListItem, } from './DList';
 export { default as DListGroup, DListGroupItem, } from './DListGroup';
 export { default as DModal, DModalHeader, DModalBody, DModalFooter, } from './DModal';
 export { default as DOffcanvas, DOffcanvasHeader, DOffcanvasBody, DOffcanvasFooter, } from './DOffcanvas';
 export { default as DPaginator } from './DPaginator';
 export { default as DPopover } from './DPopover';
 export { default as DProgress } from './DProgress';
-export { default as DQuickActionButton } from './DQuickActionButton';
-export { default as DQuickActionCheck } from './DQuickActionCheck';
-export { default as DQuickActionSelect } from './DQuickActionSelect';
-export { default as DQuickActionSwitch } from './DQuickActionSwitch';
-export { default as DSkeleton } from './DSkeleton';
 export { default as DStepper } from './DStepper';
 export { default as DStepperDesktop } from './DStepperDesktop';
 export { default as DStepperMobile } from './DStepperMobile';
 export { default as DTooltip } from './DTooltip';
+export { default as DTimeline } from './DTimeline';
 export { default as DTabs, useTabContext, DTabContent, } from './DTabs';
 export type { DTabOption } from './DTabs';
 export { default as DToast } from './DToast';
 export { default as DToastContainer, useDToast, } from './DToastContainer';
 export { default as DTableHead } from './DTableHead';
 export { default as DInputPhone } from './DInputPhone';
+export { default as DCreditCard } from './DCreditCard';
+export { default as DDropdown } from './DDropdown';

package/dist/types/components/interface.d.ts

@@ -24,12 +24,6 @@ export type FamilyIconProps = {
     iconFamilyPrefix?: string;
     iconMaterialStyle?: boolean;
 };
-export type LabelIconProps = {
-    labelIcon?: string;
-    labelIconFamilyClass?: string;
-    labelIconFamilyPrefix?: string;
-    labelIconMaterialStyle?: boolean;
-};
 export type StartIconProps = {
     iconStart?: string;
     iconStartDisabled?: boolean;
@@ -48,9 +42,10 @@ export type EndIconProps = {
     iconEndTabIndex?: number;
     iconEndMaterialStyle?: boolean;
 };
-export type AlertTheme = 'success' | 'info' | 'warning' | 'danger' | 'primary' | 'secondary';
+export type ComponentColor = string;
+export type ComponentStateColor = 'success' | 'danger' | 'warning' | 'info';
 export type AlertThemeIconMap = {
-    [state in AlertTheme]: string;
+    [state in ComponentStateColor]: string;
 };
 export type ButtonVariant = 'outline' | 'link';
 export type ButtonType = 'submit' | 'reset' | 'button';

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-dev.1",
+  "version": "2.0.0-dev.2",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -49,6 +49,11 @@
     "build:react:watch": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:scss": "node scripts/build-scss.js",
     "build:scss:watch": "npx nodemon --watch src --ext scss --exec 'npm run build:scss'",
+    "dev:ts": "tsc -p tsconfig.build.json",
+    "dev:rollup": "rollup -c rollup.config.mjs",
+    "dev:scss": "node scripts/build-scss.js",
+    "build:once": "npm run dev:ts && npm run dev:rollup && sleep 0.5 && npm run dev:scss && yalc push",
+    "watch:ds": "npx nodemon --watch src --ext ts,tsx,scss --delay 1000ms --exec \"npm run build:once\"",
     "cp": "npm run cp:bootstrap && npm run cp:popper && npm run cp:bootstrap-icons",
     "cp:bootstrap": "scripts/cp-boostrap.sh",
     "cp:bootstrap-icons": "scripts/cp-boostrap-icons.sh",
@@ -95,7 +100,7 @@
     "file-selector": "^2.1.2",
     "google-libphonenumber": "^3.2.40",
     "i18next": "~23.6.0",
-    "react-content-loader": "~6.2.1",
+    "lucide-react": "^0.548.0",
     "react-datepicker": "~8.3.0",
     "react-international-phone": "~4.5.0",
     "react-responsive-pagination": "^2.9.0",
@@ -163,7 +168,7 @@
     "ts-jest": "~29.2.3",
     "tslib": "~2.6.2",
     "typescript": "~5.2.2",
-    "vite": "~6.3.5",
+    "vite": "^6.4.1",
     "yup": "^1.6.1"
   },
   "peerDependencies": {

package/src/style/_shame.scss

@@ -1,5 +1,46 @@
-// keep empty.
+/* stylelint-disable declaration-no-important */
 
 .flex-1 {
   flex: 1;
 }
+
+.text-muted {
+  --#{$prefix}text-muted: var(--#{$prefix}gray-400);
+  color: var(--#{$prefix}text-muted) !important;
+}
+
+.form-text {
+  --#{$prefix}form-text: var(--#{$prefix}gray-400);
+  color: var(--#{$prefix}form-text) !important;
+}
+
+.spinner-border {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+th {
+  font-weight: var(--#{$prefix}fw-semibold) !important;
+}
+
+@media (min-width: 1200px) {
+  legend {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+}
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+) !default;
+
+@each $size, $width in $container-max-widths {
+  .max-w-#{$size} {
+    max-width: $width;
+  }
+}

package/src/style/abstracts/_mixins.scss

@@ -152,8 +152,6 @@
 
   &.loading {
     --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
-    --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-bg);
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-border-color);
   }
 }
 // scss-docs-end df-btn-variant-mixin
@@ -170,7 +168,7 @@
     --#{$prefix}table-striped-color: #{$color};
     --#{$prefix}table-active-bg: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{(100% - $table-bg-scale) * $table-active-bg-factor})")};
     --#{$prefix}table-active-color: #{$color};
-    --#{$prefix}table-hover-bg: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{(100% - $table-bg-scale) * $table-hover-bg-factor})")};
+    --#{$prefix}table-hover-bg: var(--#{$prefix}gray-25);
     --#{$prefix}table-hover-color: #{$color};
 
     color: var(--#{$prefix}table-color);

package/src/style/abstracts/_utilities.scss

@@ -30,7 +30,7 @@ $utilities: map-merge(
         values: map-merge(
           map-get(map-get($utilities, "background-color"), "values"),
           map-loop(
-            map-merge-multiple($theme-colors-palettes, $palette-grays, $bg-surface-colors, $bg-soft-colors),
+            map-merge-multiple($theme-colors-palettes, $palette-grays),
             rgba-css-var,
             "$key",
             "bg"
@@ -66,6 +66,12 @@ $utilities: map-merge(
         responsive: true
       )
     ),
+    "position": map-merge(
+      map-get($utilities, "position"),
+      (
+        responsive: true
+      )
+    ),
     "border-color": map-merge(
       map-get($utilities, "border-color"),
       (
@@ -130,6 +136,50 @@ $utilities: map-merge(
         responsive: true,
       )
     ),
+    "v-align": (
+      property: vertical-align,
+      responsive: true,
+      class: "v-align",
+      values: (
+        baseline: baseline,
+        top: top,
+        bottom: bottom,
+        text-top: text-top,
+        text-bottom: text-bottom,
+        sub: sub,
+        super: super,
+        middle: middle,
+      )
+    ),
+    "display": (
+      property: display,
+      responsive: true,
+      class: "d",
+      values: (
+        inline: inline,
+        inline-block: inline-block,
+        block: block,
+        table: table,
+        table-row: table-row,
+        table-cell: table-cell,
+        flex: flex,
+        inline-flex: inline-flex,
+        none: none,
+        grid: grid,
+        table-header-group: table-header-group,
+      )
+    ),
+    "text-wrap": (
+      property: text-wrap,
+      responsive: true,
+      class: "text-wrap",
+      values: (
+        balance: balance,
+        normal: normal,
+        truncate: truncate,
+        wrap: wrap
+      )
+    ),
     "body-font-size": (
       class: "fs-body",
       responsive: true,

package/src/style/abstracts/variables/_+import.scss

@@ -19,9 +19,9 @@ $focus-ring-width: .25rem !default;
 $focus-ring-opacity: .25 !default;
 $focus-ring-blur: 0 !default;
 // custom
-$focus-ring-border-color: var(--#{$prefix}secondary-300-rgb) !default;
+$focus-ring-border-color: transparent !default;
 $focus-ring-color-mapping: "secondary-rgb" !default;
-$focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
+$focus-ring-color: var(--#{$prefix}gray-100) !default;
 // end custom
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables
@@ -66,6 +66,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "buttons";
 @import "forms";
 @import "z-index";
+@import "shadow";
 @import "navs";
 @import "navbar";
 @import "dropdowns";

package/src/style/abstracts/variables/_alerts.scss

@@ -13,5 +13,7 @@ $alert-color-scale: 100% !default;
 // custom
 $alert-gap: var(--#{$prefix}ref-spacer-4) !default;
 $alert-close-icon-size: var(--#{$prefix}ref-spacer-4) !default;
+
+
 // end custom
 // scss-docs-end alert-variables

package/src/style/abstracts/variables/_body.scss

@@ -5,8 +5,16 @@
 // custom
 $body-color-mapping: "gray-900" !default;
 $body-color: map-get($all-colors, $body-color-mapping) !default;
-$body-bg-mapping: "secondary-soft" !default;
-$body-bg: map-get($all-colors, $body-bg-mapping) !default;
+
+// $body-bg-mapping: "secondary-soft" !default;
+// $body-bg: map-get($all-colors, $body-bg-mapping) !default;
+// Se mapeaba a la variable css
+// Al final quedaba: --bs-secondary-soft-rgb
+
+// WIP: Se asigna el color manualmente
+// este color no existe en la paleta de grises
+// ¿Se tendría que agregar?
+$body-bg: #f5f6fa !default;
 
 $body-secondary-color: var(--#{$prefix}body-color-rgb) !default;
 $body-secondary-bg: var(--#{$prefix}gray-200) !default;
@@ -29,4 +37,3 @@ $link-hover-color: map-get($all-colors, $link-hover-color-mapping) !default;
 // end custom
 
 $link-decoration: none !default;
-$link-hover-decoration: underline !default;

package/src/style/abstracts/variables/_border.scss

@@ -8,10 +8,10 @@ $border-color-translucent: rgba(var(--#{$prefix}black-rgb), .175) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
-$border-radius: 1rem !default;
-$border-radius-sm: .5rem !default;
-$border-radius-lg: 1.5rem !default;
-$border-radius-xl: 2rem !default;
-$border-radius-xxl: 2.5rem !default;
+$border-radius: .5rem !default;
+$border-radius-sm: .25rem !default;
+$border-radius-lg: 1rem !default;
+$border-radius-xl: 1.5rem !default;
+$border-radius-xxl: 2rem !default;
 $border-radius-pill: 50rem !default;
 // scss-docs-end border-radius-variables

package/src/style/abstracts/variables/_buttons.scss

@@ -4,17 +4,18 @@
 
 // scss-docs-start btn-variables
 $btn-color: var(--#{$prefix}body-color) !default;
-$btn-padding-y: $spacer-3 !default;
-$btn-padding-x: $spacer-8 !default;
-$btn-line-height: 1 !default;
+$btn-padding-y: $spacer-2 !default;
+$btn-padding-x: $spacer-4 !default;
+$btn-line-height: 1.5 !default;
+$btn-font-weight: $font-weight-semibold !default;
 
-$btn-padding-y-sm: $spacer-2 !default;
-$btn-padding-x-sm: $spacer-4 !default;
+$btn-padding-y-sm: $spacer-1 !default;
+$btn-padding-x-sm: $spacer-3 !default;
 $btn-font-size-sm: $small-font-size !default;
 
-$btn-padding-y-lg: $spacer-4 !default;
-$btn-padding-x-lg: $spacer-8 !default;
-$btn-font-size-lg: $h6-font-size !default;
+$btn-padding-y-lg: $spacer-3 !default;
+$btn-padding-x-lg: $spacer-5 !default;
+$btn-lg-font-size: 1.15rem !default;
 
 $btn-border-width: $input-btn-border-width !default;
 
@@ -22,9 +23,14 @@ $btn-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstr
 $btn-disabled-opacity: .65 !default;
 $btn-active-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
 
-$btn-border-radius: var(--#{$prefix}border-radius-pill) !default;
-$btn-border-radius-sm: var(--#{$prefix}border-radius-pill) !default;
-$btn-border-radius-lg: var(--#{$prefix}border-radius-pill) !default;
+$btn-border-radius: .5rem !default;
+$btn-border-radius-lg: .5rem !default;
+$btn-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1) !default;
+$btn-border-radius-sm: .25rem !default;
 
 $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 // scss-docs-end btn-variables
+
+$btn-outline-primary-hover-color: inherit !default;
+$btn-outline-primary-hover-bg: transparent !default;
+$btn-outline-primary-focus-bg: transparent !default;

package/src/style/abstracts/variables/_cards.scss

@@ -1,9 +1,11 @@
 // Cards
 
 // scss-docs-start card-variables
-$card-border-width: 0px !default;
-$card-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 $card-bg: var(--#{$prefix}white) !default;
-$card-spacer-y: $spacer-6 !default;
-$card-spacer-x: $spacer-6 !default;
+$card-spacer-y: $spacer-4 !default;
+$card-spacer-x: $spacer-4 !default;
+$card-cap-padding-y: $spacer-4 !default;
+$card-cap-bg: transparent !default;
+$card-border-color: var(--#{$prefix}gray-50) !default;
+
 // scss-docs-end card-variables

package/src/style/abstracts/variables/_chips.scss

@@ -5,9 +5,9 @@ $chip-gap: $spacer-1 !default;
 $chip-bg: var(--#{$prefix}white) !default;
 $chip-color: var(--#{$prefix}gray-900) !default;
 $chip-border-radius: $border-radius-pill !default;
-$chip-padding-x: $spacer-2 !default;
+$chip-padding-x: $spacer-3 !default;
 $chip-padding-y: $spacer-1 !default;
 $chip-font-size: $small-font-size !default;
 $chip-font-weight: $font-weight-bold !default;
-$chip-line-height: $line-height-base * $spacer-4 !default;
+$chip-line-height: $line-height-base !default;
 // scss-docs-end chip-variables