@dododog/ui 0.6.2 → 0.6.3

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.
@@ -11,7 +11,8 @@ var AnchorTabs = React.forwardRef(
11
11
  onActiveChange,
12
12
  pinWhileSectionsVisible = false,
13
13
  pinTop = 72,
14
- containerClassName
14
+ containerClassName,
15
+ variant = "underline"
15
16
  }, ref) => {
16
17
  const [activeKey, setActiveKey] = React.useState(items[0]?.key ?? "");
17
18
  const [pinned, setPinned] = React.useState(false);
@@ -90,7 +91,10 @@ var AnchorTabs = React.forwardRef(
90
91
  ref,
91
92
  "aria-label": ariaLabel,
92
93
  className: cn(
93
- "flex items-stretch gap-1 overflow-x-auto border-b border-sand-dark bg-white",
94
+ variant === "pills" ? (
95
+ // Pills : chips posées sur le fond de page, sans carte ni séparateur.
96
+ "flex items-center gap-2 overflow-x-auto"
97
+ ) : "flex items-stretch gap-1 overflow-x-auto border-b border-sand-dark bg-white",
94
98
  isPinned && "z-40 shadow-sm",
95
99
  className
96
100
  ),
@@ -107,8 +111,14 @@ var AnchorTabs = React.forwardRef(
107
111
  // Cible tactile >= 44px (min-h-[44px] + flex centré) ; transition
108
112
  // limitée aux couleurs (150-300ms, sans reflow) ; press feedback
109
113
  // via opacité (transform/opacity, aucun layout shift).
110
- "flex min-h-[44px] items-center whitespace-nowrap border-b-2 px-4 text-sm outline-none transition-colors duration-200 -mb-px active:opacity-70 focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2",
111
- isActive ? "border-secondary font-semibold text-primary" : "border-transparent font-medium text-text-secondary hover:border-gray-300 hover:text-primary"
114
+ "flex min-h-[44px] items-center whitespace-nowrap px-4 text-sm outline-none transition-colors duration-200 active:opacity-70 focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2",
115
+ variant === "pills" ? cn(
116
+ "rounded-full border",
117
+ isActive ? "border-primary bg-primary font-semibold text-white" : "border-gray-200 bg-white font-medium text-text-secondary hover:border-gray-300 hover:text-primary"
118
+ ) : cn(
119
+ "-mb-px border-b-2",
120
+ isActive ? "border-secondary font-semibold text-primary" : "border-transparent font-medium text-text-secondary hover:border-gray-300 hover:text-primary"
121
+ )
112
122
  ),
113
123
  children: item.label
114
124
  },
@@ -33,7 +33,8 @@ var AnchorTabs = React__namespace.forwardRef(
33
33
  onActiveChange,
34
34
  pinWhileSectionsVisible = false,
35
35
  pinTop = 72,
36
- containerClassName
36
+ containerClassName,
37
+ variant = "underline"
37
38
  }, ref) => {
38
39
  const [activeKey, setActiveKey] = React__namespace.useState(items[0]?.key ?? "");
39
40
  const [pinned, setPinned] = React__namespace.useState(false);
@@ -112,7 +113,10 @@ var AnchorTabs = React__namespace.forwardRef(
112
113
  ref,
113
114
  "aria-label": ariaLabel,
114
115
  className: chunkADIDI7AJ_js.cn(
115
- "flex items-stretch gap-1 overflow-x-auto border-b border-sand-dark bg-white",
116
+ variant === "pills" ? (
117
+ // Pills : chips posées sur le fond de page, sans carte ni séparateur.
118
+ "flex items-center gap-2 overflow-x-auto"
119
+ ) : "flex items-stretch gap-1 overflow-x-auto border-b border-sand-dark bg-white",
116
120
  isPinned && "z-40 shadow-sm",
117
121
  className
118
122
  ),
@@ -129,8 +133,14 @@ var AnchorTabs = React__namespace.forwardRef(
129
133
  // Cible tactile >= 44px (min-h-[44px] + flex centré) ; transition
130
134
  // limitée aux couleurs (150-300ms, sans reflow) ; press feedback
131
135
  // via opacité (transform/opacity, aucun layout shift).
132
- "flex min-h-[44px] items-center whitespace-nowrap border-b-2 px-4 text-sm outline-none transition-colors duration-200 -mb-px active:opacity-70 focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2",
133
- isActive ? "border-secondary font-semibold text-primary" : "border-transparent font-medium text-text-secondary hover:border-gray-300 hover:text-primary"
136
+ "flex min-h-[44px] items-center whitespace-nowrap px-4 text-sm outline-none transition-colors duration-200 active:opacity-70 focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2",
137
+ variant === "pills" ? chunkADIDI7AJ_js.cn(
138
+ "rounded-full border",
139
+ isActive ? "border-primary bg-primary font-semibold text-white" : "border-gray-200 bg-white font-medium text-text-secondary hover:border-gray-300 hover:text-primary"
140
+ ) : chunkADIDI7AJ_js.cn(
141
+ "-mb-px border-b-2",
142
+ isActive ? "border-secondary font-semibold text-primary" : "border-transparent font-medium text-text-secondary hover:border-gray-300 hover:text-primary"
143
+ )
134
144
  ),
135
145
  children: item.label
136
146
  },
@@ -34,6 +34,13 @@ interface AnchorTabsProps {
34
34
  pinTop?: number;
35
35
  /** Classes du conteneur/sentinelle (ex. `hidden lg:block`). */
36
36
  containerClassName?: string;
37
+ /**
38
+ * Présentation de la barre :
39
+ * - `underline` (défaut) : rangée d'onglets sur fond blanc, actif souligné ;
40
+ * - `pills` : chips arrondies posées sur le fond de page (pattern
41
+ * FilterPill) — actif rempli `primary`, inactifs en pill blanche bordée.
42
+ */
43
+ variant?: "underline" | "pills";
37
44
  }
38
45
  /**
39
46
  * Barre d'onglets d'ancrage (desktop) avec scroll-spy.
@@ -34,6 +34,13 @@ interface AnchorTabsProps {
34
34
  pinTop?: number;
35
35
  /** Classes du conteneur/sentinelle (ex. `hidden lg:block`). */
36
36
  containerClassName?: string;
37
+ /**
38
+ * Présentation de la barre :
39
+ * - `underline` (défaut) : rangée d'onglets sur fond blanc, actif souligné ;
40
+ * - `pills` : chips arrondies posées sur le fond de page (pattern
41
+ * FilterPill) — actif rempli `primary`, inactifs en pill blanche bordée.
42
+ */
43
+ variant?: "underline" | "pills";
37
44
  }
