@splpi/estore-shared-components 0.0.2 → 0.0.4

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 (7) hide show
  1. package/dist/index.d.mts +3 -11
  2. package/dist/index.d.ts +3 -11
  3. package/dist/index.js +58 -42
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +56 -39
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
3
  import react__default from 'react';
4
4
  import { IconType } from 'react-icons';
5
- import { InputProps } from '@chakra-ui/react';
6
5
 
7
6
  interface IPersonalInfo {
8
7
  firstName?: string;
@@ -141,8 +140,9 @@ type BottomQuickActionsProps = {
141
140
  };
142
141
  declare const BottomQuickActions: ({ open, onOpenChange, title, subtitle, headerSlot, actions, }: BottomQuickActionsProps) => react_jsx_runtime.JSX.Element;
143
142
 
144
- declare function NotifyInstall({ children, }: {
143
+ declare function NotifyInstall({ children, appName, }: {
145
144
  children: React.ReactNode;
145
+ appName: string;
146
146
  }): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
147
147
 
148
148
  type ColorModeValue = "light" | "dark";
@@ -186,14 +186,6 @@ interface ReusableProfileProps {
186
186
  }
187
187
  declare function ReusableProfile({ user, colorMode: controlledColorMode, onColorModeChange, initialTwoFactorEnabled, initialQuickNavHrefs, availableNavOptions, maxQuickNavItems, enableLocalStorage, storageKey, onSaveAccount, onChangePassword, onSignOut, onTwoFactorChange, onToast, }: ReusableProfileProps): react_jsx_runtime.JSX.Element;
188
188
 
189
- interface FloatingLabelInputProps extends InputProps {
190
- label: react__default.ReactNode;
191
- value?: string;
192
- defaultValue?: string;
193
- onValueChange?: (value: string) => void;
194
- }
195
- declare const FloatingLabelInput: (props: FloatingLabelInputProps) => react_jsx_runtime.JSX.Element;
196
-
197
189
  interface CartItem {
198
190
  planDesc: string;
199
191
  mode: string;
@@ -210,4 +202,4 @@ declare const createEmptyApplicationData: () => IApplicationData;
210
202
  declare const loadApplicationDataFromLocalStorage: (storageKey?: string) => IApplicationData | null;
211
203
  declare const saveApplicationDataToLocalStorage: (data: IApplicationData, storageKey?: string) => void;
212
204
 
213
- export { Beneficiary, type BeneficiaryClass, BottomQuickActions, type CartItem, FloatingLabelInput, HealthDeclaration, type IAddress, type IApplicationData, type IBeneficiary, type IEmployment, type IHealthDeclaration, type IPersonalInfo, type ITransactionData, LifePlanApplication1, LifePlanApplication2, LifePlanApplication3, LifePlanApplicationFormWrapper, LifePlanApplicationStepWrapper, type NavOptionDef, NotifyInstall, type ProfileUser, type ReusableProfileProps, SharedLifePlanApplication, ReusableProfile as UserProfile, createEmptyApplicationData, loadApplicationDataFromLocalStorage, saveApplicationDataToLocalStorage };
205
+ export { Beneficiary, type BeneficiaryClass, BottomQuickActions, type CartItem, HealthDeclaration, type IAddress, type IApplicationData, type IBeneficiary, type IEmployment, type IHealthDeclaration, type IPersonalInfo, type ITransactionData, LifePlanApplication1, LifePlanApplication2, LifePlanApplication3, LifePlanApplicationFormWrapper, LifePlanApplicationStepWrapper, type NavOptionDef, NotifyInstall, type ProfileUser, type ReusableProfileProps, SharedLifePlanApplication, ReusableProfile as UserProfile, createEmptyApplicationData, loadApplicationDataFromLocalStorage, saveApplicationDataToLocalStorage };
package/dist/index.d.ts CHANGED
@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
3
  import react__default from 'react';
4
4
  import { IconType } from 'react-icons';
5
- import { InputProps } from '@chakra-ui/react';
6
5
 
7
6
  interface IPersonalInfo {
8
7
  firstName?: string;
@@ -141,8 +140,9 @@ type BottomQuickActionsProps = {
141
140
  };
142
141
  declare const BottomQuickActions: ({ open, onOpenChange, title, subtitle, headerSlot, actions, }: BottomQuickActionsProps) => react_jsx_runtime.JSX.Element;
143
142
 
144
- declare function NotifyInstall({ children, }: {
143
+ declare function NotifyInstall({ children, appName, }: {
145
144
  children: React.ReactNode;
145
+ appName: string;
146
146
  }): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
147
147
 
148
148
  type ColorModeValue = "light" | "dark";
@@ -186,14 +186,6 @@ interface ReusableProfileProps {
186
186
  }
187
187
  declare function ReusableProfile({ user, colorMode: controlledColorMode, onColorModeChange, initialTwoFactorEnabled, initialQuickNavHrefs, availableNavOptions, maxQuickNavItems, enableLocalStorage, storageKey, onSaveAccount, onChangePassword, onSignOut, onTwoFactorChange, onToast, }: ReusableProfileProps): react_jsx_runtime.JSX.Element;
188
188
 
189
- interface FloatingLabelInputProps extends InputProps {
190
- label: react__default.ReactNode;
191
- value?: string;
192
- defaultValue?: string;
193
- onValueChange?: (value: string) => void;
194
- }
195
- declare const FloatingLabelInput: (props: FloatingLabelInputProps) => react_jsx_runtime.JSX.Element;
196
-
197
189
  interface CartItem {
198
190
  planDesc: string;
199
191
  mode: string;
@@ -210,4 +202,4 @@ declare const createEmptyApplicationData: () => IApplicationData;
210
202
  declare const loadApplicationDataFromLocalStorage: (storageKey?: string) => IApplicationData | null;
211
203
  declare const saveApplicationDataToLocalStorage: (data: IApplicationData, storageKey?: string) => void;
212
204
 
213
- export { Beneficiary, type BeneficiaryClass, BottomQuickActions, type CartItem, FloatingLabelInput, HealthDeclaration, type IAddress, type IApplicationData, type IBeneficiary, type IEmployment, type IHealthDeclaration, type IPersonalInfo, type ITransactionData, LifePlanApplication1, LifePlanApplication2, LifePlanApplication3, LifePlanApplicationFormWrapper, LifePlanApplicationStepWrapper, type NavOptionDef, NotifyInstall, type ProfileUser, type ReusableProfileProps, SharedLifePlanApplication, ReusableProfile as UserProfile, createEmptyApplicationData, loadApplicationDataFromLocalStorage, saveApplicationDataToLocalStorage };
205
+ export { Beneficiary, type BeneficiaryClass, BottomQuickActions, type CartItem, HealthDeclaration, type IAddress, type IApplicationData, type IBeneficiary, type IEmployment, type IHealthDeclaration, type IPersonalInfo, type ITransactionData, LifePlanApplication1, LifePlanApplication2, LifePlanApplication3, LifePlanApplicationFormWrapper, LifePlanApplicationStepWrapper, type NavOptionDef, NotifyInstall, type ProfileUser, type ReusableProfileProps, SharedLifePlanApplication, ReusableProfile as UserProfile, createEmptyApplicationData, loadApplicationDataFromLocalStorage, saveApplicationDataToLocalStorage };
package/dist/index.js CHANGED
@@ -32,7 +32,6 @@ var index_exports = {};
32
32
  __export(index_exports, {
33
33
  Beneficiary: () => beneficiary_default,
34
34
  BottomQuickActions: () => BottomQuickActions_default,
35
- FloatingLabelInput: () => floating_label_input_default,
36
35
  HealthDeclaration: () => HealthDeclaration_default,
37
36
  LifePlanApplication1: () => LifePlanApplication1_default,
38
37
  LifePlanApplication2: () => LifePlanApplication2_default,
@@ -271,24 +270,32 @@ var STANDARD_ICON_BUTTON_STYLES = {
271
270
  }
272
271
  };
273
272
 
274
- // src/NewSaleForm/ui/floating-label-input.tsx
275
- var import_react = require("react");
276
- var import_react2 = require("@chakra-ui/react");
273
+ // src/NewSaleForm/ui/FloatingLabelInput.tsx
274
+ var import_react = require("@chakra-ui/react");
275
+ var import_react2 = require("react");
277
276
  var import_jsx_runtime = require("react/jsx-runtime");
278
277
  var FloatingLabelInput = (props) => {
279
278
  const { label, onValueChange, value, defaultValue = "", ...rest } = props;
280
- const [inputState, setInputState] = (0, import_react2.useControllableState)({
279
+ const [inputState, setInputState] = (0, import_react.useControllableState)({
281
280
  defaultValue,
282
281
  onChange: onValueChange,
283
282
  value
284
283
  });
285
- const [focused, setFocused] = (0, import_react.useState)(false);
284
+ const [focused, setFocused] = (0, import_react2.useState)(false);
286
285
  const shouldFloat = inputState.length > 0 || focused;
287
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Box, { pos: "relative", w: "full", children: [
286
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Box, { pos: "relative", w: "full", children: [
288
287
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
289
- import_react2.Input,
288
+ import_react.Input,
290
289
  {
291
290
  ...rest,
291
+ h: "12",
292
+ pt: shouldFloat ? "5" : "2",
293
+ pb: "1",
294
+ fontSize: "sm",
295
+ fontWeight: "semibold",
296
+ borderWidth: "1.5px",
297
+ borderRadius: "lg",
298
+ _placeholder: { color: "transparent" },
292
299
  onFocus: (e) => {
293
300
  props.onFocus?.(e);
294
301
  setFocused(true);
@@ -305,26 +312,32 @@ var FloatingLabelInput = (props) => {
305
312
  "data-float": shouldFloat || void 0
306
313
  }
307
314
  ),
308
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Field.Label, { css: floatingStyles, "data-float": shouldFloat || void 0, children: label })
315
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Field.Label, { css: floatingStyles, "data-float": shouldFloat || void 0, children: label })
309
316
  ] });
310
317
  };
311
- var floatingStyles = (0, import_react2.defineStyle)({
318
+ var floatingStyles = (0, import_react.defineStyle)({
319
+ /* placeholder state — vertically centred inside the input */
312
320
  pos: "absolute",
313
- bg: "bg",
314
- px: "0.5",
315
- top: "2.5",
321
+ top: "50%",
322
+ transform: "translateY(-50%)",
316
323
  insetStart: "3",
324
+ fontSize: "sm",
317
325
  fontWeight: "normal",
326
+ color: "gray.400",
327
+ bg: "bg",
328
+ px: "0.5",
318
329
  pointerEvents: "none",
319
- transition: "position",
320
- color: "fg.muted",
330
+ transition: "top 0.15s ease, font-size 0.15s ease, color 0.15s ease, transform 0.15s ease",
331
+ /* floated state — sits above the border, clearly a label */
321
332
  "&[data-float]": {
322
- top: "-3",
323
- insetStart: "2",
324
- color: "fg"
333
+ top: "-2",
334
+ transform: "translateY(0)",
335
+ fontSize: "xs",
336
+ fontWeight: "medium",
337
+ color: "gray.400",
338
+ insetStart: "2.5"
325
339
  }
326
340
  });
327
- var floating_label_input_default = FloatingLabelInput;
328
341
 
329
342
  // src/NewSaleForm/LifePlanApplication1.tsx
330
343
  var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -437,7 +450,7 @@ var LifePlanApplication1 = ({
437
450
  }
438
451
  ) }),
439
452
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
440
- floating_label_input_default,
453
+ FloatingLabelInput,
441
454
  {
442
455
  id: "idNumber",
443
456
  type: "text",
@@ -447,7 +460,7 @@ var LifePlanApplication1 = ({
447
460
  }
448
461
  ) }),
449
462
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
450
- floating_label_input_default,
463
+ FloatingLabelInput,
451
464
  {
452
465
  id: "lastName",
453
466
  type: "text",
@@ -457,7 +470,7 @@ var LifePlanApplication1 = ({
457
470
  }
458
471
  ) }),
459
472
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
460
- floating_label_input_default,
473
+ FloatingLabelInput,
461
474
  {
462
475
  id: "firstName",
463
476
  type: "text",
@@ -467,7 +480,7 @@ var LifePlanApplication1 = ({
467
480
  }
468
481
  ) }),
469
482
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
470
- floating_label_input_default,
483
+ FloatingLabelInput,
471
484
  {
472
485
  id: "middleName",
473
486
  type: "text",
@@ -477,7 +490,7 @@ var LifePlanApplication1 = ({
477
490
  }
478
491
  ) }),
479
492
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
480
- floating_label_input_default,
493
+ FloatingLabelInput,
481
494
  {
482
495
  id: "suffix",
483
496
  type: "text",
@@ -503,7 +516,7 @@ var LifePlanApplication1 = ({
503
516
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Input, { id: "dateOfNeutralization", type: "date" })
504
517
  ] }),
505
518
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
506
- floating_label_input_default,
519
+ FloatingLabelInput,
507
520
  {
508
521
  id: "height",
509
522
  label: "Height (ft)",
@@ -515,7 +528,7 @@ var LifePlanApplication1 = ({
515
528
  }
516
529
  ) }),
517
530
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
518
- floating_label_input_default,
531
+ FloatingLabelInput,
519
532
  {
520
533
  id: "weight",
521
534
  label: "Weight (lbs)",
@@ -564,7 +577,7 @@ var LifePlanApplication1 = ({
564
577
  }
565
578
  ) }),
566
579
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
567
- floating_label_input_default,
580
+ FloatingLabelInput,
568
581
  {
569
582
  id: "nationality",
570
583
  type: "text",
@@ -574,7 +587,7 @@ var LifePlanApplication1 = ({
574
587
  }
575
588
  ) }),
576
589
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
577
- floating_label_input_default,
590
+ FloatingLabelInput,
578
591
  {
579
592
  id: "mobileNumber",
580
593
  type: "text",
@@ -584,7 +597,7 @@ var LifePlanApplication1 = ({
584
597
  }
585
598
  ) }),
586
599
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
587
- floating_label_input_default,
600
+ FloatingLabelInput,
588
601
  {
589
602
  id: "landlineNumber",
590
603
  type: "text",
@@ -597,7 +610,7 @@ var LifePlanApplication1 = ({
597
610
  }
598
611
  ) }),
599
612
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
600
- floating_label_input_default,
613
+ FloatingLabelInput,
601
614
  {
602
615
  id: "email",
603
616
  type: "email",
@@ -607,7 +620,7 @@ var LifePlanApplication1 = ({
607
620
  }
608
621
  ) }),
