allaw-ui 1.0.79 → 1.0.81

package/dist/components/atoms/buttons/TabNavigation.css

@@ -1,18 +1,18 @@
-.allaw-tab-navigation {
+.tab-navigation {
   display: inline-flex;
   align-items: flex-start;
-  gap: 8px;
 }
 
-.allaw-tab-navigation.small .allaw-tab-label {
+.tab-navigation.small .tab-label {
   font-size: 14px;
 }
 
-.allaw-tab-navigation.normal .allaw-tab-label {
+.tab-navigation.normal .tab-label {
   font-size: 18px;
 }
 
-.allaw-tab-navigation .allaw-tab-item {
+/* Style normal (par défaut) */
+.tab-navigation.normal .tab-item {
   display: flex;
   padding: 0px 16px 10px 16px;
   justify-content: center;
@@ -22,33 +22,89 @@
   position: relative;
 }
 
-.allaw-tab-navigation .allaw-tab-item.active {
+.tab-navigation.normal .tab-item.active {
   border-bottom: 3px solid #000;
   padding-bottom: 10px;
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
 }
 
-.allaw-tab-navigation .allaw-tab-item.inactive {
+.tab-navigation.normal .tab-item.inactive {
   border-bottom: 3px solid var(--grey-venom, #e6edf5);
   color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
 }
 
-/* Label styles */
-.allaw-tab-label {
+.tab-navigation.normal .tab-item.inactive:hover {
+  border-bottom: 3px solid var(--venom-grey-dark, #d1dce8);
+  color: var(--Tags-Mid-grey, var(--dark-grey, #456073));
+}
+
+/* Style round */
+.tab-navigation.tab-navigation--round {
+  padding: 4px;
+  border-radius: 8px;
+  gap: 8px;
+}
+
+.tab-navigation.tab-navigation--round .tab-item {
+  display: flex;
+  padding: 8px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  position: relative;
+  border-radius: 6px;
+}
+
+.tab-navigation.tab-navigation--round .tab-item.active {
+  background: var(--dark-grey, #456073);
+  color: var(--pure-white, #fff);
+  height: 35px;
+  padding: 12px 24px;
+  border-radius: 18px;
+  border: 1px solid var(--dark-grey, #456073);
+}
+
+.tab-navigation.tab-navigation--round .tab-item.active:hover {
+  background: #3c5364;
+  color: var(--pure-white, #fff);
+}
+
+.tab-navigation.tab-navigation--round .tab-item.inactive {
+  background: #f6fcfe;
+  color: var(--noir, #171e25);
+  height: 35px;
+  padding: 12px 24px;
+  border-radius: 18px;
+  border: 1px solid var(--grey-venom, #e6edf5);
+}
+
+.tab-navigation.tab-navigation--round .tab-item.inactive:hover {
+  background: #e6edf5;
+}
+
+.tab-label {
   font-family: "Open Sans", sans-serif;
+  font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: 1;
   text-align: center;
 }
 
-/* Notification styles */
-.allaw-tab-notification-dot {
+.tab-notification-dot {
   width: 5px;
   height: 5px;
   background-color: #ef1a1a;
   border-radius: 50%;
   position: absolute;
-  top: 7px;
   right: 10px;
 }
+
+.tab-navigation.normal .tab-notification-dot {
+  top: 7px;
+}
+
+.tab-navigation.tab-navigation--round .tab-notification-dot {
+  top: 15px;
+}

package/dist/components/atoms/buttons/TabNavigation.d.ts

@@ -9,6 +9,7 @@ export interface TabNavigationProps {
     }[];
     onTabClick: (index: number) => void;
     size?: "small" | "normal";
+    variant?: "normal" | "round";
 }
 declare const TabNavigation: React.FC<TabNavigationProps>;
 export default TabNavigation;

package/dist/components/atoms/buttons/TabNavigation.js

@@ -2,9 +2,9 @@ import React from "react";
 import "./TabNavigation.css";
 import "../../../styles/global.css";
 var TabNavigation = function (_a) {
-    var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b;
-    return (React.createElement("div", { className: "allaw-tab-navigation ".concat(size) }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "allaw-tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
-        React.createElement("span", { className: "allaw-tab-label" }, tab.label),
-        tab.hasNotification && (React.createElement("span", { className: "allaw-tab-notification-dot" })))); })));
+    var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b, _c = _a.variant, variant = _c === void 0 ? "normal" : _c;
+    return (React.createElement("div", { className: "tab-navigation ".concat(size, " ").concat(variant === "round" ? "tab-navigation--round" : "") }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
+        React.createElement("span", { className: "tab-label" }, tab.label),
+        tab.hasNotification && React.createElement("span", { className: "tab-notification-dot" }))); })));
 };
 export default TabNavigation;

package/dist/components/atoms/buttons/index.d.ts

@@ -7,7 +7,6 @@ export { default as PendingDocuments } from "./PendingDocuments";
 export { default as PrimaryButton } from "./PrimaryButton";
 export { default as SecondaryButton } from "./SecondaryButton";
 export { default as TabNavigation } from "./TabNavigation";
-export { default as TabNavigationRound } from "./TabNavigationRound";
 export { default as TertiaryButton } from "./TertiaryButton";
 export { default as OAuthProviderButton } from "./OAuthProviderButton";
 export type { FavoriteToggleProps } from "./FavoriteToggle";
@@ -18,7 +17,6 @@ export type { PendingDocumentsProps } from "./PendingDocuments";
 export type { PrimaryButtonProps } from "./PrimaryButton";
 export type { SecondaryButtonProps } from "./SecondaryButton";
 export type { TabNavigationProps } from "./TabNavigation";
-export type { TabNavigationRoundProps } from "./TabNavigationRound";
 export type { TertiaryButtonProps } from "./TertiaryButton";
 export type { OAuthProviderButtonProps } from "./OAuthProviderButton";
 export type { FilterButtonPrimaryProps } from "./FilterButtonPrimary";

package/dist/components/atoms/buttons/index.js

@@ -7,6 +7,5 @@ export { default as PendingDocuments } from "./PendingDocuments";
 export { default as PrimaryButton } from "./PrimaryButton";
 export { default as SecondaryButton } from "./SecondaryButton";
 export { default as TabNavigation } from "./TabNavigation";
-export { default as TabNavigationRound } from "./TabNavigationRound";
 export { default as TertiaryButton } from "./TertiaryButton";
 export { default as OAuthProviderButton } from "./OAuthProviderButton";

package/dist/index.d.ts

@@ -7,7 +7,6 @@ export { default as PendingDocuments } from "./components/atoms/buttons/PendingD
 export { default as PrimaryButton } from "./components/atoms/buttons/PrimaryButton";
 export { default as SecondaryButton } from "./components/atoms/buttons/SecondaryButton";
 export { default as TabNavigation } from "./components/atoms/buttons/TabNavigation";
-export { default as TabNavigationRound } from "./components/atoms/buttons/TabNavigationRound";
 export { default as TertiaryButton } from "./components/atoms/buttons/TertiaryButton";
 export { default as OAuthProviderButton } from "./components/atoms/buttons/OAuthProviderButton";
 export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";

package/dist/index.js

@@ -9,7 +9,6 @@ export { default as PendingDocuments } from "./components/atoms/buttons/PendingD
 export { default as PrimaryButton } from "./components/atoms/buttons/PrimaryButton";
 export { default as SecondaryButton } from "./components/atoms/buttons/SecondaryButton";
 export { default as TabNavigation } from "./components/atoms/buttons/TabNavigation";
-export { default as TabNavigationRound } from "./components/atoms/buttons/TabNavigationRound";
 export { default as TertiaryButton } from "./components/atoms/buttons/TertiaryButton";
 export { default as OAuthProviderButton } from "./components/atoms/buttons/OAuthProviderButton";
 // Checkboxes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "1.0.79",
+  "version": "1.0.81",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/dist/components/atoms/buttons/TabNavigationRound.css

@@ -1,66 +0,0 @@
-.allaw-tab-navigation-round {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.allaw-tab-navigation-round.small .allaw-tab-label {
-  font-size: 14px;
-}
-
-.allaw-tab-navigation-round.normal .allaw-tab-label {
-  font-size: 18px;
-}
-
-.allaw-tab-navigation-round .allaw-tab-item {
-  display: flex;
-  height: 35px;
-  padding: 12px 24px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  position: relative;
-  border-radius: 18px;
-}
-
-.allaw-tab-navigation-round .allaw-tab-item.inactive {
-  background-color: var(--grey-light, #f6fcfe);
-  color: var(--noir, #171e25);
-  border: 1px solid var(--grey-venom, #e6edf5);
-}
-
-.allaw-tab-navigation-round .allaw-tab-item.active {
-  background-color: var(--dark-grey, #456073);
-  color: var(--pure-white, #fff);
-  border: 1px solid var(--dark-grey, #456073);
-}
-
-/* Hover states */
-.allaw-tab-navigation-round .allaw-tab-item.inactive:hover {
-  background-color: var(--grey-venom, #e6edf5);
-}
-
-.allaw-tab-navigation-round .allaw-tab-item.active:hover {
-  background-color: #3c5364;
-}
-
-/* Label styles */
-.allaw-tab-label {
-  font-family: "Open Sans", sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1;
-  text-align: center;
-}
-
-/* Notification styles */
-.allaw-tab-notification-dot {
-  width: 5px;
-  height: 5px;
-  background-color: #ef1a1a;
-  border-radius: 50%;
-  position: absolute;
-  top: 15px;
-  right: 10px;
-}

package/dist/components/atoms/buttons/TabNavigationRound.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-import "./TabNavigationRound.css";
-import "../../../styles/global.css";
-export interface TabNavigationRoundProps {
-    tabs: {
-        label: string;
-        isActive: boolean;
-        hasNotification: boolean;
-    }[];
-    onTabClick: (index: number) => void;
-    size?: "small" | "normal";
-}
-declare const TabNavigationRound: React.FC<TabNavigationRoundProps>;
-export default TabNavigationRound;

package/dist/components/atoms/buttons/TabNavigationRound.js

@@ -1,10 +0,0 @@
-import React from "react";
-import "./TabNavigationRound.css";
-import "../../../styles/global.css";
-var TabNavigationRound = function (_a) {
-    var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b;
-    return (React.createElement("div", { className: "allaw-tab-navigation-round ".concat(size) }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "allaw-tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
-        React.createElement("span", { className: "allaw-tab-label" }, tab.label),
-        tab.hasNotification && (React.createElement("span", { className: "allaw-tab-notification-dot" })))); })));
-};
-export default TabNavigationRound;