mautourco-components 0.2.5 → 0.2.8

package/src/components/ui/popover.tsx

@@ -1,46 +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 }
+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/avatar.css

@@ -1,58 +1,58 @@
-.avatar {
-	@apply relative inline-flex items-center justify-center overflow-hidden select-none;
-}
-
-.avatar--sm {
-	@apply w-4 h-4 text-[10px];
-}
-
-.avatar--md {
-	@apply w-6 h-6 text-[11px];
-}
-
-.avatar--lg {
-	@apply w-8 h-8 text-xs;
-}
-
-.avatar--xl {
-	@apply w-12 h-12 text-sm;
-}
-
-.avatar--circle {
-	@apply rounded-full;
-}
-
-.avatar--rounded {
-	border-radius: var(--avatar-corner-radius-square, 6px);
-}
-
-.avatar--gray {
-	@apply bg-slate-100 text-slate-700;
-}
-
-.avatar--blue {
-	@apply bg-[var(--color-blue-600)] text-white;
-}
-
-.avatar--pink {
-	@apply bg-[var(--color-pink-700)] text-white;
-}
-
-.avatar--orange {
-	@apply bg-[var(--color-orange-700)] text-white;
-}
-
-.avatar--green {
-	@apply bg-[var(--color-green-800)] text-white;
-}
-
-/* Internal elements */
-.avatar__img {
-	@apply absolute object-cover w-full h-full;
-	inset: 0;
-}
-
-.avatar__initial {
-	@apply font-medium leading-none;
-}
-
+.avatar {
+	@apply relative inline-flex items-center justify-center overflow-hidden select-none;
+}
+
+.avatar--sm {
+	@apply w-4 h-4 text-[10px];
+}
+
+.avatar--md {
+	@apply w-6 h-6 text-[11px];
+}
+
+.avatar--lg {
+	@apply w-8 h-8 text-xs;
+}
+
+.avatar--xl {
+	@apply w-12 h-12 text-sm;
+}
+
+.avatar--circle {
+	@apply rounded-full;
+}
+
+.avatar--rounded {
+	border-radius: var(--avatar-corner-radius-square, 6px);
+}
+
+.avatar--gray {
+	@apply bg-slate-100 text-slate-700;
+}
+
+.avatar--blue {
+	@apply bg-[var(--color-blue-600)] text-white;
+}
+
+.avatar--pink {
+	@apply bg-[var(--color-pink-700)] text-white;
+}
+
+.avatar--orange {
+	@apply bg-[var(--color-orange-700)] text-white;
+}
+
+.avatar--green {
+	@apply bg-[var(--color-green-800)] text-white;
+}
+
+/* Internal elements */
+.avatar__img {
+	@apply absolute object-cover w-full h-full;
+	inset: 0;
+}
+
+.avatar__initial {
+	@apply font-medium leading-none;
+}
+

package/src/styles/components/calendar.css

@@ -1,86 +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: "";
+/* 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,130 +1,130 @@
-/* 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;
-}
+/* 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;
+}