@sofya-ds/react 1.2.0 → 1.3.1

package/dist/index.cjs

@@ -152,7 +152,9 @@ __export(index_exports, {
   cardVariants: () => cardVariants,
   createWhitelabelTheme: () => import_tokens2.createWhitelabelTheme,
   defaultTheme: () => import_tokens2.defaultTheme,
+  dropdownAppearanceOptions: () => dropdownAppearanceOptions,
   dropdownLanguageItems: () => dropdownLanguageItems,
+  dropdownTriggerSizeOptions: () => dropdownTriggerSizeOptions,
   dropdownVariantOptions: () => dropdownVariantOptions,
   emptyMediaVariantOptions: () => emptyMediaVariantOptions,
   gradientToCss: () => import_tokens2.gradientToCss,
@@ -1958,22 +1960,51 @@ var dropdownVariantOptions = [
   "language",
   "selected"
 ];
+var dropdownAppearanceOptions = ["panel", "card"];
+var dropdownTriggerSizeOptions = ["default", "sm", "lg"];
 var dropdownLanguageItems = [
   { value: "en-US", label: "English", languageLocale: "en-US" },
   { value: "pt-BR", label: "Portuguese", languageLocale: "pt-BR" },
   { value: "es-ES", label: "Spanish", languageLocale: "es-ES" }
 ];
-var dropdownTriggerClasses = {
-  card: "h-12 rounded-[20px] px-6 py-2 text-primary",
-  panel: "h-12 rounded-[10px] px-6 py-2 text-foreground",
+var dropdownTriggerToneClasses = {
+  card: "text-primary",
+  panel: "text-foreground",
   language: "",
-  selected: "h-10 w-full rounded-[10px] border-[color:var(--sofya-border-strong)] px-4 py-2 [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] [font-weight:var(--sofya-text-body-font-weight)] leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)]"
+  selected: "w-full border-[color:var(--sofya-border-strong)] [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] [font-weight:var(--sofya-text-body-font-weight)] leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)]"
 };
-var dropdownContentClasses = {
-  card: "rounded-[20px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]",
-  panel: "rounded-[10px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]",
-  language: "w-[224px] min-w-[224px] rounded-[10px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]",
-  selected: "w-[var(--radix-dropdown-menu-trigger-width)] min-w-[var(--radix-dropdown-menu-trigger-width)] rounded-[10px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]"
+var dropdownTriggerSizeClasses = {
+  regular: {
+    default: "h-12 px-6 py-2",
+    sm: "h-10 px-4 py-2",
+    lg: "h-14 px-8 py-4"
+  },
+  selected: {
+    default: "h-10 px-4 py-2",
+    sm: "h-9 px-2 py-2",
+    lg: "h-12 px-6 py-2"
+  },
+  language: {
+    default: "h-[38px] w-[38px] p-0",
+    sm: "h-8 w-8 p-0",
+    lg: "h-11 w-11 p-0"
+  }
+};
+var dropdownAppearanceClasses = {
+  panel: {
+    content: "rounded-[10px]",
+    trigger: "rounded-[10px]"
+  },
+  card: {
+    content: "rounded-[20px]",
+    trigger: "rounded-[20px]"
+  }
+};
+var dropdownContentBaseClasses = {
+  card: "border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]",
+  panel: "border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]",
+  language: "w-[224px] min-w-[224px] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]",
+  selected: "w-[var(--radix-dropdown-menu-trigger-width)] min-w-[var(--radix-dropdown-menu-trigger-width)] border-[color:var(--sofya-border-strong)] text-foreground shadow-[var(--sofya-shadow-soft)]"
 };
 var dropdownItemClasses = {
   card: "text-foreground",
@@ -1993,6 +2024,24 @@ function resolveItemLanguageLocale(item) {
   }
   return isButtonLanguageLocale(item.value) ? item.value : void 0;
 }
+function resolveDropdownAppearance({
+  appearance,
+  variant
+}) {
+  if (appearance) {
+    return appearance;
+  }
+  return variant === "card" ? "card" : "panel";
+}
+function resolveDropdownTriggerSizeFamily(variant) {
+  if (variant === "language") {
+    return "language";
+  }
+  if (variant === "selected") {
+    return "selected";
+  }
+  return "regular";
+}
 function DefaultDropdownTriggerIcon({ variant }) {
   if (variant === "selected") {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -2024,6 +2073,7 @@ function LanguageFlagIcon({ locale }) {
 }
 function Dropdown({
   align = "start",
+  appearance,
   contentClassName,
   defaultOpen,
   defaultValue,
@@ -2038,11 +2088,14 @@ function Dropdown({
   sideOffset = 8,
   triggerClassName,
   triggerIcon,
+  triggerSize = "default",
   value,
   variant = "card"
 }) {
   const isLanguageVariant = variant === "language";
   const isSelectedVariant = variant === "selected";
+  const resolvedAppearance = resolveDropdownAppearance({ appearance, variant });
+  const triggerSizeFamily = resolveDropdownTriggerSizeFamily(variant);
   const usesDefaultListStyle = !isLanguageVariant;
   const resolvedItems = React12.useMemo(
     () => isLanguageVariant ? items && items.length > 0 ? items : dropdownLanguageItems : items ?? [],
@@ -2092,9 +2145,13 @@ function Dropdown({
             type: "button",
             variant: isLanguageVariant ? "language" : "dropdown",
             languageLocale: selectedLanguageLocale,
+            "data-appearance": resolvedAppearance,
+            "data-trigger-size": triggerSize,
             className: cn(
               "min-w-0",
-              isLanguageVariant ? "h-[38px] w-[38px] rounded-[10px] p-0" : dropdownTriggerClasses[variant],
+              dropdownTriggerToneClasses[variant],
+              dropdownTriggerSizeClasses[triggerSizeFamily][triggerSize],
+              dropdownAppearanceClasses[resolvedAppearance].trigger,
               selectedTriggerToneClassName,
               triggerClassName
             ),
@@ -2111,9 +2168,11 @@ function Dropdown({
           {
             align,
             sideOffset,
+            "data-appearance": resolvedAppearance,
             className: cn(
               "sofya-dropdown-content z-50 w-auto min-w-[var(--radix-dropdown-menu-trigger-width)] border bg-card p-2 outline-none",
-              dropdownContentClasses[variant],
+              dropdownContentBaseClasses[variant],
+              dropdownAppearanceClasses[resolvedAppearance].content,
               contentClassName
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -4486,29 +4545,107 @@ var switchThumbSizeClasses = {
   default: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
   sm: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
 };
-var Switch = React31.forwardRef(({ className, size = "default", ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    SwitchPrimitives.Root,
-    {
-      className: cn(
-        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-sofya ease-sofya focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
-        switchRootSizeClasses[size],
-        className
-      ),
-      ...props,
-      ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        SwitchPrimitives.Thumb,
-        {
-          className: cn(
-            "pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform duration-sofya ease-sofya",
-            switchThumbSizeClasses[size]
-          )
-        }
-      )
+var Switch = React31.forwardRef(
+  ({
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    className,
+    containerClassName,
+    description,
+    descriptionClassName,
+    disabled,
+    id,
+    label,
+    labelClassName,
+    size,
+    ...props
+  }, ref) => {
+    const generatedId = React31.useId();
+    const resolvedId = id ?? generatedId;
+    const labelId = label ? `${resolvedId}-label` : void 0;
+    const descriptionId = description ? `${resolvedId}-description` : void 0;
+    const hasTextContent = label !== void 0 || description !== void 0;
+    const resolvedSize = size ?? (hasTextContent ? "sm" : "default");
+    const alignClassName = description ? "items-start" : "items-center";
+    const resolvedAriaDescribedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
+    const resolvedAriaLabelledBy = ariaLabelledBy ?? labelId;
+    const switchControl = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      SwitchPrimitives.Root,
+      {
+        id: resolvedId,
+        className: cn(
+          "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-sofya ease-sofya focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
+          switchRootSizeClasses[resolvedSize],
+          className
+        ),
+        disabled,
+        "aria-describedby": resolvedAriaDescribedBy,
+        "aria-labelledby": resolvedAriaLabelledBy,
+        "data-size": resolvedSize,
+        ...props,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          SwitchPrimitives.Thumb,
+          {
+            className: cn(
+              "pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform duration-sofya ease-sofya",
+              switchThumbSizeClasses[resolvedSize]
+            )
+          }
+        )
+      }
+    );
+    if (!hasTextContent) {
+      return switchControl;
     }
-  );
-});
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "div",
+      {
+        "data-slot": "switch-container",
+        className: selectionControlContainerClasses({
+          alignClassName,
+          className: containerClassName,
+          disabled
+        }),
+        children: [
+          switchControl,
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
+            label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "span",
+              {
+                id: labelId,
+                className: cn(
+                  selectionControlLabelTextBaseClasses,
+                  labelClassName
+                ),
+                children: renderTextContent(label, {
+                  as: "span",
+                  className: "text-[color:var(--sofya-text-default)]",
+                  size: "body"
+                })
+              }
+            ) }) : null,
+            description ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "span",
+              {
+                id: descriptionId,
+                className: cn(
+                  selectionControlDescriptionTextBaseClasses,
+                  descriptionClassName
+                ),
+                children: renderTextContent(description, {
+                  as: "span",
+                  className: "text-muted-foreground",
+                  size: "body"
+                })
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table.tsx
@@ -5146,7 +5283,9 @@ var import_tokens2 = require("@sofya-ds/tokens");
   cardVariants,
   createWhitelabelTheme,
   defaultTheme,
+  dropdownAppearanceOptions,
   dropdownLanguageItems,
+  dropdownTriggerSizeOptions,
   dropdownVariantOptions,
   emptyMediaVariantOptions,
   gradientToCss,