609
622
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
610
- floating_label_input_default,
623
+ FloatingLabelInput,
611
624
  {
612
625
  id: "mailingAddress",
613
626
  type: "text",
@@ -617,7 +630,7 @@ var LifePlanApplication1 = ({
617
630
  }
618
631
  ) }),
619
632
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
620
- floating_label_input_default,
633
+ FloatingLabelInput,
621
634
  {
622
635
  id: "insurability",
623
636
  type: "text",
@@ -930,7 +943,7 @@ var LifePlanApplication2 = ({
930
943
  }
931
944
  ) }),
932
945
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
933
- floating_label_input_default,
946
+ FloatingLabelInput,
934
947
  {
935
948
  id: "street",
936
949
  label: "Street",
@@ -939,7 +952,7 @@ var LifePlanApplication2 = ({
939
952
  }
940
953
  ) }),
941
954
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
942
- floating_label_input_default,
955
+ FloatingLabelInput,
943
956
  {
944
957
  id: "lotNumber",
945
958
  label: "Lot #",
@@ -1316,7 +1329,7 @@ var Beneficiary = ({ onUpdate }) => {
1316
1329
  children: [
1317
1330
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Field.Root, { children: [
1318
1331
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1319
- floating_label_input_default,
1332
+ FloatingLabelInput,
1320
1333
  {
1321
1334
  id: "firstName",
1322
1335
  type: "text",
@@ -1332,7 +1345,7 @@ var Beneficiary = ({ onUpdate }) => {
1332
1345
  ] }),
1333
1346
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Field.Root, { children: [
1334
1347
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1335
- floating_label_input_default,
1348
+ FloatingLabelInput,
1336
1349
  {
1337
1350
  id: "lastName",
1338
1351
  type: "text",
@@ -1348,7 +1361,7 @@ var Beneficiary = ({ onUpdate }) => {
1348
1361
  ] }),
1349
1362
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Field.Root, { children: [
1350
1363
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1351
- floating_label_input_default,
1364
+ FloatingLabelInput,
1352
1365
  {
1353
1366
  id: "middleInitial",
1354
1367
  type: "text",
@@ -1367,7 +1380,7 @@ var Beneficiary = ({ onUpdate }) => {
1367
1380
  ),
1368
1381
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Field.Root, { children: [
1369
1382
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1370
- floating_label_input_default,
1383
+ FloatingLabelInput,
1371
1384
  {
1372
1385
  id: "address",
1373
1386
  type: "text",
@@ -3522,7 +3535,8 @@ var STEPS = [
3522
3535
  ];
3523
3536
  var INSTALL_DIALOG_DISMISSED_KEY = "estore-install-dialog-dismissed";
3524
3537
  function NotifyInstall({
3525
- children
3538
+ children,
3539
+ appName
3526
3540
  }) {
3527
3541
  const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
3528
3542
  const [isDismissed, setIsDismissed] = (0, import_react32.useState)(false);
@@ -3583,13 +3597,16 @@ function NotifyInstall({
3583
3597
  }
3584
3598
  ),
3585
3599
  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 2, children: [
3586
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3600
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3587
3601
  import_react33.Heading,
3588
3602
  {
3589
3603
  fontSize: { base: "lg", sm: "xl" },
3590
3604
  fontWeight: "bold",
3591
3605
  color: "gray.900",
3592
- children: "Install St. Peter eStore"
3606
+ children: [
3607
+ "Install ",
3608
+ appName || "eStore"
3609
+ ]
3593
3610
  }
3594
3611
  ),
3595
3612
  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -5127,7 +5144,6 @@ var UserProfile_default = ReusableProfile;
5127
5144
  0 && (module.exports = {
5128
5145
  Beneficiary,
5129
5146
  BottomQuickActions,
5130
- FloatingLabelInput,
5131
5147
  HealthDeclaration,
5132
5148
  LifePlanApplication1,
5133
5149
  LifePlanApplication2,