mautourco-components 0.1.2 → 0.2.1

package/src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../../lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/styles/components/calendar.css

@@ -0,0 +1,86 @@
+/* Tailwind utilities for react-day-picker range highlighting */
+
+button[data-selected-single="true"],
+button[data-range-start="true"],
+button[data-range-end="true"] {
+    background-color: var(--sandy-brown-400, #ffab63);
+    color: var(--neutral-900, #171717);
+    border-radius: 0.375rem;
+}
+
+button[data-range-middle="true"] {
+    background-color: var(--sandy-brown-200, #ffebd4);
+    color: var(--neutral-900, #171717);
+    border-radius: 0;
+}
+
+button[data-today="true"] {
+    box-shadow: none;
+}
+
+button[aria-pressed][data-range-start="true"],
+button[aria-pressed][data-range-end="true"],
+button[aria-pressed][data-selected-single="true"] {
+    outline: 2px solid var(--ring, rgba(0, 0, 0, 0.12));
+    outline-offset: 0;
+}
+
+.calendar--weekday {
+    @apply !text-[var(--color-text-light)] text-sm !text-center !font-[var(--font-weight-font-black)] leading-[14px] tracking-[0];
+}
+
+.calendar--weekday[aria-label="Sunday"],
+.calendar--weekday[aria-label="Saturday"] {
+    @apply !text-[var(--color-text-brand)]
+}
+
+.calendar--dropdown {
+    @apply p-6 border rounded-lg shadow-sm w-fit bg-[var(--color-zinc-50)] opacity-100 border-[var(--color-neutral-400)];
+}
+
+.calendar--separator {
+    @apply border-[var(--color-surface-300)];
+}
+
+.calendar--caption_label {
+    @apply text-[var(--color-text-default)] !text-center !text-lg font-bold leading-6 tracking-[var(--font-tracking-tracking-normal)]
+}
+
+.calendar--time_container_separated {
+    @apply pt-6 border-t-[var(--color-surface-300)];
+}
+
+.calendar--footer {
+    @apply border-t-[1px] border-t-[var(--color-surface-300)] pt-6 mt-6 flex justify-between text-[var(--color-stone-600)] text-sm font-bold leading-5 tracking-normal;
+}
+
+.calendar--footer--button {
+    @apply !px-0;
+}
+
+.rdp-day {
+    @apply !w-10 !h-9 leading-9 p-0;
+}
+
+.rdp-day[data-range-start="true"] {
+    @apply !rounded-l-full !rounded-r-none;
+}
+
+.rdp-day[data-range-end="true"] {
+    @apply !rounded-l-none !rounded-r-full;
+}
+
+.rdp-day[data-range-start="true"][data-range-end="true"] {
+    @apply !rounded-full;
+}
+
+.rdp-day[data-range-start="true"],
+.rdp-day[data-range-end="true"] {
+    @apply !bg-[var(--color-orange-100)] text-white;
+}
+
+.rdp-day[data-range-start="true"]::before,
+.rdp-day[data-range-end="true"]::before {
+    @apply absolute w-8 h-8 rounded-full bg-[var(--color-sandy-brown-600)] z-10 left-1/2 transform -translate-x-1/2;
+    content: "";
+}

package/src/styles/components/checkbox.css

@@ -1,132 +1,130 @@
-/* Checkbox Component Styles */
-.checkbox-container {
-  display: inline-block;
-  width: 100%;
-}
-
-.checkbox-wrapper {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.checkbox-input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  column-gap: var(--checkbox-spacing-inline-gap, var(--multiselect-spacing-option-icon-gap));
-  cursor: pointer;
-  user-select: none;
-  width: 100%;
-  padding: var(--checkbox-spacing-label-padding, 8px 12px);
-  border-radius: var(--checkbox-border-radius, 6px);
-  transition: all var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
-}
-
-.checkbox-box {
-  position: relative;
-  width: var(--checkbox-size-box-width);
-  height: var(--checkbox-size-box-height);
-  border: var(--checkbox-border-width) solid var(--checkbox-color-box-default-border);
-  border-radius: var(--checkbox-size-box-border-radius);
-  background-color: var(--checkbox-color-box-default-background);
-  opacity: var(--checkbox-opacity-default);
-  top: var(--checkbox-position-top);
-  left: var(--checkbox-position-left);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--checkbox-transition-duration) var(--checkbox-transition-timing);
-  flex-shrink: 0;
-}
-
-.checkbox-text {
-  margin-left: 0;
-  font-family: var(--checkbox-typography-fontFamily, 'Inter', sans-serif);
-  font-size: var(--checkbox-typography-fontSize, 14px);
-  line-height: var(--checkbox-typography-lineHeight, 20px);
-  color: var(--checkbox-color-label-default-text, #111827);
-  transition: color var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
-}
-
-.checkbox-leading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.checkbox-icon {
-  color: var(--checkbox-color-icon-checked);
-  width: var(--checkbox-size-icon-width, 14px);
-  height: var(--checkbox-size-icon-height, 14px);
-}
-
-/* States */
-.checkbox--default .checkbox-label:hover {
-  background-color: var(--checkbox-color-label-hover-background, #f9fafb);
-}
-
-.checkbox--default .checkbox-label:hover .checkbox-box {
-  background-color: var(--checkbox-color-box-hover-background, #f3f4f6);
-  border-color: var(--checkbox-color-box-hover-border, #9ca3af);
-}
-
-.checkbox--checked .checkbox-box {
-  background-color: var(--checkbox-color-box-checked-background);
-  border-color: var(--checkbox-color-box-checked-border);
-}
-
-.checkbox--checked .checkbox-label {
-  background-color: transparent;
-  border-radius: var(--checkbox-border-radius);
-}
-
-.checkbox--error .checkbox-box {
-  background-color: var(--checkbox-color-box-error-background, #fef2f2);
-  border-color: var(--checkbox-color-box-error-border, #ef4444);
-}
-
-.checkbox--error .checkbox-text {
-  color: var(--checkbox-color-label-error-text, #dc2626);
-}
-
-.checkbox--error .checkbox-label {
-  background-color: var(--checkbox-color-label-error-background, #fef2f2);
-  border-radius: var(--checkbox-border-radius, 6px);
-}
-
-.checkbox--disabled .checkbox-label {
-  cursor: not-allowed;
-  background-color: var(--checkbox-color-label-disabled-background, transparent);
-}
-
-.checkbox--disabled .checkbox-box {
-  background-color: var(--checkbox-color-box-disabled-background, #f3f4f6);
-  border-color: var(--checkbox-color-box-disabled-border, #e5e7eb);
-}
-
-.checkbox--disabled .checkbox-text {
-  color: var(--checkbox-color-label-disabled-text, #9ca3af);
-}
-
-.checkbox--disabled .checkbox-icon {
-  color: var(--checkbox-color-icon-disabled, #9ca3af);
-}
-
-/* Focus styles */
-.checkbox-input:focus + .checkbox-label .checkbox-box {
-  outline: 2px solid var(--checkbox-color-focus-outline, #3b82f6);
-  outline-offset: 2px;
-}
-
-/* Disabled focus */
-.checkbox--disabled .checkbox-input:focus + .checkbox-label .checkbox-box {
-  outline: none;
-}
+/* Checkbox Component Styles - Based on Figma design specs */
+.checkbox-container {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+
+.checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  column-gap: var(--checkbox-spacing-inline-gap, var(--multiselect-spacing-option-icon-gap, 0.625rem));
+  cursor: pointer;
+  user-select: none;
+  width: 100%;
+  padding: var(--checkbox-spacing-label-padding, 0.5rem 0.75rem);
+  border-radius: var(--checkbox-border-radius, 0.375rem);
+  transition: all var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+}
+
+.checkbox-box {
+  position: relative;
+  width: var(--checkbox-size-box-width, 1.25rem);
+  height: var(--checkbox-size-box-height, 1.25rem);
+  border: 1px solid var(--color-gray-500);
+  border-radius: var(--checkbox-size-box-border-radius, 0.125rem);
+  background-color: var(--color-white);
+  opacity: var(--opacity-opacity-100);
+  top: var(--checkbox-position-top, 0.125rem);
+  left: var(--checkbox-position-left, 0.125rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+  flex-shrink: 0;
+}
+
+.checkbox-text {
+  margin-left: 0;
+  font-family: var(--checkbox-typography-fontFamily, 'Inter', sans-serif);
+  font-size: var(--checkbox-typography-fontSize, 0.875rem);
+  line-height: var(--checkbox-typography-lineHeight, 1.25rem);
+  color: var(--color-gray-900);
+  transition: color var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+}
+
+.checkbox-leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkbox-icon {
+  color: var(--color-atoll-green-800);
+  width: var(--checkbox-size-icon-width, 0.875rem);
+  height: var(--checkbox-size-icon-height, 0.875rem);
+}
+
+/* States */
+.checkbox--default .checkbox-label:hover {
+  background-color: var(--color-slate-50);
+}
+
+.checkbox--default .checkbox-label:hover .checkbox-box {
+  background-color: var(--color-slate-100);
+  border-color: var(--color-slate-400);
+}
+
+.checkbox--checked .checkbox-box {
+  background-color: var(--color-transparent);
+  border-color: var(--checkbox-border-radius, 0.125rem);
+}
+
+.checkbox--checked .checkbox-label {
+  background-color: transparent;
+  border-radius: var(--checkbox-border-radius, 0.125rem);
+}
+
+.checkbox--error .checkbox-box {
+  background-color: var(--color-red-50);
+  border-color: var(--color-red-500);
+}
+
+.checkbox--error .checkbox-text {
+  color: var(--color-red-600);
+}
+
+.checkbox--error .checkbox-label {
+  background-color: var(--color-red-50);
+  border-radius: var(--checkbox-border-radius, 0.125rem);
+}
+
+/* Disabled State */
+.checkbox--disabled .checkbox-label {
+  cursor: not-allowed;
+  background-color: var(--color-transparent);
+}
+
+.checkbox--disabled .checkbox-box {
+  background-color: var(--color-slate-100);
+  border-color: var(--color-slate-200);
+}
+
+.checkbox--disabled .checkbox-text {
+  color: var(--color-slate-400);
+}
+
+.checkbox--disabled .checkbox-icon {
+  color: var(--color-slate-400);
+}
+
+/* Focus styles */
+.checkbox-input:focus + .checkbox-label .checkbox-box {
+  outline: 2px solid var(--color-atoll-green-800);
+  outline-offset: 2px;
+}
+
+/* Disabled focus */
+.checkbox--disabled .checkbox-input:focus + .checkbox-label .checkbox-box {
+  outline: none;
+}

package/src/styles/components/dropdown.css

@@ -12,8 +12,8 @@
   width: 100%;
   min-height: 40px;
   padding: 8px 12px;
-  border: 1px solid var(--multiselect-color-input-border-default, #6B7280);
-  border-radius: var(--input-border-radius-default, 6px);
+  border: 1px solid var(--color-slate-500, #6B7280);
+  border-radius: 0.375rem;
   background-color: var(--color-white, #ffffff);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
@@ -21,16 +21,16 @@
 }
 
 .dropdown-input:hover:not(.dropdown-input--disabled) {
-  border-color: var(--multiselect-color-input-border-hover, #4B5563);
-  background-color: var(--color-neutral-50, #f9fafb);
+  border-color: var(--color-slate-600);
+  background-color: var(--color-slate-50);
 }
 
 .dropdown-input__text {
   flex: 1;
   font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
-  font-size: var(--input-font-size-default, 14px);
-  line-height: var(--input-line-height-default, 20px);
-  color: var(--color-neutral-900, #111827);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--color-slate-900);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -39,7 +39,7 @@
 .dropdown-input__icon {
   flex-shrink: 0;
   margin-left: 8px;
-  color: var(--color-neutral-600, #4b5563);
+  color: var(--color-slate-600);
   transition: transform 0.2s ease-in-out;
 }
 
@@ -57,60 +57,60 @@
 
 /* States */
 .dropdown-input--default .dropdown-input__text {
-  color: var(--color-neutral-500, #6b7280);
+  color: var(--color-slate-500);
 }
 
 .dropdown-input--loading .dropdown-input__text {
-  color: var(--color-neutral-500, #6b7280);
+  color: var(--color-slate-500);
 }
 
 .dropdown-input--selected .dropdown-input__text {
-  color: var(--color-neutral-900, #111827);
+  color: var(--color-slate-900);
 }
 
 .dropdown-input--error {
-  background-color: var(--color-red-50, #fef2f2);
-  border-color: var(--multiselect-color-input-border-error, #ef4444);
+  background-color: var(--color-red-50);
+  border-color: var(--color-red-500);
 }
 
 .dropdown-input--error .dropdown-input__text {
-  color: var(--color-red-600, #dc2626);
+  color: var(--color-red-600);
 }
 
 .dropdown-input--error .dropdown-input__icon {
-  color: var(--color-red-600, #dc2626);
+  color: var(--color-red-600);
 }
 
 .dropdown-input--disabled {
-  background-color: var(--color-neutral-100, #f3f4f6);
-  border-color: var(--multiselect-color-input-border-disabled, #D1D5DB);
+  background-color: var(--color-slate-100);
+  border-color: var(--color-slate-300, #D1D5DB);
   cursor: not-allowed;
 }
 
 .dropdown-input--disabled .dropdown-input__text {
-  color: var(--color-neutral-400, #9ca3af);
+  color: var(--color-slate-400);
 }
 
 .dropdown-input--disabled .dropdown-input__icon {
-  color: var(--color-neutral-400, #9ca3af);
+  color: var(--color-slate-400);
 }
 
 /* Dropdown Menu */
 .dropdown-menu {
   position: absolute;
-  top: calc(100% + var(--multiselect-spacing-menu-gap));
+  top: calc(100% + var(--multiselect-spacing-menu-gap, 0.75rem));
   left: 0;
   right: 0;
   z-index: 1000;
   width: 100%;
-  background-color: var(--multiselect-color-menu-background);
-  border: var(--multiselect-border-width) solid var(--multiselect-color-dropdownbasic-border);
-  border-top: 1px solid var(--multiselect-color-dropdownbasic-border);
-  border-radius: var(--multiselect-border-radius);
+  background-color: var(--color-white);
+border: 1px solid var(--color-neutral-400);
+  border-top: 1px solid var(--color-neutral-400);
+  border-radius: var(--multiselect-border-radius, 0.75rem);
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  max-height: var(--multiselect-size-menu-max-height);
+  max-height: var(--multiselect-size-menu-max-height, 17.25rem);
   overflow-y: auto;
-  padding: var(--multiselect-spacing-menu-padding);
+  padding: var(--spacing-padding-px-0);
   opacity: 1;
   transform: translateY(0);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -118,36 +118,36 @@
 }
 
 .dropdown-option {
-  padding: var(--multiselect-spacing-option-padding);
+  padding: var(--multiselect-spacing-option-padding, 0.5rem 0.8125rem);
   font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
-  font-size: var(--input-font-size-default, 14px);
-  line-height: var(--input-line-height-default, 20px);
-  color: var(--multiselect-color-option-text);
-  background-color: var(--multiselect-color-option-background);
+  font-size: var(--input-font-size-default, 0.875rem);
+  line-height: var(--input-line-height-default, 1.25rem);
+  color: var(--color-slate-900);
+  background-color: var(--color-transparent);
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
-  gap: var(--multiselect-spacing-option-gap);
+  gap: var(--multiselect-spacing-option-gap, 0.5rem);
 }
 
 .dropdown-option:hover {
-  background-color: var(--multiselect-color-option-background-hover);
+  background-color: var(--color-slate-50);
 }
 
 .dropdown-option:active {
-  background-color: var(--multiselect-color-option-background-hover);
+  background-color: var(--color-slate-100);
 }
 
 /* Dropdown Footer */
 .dropdown-footer {
-  padding: var(--multiselect-spacing-footer-padding);
+  padding: var(--multiselect-spacing-footer-padding, 0.5rem 1.25rem);
   font-family: var(--typography-font-family-sans, 'Inter', sans-serif);
-  font-size: var(--input-font-size-default, 14px);
-  line-height: var(--input-line-height-default, 20px);
-  color: var(--multiselect-color-footer-text);
-  background-color: var(--multiselect-color-footer-background);
-  border-top: 1px solid var(--multiselect-color-menu-border);
+  font-size: var(--input-font-size-default, 1rem);
+  line-height: var(--input-line-height-default, 1.5rem);
+  color: var(--color-slate-600);
+  background-color: var(--color-transparent);
+  border-top: 1px solid var(--color-slate-500);
   margin-top: 4px;
 }