@splpi/estore-shared-components 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +299 -104
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +377 -189
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2976,27 +2976,46 @@ var import_react26 = require("@chakra-ui/react");
2976
2976
  var import_st_peter_ui6 = require("st-peter-ui");
2977
2977
  var import_lu5 = require("react-icons/lu");
2978
2978
  var import_jsx_runtime15 = require("react/jsx-runtime");
2979
+ var PRIMARY = "var(--chakra-colors-primary)";
2980
+ var PRIMARY_HOVER = "var(--chakra-colors-primary-hover)";
2981
+ var PRIMARY_DISABLED = "var(--chakra-colors-primary-disabled)";
2979
2982
  var HorizontalStepper = ({
2980
2983
  steps,
2984
+ title,
2985
+ description,
2981
2986
  onStepChange,
2982
2987
  onSubmit,
2983
2988
  submitDisabled,
2984
2989
  activeStep: controlledActiveStep,
2985
- nextDisabled
2990
+ nextDisabled,
2991
+ submitButtonText = "Proceed To Payment"
2986
2992
  }) => {
2987
2993
  const [localActiveStep, setLocalActiveStep] = (0, import_react25.useState)(0);
2988
2994
  const activeStep = controlledActiveStep !== void 0 ? controlledActiveStep : localActiveStep;
2995
+ const formTopRef = (0, import_react25.useRef)(null);
2996
+ const isCompact = steps.length < 3;
2997
+ const isLastStep = activeStep === steps.length - 1;
2998
+ const nextStepTitle = steps[activeStep + 1]?.title;
2999
+ const scrollToTop = () => {
3000
+ requestAnimationFrame(() => {
3001
+ formTopRef.current?.scrollIntoView({
3002
+ behavior: "smooth",
3003
+ block: "start"
3004
+ });
3005
+ });
3006
+ };
2989
3007
  const handleStepChange = (index) => {
2990
3008
  if (controlledActiveStep === void 0) {
2991
3009
  setLocalActiveStep(index);
2992
3010
  }
2993
3011
  onStepChange?.(index);
3012
+ scrollToTop();
2994
3013
  };
2995
3014
  const handleNext = () => {
2996
3015
  if (nextDisabled) return;
2997
3016
  handleStepChange(Math.min(activeStep + 1, steps.length - 1));
2998
3017
  };
2999
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3018
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3000
3019
  import_react26.Flex,
3001
3020
  {
3002
3021
  direction: "column",
@@ -3005,108 +3024,284 @@ var HorizontalStepper = ({
3005
3024
  w: "full",
3006
3025
  overflow: "visible",
3007
3026
  pb: { base: "12px", md: "0px" },
3008
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { w: "full", colorPalette: "green", rounded: "2xl", p: 1, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3009
- import_react26.Steps.Root,
3010
- {
3011
- step: activeStep,
3012
- onStepChange: (index) => {
3013
- handleStepChange(index.step);
3014
- },
3015
- defaultStep: 0,
3016
- count: steps.length,
3017
- colorPalette: "green",
3018
- children: [
3019
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3020
- import_react26.Steps.List,
3021
- {
3022
- flexDirection: "row",
3023
- w: "full",
3024
- py: 2,
3025
- alignItems: "flex-start",
3026
- children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3027
- import_react26.Steps.Item,
3028
- {
3029
- index,
3030
- title: step.title,
3031
- minW: { base: "0px", md: "auto" },
3032
- children: [
3033
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3034
- import_react26.Steps.Trigger,
3035
- {
3036
- flexDirection: "column",
3037
- alignItems: "center",
3038
- gap: 1,
3039
- children: [
3040
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Indicator, { children: step.icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { as: step.icon, w: 4, h: 4 }) : null }),
3041
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3042
- import_react26.Steps.Title,
3043
- {
3044
- fontSize: { base: "xs", md: "sm" },
3045
- textAlign: "center",
3046
- whiteSpace: "normal",
3047
- wordBreak: "break-word",
3048
- children: step.title
3049
- }
3050
- )
3051
- ]
3052
- }
3053
- ),
3054
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Separator, { display: { base: "none", md: "block" } })
3055
- ]
3056
- },
3057
- index
3058
- ))
3059
- }
3060
- ),
3061
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Separator, { variant: "solid", mb: 3 }),
3062
- steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Content, { index, children: step.component ?? step.description }, index)),
3063
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3064
- import_react26.Flex,
3065
- {
3066
- w: "full",
3067
- justify: "space-between",
3068
- align: "center",
3069
- mb: 1,
3070
- display: { base: "flex", md: "none" },
3071
- children: [
3072
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3073
- import_react26.IconButton,
3074
- {
3075
- "aria-label": "Previous step",
3076
- size: "sm",
3077
- variant: "outline",
3078
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronLeft, {})
3079
- }
3080
- ) }),
3081
- activeStep < steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3082
- import_react26.IconButton,
3083
- {
3084
- "aria-label": "Next step",
3085
- size: "sm",
3086
- variant: "outline",
3087
- disabled: !!nextDisabled,
3088
- onClick: handleNext,
3089
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronRight, {})
3090
- }
3091
- ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.PrimaryMdButton, { disabled: !!submitDisabled, onClick: onSubmit, children: "Proceed To Payment" })
3092
- ]
3093
- }
3094
- ),
3095
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3096
- import_react26.ButtonGroup,
3097
- {
3098
- size: "sm",
3099
- variant: "outline",
3100
- display: { base: "none", md: "flex" },
3101
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react26.Flex, { mt: 4, w: "full", align: "center", justify: "space-between", children: [
3102
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.SecondaryMdButton, { children: "Previous" }) }),
3103
- activeStep < steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.NextButton, { disabled: !!nextDisabled, onClick: handleNext }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.PrimaryMdButton, { disabled: !!submitDisabled, onClick: onSubmit, children: "Proceed To Payment" })
3104
- ] })
3105
- }
3106
- )
3107
- ]
3108
- }
3109
- ) })
3027
+ children: [
3028
+ (title || description) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react26.Box, { mb: 4, ref: formTopRef, children: [
3029
+ title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3030
+ import_react26.Box,
3031
+ {
3032
+ as: "h1",
3033
+ m: "0",
3034
+ fontFamily: "var(--font-dm-sans), system-ui, sans-serif",
3035
+ fontWeight: description ? 600 : 500,
3036
+ color: "gray.900",
3037
+ lineHeight: "1.1",
3038
+ letterSpacing: description ? "-0.025em" : "-0.015em",
3039
+ fontSize: {
3040
+ base: description ? "22px" : "24px",
3041
+ lg: description ? "28px" : "32px"
3042
+ },
3043
+ children: title
3044
+ }
3045
+ ),
3046
+ description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Text, { fontSize: "sm", color: "gray.500", mt: 1, children: description })
3047
+ ] }),
3048
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { w: "full", rounded: "2xl", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3049
+ import_react26.Steps.Root,
3050
+ {
3051
+ step: activeStep,
3052
+ onStepChange: (index) => handleStepChange(index.step),
3053
+ defaultStep: 0,
3054
+ count: steps.length,
3055
+ colorPalette: "green",
3056
+ children: [
3057
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3058
+ import_react26.Box,
3059
+ {
3060
+ position: "sticky",
3061
+ top: 0,
3062
+ zIndex: 10,
3063
+ bg: "white",
3064
+ pt: 2,
3065
+ pb: 3,
3066
+ mx: -1,
3067
+ px: 1,
3068
+ borderBottomWidth: "1px",
3069
+ borderColor: "gray.100",
3070
+ boxShadow: "0 2px 8px -2px rgba(0,0,0,0.06)",
3071
+ children: [
3072
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3073
+ import_react26.Steps.List,
3074
+ {
3075
+ py: 0,
3076
+ flexDirection: "row",
3077
+ alignItems: "center",
3078
+ w: "full",
3079
+ justifyContent: "space-evenly",
3080
+ children: steps.map((step, index) => {
3081
+ const isCompleted = index < activeStep;
3082
+ const isActive = index === activeStep;
3083
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3084
+ import_react26.Steps.Item,
3085
+ {
3086
+ index,
3087
+ title: step.title,
3088
+ minW: { base: "0px", md: "auto" },
3089
+ flex: isCompact ? "0 0 auto" : "1",
3090
+ children: [
3091
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3092
+ import_react26.Steps.Trigger,
3093
+ {
3094
+ flexDirection: isCompact ? "row" : "column",
3095
+ alignItems: "center",
3096
+ gap: isCompact ? 2 : 1,
3097
+ px: isCompact ? 3 : 2,
3098
+ py: isCompact ? 2 : 1,
3099
+ borderRadius: "lg",
3100
+ transition: "background 0.2s",
3101
+ _hover: { bg: "gray.50" },
3102
+ children: [
3103
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3104
+ import_react26.Steps.Indicator,
3105
+ {
3106
+ borderWidth: "2px",
3107
+ transition: "all 0.25s",
3108
+ style: {
3109
+ borderColor: isCompleted || isActive ? PRIMARY : void 0,
3110
+ background: isCompleted ? PRIMARY : void 0,
3111
+ color: isCompleted ? "white" : isActive ? PRIMARY : void 0,
3112
+ boxShadow: isActive ? `0 0 0 3px ${PRIMARY_DISABLED}` : "none"
3113
+ },
3114
+ children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuCheck, { size: 14 }) : step.icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { as: step.icon, w: 4, h: 4 }) : null
3115
+ }
3116
+ ),
3117
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3118
+ import_react26.Steps.Title,
3119
+ {
3120
+ fontSize: { base: "xs", md: "sm" },
3121
+ textAlign: isCompact ? "left" : "center",
3122
+ whiteSpace: "normal",
3123
+ wordBreak: "break-word",
3124
+ fontWeight: isActive ? 600 : 400,
3125
+ color: isActive ? "gray.900" : isCompleted ? "gray.600" : "gray.400",
3126
+ transition: "color 0.2s",
3127
+ children: step.title
3128
+ }
3129
+ )
3130
+ ]
3131
+ }
3132
+ ),
3133
+ !isCompact && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3134
+ import_react26.Steps.Separator,
3135
+ {
3136
+ display: { base: "none", md: "block" }
3137
+ }
3138
+ )
3139
+ ]
3140
+ },
3141
+ index
3142
+ );
3143
+ })
3144
+ }
3145
+ ),
3146
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3147
+ import_react26.Box,
3148
+ {
3149
+ w: "full",
3150
+ h: "3px",
3151
+ bg: "gray.100",
3152
+ borderRadius: "full",
3153
+ overflow: "hidden",
3154
+ mt: 1,
3155
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3156
+ import_react26.Box,
3157
+ {
3158
+ h: "full",
3159
+ bg: PRIMARY,
3160
+ transition: "width 0.4s ease",
3161
+ w: `${(activeStep + 1) / steps.length * 100}%`
3162
+ }
3163
+ )
3164
+ }
3165
+ )
3166
+ ]
3167
+ }
3168
+ ),
3169
+ steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Content, { index, children: step.component ?? step.description }, index)),
3170
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3171
+ import_react26.Flex,
3172
+ {
3173
+ w: "full",
3174
+ justify: "space-between",
3175
+ align: "center",
3176
+ mt: 4,
3177
+ gap: 2,
3178
+ display: { base: "flex", md: "none" },
3179
+ children: [
3180
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3181
+ import_react26.Box,
3182
+ {
3183
+ as: "button",
3184
+ display: "flex",
3185
+ alignItems: "center",
3186
+ gap: 1,
3187
+ px: 3,
3188
+ py: 2,
3189
+ borderRadius: "lg",
3190
+ border: "1.5px solid",
3191
+ borderColor: "gray.200",
3192
+ bg: "white",
3193
+ color: "gray.700",
3194
+ fontSize: "sm",
3195
+ fontWeight: 500,
3196
+ cursor: "pointer",
3197
+ _hover: { bg: "gray.50" },
3198
+ _disabled: { opacity: 0.4, cursor: "not-allowed" },
3199
+ transition: "all 0.15s",
3200
+ children: [
3201
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronLeft, { size: 14 }),
3202
+ "Back"
3203
+ ]
3204
+ }
3205
+ ) }),
3206
+ !isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3207
+ import_react26.Box,
3208
+ {
3209
+ as: "button",
3210
+ display: "flex",
3211
+ alignItems: "center",
3212
+ gap: 1,
3213
+ px: 3,
3214
+ py: 2,
3215
+ borderRadius: "lg",
3216
+ color: "white",
3217
+ fontSize: "sm",
3218
+ fontWeight: 500,
3219
+ cursor: nextDisabled ? "not-allowed" : "pointer",
3220
+ opacity: nextDisabled ? 0.5 : 1,
3221
+ pointerEvents: nextDisabled ? "none" : "auto",
3222
+ transition: "all 0.15s",
3223
+ onClick: handleNext,
3224
+ bg: PRIMARY,
3225
+ _hover: { bg: PRIMARY_HOVER },
3226
+ children: [
3227
+ nextStepTitle ? `Next: ${nextStepTitle}` : "Next",
3228
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronRight, { size: 14 })
3229
+ ]
3230
+ }
3231
+ ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3232
+ import_react26.Box,
3233
+ {
3234
+ as: "button",
3235
+ display: "flex",
3236
+ alignItems: "center",
3237
+ gap: 1,
3238
+ px: 3,
3239
+ py: 2,
3240
+ borderRadius: "lg",
3241
+ color: "white",
3242
+ fontSize: "sm",
3243
+ fontWeight: 500,
3244
+ cursor: submitDisabled ? "not-allowed" : "pointer",
3245
+ opacity: submitDisabled ? 0.5 : 1,
3246
+ pointerEvents: submitDisabled ? "none" : "auto",
3247
+ transition: "all 0.15s",
3248
+ onClick: onSubmit,
3249
+ bg: PRIMARY,
3250
+ _hover: { bg: PRIMARY_HOVER },
3251
+ children: [
3252
+ submitButtonText,
3253
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuCheck, { size: 14 })
3254
+ ]
3255
+ }
3256
+ )
3257
+ ]
3258
+ }
3259
+ ),
3260
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3261
+ import_react26.ButtonGroup,
3262
+ {
3263
+ size: "sm",
3264
+ variant: "outline",
3265
+ display: { base: "none", md: "flex" },
3266
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react26.Flex, { mt: 5, w: "full", align: "center", justify: "space-between", children: [
3267
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_st_peter_ui6.SecondaryMdButton, { children: [
3268
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronLeft, {}),
3269
+ "Previous"
3270
+ ] }) }),
3271
+ !isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3272
+ import_react26.Box,
3273
+ {
3274
+ as: "button",
3275
+ display: "flex",
3276
+ alignItems: "center",
3277
+ gap: 1.5,
3278
+ px: 4,
3279
+ py: 2,
3280
+ borderRadius: "lg",
3281
+ color: "white",
3282
+ fontSize: "sm",
3283
+ fontWeight: 600,
3284
+ cursor: nextDisabled ? "not-allowed" : "pointer",
3285
+ opacity: nextDisabled ? 0.5 : 1,
3286
+ pointerEvents: nextDisabled ? "none" : "auto",
3287
+ transition: "all 0.15s",
3288
+ onClick: handleNext,
3289
+ boxShadow: "0 1px 3px 0 rgba(0,0,0,0.12)",
3290
+ bg: PRIMARY,
3291
+ _hover: { bg: PRIMARY_HOVER },
3292
+ children: [
3293
+ nextStepTitle ? `Next: ${nextStepTitle}` : "Next",
3294
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronRight, { size: 15 })
3295
+ ]
3296
+ }
3297
+ ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.PrimaryMdButton, { disabled: !!submitDisabled, onClick: onSubmit, children: submitButtonText })
3298
+ ] })
3299
+ }
3300
+ )
3301
+ ]
3302
+ }
3303
+ ) })
3304
+ ]
3110
3305
  }
3111
3306
  );
3112
3307
  };