@sofya-ds/react 1.2.0 → 1.3.0

package/dist/index.js

@@ -1799,22 +1799,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 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 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 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",
@@ -1834,6 +1863,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__ */ jsx12(
@@ -1865,6 +1912,7 @@ function LanguageFlagIcon({ locale }) {
 }
 function Dropdown({
   align = "start",
+  appearance,
   contentClassName,
   defaultOpen,
   defaultValue,
@@ -1879,11 +1927,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 ?? [],
@@ -1933,9 +1984,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
             ),
@@ -1952,9 +2007,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__ */ jsx12(
@@ -5020,7 +5077,9 @@ export {
   cardVariants,
   createWhitelabelTheme2 as createWhitelabelTheme,
   defaultTheme2 as defaultTheme,
+  dropdownAppearanceOptions,
   dropdownLanguageItems,
+  dropdownTriggerSizeOptions,
   dropdownVariantOptions,
   emptyMediaVariantOptions,
   gradientToCss,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofya-ds/react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Sofya React design system with official brand tokens, provider and UI components.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -59,7 +59,7 @@
     "motion": "^12.38.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "@sofya-ds/tokens": "1.2.0"
+    "@sofya-ds/tokens": "1.3.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",