mautourco-components 0.2.4 → 0.2.7

package/src/styles/components/forms.css

@@ -1,147 +1,147 @@
-/* Styles Input centralisés: consomment uniquement des variables CSS issues de Style Dictionary */
-
-.input-field {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
-  font-size: var(--input-font-size-default, 1rem);
-  line-height: var(--input-line-height-default, 1.5rem);
-  border-radius: 0.375rem;
-  border-width: 1px;
-  border-style: solid;
-  padding: var(--input-padding-vertical, 0.5rem) var(--input-padding-horizontal, 0.75rem);
-  width: 100%;
-  box-sizing: border-box;
-  transition: all 0.2s ease-in-out;
-  outline: none;
-}
-
-/* Wrapper and icon positioning for input with icon */
-.input-wrapper {
-  position: relative;
-  width: 100%;
-}
-
-.input-icon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--color-slate-400);
-  width: var(--input-search-iconSize, 1rem);
-  height: var(--input-search-iconSize, 1rem);
-}
-
-.input-icon--leading { left: var(--input-padding-horizontal, 0.75rem); }
-.input-icon--trailing { right: var(--input-padding-horizontal, 0.75rem); }
-
-.input-field--with-icon.input-field--icon-leading {
-  padding-left: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
-}
-
-.input-field--with-icon.input-field--icon-trailing {
-  padding-right: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
-}
-
-.input-field:focus {
-  border-color: var(--color-atoll-green-800);
-}
-
-/* État par défaut */
-.input-field--default {
-  background-color: var(--color-white);
-  border-color: var(--color-slate-300);
-  color: var(--color-slate-900);
-}
-
-.input-field--default::placeholder {
-  color: var(--color-slate-400);
-}
-
-/* État focus */
-.input-field--focus {
-  background-color: var(--color-white);
-  border-color: var(--color-atoll-green-800);
-  color: var(--color-slate-900);
-}
-
-.input-field--focus::placeholder {
-  color: var(--color-slate-400);
-}
-
-/* État success */
-.input-field--success {
-  background-color: var(--color-green-50);
-  border-color: var(--color-green-500);
-  color: var(--color-green-700);
-}
-
-.input-field--success::placeholder {
-  color: var(--color-green-400);
-}
-
-/* État error */
-.input-field--error {
-  background-color: var(--color-red-50);
-  border-color: var(--color-red-500);
-  color: var(--color-red-700);
-}
-
-.input-field--error::placeholder {
-  color: var(--color-red-400);
-}
-
-/* État disabled */
-.input-field--disabled {
-  background-color: var(--color-slate-100);
-  border-color: var(--color-slate-200);
-  color: var(--color-slate-400);
-  cursor: not-allowed;
-}
-
-.input-field--disabled::placeholder {
-  color: var(--color-slate-300);
-}
-
-/* Styles pour le showcase */
-.input-showcase {
-  background-color: var(--color-slate-50);
-  padding: var(--spacing-xl, 2rem);
-  border-radius: var(--spacing-sm, 0.5rem);
-  border-left: 4px dotted var(--color-atoll-green-800);
-  margin: var(--spacing-lg, 1.5rem) 0;
-}
-
-.input-showcase h1 {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
-  font-size: var(--typography-font-size-2xl, 1.5re);
-  font-weight: var(--font-weight-font-bold);
-  color: var(--color-slate-900);
-  margin: 0 0 var(--spacing-lg, 1.5rem) 0;
-}
-
-.input-showcase h2 {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
-  font-size: var(--typography-font-size-lg, 1.125rem);
-  font-weight: var(--font-weight-font-medium);
-  color: var(--color-slate-700);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin: 0 0 var(--spacing-md, 1rem) 0;
-}
-
-.input-variants {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: var(--spacing-xl, 2rem);
-}
-
-.input-variant-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md, 1rem);
-}
-
-.input-example {
-  width: 100%;
-  max-width: 300px;
-}
-
-
+/* Styles Input centralisés: consomment uniquement des variables CSS issues de Style Dictionary */
+
+.input-field {
+  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-size: var(--input-font-size-default, 1rem);
+  line-height: var(--input-line-height-default, 1.5rem);
+  border-radius: 0.375rem;
+  border-width: 1px;
+  border-style: solid;
+  padding: var(--input-padding-vertical, 0.5rem) var(--input-padding-horizontal, 0.75rem);
+  width: 100%;
+  box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+}
+
+/* Wrapper and icon positioning for input with icon */
+.input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.input-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-slate-400);
+  width: var(--input-search-iconSize, 1rem);
+  height: var(--input-search-iconSize, 1rem);
+}
+
+.input-icon--leading { left: var(--input-padding-horizontal, 0.75rem); }
+.input-icon--trailing { right: var(--input-padding-horizontal, 0.75rem); }
+
+.input-field--with-icon.input-field--icon-leading {
+  padding-left: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
+}
+
+.input-field--with-icon.input-field--icon-trailing {
+  padding-right: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
+}
+
+.input-field:focus {
+  border-color: var(--color-atoll-green-800);
+}
+
+/* État par défaut */
+.input-field--default {
+  background-color: var(--color-white);
+  border-color: var(--color-slate-300);
+  color: var(--color-slate-900);
+}
+
+.input-field--default::placeholder {
+  color: var(--color-slate-400);
+}
+
+/* État focus */
+.input-field--focus {
+  background-color: var(--color-white);
+  border-color: var(--color-atoll-green-800);
+  color: var(--color-slate-900);
+}
+
+.input-field--focus::placeholder {
+  color: var(--color-slate-400);
+}
+
+/* État success */
+.input-field--success {
+  background-color: var(--color-green-50);
+  border-color: var(--color-green-500);
+  color: var(--color-green-700);
+}
+
+.input-field--success::placeholder {
+  color: var(--color-green-400);
+}
+
+/* État error */
+.input-field--error {
+  background-color: var(--color-red-50);
+  border-color: var(--color-red-500);
+  color: var(--color-red-700);
+}
+
+.input-field--error::placeholder {
+  color: var(--color-red-400);
+}
+
+/* État disabled */
+.input-field--disabled {
+  background-color: var(--color-slate-100);
+  border-color: var(--color-slate-200);
+  color: var(--color-slate-400);
+  cursor: not-allowed;
+}
+
+.input-field--disabled::placeholder {
+  color: var(--color-slate-300);
+}
+
+/* Styles pour le showcase */
+.input-showcase {
+  background-color: var(--color-slate-50);
+  padding: var(--spacing-xl, 2rem);
+  border-radius: var(--spacing-sm, 0.5rem);
+  border-left: 4px dotted var(--color-atoll-green-800);
+  margin: var(--spacing-lg, 1.5rem) 0;
+}
+
+.input-showcase h1 {
+  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-size: var(--typography-font-size-2xl, 1.5re);
+  font-weight: var(--font-weight-font-bold);
+  color: var(--color-slate-900);
+  margin: 0 0 var(--spacing-lg, 1.5rem) 0;
+}
+
+.input-showcase h2 {
+  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-size: var(--typography-font-size-lg, 1.125rem);
+  font-weight: var(--font-weight-font-medium);
+  color: var(--color-slate-700);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 var(--spacing-md, 1rem) 0;
+}
+
+.input-variants {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--spacing-xl, 2rem);
+}
+
+.input-variant-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md, 1rem);
+}
+
+.input-example {
+  width: 100%;
+  max-width: 300px;
+}
+
+

