allaw-ui 0.0.19 → 0.0.294

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

@@ -0,0 +1,111 @@
+@import "../../../styles/colors.css";
+
+/* Small, square, with background and icon */
+.icon-button.smallFilled {
+  display: flex;
+  flex-direction: row;
+  width: 24px;
+  height: 24px;
+  padding: 6px 6px 6px 6px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 3px;
+  background: var(--secondary-light-grey, #f4f7fb);
+  cursor: pointer;
+}
+
+.icon-button.smallFilled:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.icon-button.smallFilled:active {
+  background: #d8e1eb;
+}
+
+.icon-button.smallFilled .icon {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  color: #456073;
+  font-size: 11px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Large, square, with background and icon */
+.icon-button.largeFilled {
+  display: flex;
+  flex-direction: row;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 4px;
+  background: var(--secondary-light-grey, #f4f7fb);
+  cursor: pointer;
+}
+
+.icon-button.largeFilled:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.icon-button.largeFilled:active {
+  background: #d8e1eb;
+}
+
+.icon-button.largeFilled .icon {
+  width: 19px;
+  height: 19px;
+  flex-shrink: 0;
+  color: #456073;
+  font-size: 18px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Medium, square, transparent background with outline */
+.icon-button.mediumOutline {
+  display: flex;
+  width: 35px;
+  height: 35px;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  border: 1px solid var(--primary-blue, #25beeb);
+  background: transparent;
+}
+
+.icon-button.mediumOutline .icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: var(--bleu-allaw, #25beeb);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+}
+
+/* Just the outline icons */
+.icon-button.iconOnly {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  color: #25beeb;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  background: transparent;
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import "./IconButton.css";
+import "../../../styles/global.css";
+export interface IconButtonProps {
+    style: "smallFilled" | "largeFilled" | "mediumOutline" | "iconOnly";
+    iconName: string;
+    onClick?: () => void;
+}
+declare const IconButton: React.FC<IconButtonProps>;
+export default IconButton;

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

@@ -0,0 +1,14 @@
+import React from "react";
+import "./IconButton.css";
+import "../../../styles/global.css";
+var IconButton = function (_a) {
+    var style = _a.style, iconName = _a.iconName, onClick = _a.onClick;
+    return (React.createElement("button", { className: "icon-button ".concat(style), onClick: onClick },
+        React.createElement("i", { className: "icon ".concat(iconName) })));
+};
+IconButton.defaultProps = {
+    style: "smallFilled",
+    iconName: "allaw-icon-calendar",
+    onClick: function () { },
+};
+export default IconButton;

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

@@ -0,0 +1,53 @@
+.pending-documents {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 8px;
+  justify-content: center;
+  color: inherit;
+  transition: transform 0.03s;
+}
+
+.pending-documents-pending {
+  background: var(--tag-red-light, #fdf2f2);
+  color: var(--Tags-Rouge, #e15151);
+  cursor: pointer;
+}
+
+.pending-documents-pending:active {
+  transform: scale(0.98);
+}
+
+.pending-documents-none {
+  background: var(--tag-blue-light, #daebfb);
+  color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
+}
+
+.pending-documents-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: inherit;
+  font-size: 24px;
+}
+
+.pending-documents-label {
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 0em;
+  color: inherit;
+}
+
+.pending-documents-pending .pending-documents-label {
+  color: var(--Tags-Rouge, #e15151);
+}
+
+.pending-documents-none .pending-documents-label {
+  color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import "./PendingDocuments.css";
+import "../../../styles/global.css";
+export interface PendingDocumentsProps {
+    icon?: React.ReactNode;
+    pendingCount: number;
+    onClick?: () => void;
+}
+declare const PendingDocuments: React.FC<PendingDocumentsProps>;
+export default PendingDocuments;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import "./PendingDocuments.css";
+import "../../../styles/global.css";
+var PendingDocuments = function (_a) {
+    var icon = _a.icon, pendingCount = _a.pendingCount, onClick = _a.onClick;
+    var isPending = pendingCount > 0;
+    return (React.createElement("div", { className: "pending-documents ".concat(isPending ? "pending-documents-pending" : "pending-documents-none"), onClick: isPending ? onClick : undefined },
+        icon && React.createElement("span", { className: "pending-documents-icon" }, icon),
+        React.createElement("span", { className: "pending-documents-label" }, isPending
+            ? "".concat(pendingCount, " demandes en attente")
+            : "Aucune demande en attente")));
+};
+export default PendingDocuments;

package/dist/components/{buttons/ButtonPrimary.css → atoms/buttons/PrimaryButton.css}

@@ -1,40 +1,40 @@
-.button-primary {
+.primary-button {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  width: auto;
   height: 42px;
   padding: 1rem 1.3rem;
   border-radius: 24px;
   transition:
-    background-color 0.2s,
-    opacity 0.2s;
+  background-color 0.2s,
+  opacity 0.2s;
   border: 0px;
+  cursor: pointer;
 }
 
-.button-primary-enabled {
+.primary-button-enabled {
   background-color: #171e25;
   color: white;
 }
 
-.button-primary-enabled:hover {
+.primary-button-enabled:hover {
   background-color: #1985e8;
 }
 
-.button-primary-enabled:active {
+.primary-button-enabled:active {
   background-color: #1985e8;
   opacity: 0.7;
 }
 
-.button-primary-disabled {
+.primary-button-disabled {
   background-color: #b9b9b9;
   opacity: 0.5;
   color: #9b9b9b;
   cursor: not-allowed;
 }
 
-.button-primary-icon {
+.primary-button-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -43,10 +43,14 @@
   color: white;
 }
 
-.button-primary-label {
+.primary-button-label {
   font-family: "Open Sans", sans-serif;
   font-weight: 500;
   font-size: 14px;
   line-height: 22px;
   letter-spacing: 0em;
 }
+
+.primary-button-full-width {
+  width: 100%;
+}

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

@@ -0,0 +1,16 @@
+import React, { ButtonHTMLAttributes } from "react";
+import "./PrimaryButton.css";
+import "../../../styles/global.css";
+export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    startIconName?: string;
+    endIconName?: string;
+    label: string;
+    disabled?: boolean;
+    onClick?: () => void;
+    fullWidth?: boolean;
+    className?: string;
+}
+declare const PrimaryButton: React.FC<PrimaryButtonProps>;
+export default PrimaryButton;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import "./PrimaryButton.css";
+import "../../../styles/global.css";
+var PrimaryButton = function (_a) {
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, className = _a.className;
+    return (React.createElement("button", { className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : "", " ").concat(className ? className : ""), disabled: disabled, onClick: onClick },
+        startIcon && React.createElement("span", { className: "primary-button-icon ".concat(startIconName) }),
+        React.createElement("span", { className: "primary-button-label" }, label),
+        endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) })));
+};
+export default PrimaryButton;

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

@@ -0,0 +1,123 @@
+@import "../../../styles/colors.css";
+
+.secondary-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 42px;
+  padding: 1rem 1.3rem;
+  border-radius: 24px;
+  border: 2px solid var(--noir);
+  transition:
+  background-color 0.2s,
+  opacity 0.2s,
+  color 0.2s;
+  cursor: pointer;
+}
+
+.secondary-button-enabled {
+  background-color: transparent;
+  transition: color 0.2s;
+}
+
+.secondary-button-enabled:hover {
+  color: #25beeb;
+}
+
+.secondary-button-enabled:active {
+  color: var(--dark-grey);
+  opacity: 1;
+}
+
+.secondary-button-enabled:active .secondary-button-icon {
+  color: var(--dark-grey);
+}
+
+.secondary-button-disabled {
+  background-color: #b9b9b9;
+  opacity: 0.5;
+  color: #9b9b9b;
+  cursor: not-allowed;
+}
+
+.secondary-button-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--noir);
+  transition: color 0.2s;
+}
+
+.secondary-button-enabled:hover .secondary-button-icon {
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-label {
+  font-family: "Open Sans", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0em;
+}
+
+/* Styles pour le mode dark */
+.secondary-button-dark {
+  color: var(--noir);
+}
+
+.secondary-button-dark:hover {
+  background-color: var(--noir);
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-dark:active {
+  color: var(--dark-grey);
+}
+
+.secondary-button-dark .secondary-button-icon {
+  color: var(--noir);
+}
+
+.secondary-button-dark:hover .secondary-button-icon {
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-dark:active .secondary-button-icon {
+  color: var(--dark-grey);
+}
+
+/* Styles pour le mode light */
+.secondary-button-light {
+  background-color: transparent;
+  border: 2px solid var(--pure-white);
+  color: var(--pure-white);
+}
+
+.secondary-button-light:hover {
+  background-color: var(--grey-light);
+  color: var(--noir);
+}
+
+.secondary-button-light:active {
+  background-color: var(--grey-light);
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-light .secondary-button-icon {
+  color: var(--pure-white);
+}
+
+.secondary-button-light:hover .secondary-button-icon {
+  color: var(--noir);
+}
+
+.secondary-button-light:active .secondary-button-icon {
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-full-width {
+  width: 100%;
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import "./SecondaryButton.css";
+import "../../../styles/global.css";
+export interface SecondaryButtonProps {
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    label: string;
+    disabled?: boolean;
+    mode?: "dark" | "light";
+    onClick?: () => void;
+    fullWidth?: boolean;
+    className?: string;
+}
+declare const SecondaryButton: React.FC<SecondaryButtonProps>;
+export default SecondaryButton;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import "./SecondaryButton.css";
+import "../../../styles/global.css";
+var SecondaryButton = function (_a) {
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, className = _a.className;
+    return (React.createElement("button", { className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : "", " ").concat(className ? className : ""), disabled: disabled, onClick: onClick },
+        startIcon && React.createElement("span", { className: "secondary-button-icon ".concat(startIcon) }),
+        React.createElement("span", { className: "secondary-button-label" }, label),
+        endIcon && React.createElement("span", { className: "secondary-button-icon ".concat(endIcon) })));
+};
+export default SecondaryButton;

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

@@ -0,0 +1,43 @@
+.tab-navigation {
+  display: inline-flex;
+  align-items: flex-start;
+}
+
+.tab-item {
+  display: flex;
+  padding: 0px 16px 10px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  position: relative;
+}
+
+.tab-item.active {
+  border-bottom: 2px solid #000;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
+.tab-item.inactive {
+  border-bottom: 1px solid var(--light-grey, #728ea7);
+  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+}
+
+.tab-label {
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+}
+
+.tab-notification-dot {
+  width: 5px;
+  height: 5px;
+  background-color: #ef1a1a;
+  border-radius: 50%;
+  position: absolute;
+  top: 3px;
+  right: 6px;
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import "./TabNavigation.css";
+import "../../../styles/global.css";
+export interface TabNavigationProps {
+    tabs: {
+        label: string;
+        isActive: boolean;
+        hasNotification: boolean;
+    }[];
+    onTabClick: (index: number) => void;
+}
+declare const TabNavigation: React.FC<TabNavigationProps>;
+export default TabNavigation;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import "./TabNavigation.css";
+import "../../../styles/global.css";
+var TabNavigation = function (_a) {
+    var tabs = _a.tabs, onTabClick = _a.onTabClick;
+    return (React.createElement("div", { className: "tab-navigation" }, 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/TertiaryButton.css

@@ -0,0 +1,63 @@
+@import "../../../styles/colors.css";
+
+.tertiary-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    border-bottom 0.15s; /* Ajout de la transition de 0.15s */
+}
+
+.tertiary-button-default {
+  border-bottom: 1px solid var(--primary-black, #171e25);
+  color: var(--primary-black, #171e25);
+}
+
+.tertiary-button-default:hover {
+  color: var(--primary-black, #171e25);
+  border-bottom: none; /* Suppression de la border-bottom au hover */
+}
+
+.tertiary-button-variant {
+  display: flex;
+  justify-content: center;
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+}
+
+.tertiary-button-variant:hover {
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+}
+
+.tertiary-button-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 3.333px;
+}
+
+.tertiary-button-label {
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: 0em;
+}
+
+/* Styles spécifiques pour variant=false */
+.tertiary-button-default .tertiary-button-label {
+  font-weight: 700; /* Bold */
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
+/* Styles spécifiques pour variant=true */
+.tertiary-button-variant .tertiary-button-label {
+  font-weight: 400; /* Normal */
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import "./TertiaryButton.css";
+import "../../../styles/global.css";
+export interface TertiaryButtonProps {
+    startIcon?: React.ReactNode;
+    label: string;
+    variant?: boolean;
+}
+declare const TertiaryButton: React.FC<TertiaryButtonProps>;
+export default TertiaryButton;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import "./TertiaryButton.css";
+import "../../../styles/global.css";
+var TertiaryButton = function (_a) {
+    var startIcon = _a.startIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b;
+    return (React.createElement("button", { className: "tertiary-button ".concat(variant ? "tertiary-button-variant" : "tertiary-button-default") },
+        startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
+        React.createElement("span", { className: "tertiary-button-label" }, label)));
+};
+export default TertiaryButton;

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

@@ -0,0 +1,18 @@
+export { default as FavoriteToggle } from "./FavoriteToggle";
+export { default as FilterButton } from "./FilterButton";
+export { default as GhostButton } from "./GhostButton";
+export { default as IconButton } from "./IconButton";
+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 TertiaryButton } from "./TertiaryButton";
+export type { FavoriteToggleProps } from "./FavoriteToggle";
+export type { FilterButtonProps } from "./FilterButton";
+export type { GhostButtonProps } from "./GhostButton";
+export type { IconButtonProps } from "./IconButton";
+export type { PendingDocumentsProps } from "./PendingDocuments";
+export type { PrimaryButtonProps } from "./PrimaryButton";
+export type { SecondaryButtonProps } from "./SecondaryButton";
+export type { TabNavigationProps } from "./TabNavigation";
+export type { TertiaryButtonProps } from "./TertiaryButton";

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

@@ -0,0 +1,9 @@
+export { default as FavoriteToggle } from "./FavoriteToggle";
+export { default as FilterButton } from "./FilterButton";
+export { default as GhostButton } from "./GhostButton";
+export { default as IconButton } from "./IconButton";
+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 TertiaryButton } from "./TertiaryButton";