@dododog/ui 0.5.1 → 0.6.0

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
@@ -31,15 +31,15 @@ var chunkPRDIS2VR_js = require('./chunk-PRDIS2VR.js');
31
31
  var chunkIRKM5UF4_js = require('./chunk-IRKM5UF4.js');
32
32
  var chunkODUY7NXD_js = require('./chunk-ODUY7NXD.js');
33
33
  var chunkYN4HPIRC_js = require('./chunk-YN4HPIRC.js');
34
- var chunkMKOKWME3_js = require('./chunk-MKOKWME3.js');
35
34
  var chunkDLOHAW74_js = require('./chunk-DLOHAW74.js');
36
35
  var chunk77WKG2D7_js = require('./chunk-77WKG2D7.js');
36
+ var chunkMKOKWME3_js = require('./chunk-MKOKWME3.js');
37
37
  var chunkU3XWNFHH_js = require('./chunk-U3XWNFHH.js');
38
38
  var chunkW7DZZS6L_js = require('./chunk-W7DZZS6L.js');
39
- var chunkTDGU5Y2P_js = require('./chunk-TDGU5Y2P.js');
40
39
  var chunkIEHX4DU6_js = require('./chunk-IEHX4DU6.js');
41
- var chunkS5TLUDNM_js = require('./chunk-S5TLUDNM.js');
40
+ var chunkTDGU5Y2P_js = require('./chunk-TDGU5Y2P.js');
42
41
  var chunk7W3TFPIF_js = require('./chunk-7W3TFPIF.js');
42
+ var chunkS5TLUDNM_js = require('./chunk-S5TLUDNM.js');
43
43
  var chunkN2Q4Z2FU_js = require('./chunk-N2Q4Z2FU.js');
44
44
  var chunkS732LTPT_js = require('./chunk-S732LTPT.js');
45
45
  var chunkC4RZBOKH_js = require('./chunk-C4RZBOKH.js');
@@ -53,16 +53,16 @@ var chunkXXC2YD3D_js = require('./chunk-XXC2YD3D.js');
53
53
  var chunkVWFY24XF_js = require('./chunk-VWFY24XF.js');
54
54
  var chunkT5FLQQP6_js = require('./chunk-T5FLQQP6.js');
55
55
  var chunkEY4ZIR3P_js = require('./chunk-EY4ZIR3P.js');
56
- var chunkZ5S7LHMY_js = require('./chunk-Z5S7LHMY.js');
57
- var chunk6EG6EAHW_js = require('./chunk-6EG6EAHW.js');
58
56
  var chunkPND5YKFN_js = require('./chunk-PND5YKFN.js');
59
- var chunkH3JNRTAI_js = require('./chunk-H3JNRTAI.js');
57
+ var chunk6EG6EAHW_js = require('./chunk-6EG6EAHW.js');
58
+ var chunkZ5S7LHMY_js = require('./chunk-Z5S7LHMY.js');
60
59
  var chunkYZTVHCLK_js = require('./chunk-YZTVHCLK.js');