package/src/styles/components/illustration.css

@@ -1,7 +1,7 @@
-.illustration {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-
+.illustration {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+

package/src/styles/components/molecule/calendarInput.css

@@ -1,157 +1,157 @@
-.calendar-input {
-  @apply w-full h-11 overflow-hidden p-0 bg-white border border-[var(--color-tuna-500)] flex items-center gap-2 rounded-xl;
-  min-width: 0;
-}
-
-/* Set minimum width only on larger screens where there's space */
-@media (min-width: 768px) {
-  .calendar-input {
-    min-width: 190px;
-  }
-}
-
-.calendar-input__input-wrapper {
-  @apply flex items-center flex-1 h-full min-w-0 p-3;
-}
-
-/* Remove left padding when icon is on the right */
-.calendar-input--icon-right .calendar-input__input-wrapper {
-  @apply pl-4;
-}
-
-/* Remove right padding when icon is on the left */
-.calendar-input--icon-left .calendar-input__input-wrapper {
-  @apply pr-4 pl-0;
-}
-
-.calendar-input__icon-button.calendar-input__icon-button--left {
- @apply justify-end w-fit pl-4;
-}
-
-.calendar-input__field {
-  @apply flex-1 bg-transparent border-none outline-none w-full text-[var(--color-neutral-800)] text-sm leading-5;
-}
-
-.calendar-input__field:disabled {
-  @apply cursor-not-allowed text-[var(--color-neutral-400)];
-}
-
-.calendar-input__icon-button {
-  @apply flex items-center justify-center w-10 h-full opacity-100 cursor-pointer;
-}
-
-.calendar-input__icon-button--right {
-  @apply rounded-r-md;
-}
-
-.calendar-input__icon-button--left {
-  @apply rounded-l-md;
-}
-
-.calendar-input__icon-button--full-bg {
-  @apply text-white bg-[var(--color-text-accent)];
-}
-
-.calendar-input__chevron {
-  @apply flex items-center justify-center w-5 h-5 shrink-0 text-[var(--color-neutral-800)];
-  transition: transform 0.2s ease;
-}
-
-.calendar-input__chevron--open {
-  transform: rotate(180deg);
-}
-
-/* Ensure label and icon remain visible when wrapper is set to active via data-state */
-.calendar-input-wrapper[data-state="active"] .calendar-input__label,
-.calendar-input-wrapper[data-state="active"] .calendar-input__icon-button {
-  @apply visible opacity-100;
-}
-
-/* Defensive: ensure label stays visible and above other elements */
-.calendar-input-wrapper .calendar-input__label {
-  @apply block z-[2];
-}
-
-/* STATE VARIANTS */
-
-/* Default state */
-.calendar-input--default {
-  @apply border-[var(--color-tuna-500)];
-}
-
-.calendar-input--default .calendar-input__icon-button--full-bg {
-  @apply bg-[var(--color-atoll-green-800)]
-}
-
-/* Active state (focused) */
-.calendar-input--active {
-  @apply border-[var(--color-neutral-800)]
-}
-
-/* Typing state */
-.calendar-input--typing {
-  @apply border-[var(--color-neutral-800)]
-}
-
-/* Success state */
-.calendar-input--success {
-  @apply bg-[var(--color-green-50)] border-[var(--color-green-700)];
-}
-
-.calendar-input--success .calendar-input__field {
-  @apply text-[var(--color-green-700)]
-}
-
-.calendar-input--success .calendar-input__icon-button--full-bg {
-  @apply bg-[var(--color-green-700)] !text-white;
-}
-
-.calendar-input--success .calendar-input__icon-button {
-  @apply bg-none text-[var(--color-green-700)];
-}
-
-/* Error state */
-.calendar-input--error {
-  @apply border-[var(--color-coral-red-600)] bg-[var(--color-coral-red-200)];
-}
-
-.calendar-input--error .calendar-input__field {
-  @apply text-[var(--color-coral-red-600)];
-}
-
-.calendar-input--error .calendar-input__icon-button {
-  @apply !bg-none !text-[var(--color-coral-red-600)];
-}
-
-.calendar-input--error .calendar-input__icon-button--full-bg {
-  @apply bg-[var(--color-coral-red-600)] !text-white;
-}
-
-/* Disabled state */
-.calendar-input--disabled {
-  @apply border-[var(--color-neutral-400)] bg-[var(--color-surface-50)]
-}
-
-.calendar-input--disabled .calendar-input__field {
-  @apply cursor-not-allowed text-[var(--color-tuna-400)];
-}
-
-.calendar-input--disabled .calendar-input__icon-button {
-  @apply !bg-none !text-[var(--color-tuna-400)]
-}
-
-.calendar-input--disabled .calendar-input__icon-button--full-bg {
-  @apply !bg-[var(--color-gray-200)] !text-[var(--color-tuna-400)]
-}
-
-/* Responsive design */
-@media (max-width: 640px) {
-  .calendar-input__icon-button {
-    @apply max-w-sm p-2;
-  }
-
-  .calendar-input__input-wrapper {
-    @apply px-3 py-2;
-  }
-
+.calendar-input {
+  @apply w-full h-11 overflow-hidden p-0 bg-white border border-[var(--color-tuna-500)] flex items-center gap-2 rounded-xl;
+  min-width: 0;
+}
+
+/* Set minimum width only on larger screens where there's space */
+@media (min-width: 768px) {
+  .calendar-input {
+    min-width: 190px;
+  }
+}
+
+.calendar-input__input-wrapper {
+  @apply flex items-center flex-1 h-full min-w-0 p-3;
+}
+
+/* Remove left padding when icon is on the right */
+.calendar-input--icon-right .calendar-input__input-wrapper {
+  @apply pl-4;
+}
+
+/* Remove right padding when icon is on the left */
+.calendar-input--icon-left .calendar-input__input-wrapper {
+  @apply pr-4 pl-0;
+}
+
+.calendar-input__icon-button.calendar-input__icon-button--left {
+ @apply justify-end w-fit pl-4;
+}
+
+.calendar-input__field {
+  @apply flex-1 bg-transparent border-none outline-none w-full text-[var(--color-neutral-800)] text-sm leading-5;
+}
+
+.calendar-input__field:disabled {
+  @apply cursor-not-allowed text-[var(--color-neutral-400)];
+}
+
+.calendar-input__icon-button {
+  @apply flex items-center justify-center w-10 h-full opacity-100 cursor-pointer;
+}
+
+.calendar-input__icon-button--right {
+  @apply rounded-r-md;
+}
+
+.calendar-input__icon-button--left {
+  @apply rounded-l-md;
+}
+
+.calendar-input__icon-button--full-bg {
+  @apply text-white bg-[var(--color-text-accent)];
+}
+
+.calendar-input__chevron {
+  @apply flex items-center justify-center w-5 h-5 shrink-0 text-[var(--color-neutral-800)];
+  transition: transform 0.2s ease;
+}
+
+.calendar-input__chevron--open {
+  transform: rotate(180deg);
+}
+
+/* Ensure label and icon remain visible when wrapper is set to active via data-state */
+.calendar-input-wrapper[data-state="active"] .calendar-input__label,
+.calendar-input-wrapper[data-state="active"] .calendar-input__icon-button {
+  @apply visible opacity-100;
+}
+
+/* Defensive: ensure label stays visible and above other elements */
+.calendar-input-wrapper .calendar-input__label {
+  @apply block z-[2];
+}
+
+/* STATE VARIANTS */
+
+/* Default state */
+.calendar-input--default {
+  @apply border-[var(--color-tuna-500)];
+}
+
+.calendar-input--default .calendar-input__icon-button--full-bg {
+  @apply bg-[var(--color-atoll-green-800)]
+}
+
+/* Active state (focused) */
+.calendar-input--active {
+  @apply border-[var(--color-neutral-800)]
+}
+
+/* Typing state */
+.calendar-input--typing {
+  @apply border-[var(--color-neutral-800)]
+}
+
+/* Success state */
+.calendar-input--success {
+  @apply bg-[var(--color-green-50)] border-[var(--color-green-700)];
+}
+
+.calendar-input--success .calendar-input__field {
+  @apply text-[var(--color-green-700)]
+}
+
+.calendar-input--success .calendar-input__icon-button--full-bg {
+  @apply bg-[var(--color-green-700)] !text-white;
+}
+
+.calendar-input--success .calendar-input__icon-button {
+  @apply bg-none text-[var(--color-green-700)];
+}
+
+/* Error state */
+.calendar-input--error {
+  @apply border-[var(--color-coral-red-600)] bg-[var(--color-coral-red-200)];
+}
+
+.calendar-input--error .calendar-input__field {
+  @apply text-[var(--color-coral-red-600)];
+}
+
+.calendar-input--error .calendar-input__icon-button {
+  @apply !bg-none !text-[var(--color-coral-red-600)];
+}
+
+.calendar-input--error .calendar-input__icon-button--full-bg {
+  @apply bg-[var(--color-coral-red-600)] !text-white;
+}
+
+/* Disabled state */
+.calendar-input--disabled {
+  @apply border-[var(--color-neutral-400)] bg-[var(--color-surface-50)]
+}
+
+.calendar-input--disabled .calendar-input__field {
+  @apply cursor-not-allowed text-[var(--color-tuna-400)];
+}
+
+.calendar-input--disabled .calendar-input__icon-button {
+  @apply !bg-none !text-[var(--color-tuna-400)]
+}
+
+.calendar-input--disabled .calendar-input__icon-button--full-bg {
+  @apply !bg-[var(--color-gray-200)] !text-[var(--color-tuna-400)]
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .calendar-input__icon-button {
+    @apply max-w-sm p-2;
+  }
+
+  .calendar-input__input-wrapper {
+    @apply px-3 py-2;
+  }
+
 }

package/src/styles/components/molecule/dateTime.css

@@ -1,14 +1,14 @@
-.ds-datetime {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-}
-
-.ds-datetime__calendar { flex: 0 0 320px; }
-.ds-datetime__time { width: 160px; }
-.ds-datetime__label { display:block; font-size: 12px; margin-bottom: 8px; }
-
-@media (max-width: 640px) {
-  .ds-datetime { flex-direction: column; }
-  .ds-datetime__calendar, .ds-datetime__time { width: 100%; }
-}
+.ds-datetime {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.ds-datetime__calendar { flex: 0 0 320px; }
+.ds-datetime__time { width: 160px; }
+.ds-datetime__label { display:block; font-size: 12px; margin-bottom: 8px; }
+
+@media (max-width: 640px) {
+  .ds-datetime { flex-direction: column; }
+  .ds-datetime__calendar, .ds-datetime__time { width: 100%; }
+}