@dynamic-framework/ui-react 1.5.0 → 1.6.0

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

@@ -1,12 +1,15 @@
-export declare type Step = {
+import { BreakpointSize } from '@dynamic-framework/ui/dist/types/utils/component-interface';
+declare type Step = {
     label: string;
     value: number;
+    description?: string;
 };
 declare type Props = {
     options: Array<Step>;
     currentStep: number;
     successIcon?: string;
     isVertical?: boolean;
+    breakpoint?: BreakpointSize;
 };
-export default function DStepper({ options, currentStep, successIcon, isVertical, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DStepper({ options, currentStep, successIcon, isVertical, breakpoint, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,12 @@
+declare type Step = {
+    label: string;
+    value: number;
+};
+declare type Props = {
+    options: Array<Step>;
+    currentStep: number;
+    successIcon?: string;
+    isVertical?: boolean;
+};
+export default function DStepper({ options, currentStep, successIcon, isVertical, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+declare type Step = {
+    label: string;
+    description?: string;
+    value: number;
+};
+declare type Props = {
+    options: Array<Step>;
+    currentStep: number;
+};
+export default function DStepper({ options, currentStep, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -19,6 +19,8 @@ export { default as DList } from './DList';
 export { default as DListItem } from './DListItem';
 export { default as DListItemMovement } from './DListItemMovement';
 export { default as DStepper } from './DStepper';
+export { default as DStepperDesktop } from './DStepperDesktop';
+export { default as DStepperMobile } from './DStepperMobile';
 export { default as DFormikInputCurrency } from './DFormikInputCurrency';
 export { default as DCardAccount } from './DCardAccount';
 export { default as DCard } from './DCard';

package/dist/types/stories/components/DStepperDesktop.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DStepperDesktop } from '../../components';
+declare const config: Meta<typeof DStepperDesktop>;
+export default config;
+declare type Story = StoryObj<typeof DStepperDesktop>;
+export declare const Default: Story;
+export declare const Vertical: Story;

package/dist/types/stories/components/DStepperMobile.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DStepperMobile } from '../../components';
+declare const config: Meta<typeof DStepperMobile>;
+export default config;
+declare type Story = StoryObj<typeof DStepperMobile>;
+export declare const Default: Story;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamic-framework/ui-react",
   "sideEffects": false,
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "React Dynamic Framework",
   "license": "MIT",
   "repository": {
@@ -22,13 +22,10 @@
   },
   "scripts": {
     "test": "jest",
-    "build": "pnpm build:react && pnpm build:style",
+    "build": "pnpm build:react && pnpm build:scss",
     "build:react": "rimraf dist && tsc -p . && rollup -c rollup.config.js",
     "build:react:watch": "tsc -p . && rollup -c rollup.config.js",
-    "build:scss": "sass --load-path=node_modules --no-source-map --style=compressed src/style/:dist/css",
-    "build:scss:watch": "sass --load-path=node_modules -w src/style:dist/css",
-    "build:autoprefixer": "postcss dist/css/*.css --replace --use autoprefixer --no-map",
-    "build:style": "pnpm build:scss && pnpm build:autoprefixer",
+    "build:scss": "./scripts/build-scss.sh",
     "clean": "rimraf dist",
     "compile": "tsc -p . && rollup -c rollup.config.js",
     "storybook": "storybook dev -p 6006",
@@ -45,7 +42,7 @@
     "src/style"
   ],
   "dependencies": {
-    "@dynamic-framework/ui": "^1.6.0",
+    "@dynamic-framework/ui": "^1.7.0",
     "@floating-ui/react": "^0.24.1",
     "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "^4.1.4",
@@ -133,5 +130,5 @@
       "@dynamic-framework/ui"
     ]
   },
-  "gitHead": "cb61210b966f0916eb4d9bac3841e06580ea1ba6"
+  "gitHead": "e6757939aaf87031e5e416b603a2359446a2c219"
 }

package/src/style/abstracts/variables/_box-file.scss

@@ -1,9 +1,9 @@
-$box-file-gap: $spacer-3 !default;
+$box-file-gap: var(--#{$prefix}ref-spacer-3) !default;
 $box-file-border: 1px dashed var(--#{$prefix}gray-700) !default;
-$box-file-border-radius: $border-radius !default;
-$box-file-padding: $spacer-5 !default;
+$box-file-border-radius: var(--#{$prefix}border-radius) !default;
+$box-file-padding: var(--#{$prefix}ref-spacer-5) !default;
 $box-file-content-max-width: 220px !default;
-$box-file-icon-size: $spacer-8 !default;
+$box-file-icon-size: var(--#{$prefix}ref-spacer-8) !default;
 $box-file-icon-color: var(--#{$prefix}secondary-300) !default;
 
 $box-file-hover-border: 1px dashed var(--#{$prefix}secondary-700) !default;

package/src/style/abstracts/variables/_collapse-icon-text.scss

@@ -1,3 +1,3 @@
-$collapse-icon-text-header-gap: $spacer-3 !default;
-$collapse-icon-text-header-font-size: $h6-font-size !default;
-$collapse-icon-text-header-font-weight: $font-weight-bold !default;
+$collapse-icon-text-header-gap: var(--#{$prefix}ref-spacer-3) !default;
+$collapse-icon-text-header-font-size: var(--#{$prefix}ref-fs-6) !default;
+$collapse-icon-text-header-font-weight: var(--#{$prefix}ref-fw-bold) !default;

package/src/style/components/_+import.scss

@@ -7,7 +7,8 @@
 @import "d-popover";
 @import "d-box-file";
 @import "d-carousel";
-@import "d-stepper";
+@import "d-stepper-desktop";
+@import "d-stepper-mobile";
 @import "d-paginator";
 @import "d-card-account";
 

package/src/style/components/_d-card-account.scss

@@ -1,8 +1,8 @@
 .d-card-account {
   // Card
   --#{$prefix}card-border-width: 0px;
-  --#{$prefix}card-spacer-y: #{$spacer};
-  --#{$prefix}card-spacer-x: #{$spacer};
+  --#{$prefix}card-spacer-y: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}card-spacer-x: var(--#{$prefix}ref-spacer-3);
   --#{$prefix}card-color: var(--#{$prefix}body-color);
   // Card body
   --#{$prefix}card-body-gap: #{$spacer};

package/src/style/components/{_d-stepper.scss → _d-stepper-desktop.scss}

@@ -1,4 +1,4 @@
-.d-stepper {
+.d-stepper-desktop {
   /* Icon container */
   --#{$prefix}step-icon-container-color: var(--#{$prefix}secondary);
   --#{$prefix}step-icon-container-background-color: var(--#{$prefix}white);

package/src/style/components/_d-stepper-mobile.scss

@@ -0,0 +1,69 @@
+.d-stepper {
+  /* Container */
+  --#{$prefix}step-container-gap: var(--#{$prefix}ref-spacer-3);
+
+  /* Outter circle */
+  --#{$prefix}step-progress-outter-size: 62px;
+  --#{$prefix}step-progress-outter-z-index: 1;
+  --#{$prefix}step-progress-outter-fill-background-color: var(--#{$prefix}secondary-500);
+  --#{$prefix}step-progress-outter-background-color: var(--#{$prefix}gray-300);
+
+  /* Inner circle */
+  --#{$prefix}step-progress-inner-size: 50px;
+  --#{$prefix}step-progress-inner-z-index: 2;
+  --#{$prefix}step-progress-inner-background-color: var(--#{$prefix}white);
+
+  /* Current step */
+  --#{$prefix}step-current-step-z-index: 3;
+  --#{$prefix}step-current-step-font-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}step-current-step-color: var(--#{$prefix}gray-700);
+
+  /* Info circle */
+  --#{$prefix}step-info-max-width: 12rem;
+  --#{$prefix}step-info-label-font-size: var(--#{$prefix}ref-fs-6);
+  --#{$prefix}step-info-description-font-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}step-info-description-color: var(--#{$prefix}gray-500);
+
+
+  display: flex;
+  gap: var(--#{$prefix}step-container-gap);
+  align-items: center;
+  justify-content: center;
+
+  .d-step-bar {
+    position: relative;
+    z-index: var(--#{$prefix}step-progress-outter-z-index);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}step-progress-outter-size);
+    height: var(--#{$prefix}step-progress-outter-size);
+    border-radius: var(--#{$prefix}step-progress-outter-size);
+  }
+  .d-step-bar::after {
+    position: absolute;
+    z-index: var(--#{$prefix}step-progress-inner-z-index);
+    width: var(--#{$prefix}step-progress-inner-size);
+    height: var(--#{$prefix}step-progress-inner-size);
+    content: "";
+    background-color: var(--#{$prefix}step-progress-inner-background-color);
+    border-radius: var(--#{$prefix}step-progress-inner-size);
+  }
+  .d-step-number {
+    z-index: var(--#{$prefix}step-current-step-z-index);
+    font-weight: var(--#{$prefix}step-current-step-font-weight);
+    color: var(--#{$prefix}step-current-step-color);
+  }
+  .d-step-info {
+    display: flex;
+    flex-direction: column;
+    max-width: var(--#{$prefix}step-info-max-width);
+  }
+  .d-step-label {
+    font-size: var(--#{$prefix}step-info-label-font-size);
+  }
+  .d-step-description {
+    font-size: var(--#{$prefix}step-info-description-font-size);
+    color: var(--#{$prefix}step-info-description-color);
+  }
+}

package/src/style/dynamic-root.scss

@@ -0,0 +1,2 @@
+@import "@dynamic-framework/ui/src/style/dynamic-root";
+