60
+ var chunkH3JNRTAI_js = require('./chunk-H3JNRTAI.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
64
  var chunkWBRVUWGC_js = require('./chunk-WBRVUWGC.js');
65
- var chunk2J73BRC5_js = require('./chunk-2J73BRC5.js');
65
+ var chunkWXEZA6NE_js = require('./chunk-WXEZA6NE.js');
66
66
  var chunkNHB2TI2B_js = require('./chunk-NHB2TI2B.js');
67
67
  var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
68
68
  var React = require('react');
@@ -672,10 +672,6 @@ Object.defineProperty(exports, "iconBadgeVariants", {
672
672
  enumerable: true,
673
673
  get: function () { return chunkYN4HPIRC_js.iconBadgeVariants; }
674
674
  });
675
- Object.defineProperty(exports, "ImageGallery", {
676
- enumerable: true,
677
- get: function () { return chunkMKOKWME3_js.ImageGallery; }
678
- });
679
675
  Object.defineProperty(exports, "ImageWithFallback", {
680
676
  enumerable: true,
681
677
  get: function () { return chunkDLOHAW74_js.ImageWithFallback; }
@@ -688,6 +684,10 @@ Object.defineProperty(exports, "inputVariants", {
688
684
  enumerable: true,
689
685
  get: function () { return chunk77WKG2D7_js.inputVariants; }
690
686
  });
687
+ Object.defineProperty(exports, "ImageGallery", {
688
+ enumerable: true,
689
+ get: function () { return chunkMKOKWME3_js.ImageGallery; }
690
+ });
691
691
  Object.defineProperty(exports, "Lightbox", {
692
692
  enumerable: true,
693
693
  get: function () { return chunkU3XWNFHH_js.Lightbox; }
@@ -696,22 +696,22 @@ Object.defineProperty(exports, "LinkCard", {
696
696
  enumerable: true,
697
697
  get: function () { return chunkW7DZZS6L_js.LinkCard; }
698
698
  });
699
- Object.defineProperty(exports, "DualRangeSlider", {
700
- enumerable: true,
701
- get: function () { return chunkTDGU5Y2P_js.DualRangeSlider; }
702
- });
703
699
  Object.defineProperty(exports, "EmptyState", {
704
700
  enumerable: true,
705
701
  get: function () { return chunkIEHX4DU6_js.EmptyState; }
706
702
  });
707
- Object.defineProperty(exports, "ErrorBoundary", {
703
+ Object.defineProperty(exports, "DualRangeSlider", {
708
704
  enumerable: true,
709
- get: function () { return chunkS5TLUDNM_js.ErrorBoundary; }
705
+ get: function () { return chunkTDGU5Y2P_js.DualRangeSlider; }
710
706
  });
711
707
  Object.defineProperty(exports, "FilterAccordion", {
712
708
  enumerable: true,
713
709
  get: function () { return chunk7W3TFPIF_js.FilterAccordion; }
714
710
  });
711
+ Object.defineProperty(exports, "ErrorBoundary", {
712
+ enumerable: true,
713
+ get: function () { return chunkS5TLUDNM_js.ErrorBoundary; }
714
+ });
715
715
  Object.defineProperty(exports, "FilterPill", {
716
716
  enumerable: true,
717
717
  get: function () { return chunkN2Q4Z2FU_js.FilterPill; }
@@ -768,13 +768,9 @@ Object.defineProperty(exports, "Avatar", {
768
768
  enumerable: true,
769
769
  get: function () { return chunkEY4ZIR3P_js.Avatar; }
770
770
  });
771
- Object.defineProperty(exports, "Badge", {
772
- enumerable: true,
773
- get: function () { return chunkZ5S7LHMY_js.Badge; }
774
- });
775
- Object.defineProperty(exports, "badgeVariants", {
771
+ Object.defineProperty(exports, "BottomNavBar", {
776
772
  enumerable: true,
777
- get: function () { return chunkZ5S7LHMY_js.badgeVariants; }
773
+ get: function () { return chunkPND5YKFN_js.BottomNavBar; }
778
774
  });
779
775
  Object.defineProperty(exports, "Banner", {
780
776
  enumerable: true,
@@ -784,17 +780,13 @@ Object.defineProperty(exports, "bannerVariants", {
784
780
  enumerable: true,
785
781
  get: function () { return chunk6EG6EAHW_js.bannerVariants; }
786
782
  });
787
- Object.defineProperty(exports, "BottomNavBar", {
788
- enumerable: true,
789
- get: function () { return chunkPND5YKFN_js.BottomNavBar; }
790
- });
791
- Object.defineProperty(exports, "Breadcrumb", {
783
+ Object.defineProperty(exports, "Badge", {
792
784
  enumerable: true,
793
- get: function () { return chunkH3JNRTAI_js.Breadcrumb; }
785
+ get: function () { return chunkZ5S7LHMY_js.Badge; }
794
786
  });
795
- Object.defineProperty(exports, "breadcrumbVariants", {
787
+ Object.defineProperty(exports, "badgeVariants", {
796
788
  enumerable: true,
797
- get: function () { return chunkH3JNRTAI_js.breadcrumbVariants; }
789
+ get: function () { return chunkZ5S7LHMY_js.badgeVariants; }
798
790
  });
799
791
  Object.defineProperty(exports, "Button", {
800
792
  enumerable: true,
@@ -804,6 +796,14 @@ Object.defineProperty(exports, "buttonVariants", {
804
796
  enumerable: true,
805
797
  get: function () { return chunkYZTVHCLK_js.buttonVariants; }
806
798
  });
799
+ Object.defineProperty(exports, "Breadcrumb", {
800
+ enumerable: true,
801
+ get: function () { return chunkH3JNRTAI_js.Breadcrumb; }
802
+ });
803
+ Object.defineProperty(exports, "breadcrumbVariants", {
804
+ enumerable: true,
805
+ get: function () { return chunkH3JNRTAI_js.breadcrumbVariants; }
806
+ });
807
807
  Object.defineProperty(exports, "Card", {
808
808
  enumerable: true,
809
809
  get: function () { return chunkZAUYE2EI_js.Card; }
@@ -846,7 +846,7 @@ Object.defineProperty(exports, "Alert", {
846
846
  });
847
847
  Object.defineProperty(exports, "AnchorTabs", {
848
848
  enumerable: true,
849
- get: function () { return chunk2J73BRC5_js.AnchorTabs; }
849
+ get: function () { return chunkWXEZA6NE_js.AnchorTabs; }
850
850
  });
851
851
  Object.defineProperty(exports, "Autocomplete", {
852
852
  enumerable: true,
package/dist/index.mjs CHANGED
@@ -29,15 +29,15 @@ export { PromoBanner, promoBannerVariants } from './chunk-FNDR3WOZ.mjs';
29
29
  export { Header } from './chunk-PPDKQ3FF.mjs';
30
30
  export { HotelCard } from './chunk-PXHZ4CXG.mjs';
31
31
  export { IconBadge, iconBadgeVariants } from './chunk-I4WCNTNP.mjs';
32
- export { ImageGallery } from './chunk-QU6ZRLKO.mjs';
33
32
  export { ImageWithFallback } from './chunk-BUXVK2HE.mjs';
34
33
  export { Input, inputVariants } from './chunk-GRG4USTC.mjs';
34
+ export { ImageGallery } from './chunk-QU6ZRLKO.mjs';
35
35
  export { Lightbox } from './chunk-GBWVIY3C.mjs';
36
36
  export { LinkCard } from './chunk-UYDZKAGZ.mjs';
37
- export { DualRangeSlider } from './chunk-ERL3WXNY.mjs';
38
37
  export { EmptyState } from './chunk-OCUHCDAQ.mjs';
39
- export { ErrorBoundary } from './chunk-5257MWFI.mjs';
38
+ export { DualRangeSlider } from './chunk-ERL3WXNY.mjs';
40
39
  export { FilterAccordion } from './chunk-VQVRKRSM.mjs';
40
+ export { ErrorBoundary } from './chunk-5257MWFI.mjs';
41
41
  export { FilterPill } from './chunk-TNWMTKNR.mjs';
42
42
  export { FloatingDock } from './chunk-PBDPZTHK.mjs';
43
43
  export { Footer } from './chunk-SZ3SV4SJ.mjs';
@@ -51,16 +51,16 @@ export { Divider } from './chunk-E4B6LXK7.mjs';
51
51
  export { Drawer } from './chunk-ZLF7IL3Y.mjs';
52
52
  export { DropdownMenu } from './chunk-Q7BKR6O7.mjs';
53
53
  export { Avatar } from './chunk-2POGTS27.mjs';
54
- export { Badge, badgeVariants } from './chunk-XZU2SISM.mjs';
55
- export { Banner, bannerVariants } from './chunk-LFIZX2S6.mjs';
56
54
  export { BottomNavBar } from './chunk-UQRQZLMQ.mjs';
57
- export { Breadcrumb, breadcrumbVariants } from './chunk-UKCH6RYL.mjs';
55
+ export { Banner, bannerVariants } from './chunk-LFIZX2S6.mjs';
56
+ export { Badge, badgeVariants } from './chunk-XZU2SISM.mjs';
58
57
  export { Button, buttonVariants } from './chunk-4U5MNA3B.mjs';
58
+ export { Breadcrumb, breadcrumbVariants } from './chunk-UKCH6RYL.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
62
  export { Alert } from './chunk-BQWVWK74.mjs';
63
- export { AnchorTabs } from './chunk-MKUUHYGQ.mjs';
63
+ export { AnchorTabs } from './chunk-M2H6QUAL.mjs';
64
64
  export { Autocomplete, autocompleteInputVariants } from './chunk-B47HQHX3.mjs';
65
65
  import { cn } from './chunk-IMKLN273.mjs';
66
66
  export { cn } from './chunk-IMKLN273.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dododog/ui",
3
- "version": "0.5.1",
3
+ "version": "0.6.0",
4
4
  "description": "React UI component library for DodoDog — pet-friendly travel platform",
5
5
  "sideEffects": false,
6
6
  "license": "MIT",