@tsiky/components-r19 1.1.0 → 1.2.0

package/src/components/NavItem/NavItem.tsx

@@ -1,58 +1,58 @@
-import React from 'react';
-import './NavItem.css';
-import { useNavigation } from '../NavBar';
-
-export type NavItemType = {
-  id: string;
-  label: string;
-  isActive?: boolean;
-  onClick?: (id: string) => void;
-  href?: string;
-  highlightColor?: string;
-  moduleKey?: string;
-};
-
-export const NavItem: React.FC<NavItemType> = ({
-  id,
-  label,
-  isActive = false,
-  onClick,
-  href,
-  highlightColor = '#008CBA',
-  moduleKey = '',
-  ...props
-}) => {
-  // Determine which element to render
-  const { setActiveNav } = useNavigation();
-  const handleClick = () => {
-    setActiveNav(id); // ✅ met à jour la nav active
-    onClick?.(id); // ✅ appelle le callback externe si défini
-  };
-  if (href) {
-    // Render as anchor tag if href is provided and no onClick handler
-    return (
-      <a
-        href={href}
-        className={`nav-item ${isActive ? 'active' : ''}`}
-        style={isActive ? { backgroundColor: highlightColor, color: '#fff' } : {}}
-        onClick={handleClick}
-        {...props}
-      >
-        {label}
-      </a>
-    );
-  } else {
-    return (
-      <div
-        className={`nav-item ${isActive ? 'active' : ''}`}
-        style={isActive ? { backgroundColor: highlightColor, color: '#fff' } : {}}
-        onClick={handleClick}
-        role={onClick ? 'button' : 'presentation'}
-        tabIndex={onClick ? 0 : -1}
-        {...props}
-      >
-        {label}
-      </div>
-    );
-  }
-};
+import React from 'react';
+import './NavItem.css';
+import { useNavigation } from '../NavBar';
+
+export type NavItemType = {
+  id: string;
+  label: string;
+  isActive?: boolean;
+  onClick?: (id: string) => void;
+  href?: string;
+  highlightColor?: string;
+  moduleKey?: string;
+};
+
+export const NavItem: React.FC<NavItemType> = ({
+  id,
+  label,
+  isActive = false,
+  onClick,
+  href,
+  highlightColor = '#008CBA',
+  moduleKey = '',
+  ...props
+}) => {
+  // Determine which element to render
+  const { setActiveNav } = useNavigation();
+  const handleClick = () => {
+    setActiveNav(id); // ✅ met à jour la nav active
+    onClick?.(id); // ✅ appelle le callback externe si défini
+  };
+  if (href) {
+    // Render as anchor tag if href is provided and no onClick handler
+    return (
+      <a
+        href={href}
+        className={`nav-item ${isActive ? 'active' : ''}`}
+        style={isActive ? { backgroundColor: highlightColor, color: '#fff' } : {}}
+        onClick={handleClick}
+        {...props}
+      >
+        {label}
+      </a>
+    );
+  } else {
+    return (
+      <div
+        className={`nav-item ${isActive ? 'active' : ''}`}
+        style={isActive ? { backgroundColor: highlightColor, color: '#fff' } : {}}
+        onClick={handleClick}
+        role={onClick ? 'button' : 'presentation'}
+        tabIndex={onClick ? 0 : -1}
+        {...props}
+      >
+        {label}
+      </div>
+    );
+  }
+};

package/src/components/PeriodRange/PeriodRange.module.css

