@asdp/ferryui 0.1.22-dev.8766 → 0.1.22-dev.8782

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.
package/dist/index.mjs CHANGED
@@ -1,6 +1,7 @@
1
- import { makeStyles, tokens, shorthands, createLightTheme, createDarkTheme, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, mergeClasses, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Image, Title1, DialogTrigger, TabList, Tab, Body2, typographyStyles, Textarea, Link } from '@fluentui/react-components';
1
+ import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Image, Title1, DialogTrigger, TabList, Tab, Body2, typographyStyles, Textarea, Link } from '@fluentui/react-components';
2
2
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
3
  import React5, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, Fragment as Fragment$1 } from 'react';
4
+ import { DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
4
5
  import { Row, Col, Visible } from 'react-grid-system';
5
6
  import { Icon } from '@iconify/react';
6
7
  import { Controller, useForm, useWatch } from 'react-hook-form';
@@ -9,7 +10,6 @@ import Select from 'react-select';
9
10
  import { Calendar } from '@fluentui/react-calendar-compat';
10
11
  import moment from 'moment';
11
12
  import { Range } from 'react-range';
12
- import { SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
13
13
 
14
14
  // src/components/ModalIllustration/ModalIllustration.constants.ts
15
15
  var DEFAULT_LABELS = {
@@ -203,8 +203,148 @@ var DEFAULT_LABELS2 = {
203
203
  announcementTemplate: "Carousel slide {index} of {total}"
204
204
  }
205
205
  };
206
+
207
+ // src/constants/generated/tokens.ts
208
+ var brandColors = {
209
+ "10": "#000000",
210
+ "20": "#03060e",
211
+ "30": "#060b1c",
212
+ "40": "#09112a",
213
+ "50": "#0c1738",
214
+ "60": "#122255",
215
+ "70": "#182e71",
216
+ "80": "#1e398d",
217
+ "90": "#4b60a4",
218
+ "100": "#7787bb",
219
+ "110": "#a4afd1",
220
+ "120": "#bac2dd",
221
+ "130": "#d0d6e8",
222
+ "140": "#e7e9f4",
223
+ "150": "#fdfdff",
224
+ "160": "#ffffff"
225
+ };
226
+
227
+ // src/constants/generated/tokensV2.ts
228
+ var brandColors2 = {
229
+ "10": "#001a1bff",
230
+ "20": "#02383bff",
231
+ "30": "#002426",
232
+ "40": "#004044",
233
+ "50": "#005D62",
234
+ "60": "#007A81",
235
+ "70": "#00969F",
236
+ "80": "#00B3BD",
237
+ "90": "#29BFC8",
238
+ "100": "#52CBD2",
239
+ "110": "#7AD7DD",
240
+ "120": "#A3E4E7",
241
+ "130": "#CCF0F2",
242
+ "140": "#E1F7F8",
243
+ "150": "#fdfdff",
244
+ "160": "#ffffff"
245
+ };
246
+ var spacing2 = {
247
+ "360": 36};
248
+ var fontWeight = {
249
+ "Medium": 500};
250
+ var sharedColors = {
251
+ "Shared_Cranberry_Primary": "#c50f1f",
252
+ "Shared_Red_Primary": "#d13438",
253
+ "Shared_Green_Primary": "#107c10"};
254
+ var lightModeColors2 = {
255
+ "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
256
+ "Brand_Stroke_1_Rest": "#00B3BD"};
257
+ var tokensV2_default = {
258
+ lightModeColors: lightModeColors2};
259
+
260
+ // src/constants/brandColors.ts
261
+ var isV2Path = typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
262
+ var brandColors3 = !isV2Path ? brandColors2 : brandColors;
263
+ var customBrand = {
264
+ 10: brandColors3["10"],
265
+ 20: brandColors3["20"],
266
+ 30: brandColors3["30"],
267
+ 40: brandColors3["40"],
268
+ 50: brandColors3["50"],
269
+ 60: brandColors3["60"],
270
+ 70: brandColors3["70"],
271
+ 80: brandColors3["80"],
272
+ 90: brandColors3["90"],
273
+ 100: brandColors3["100"],
274
+ 110: brandColors3["110"],
275
+ 120: brandColors3["120"],
276
+ 130: brandColors3["130"],
277
+ 140: brandColors3["140"],
278
+ 150: brandColors3["150"],
279
+ 160: brandColors3["160"]
280
+ };
281
+
282
+ // src/constants/designTokens.ts
283
+ typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
284
+ var designTokens = {
285
+ // Breakpoints for responsive design
286
+ breakpoints: {
287
+ xs: "320px",
288
+ sm: "480px",
289
+ md: "768px",
290
+ lg: "1024px",
291
+ xl: "1200px",
292
+ xxl: "1440px",
293
+ xxxl: "1600px"
294
+ }};
295
+
296
+ // src/constants/themes.ts
297
+ var extendedTokens = {
298
+ breakpointXs: designTokens.breakpoints.xs,
299
+ breakpointSm: designTokens.breakpoints.sm,
300
+ breakpointMd: designTokens.breakpoints.md,
301
+ breakpointLg: designTokens.breakpoints.lg,
302
+ breakpointXl: designTokens.breakpoints.xl,
303
+ breakpointXxl: designTokens.breakpoints.xxl,
304
+ breakpointXxxl: designTokens.breakpoints.xxxl
305
+ };
306
+ ({
307
+ ...createLightTheme(customBrand),
308
+ // Brand colors from Figma
309
+ colorBrandBackground: customBrand[80],
310
+ colorBrandBackgroundHover: customBrand[70],
311
+ colorBrandBackgroundPressed: customBrand[60],
312
+ colorBrandBackgroundSelected: customBrand[80],
313
+ colorBrandForeground1: customBrand[80],
314
+ colorBrandForeground2: customBrand[70],
315
+ colorBrandForegroundLink: customBrand[70],
316
+ colorBrandForegroundLinkHover: customBrand[60],
317
+ colorBrandForegroundLinkPressed: customBrand[50],
318
+ colorBrandForegroundLinkSelected: customBrand[70]});
319
+ ({
320
+ ...createDarkTheme(customBrand),
321
+ // Brand colors from Figma (inverted for dark mode)
322
+ colorBrandBackground: customBrand[100],
323
+ colorBrandBackgroundHover: customBrand[110],
324
+ colorBrandBackgroundPressed: customBrand[120],
325
+ colorBrandBackgroundSelected: customBrand[100],
326
+ colorBrandForeground1: customBrand[100],
327
+ colorBrandForeground2: customBrand[110],
328
+ colorBrandForegroundLink: customBrand[110],
329
+ colorBrandForegroundLinkHover: customBrand[120],
330
+ colorBrandForegroundLinkPressed: customBrand[130],
331
+ colorBrandForegroundLinkSelected: customBrand[110]});
206
332
  var useStyles2 = makeStyles({
207
333
  carousel: {},
334
+ carouselContainer: {
335
+ display: "flex",
336
+ gap: `${spacing2[360]}px`,
337
+ alignItems: "center",
338
+ justifyContent: "center",
339
+ [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
340
+ gap: tokens.spacingVerticalXS
341
+ }
342
+ },
343
+ carouselContainerNoNav: {
344
+ display: "flex",
345
+ alignItems: "center",
346
+ justifyContent: "center"
347
+ },
208
348
  customCarouselNav: {
209
349
  display: "flex",
210
350
  gap: tokens.spacingHorizontalXS,
@@ -213,6 +353,39 @@ var useStyles2 = makeStyles({
213
353
  ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingVerticalM),
214
354
  borderRadius: tokens.borderRadiusCircular
215
355
  },
356
+ closeButton: {
357
+ width: "max-content",
358
+ height: "max-content",
359
+ backgroundColor: tokens.colorNeutralForeground2,
360
+ color: tokens.colorNeutralBackground1,
361
+ position: "absolute",
362
+ zIndex: 1,
363
+ insetInlineEnd: "0px",
364
+ top: "2%",
365
+ [`@media (max-width: ${extendedTokens.breakpointSm})`]: {
366
+ top: "2%"
367
+ }
368
+ },
369
+ closeButtonWithNav: {
370
+ insetInlineEnd: "14%",
371
+ [`@media (max-width: ${extendedTokens.breakpointSm})`]: {
372
+ insetInlineEnd: "15% !important"
373
+ },
374
+ [`@media (min-width: ${extendedTokens.breakpointMd}) and (max-width: ${extendedTokens.breakpointLg})`]: {
375
+ insetInlineEnd: "13% !important"
376
+ }
377
+ },
378
+ closeButtonWithoutNav: {
379
+ insetInlineEnd: "10px"
380
+ },
381
+ customeCarouselButton: {
382
+ borderRadius: tokens.borderRadiusCircular,
383
+ backgroundColor: tokens.colorNeutralBackgroundInverted,
384
+ color: tokens.colorNeutralBackground1,
385
+ ":hover": {
386
+ backgroundColor: tokens.colorNeutralForeground2
387
+ }
388
+ },
216
389
  carouselNavButton: {
217
390
  "& button": {
218
391
  padding: 0,
@@ -274,7 +447,10 @@ var CarouselWithCustomNav = ({
274
447
  ariaLabel: deprecatedAriaLabel,
275
448
  darkNavBackground = true,
276
449
  className,
277
- cardFocus = false
450
+ cardFocus = false,
451
+ showNavButtons = false,
452
+ showCloseButton = false,
453
+ onCloseClick
278
454
  }) => {
279
455
  const styles = useStyles2();
280
456
  const [internalIndex, setInternalIndex] = useState(0);
@@ -315,20 +491,53 @@ var CarouselWithCustomNav = ({
315
491
  activeIndex,
316
492
  onActiveIndexChange: (_, data) => handleIndexChange(data.index),
317
493
  children: [
318
- /* @__PURE__ */ jsx(CarouselViewport, { children: /* @__PURE__ */ jsx(
319
- CarouselSlider,
320
- {
321
- cardFocus,
322
- "aria-label": labels.carouselAriaLabel,
323
- children
324
- }
325
- ) }),
494
+ /* @__PURE__ */ jsxs("div", { className: showNavButtons ? styles.carouselContainer : styles.carouselContainerNoNav, children: [
495
+ showNavButtons && /* @__PURE__ */ jsx(
496
+ CarouselButton,
497
+ {
498
+ navType: "prev",
499
+ "aria-label": "Previous Carousel Page Button",
500
+ className: styles.customeCarouselButton
501
+ }
502
+ ),
503
+ /* @__PURE__ */ jsxs(CarouselViewport, { style: { overflow: "hidden", paddingBottom: "10px" }, children: [
504
+ showCloseButton && /* @__PURE__ */ jsx(
505
+ Button,
506
+ {
507
+ icon: /* @__PURE__ */ jsx(DismissRegular, {}),
508
+ shape: "circular",
509
+ onClick: onCloseClick,
510
+ "aria-label": "Close carousel",
511
+ className: mergeClasses(
512
+ styles.closeButton,
513
+ showNavButtons ? styles.closeButtonWithNav : styles.closeButtonWithoutNav
514
+ )
515
+ }
516
+ ),
517
+ /* @__PURE__ */ jsx(
518
+ CarouselSlider,
519
+ {
520
+ cardFocus,
521
+ "aria-label": labels.carouselAriaLabel,
522
+ children
523
+ }
524
+ )
525
+ ] }),
526
+ showNavButtons && /* @__PURE__ */ jsx(
527
+ CarouselButton,
528
+ {
529
+ navType: "next",
530
+ "aria-label": "Next Carousel Page Button",
531
+ className: styles.customeCarouselButton
532
+ }
533
+ )
534
+ ] }),
326
535
  /* @__PURE__ */ jsx(
327
536
  CarouselNav,
328
537
  {
329
538
  style: {
330
539
  backgroundColor: darkNavBackground ? tokens.colorSubtleBackgroundInverted : tokens.colorSubtleBackground,
331
- marginTop: tokens.spacingVerticalXL
540
+ marginTop: tokens.spacingVerticalXXL
332
541
  },
333
542
  appearance: "brand",
334
543
  className: styles.carouselNavButton,
@@ -677,130 +886,6 @@ function useWindowSize() {
677
886
  return windowSize;
678
887
  }
679
888
 
680
- // src/constants/generated/tokens.ts
681
- var brandColors = {
682
- "10": "#000000",
683
- "20": "#03060e",
684
- "30": "#060b1c",
685
- "40": "#09112a",
686
- "50": "#0c1738",
687
- "60": "#122255",
688
- "70": "#182e71",
689
- "80": "#1e398d",
690
- "90": "#4b60a4",
691
- "100": "#7787bb",
692
- "110": "#a4afd1",
693
- "120": "#bac2dd",
694
- "130": "#d0d6e8",
695
- "140": "#e7e9f4",
696
- "150": "#fdfdff",
697
- "160": "#ffffff"
698
- };
699
-
700
- // src/constants/generated/tokensV2.ts
701
- var brandColors2 = {
702
- "10": "#001a1bff",
703
- "20": "#02383bff",
704
- "30": "#002426",
705
- "40": "#004044",
706
- "50": "#005D62",
707
- "60": "#007A81",
708
- "70": "#00969F",
709
- "80": "#00B3BD",
710
- "90": "#29BFC8",
711
- "100": "#52CBD2",
712
- "110": "#7AD7DD",
713
- "120": "#A3E4E7",
714
- "130": "#CCF0F2",
715
- "140": "#E1F7F8",
716
- "150": "#fdfdff",
717
- "160": "#ffffff"
718
- };
719
- var fontWeight = {
720
- "Medium": 500};
721
- var sharedColors = {
722
- "Shared_Cranberry_Primary": "#c50f1f",
723
- "Shared_Red_Primary": "#d13438",
724
- "Shared_Green_Primary": "#107c10"};
725
- var lightModeColors2 = {
726
- "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
727
- "Brand_Stroke_1_Rest": "#00B3BD"};
728
- var tokensV2_default = {
729
- lightModeColors: lightModeColors2};
730
-
731
- // src/constants/brandColors.ts
732
- var isV2Path = typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
733
- var brandColors3 = !isV2Path ? brandColors2 : brandColors;
734
- var customBrand = {
735
- 10: brandColors3["10"],
736
- 20: brandColors3["20"],
737
- 30: brandColors3["30"],
738
- 40: brandColors3["40"],
739
- 50: brandColors3["50"],
740
- 60: brandColors3["60"],
741
- 70: brandColors3["70"],
742
- 80: brandColors3["80"],
743
- 90: brandColors3["90"],
744
- 100: brandColors3["100"],
745
- 110: brandColors3["110"],
746
- 120: brandColors3["120"],
747
- 130: brandColors3["130"],
748
- 140: brandColors3["140"],
749
- 150: brandColors3["150"],
750
- 160: brandColors3["160"]
751
- };
752
-
753
- // src/constants/designTokens.ts
754
- typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
755
- var designTokens = {
756
- // Breakpoints for responsive design
757
- breakpoints: {
758
- xs: "320px",
759
- sm: "480px",
760
- md: "768px",
761
- lg: "1024px",
762
- xl: "1200px",
763
- xxl: "1440px",
764
- xxxl: "1600px"
765
- }};
766
-
767
- // src/constants/themes.ts
768
- var extendedTokens = {
769
- breakpointXs: designTokens.breakpoints.xs,
770
- breakpointSm: designTokens.breakpoints.sm,
771
- breakpointMd: designTokens.breakpoints.md,
772
- breakpointLg: designTokens.breakpoints.lg,
773
- breakpointXl: designTokens.breakpoints.xl,
774
- breakpointXxl: designTokens.breakpoints.xxl,
775
- breakpointXxxl: designTokens.breakpoints.xxxl
776
- };
777
- ({
778
- ...createLightTheme(customBrand),
779
- // Brand colors from Figma
780
- colorBrandBackground: customBrand[80],
781
- colorBrandBackgroundHover: customBrand[70],
782
- colorBrandBackgroundPressed: customBrand[60],
783
- colorBrandBackgroundSelected: customBrand[80],
784
- colorBrandForeground1: customBrand[80],
785
- colorBrandForeground2: customBrand[70],
786
- colorBrandForegroundLink: customBrand[70],
787
- colorBrandForegroundLinkHover: customBrand[60],
788
- colorBrandForegroundLinkPressed: customBrand[50],
789
- colorBrandForegroundLinkSelected: customBrand[70]});
790
- ({
791
- ...createDarkTheme(customBrand),
792
- // Brand colors from Figma (inverted for dark mode)
793
- colorBrandBackground: customBrand[100],
794
- colorBrandBackgroundHover: customBrand[110],
795
- colorBrandBackgroundPressed: customBrand[120],
796
- colorBrandBackgroundSelected: customBrand[100],
797
- colorBrandForeground1: customBrand[100],
798
- colorBrandForeground2: customBrand[110],
799
- colorBrandForegroundLink: customBrand[110],
800
- colorBrandForegroundLinkHover: customBrand[120],
801
- colorBrandForegroundLinkPressed: customBrand[130],
802
- colorBrandForegroundLinkSelected: customBrand[110]});
803
-
804
889
  // src/components/CardTicket/CardTicket.constants.ts
805
890
  var DEFAULT_LABELS5 = {
806
891
  id: {