mautourco-components 0.2.21 → 0.2.23

package/src/styles/components/molecule/service-selector.css

@@ -8,9 +8,15 @@
 /* Trigger Button */
 .service-selector__trigger {
   width: 100%;
-  padding: var(--service-selector-spacing-service-selector-padding-y, 12px) var(--service-selector-spacing-service-selector-padding-x, 24px);
-  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
-  border: var(--service-selector-border-width-default, 1px) solid var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  max-height: 48px;
+  padding: var(--service-selector-spacing-service-selector-padding-y, 12px)
+    var(--service-selector-spacing-service-selector-padding-x, 24px);
+  background-color: var(
+    --service-selector-color-service-selector-background-default,
+    #ffffff
+  );
+  border: var(--service-selector-border-width-default, 1px) solid
+    var(--service-selector-color-service-selector-border-default, #a3a3a3);
   border-radius: var(--border-radius-rounded-xl, 12px);
   opacity: var(--opacity-opacity-100, 1);
   display: flex;
@@ -20,11 +26,22 @@
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   /* Website/Light/Level 1 */
-  box-shadow: var(--spacing-base-0, 0px) var(--spacing-base-0, 0px) var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.11), var(--spacing-base-0, 0px) var(--spacing-base-0-5, 2px) var(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.10);
-}
-
-.service-selector__trigger:hover:not(:disabled):not(.service-selector__trigger--selected) {
-  background-color: var(--service-selector-color-service-selector-background-hover, #ccfbf6);
+  box-shadow:
+    var(--spacing-base-0, 0px) var(--spacing-base-0, 0px)
+      var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.11),
+    var(--spacing-base-0, 0px) var(--spacing-base-0-5, 2px)
+      var(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.1);
+}
+
+.service-selector__trigger:hover:not(:disabled):not(
+    .service-selector__trigger--selected
+  ) {
+  background-color: var(
+    --service-selector-color-service-selector-background-hover,
+    #ccfbf6
+  );
   border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
 }
 
@@ -61,7 +78,10 @@
 
 /* Trigger States */
 .service-selector__trigger--default {
-  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  background-color: var(
+    --service-selector-color-service-selector-background-default,
+    #ffffff
+  );
   border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
 }
 
@@ -77,19 +97,28 @@
 
 /* Selected state - same style as default */
 .service-selector__trigger.service-selector__trigger--selected {
-  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  background-color: var(
+    --service-selector-color-service-selector-background-default,
+    #ffffff
+  );
   border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
 }
 