38
45
  /**
39
46
  * Barre d'onglets d'ancrage (desktop) avec scroll-spy.
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var chunk2J73BRC5_js = require('../../chunk-2J73BRC5.js');
3
+ var chunkWXEZA6NE_js = require('../../chunk-WXEZA6NE.js');
4
4
  require('../../chunk-ADIDI7AJ.js');
5
5
 
6
6
 
7
7
 
8
8
  Object.defineProperty(exports, "AnchorTabs", {
9
9
  enumerable: true,
10
- get: function () { return chunk2J73BRC5_js.AnchorTabs; }
10
+ get: function () { return chunkWXEZA6NE_js.AnchorTabs; }
11
11
  });
@@ -1,2 +1,2 @@
1
- export { AnchorTabs } from '../../chunk-MKUUHYGQ.mjs';
1
+ export { AnchorTabs } from '../../chunk-M2H6QUAL.mjs';
2
2
  import '../../chunk-IMKLN273.mjs';
package/dist/index.js CHANGED
@@ -28,31 +28,31 @@ var chunkSCGN5H6D_js = require('./chunk-SCGN5H6D.js');
28
28
  var chunk6ASRTUXO_js = require('./chunk-6ASRTUXO.js');
29
29
  var chunkPG4I4NWO_js = require('./chunk-PG4I4NWO.js');
30
30
  var chunkPRDIS2VR_js = require('./chunk-PRDIS2VR.js');
31
- var chunkODUY7NXD_js = require('./chunk-ODUY7NXD.js');
32
31
  var chunkIRKM5UF4_js = require('./chunk-IRKM5UF4.js');
32
+ var chunkODUY7NXD_js = require('./chunk-ODUY7NXD.js');
33
33
  var chunkYN4HPIRC_js = require('./chunk-YN4HPIRC.js');
34
34
  var chunkMKOKWME3_js = require('./chunk-MKOKWME3.js');
35
35
  var chunkDLOHAW74_js = require('./chunk-DLOHAW74.js');
36
36
  var chunk77WKG2D7_js = require('./chunk-77WKG2D7.js');
37
37
  var chunkU3XWNFHH_js = require('./chunk-U3XWNFHH.js');
38
38
  var chunkW7DZZS6L_js = require('./chunk-W7DZZS6L.js');
39
- var chunkIEHX4DU6_js = require('./chunk-IEHX4DU6.js');
40
39
  var chunkTDGU5Y2P_js = require('./chunk-TDGU5Y2P.js');
40
+ var chunkIEHX4DU6_js = require('./chunk-IEHX4DU6.js');
41
41
  var chunkS5TLUDNM_js = require('./chunk-S5TLUDNM.js');
42
42
  var chunk7W3TFPIF_js = require('./chunk-7W3TFPIF.js');
43
- var chunkS732LTPT_js = require('./chunk-S732LTPT.js');
44
43
  var chunkN2Q4Z2FU_js = require('./chunk-N2Q4Z2FU.js');
44
+ var chunkS732LTPT_js = require('./chunk-S732LTPT.js');
45
45
  var chunkC4RZBOKH_js = require('./chunk-C4RZBOKH.js');
46
46
  var chunkKOO5ZXLD_js = require('./chunk-KOO5ZXLD.js');
47
47
  var chunkP7GAKOCX_js = require('./chunk-P7GAKOCX.js');
48
48
  var chunkIJIUUBFT_js = require('./chunk-IJIUUBFT.js');
49
- var chunkT4AT3YCT_js = require('./chunk-T4AT3YCT.js');
50
49
  var chunkAIA3NHCK_js = require('./chunk-AIA3NHCK.js');
51
50
  var chunkE24VNM6S_js = require('./chunk-E24VNM6S.js');
51
+ var chunkT4AT3YCT_js = require('./chunk-T4AT3YCT.js');
52
52
  var chunkXXC2YD3D_js = require('./chunk-XXC2YD3D.js');
53
- var chunkT5FLQQP6_js = require('./chunk-T5FLQQP6.js');
54
53
  var chunkVWFY24XF_js = require('./chunk-VWFY24XF.js');
55
- var chunkEY4ZIR3P_js = require('./chunk-EY4ZIR3P.js');
54
+ var chunkT5FLQQP6_js = require('./chunk-T5FLQQP6.js');
55
+ var chunkWBRVUWGC_js = require('./chunk-WBRVUWGC.js');
56
56
  var chunkZ5S7LHMY_js = require('./chunk-Z5S7LHMY.js');
57
57
  var chunk6EG6EAHW_js = require('./chunk-6EG6EAHW.js');
58
58
  var chunkPND5YKFN_js = require('./chunk-PND5YKFN.js');
@@ -61,9 +61,9 @@ var chunkYZTVHCLK_js = require('./chunk-YZTVHCLK.js');
61
61
  var chunkZAUYE2EI_js = require('./chunk-ZAUYE2EI.js');
62
62
  var chunkMY6BYO5F_js = require('./chunk-MY6BYO5F.js');
63
63
  var chunkMCF3EQTV_js = require('./chunk-MCF3EQTV.js');
64
- var chunkWBRVUWGC_js = require('./chunk-WBRVUWGC.js');
65
- var chunk2J73BRC5_js = require('./chunk-2J73BRC5.js');
64
+ var chunkWXEZA6NE_js = require('./chunk-WXEZA6NE.js');
66
65
  var chunkNHB2TI2B_js = require('./chunk-NHB2TI2B.js');
66
+ var chunkEY4ZIR3P_js = require('./chunk-EY4ZIR3P.js');
67
67
  var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
68
68
  var React = require('react');
69
69
  var classVarianceAuthority = require('class-variance-authority');
@@ -656,14 +656,14 @@ Object.defineProperty(exports, "promoBannerVariants", {
656
656
  enumerable: true,
657
657
  get: function () { return chunkPRDIS2VR_js.promoBannerVariants; }
658
658
  });
659
- Object.defineProperty(exports, "HotelCard", {
660
- enumerable: true,
661
- get: function () { return chunkODUY7NXD_js.HotelCard; }
662
- });
663
659
  Object.defineProperty(exports, "Header", {
664
660
  enumerable: true,
665
661
  get: function () { return chunkIRKM5UF4_js.Header; }
666
662
  });
663
+ Object.defineProperty(exports, "HotelCard", {
664
+ enumerable: true,
665
+ get: function () { return chunkODUY7NXD_js.HotelCard; }
666
+ });
667
667
  Object.defineProperty(exports, "IconBadge", {
668
668
  enumerable: true,
669
669
  get: function () { return chunkYN4HPIRC_js.IconBadge; }
@@ -696,14 +696,14 @@ Object.defineProperty(exports, "LinkCard", {
696
696
  enumerable: true,
697
697
  get: function () { return chunkW7DZZS6L_js.LinkCard; }
698
698
  });
699
- Object.defineProperty(exports, "EmptyState", {
700
- enumerable: true,
701
- get: function () { return chunkIEHX4DU6_js.EmptyState; }
702
- });
703
699
  Object.defineProperty(exports, "DualRangeSlider", {
704
700
  enumerable: true,
705
701
  get: function () { return chunkTDGU5Y2P_js.DualRangeSlider; }
706
702
  });
703
+ Object.defineProperty(exports, "EmptyState", {
704
+ enumerable: true,
705
+ get: function () { return chunkIEHX4DU6_js.EmptyState; }
706
+ });
707
707
  Object.defineProperty(exports, "ErrorBoundary", {
708
708
  enumerable: true,
709
709
  get: function () { return chunkS5TLUDNM_js.ErrorBoundary; }
@@ -712,14 +712,14 @@ Object.defineProperty(exports, "FilterAccordion", {
712
712
  enumerable: true,
713
713
  get: function () { return chunk7W3TFPIF_js.FilterAccordion; }
714
714
  });
715
- Object.defineProperty(exports, "FloatingDock", {
716
- enumerable: true,
717
- get: function () { return chunkS732LTPT_js.FloatingDock; }
718
- });
719
715
  Object.defineProperty(exports, "FilterPill", {
720
716
  enumerable: true,
721
717
  get: function () { return chunkN2Q4Z2FU_js.FilterPill; }
722
718
  });
719
+ Object.defineProperty(exports, "FloatingDock", {
720
+ enumerable: true,
721
+ get: function () { return chunkS732LTPT_js.FloatingDock; }
722
+ });
723
723
  Object.defineProperty(exports, "Footer", {
724
724
  enumerable: true,
725
725
  get: function () { return chunkC4RZBOKH_js.Footer; }
@@ -736,10 +736,6 @@ Object.defineProperty(exports, "Checkbox", {
736
736
  enumerable: true,
737
737
  get: function () { return chunkIJIUUBFT_js.Checkbox; }
738
738
  });
739
- Object.defineProperty(exports, "Counter", {
740
- enumerable: true,
741
- get: function () { return chunkT4AT3YCT_js.Counter; }
742
- });
743
739
  Object.defineProperty(exports, "DatePickerInput", {
744
740
  enumerable: true,
745
741
  get: function () { return chunkAIA3NHCK_js.DatePickerInput; }
@@ -752,21 +748,25 @@ Object.defineProperty(exports, "DetailList", {
752
748
  enumerable: true,
753
749
  get: function () { return chunkE24VNM6S_js.DetailList; }
754
750
  });
755
- Object.defineProperty(exports, "Divider", {
751
+ Object.defineProperty(exports, "Counter", {
756
752
  enumerable: true,
757
- get: function () { return chunkXXC2YD3D_js.Divider; }
753
+ get: function () { return chunkT4AT3YCT_js.Counter; }
758
754
  });
759
- Object.defineProperty(exports, "DropdownMenu", {
755
+ Object.defineProperty(exports, "Divider", {
760
756
  enumerable: true,
761
- get: function () { return chunkT5FLQQP6_js.DropdownMenu; }
757
+ get: function () { return chunkXXC2YD3D_js.Divider; }
762
758
  });
763
759
  Object.defineProperty(exports, "Drawer", {
764
760
  enumerable: true,
765
761
  get: function () { return chunkVWFY24XF_js.Drawer; }
766
762
  });
767
- Object.defineProperty(exports, "Avatar", {
763
+ Object.defineProperty(exports, "DropdownMenu", {
768
764
  enumerable: true,
769
- get: function () { return chunkEY4ZIR3P_js.Avatar; }
765
+ get: function () { return chunkT5FLQQP6_js.DropdownMenu; }
766
+ });
767
+ Object.defineProperty(exports, "Alert", {
768
+ enumerable: true,
769
+ get: function () { return chunkWBRVUWGC_js.Alert; }
770
770
  });
771
771
  Object.defineProperty(exports, "Badge", {
772
772
  enumerable: true,
@@ -840,13 +840,9 @@ Object.defineProperty(exports, "Accordion", {
840
840
  enumerable: true,
841
841
  get: function () { return chunkMCF3EQTV_js.Accordion; }
842
842
  });
843
- Object.defineProperty(exports, "Alert", {
844
- enumerable: true,
845
- get: function () { return chunkWBRVUWGC_js.Alert; }
846
- });
847
843
  Object.defineProperty(exports, "AnchorTabs", {
848
844
  enumerable: true,
849
- get: function () { return chunk2J73BRC5_js.AnchorTabs; }
845
+ get: function () { return chunkWXEZA6NE_js.AnchorTabs; }
850
846
  });
851
847
  Object.defineProperty(exports, "Autocomplete", {
852
848
  enumerable: true,
@@ -856,6 +852,10 @@ Object.defineProperty(exports, "autocompleteInputVariants", {
856
852
  enumerable: true,
857
853
  get: function () { return chunkNHB2TI2B_js.autocompleteInputVariants; }
858
854
  });
855
+ Object.defineProperty(exports, "Avatar", {
856
+ enumerable: true,
857
+ get: function () { return chunkEY4ZIR3P_js.Avatar; }
858
+ });
859
859
  Object.defineProperty(exports, "cn", {
860
860
  enumerable: true,
861
861
  get: function () { return chunkADIDI7AJ_js.cn; }
package/dist/index.mjs CHANGED
@@ -26,31 +26,31 @@ export { Pagination } from './chunk-XQVODPHL.mjs';
26
26
  export { PriceDisplay } from './chunk-DGEXT7PN.mjs';
27
27
  export { ProgressBar, progressBarVariants, progressFillVariants } from './chunk-UGYMWWKT.mjs';
28
28
  export { PromoBanner, promoBannerVariants } from './chunk-FNDR3WOZ.mjs';
29
- export { HotelCard } from './chunk-PXHZ4CXG.mjs';
30
29
  export { Header } from './chunk-PPDKQ3FF.mjs';
30
+ export { HotelCard } from './chunk-PXHZ4CXG.mjs';
31
31
  export { IconBadge, iconBadgeVariants } from './chunk-I4WCNTNP.mjs';
32
32
  export { ImageGallery } from './chunk-QU6ZRLKO.mjs';
33
33
  export { ImageWithFallback } from './chunk-BUXVK2HE.mjs';
34
34
  export { Input, inputVariants } from './chunk-GRG4USTC.mjs';
35
35
  export { Lightbox } from './chunk-GBWVIY3C.mjs';
36
36
  export { LinkCard } from './chunk-UYDZKAGZ.mjs';
37
- export { EmptyState } from './chunk-OCUHCDAQ.mjs';
38
37
  export { DualRangeSlider } from './chunk-ERL3WXNY.mjs';
38
+ export { EmptyState } from './chunk-OCUHCDAQ.mjs';
39
39
  export { ErrorBoundary } from './chunk-5257MWFI.mjs';
40
40
  export { FilterAccordion } from './chunk-VQVRKRSM.mjs';
41
- export { FloatingDock } from './chunk-PBDPZTHK.mjs';
42
41
  export { FilterPill } from './chunk-TNWMTKNR.mjs';
42
+ export { FloatingDock } from './chunk-PBDPZTHK.mjs';
43
43
  export { Footer } from './chunk-SZ3SV4SJ.mjs';
44
44
  export { GuestPicker } from './chunk-EJ7LDW7E.mjs';
45
45
  export { Carousel } from './chunk-OOPP4ES2.mjs';
46
46
  export { Checkbox } from './chunk-EEIPCJQ2.mjs';
47
- export { Counter } from './chunk-LRNSVRUN.mjs';
48
47
  export { DatePickerInput, DateRangePicker } from './chunk-FL3GD5FJ.mjs';
49
48
  export { DetailList } from './chunk-N6THLJIG.mjs';
49
+ export { Counter } from './chunk-LRNSVRUN.mjs';
50
50
  export { Divider } from './chunk-E4B6LXK7.mjs';
51
- export { DropdownMenu } from './chunk-Q7BKR6O7.mjs';
52
51
  export { Drawer } from './chunk-ZLF7IL3Y.mjs';
53
- export { Avatar } from './chunk-2POGTS27.mjs';
52
+ export { DropdownMenu } from './chunk-Q7BKR6O7.mjs';
53
+ export { Alert } from './chunk-BQWVWK74.mjs';
54
54
  export { Badge, badgeVariants } from './chunk-XZU2SISM.mjs';
55
55
  export { Banner, bannerVariants } from './chunk-LFIZX2S6.mjs';
56
56
  export { BottomNavBar } from './chunk-UQRQZLMQ.mjs';
@@ -59,9 +59,9 @@ export { Button, buttonVariants } from './chunk-4U5MNA3B.mjs';
59
59
  export { Card, CardContent, CardDescription, CardImage, CardTitle, cardImageVariants, cardVariants } from './chunk-V5J2XLPD.mjs';
60
60
  export { CardList } from './chunk-RJWHPHHX.mjs';
61
61
  export { Accordion } from './chunk-NZ7GF6RF.mjs';
62
- export { Alert } from './chunk-BQWVWK74.mjs';
63
- export { AnchorTabs } from './chunk-MKUUHYGQ.mjs';
62
+ export { AnchorTabs } from './chunk-M2H6QUAL.mjs';
64
63
  export { Autocomplete, autocompleteInputVariants } from './chunk-B47HQHX3.mjs';
64
+ export { Avatar } from './chunk-2POGTS27.mjs';
65
65
  import { cn } from './chunk-IMKLN273.mjs';
66
66
  export { cn } from './chunk-IMKLN273.mjs';
67
67
  import * as React from 'react';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dododog/ui",
3
- "version": "0.6.2",
3
+ "version": "0.6.3",
4
4
  "description": "React UI component library for DodoDog — pet-friendly travel platform",
5
5
  "sideEffects": false,
6
6
  "license": "MIT",