@sofya-ds/react 1.2.0 → 1.3.1

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 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",
@@ -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(
@@ -4329,7 +4386,7 @@ Spinner.displayName = "Spinner";
 // src/components/switch.tsx
 import * as React31 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 var switchSizeOptions = ["default", "sm"];
 var switchRootSizeClasses = {
   default: "h-6 w-11",
@@ -4339,29 +4396,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__ */ jsx33(
-    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__ */ jsx33(
-        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__ */ jsx33(
+      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__ */ jsx33(
+          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__ */ jsxs17(
+      "div",
+      {
+        "data-slot": "switch-container",
+        className: selectionControlContainerClasses({
+          alignClassName,
+          className: containerClassName,
+          disabled
+        }),
+        children: [
+          switchControl,
+          /* @__PURE__ */ jsxs17("span", { className: selectionControlContentBaseClasses, children: [
+            label ? /* @__PURE__ */ jsx33("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ jsx33(
+              "span",
+              {
+                id: labelId,
+                className: cn(
+                  selectionControlLabelTextBaseClasses,
+                  labelClassName
+                ),
+                children: renderTextContent(label, {
+                  as: "span",
+                  className: "text-[color:var(--sofya-text-default)]",
+                  size: "body"
+                })
+              }
+            ) }) : null,
+            description ? /* @__PURE__ */ jsx33(
+              "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
@@ -4615,7 +4750,7 @@ TableActions.displayName = "TableActions";
 import * as React33 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { motion as motion3 } from "motion/react";
-import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 function resolveDefaultValue(items, defaultValue) {
   if (defaultValue) {
     return defaultValue;
@@ -4645,7 +4780,7 @@ function Tabs({
       setUncontrolledCurrentValue(resolvedDefaultValue);
     }
   }, [resolvedDefaultValue, setUncontrolledCurrentValue, value]);
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     TabsPrimitive.Root,
     {
       className: cn("w-full", className),
@@ -4664,7 +4799,7 @@ function Tabs({
             children: items.map((item) => {
               const isUnavailable = item.disabled || item.loading;
               const isActive = item.value === currentValue;
-              return /* @__PURE__ */ jsxs17(
+              return /* @__PURE__ */ jsxs18(
                 TabsPrimitive.Trigger,
                 {
                   value: item.value,
@@ -4686,7 +4821,7 @@ function Tabs({
                         transition: { duration: 0.25, ease: "easeInOut" }
                       }
                     ) : null,
-                    /* @__PURE__ */ jsxs17("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs18("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
                       item.loading ? /* @__PURE__ */ jsx35(
                         "span",
                         {
@@ -5020,7 +5155,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.1",
   "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.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",