-.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-icon,
-.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-text,
-.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-chevron {
+.service-selector__trigger.service-selector__trigger--selected
+  .service-selector__trigger-icon,
+.service-selector__trigger.service-selector__trigger--selected
+  .service-selector__trigger-text,
+.service-selector__trigger.service-selector__trigger--selected
+  .service-selector__trigger-chevron {
   color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
 }
 
 /* When dropdown is open AND a service is selected, keep default style */
 .service-selector__trigger.service-selector__trigger--selected:hover {
-  background-color: var(--service-selector-color-service-selector-background-hover, #ccfbf6);
+  background-color: var(
+    --service-selector-color-service-selector-background-hover,
+    #ccfbf6
+  );
   border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
 }
 
@@ -105,17 +134,21 @@
 
 /* Dropdown Panel */
 .service-selector__panel {
-  position: absolute;
+  /* position: absolute; */
   top: 100%;
   left: 0;
   right: 0;
+  padding: 0;
   margin-top: 8px;
   background-color: var(--color-elevation-level-1, #ffffff);
   border-radius: var(--service-selector-boder-radius-dropdown-item-default, 12px);
   overflow: hidden;
   z-index: 50;
-  border: var(--service-selector-border-width-default, 1px) solid var(--service-selector-color-service-selector-border-default, #a3a3a3);
-  box-shadow: 0px 0px 4px 0px rgba(48, 54, 66, 0.11), 0px 0px 2px 0px rgba(48, 54, 66, 0.1);
+  border: var(--service-selector-border-width-default, 1px) solid
+    var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  box-shadow:
+    0px 0px 4px 0px rgba(48, 54, 66, 0.11),
+    0px 0px 2px 0px rgba(48, 54, 66, 0.1);
 }
 
 .service-selector__content {
@@ -148,14 +181,18 @@
 /* Option */
 .service-selector__option {
   width: 100%;
-  padding: var(--service-selector-spacing-dropdown-item-padding-y, 12px) var(--service-selector-spacing-dropdown-item-padding-x, 24px);
+  padding: var(--service-selector-spacing-dropdown-item-padding-y, 12px)
+    var(--service-selector-spacing-dropdown-item-padding-x, 24px);
   display: flex;
   align-items: center;
   gap: var(--service-selector-spacing-dropdown-item-gap, 12px);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   border: 0;
-  background-color: var(--service-selector-color-dropdown-item-background-default, transparent);
+  background-color: var(
+    --service-selector-color-dropdown-item-background-default,
+    transparent
+  );
   text-align: left;
   border-radius: var(--service-selector-boder-radius-dropdown-item-default, 12px);
 }
@@ -164,17 +201,25 @@
   background-color: var(--service-selector-color-dropdown-item-background-hover, #f5f5f5);
 }
 
-.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) .service-selector__option-icon,
-.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) .service-selector__option-text {
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected)
+  .service-selector__option-icon,
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected)
+  .service-selector__option-text {
   color: var(--service-selector-color-dropdown-item-foreground-hover, #404040);
 }
 
 .service-selector__option--selected {
-  background-color: var(--service-selector-color-dropdown-item-background-active, #042c2f);
+  background-color: var(
+    --service-selector-color-dropdown-item-background-active,
+    #042c2f
+  );
 }
 
 .service-selector__option--selected:hover {
-  background-color: var(--service-selector-color-dropdown-item-background-active, #042c2f);
+  background-color: var(
+    --service-selector-color-dropdown-item-background-active,
+    #042c2f
+  );
 }
 
 .service-selector__option--selected .service-selector__option-icon,
@@ -226,3 +271,6 @@
   }
 }
 
+[data-radix-popper-content-wrapper] {
+  z-index: 99999 !important;
+}

package/dist/components/ui/checkbox.d.ts

@@ -1,4 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import * as React from 'react';
-declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-export { Checkbox };

package/dist/components/ui/checkbox.js

@@ -1,31 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { cn } from '@/src/lib/utils';
-import Icon from '../atoms/Icon/Icon';
-function Checkbox(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, __assign({ "data-slot": "checkbox", className: cn('w-5 h-5 border border-[var(--checkbox-color-checkbox-border-default-default)] data-[state=checked]:border-[var(--checkbox-color-checkbox-border-selected-default)] rounded-[var(--border-radius-rounded-sm)] data-[error=true]:border-[var(--checkbox-color-checkbox-border-default-error)] data-[error=true]:bg-[var(--checkbox-color-checkbox-background-error)] disabled:opacity-50 disabled:cursor-not-allowed', className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, __assign({ "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none" }, { children: _jsx(Icon, { name: "check", size: "sm", className: "text-[var(--checkbox-color-checkbox-checked-default)]" }) })) })));
-}
-export { Checkbox };

package/src/components/ui/checkbox.tsx

@@ -1,32 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import * as React from 'react';
-
-import { cn } from '@/src/lib/utils';
-import Icon from '../atoms/Icon/Icon';
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        'w-5 h-5 border border-[var(--checkbox-color-checkbox-border-default-default)] data-[state=checked]:border-[var(--checkbox-color-checkbox-border-selected-default)] rounded-[var(--border-radius-rounded-sm)] data-[error=true]:border-[var(--checkbox-color-checkbox-border-default-error)] data-[error=true]:bg-[var(--checkbox-color-checkbox-background-error)] disabled:opacity-50 disabled:cursor-not-allowed',
-        className
-      )}
-      {...props}>
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none">
-        <Icon
-          name="check"
-          size="sm"
-          className="text-[var(--checkbox-color-checkbox-checked-default)]"
-        />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-}
-
-export { Checkbox };