@@ -1,158 +1,158 @@
-.wrapper {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  background: var(--color-card-background);
-  border-radius: 10px;
-  border: 1px solid rgba(16, 24, 40, 0.06);
-  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
-  width: 100%;
-}
-
-.label {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--color-text);
-  font-size: 14px;
-  flex: 0 0 auto;
-}
-
-.labelText {
-  display: inline-block;
-  color: var(--color-text);
-}
-
-.calendarIcon {
-  opacity: 0.75;
-  display: block;
-}
-
-.rangeRow {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  flex-wrap: nowrap;
-}
-
-.dateWrap {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-  flex: 1 1 0;
-}
-
-.innerLabel {
-  font-size: 12px;
-  color: #6b7280;
-  display: block;
-}
-
-.dateInput {
-  -webkit-appearance: none;
-  appearance: none;
-  border: 1px solid;
-  padding: 8px 10px;
-  border-radius: 8px;
-  border-color: var(--color-border);
-  font-size: 14px;
-  background: transparent;
-  width: 100%;
-  box-sizing: border-box;
-  color: var(--color-text);
-}
-
-.sepWrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 6px;
-}
-
-.separator {
-  color: #9ca3af;
-  font-weight: 600;
-  user-select: none;
-}
-
-.samplingWrap {
-  display: flex;
-  /* position: absolute; */
-  flex-direction: column;
-  gap: 6px;
-  min-width: 160px;
-  flex: 0 0 auto;
-}
-
-.samplingLabel {
-  font-size: 12px;
-  color: #374151;
-}
-
-.samplingSelect {
-  padding: 8px 10px;
-  border-radius: 8px;
-  border: 1px solid rgba(16, 24, 40, 0.06);
-  background: var(--color-background);
-  font-size: 14px;
-  box-sizing: border-box;
-  width: 100%;
-  border-color: var(--color-border);
-  color: var(--color-text);
-  cursor: pointer;
-}
-
-/* Responsive: stack on smaller screens */
-@media (max-width: 720px) {
-  .wrapper {
-    padding: 10px;
-  }
-  .rangeRow {
-    gap: 8px;
-  }
-  .label {
-    font-size: 13px;
-  }
-  .samplingWrap {
-    min-width: 140px;
-  }
-}
-
-@media (max-width: 520px) {
-  .wrapper {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 10px;
-  }
-
-  .label {
-    order: 0;
-  }
-  .rangeRow {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: flex-start;
-  }
-
-  .dateWrap {
-    flex: 1 1 48%;
-  }
-  .sepWrap {
-    display: none;
-  }
-
-  .samplingWrap {
-    flex: 1 1 100%;
-    min-width: 0;
-  }
-}
-
-@media (max-width: 360px) {
-  .dateWrap {
-    flex: 1 1 100%;
-  }
-}
+.wrapper {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: var(--color-card-background);
+  border-radius: 10px;
+  border: 1px solid rgba(16, 24, 40, 0.06);
+  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
+  width: 100%;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-text);
+  font-size: 14px;
+  flex: 0 0 auto;
+}
+
+.labelText {
+  display: inline-block;
+  color: var(--color-text);
+}
+
+.calendarIcon {
+  opacity: 0.75;
+  display: block;
+}
+
+.rangeRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+.dateWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.innerLabel {
+  font-size: 12px;
+  color: #6b7280;
+  display: block;
+}
+
+.dateInput {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 1px solid;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border-color: var(--color-border);
+  font-size: 14px;
+  background: transparent;
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--color-text);
+}
+
+.sepWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+}
+
+.separator {
+  color: #9ca3af;
+  font-weight: 600;
+  user-select: none;
+}
+
+.samplingWrap {
+  display: flex;
+  /* position: absolute; */
+  flex-direction: column;
+  gap: 6px;
+  min-width: 160px;
+  flex: 0 0 auto;
+}
+
+.samplingLabel {
+  font-size: 12px;
+  color: #374151;
+}
+
+.samplingSelect {
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(16, 24, 40, 0.06);
+  background: var(--color-background);
+  font-size: 14px;
+  box-sizing: border-box;
+  width: 100%;
+  border-color: var(--color-border);
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+/* Responsive: stack on smaller screens */
+@media (max-width: 720px) {
+  .wrapper {
+    padding: 10px;
+  }
+  .rangeRow {
+    gap: 8px;
+  }
+  .label {
+    font-size: 13px;
+  }
+  .samplingWrap {
+    min-width: 140px;
+  }
+}
+
+@media (max-width: 520px) {
+  .wrapper {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .label {
+    order: 0;
+  }
+  .rangeRow {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .dateWrap {
+    flex: 1 1 48%;
+  }
+  .sepWrap {
+    display: none;
+  }
+
+  .samplingWrap {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 360px) {
+  .dateWrap {
+    flex: 1 1 100%;
+  }
+}