@sofya-ds/react 1.1.16 → 1.3.0

package/dist/index.js

@@ -142,6 +142,8 @@ import {
   IconTrashOff,
   IconTrashX,
   IconChevronRight,
+  IconLogout,
+  IconSettings,
   IconX
 } from "@tabler/icons-react";
 var tablerIconRegistry = {
@@ -181,6 +183,8 @@ var tablerIconRegistry = {
   IconTrashOff,
   IconTrashX,
   IconChevronRight,
+  IconLogout,
+  IconSettings,
   IconX
 };
 var tablerIconNames = Object.keys(tablerIconRegistry).sort(
@@ -224,6 +228,7 @@ var legacyIconToTablerNameMap = {
   "caret-up": "IconChevronUp",
   "caret-left": "IconChevronLeft",
   "caret-right": "IconChevronRight",
+  "logout": "IconLogout",
   "users-group": "IconUsersGroup",
   "archive": "IconArchive",
   "folder": "IconFolder",
@@ -233,7 +238,8 @@ var legacyIconToTablerNameMap = {
   "trash-x": "IconTrashX",
   "delete": "IconTrash",
   "remove": "IconTrashX",
-  "lixeira": "IconTrash"
+  "lixeira": "IconTrash",
+  "settings": "IconSettings"
 };
 var iconNames = Object.keys(legacyIconToTablerNameMap);
 var iconRegistry = Object.fromEntries(
@@ -594,67 +600,154 @@ function renderTextContent(children, { as, className, size = "body", style, vari
 
 // src/components/accordion.tsx
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
-  AccordionPrimitive.Item,
+var accordionAppearanceOptions = ["default", "card"];
+var AccordionAppearanceContext = React4.createContext("default");
+var accordionItemClasses = {
+  default: "group/accordion-item border-b border-border bg-transparent text-foreground",
+  card: "group/accordion-item bg-transparent text-foreground"
+};
+var accordionTriggerClasses = {
+  default: "sofya-accordion-trigger flex flex-1 items-center justify-between gap-4 py-4 text-left [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-medium leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-foreground 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:pointer-events-none disabled:opacity-50",
+  card: "sofya-accordion-trigger flex w-full items-center justify-between gap-4 rounded-[16px] border border-secondary bg-[color:var(--sofya-background)] px-6 py-4 text-left text-foreground transition-[background-color,border-color,box-shadow,color] duration-sofya ease-sofya hover:border-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50"
+};
+var accordionContentClasses = {
+  default: "sofya-accordion-content overflow-hidden text-sm text-muted-foreground",
+  card: "sofya-accordion-content overflow-hidden text-foreground"
+};
+var accordionContentBodyClasses = {
+  default: "pb-4 pr-10",
+  card: "flex flex-col gap-4 rounded-[8px] border border-border bg-[color:var(--sofya-background)] p-6"
+};
+function useAccordionAppearance() {
+  return React4.useContext(AccordionAppearanceContext);
+}
+var Accordion = React4.forwardRef(({ appearance = "default", className, ...props }, ref) => /* @__PURE__ */ jsx4(AccordionAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx4(
+  AccordionPrimitive.Root,
   {
     ref,
-    className: cn(
-      "group/accordion-item border-b border-border bg-transparent text-foreground",
-      className
-    ),
+    "data-appearance": appearance === "card" ? appearance : void 0,
+    className: cn(appearance === "card" && "flex flex-col gap-4", className),
     ...props
   }
-));
+) }));
+Accordion.displayName = AccordionPrimitive.Root.displayName;
+var AccordionItem = React4.forwardRef(({ className, ...props }, ref) => {
+  const appearance = useAccordionAppearance();
+  return /* @__PURE__ */ jsx4(
+    AccordionPrimitive.Item,
+    {
+      ref,
+      "data-appearance": appearance === "card" ? appearance : void 0,
+      className: cn(accordionItemClasses[appearance], className),
+      ...props
+    }
+  );
+});
 AccordionItem.displayName = AccordionPrimitive.Item.displayName;
-var AccordionTrigger = React4.forwardRef(({ className, children, indicator, ...props }, ref) => /* @__PURE__ */ jsx4(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
-  AccordionPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "sofya-accordion-trigger flex flex-1 items-center justify-between gap-4 py-4 text-left [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-medium leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-foreground 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:pointer-events-none disabled:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1", children: renderTextContent(children, {
-        as: "span",
-        className: "block text-foreground",
-        size: "body",
-        style: {
-          color: "inherit",
-          fontFamily: "inherit",
-          fontSize: "inherit",
-          fontWeight: "inherit",
-          letterSpacing: "inherit",
-          lineHeight: "inherit"
-        }
-      }) }),
-      /* @__PURE__ */ jsx4(
-        "span",
+var AccordionTrigger = React4.forwardRef(
+  ({
+    className,
+    children,
+    description,
+    hideIndicator,
+    indicator,
+    leading,
+    ...props
+  }, ref) => {
+    const appearance = useAccordionAppearance();
+    const hasDescription = description !== void 0 && description !== null;
+    const resolvedHideIndicator = hideIndicator ?? appearance === "card";
+    const indicatorNode = indicator !== void 0 ? indicator : /* @__PURE__ */ jsx4(Icon, { name: "caret-down", size: 12 });
+    const shouldRenderIndicator = !resolvedHideIndicator && indicatorNode != null;
+    return /* @__PURE__ */ jsx4(
+      AccordionPrimitive.Header,
+      {
+        "data-appearance": appearance === "card" ? appearance : void 0,
+        className: cn("flex", appearance === "card" && "w-full"),
+        children: /* @__PURE__ */ jsxs(
+          AccordionPrimitive.Trigger,
+          {
+            ref,
+            "data-appearance": appearance === "card" ? appearance : void 0,
+            className: cn(accordionTriggerClasses[appearance], className),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: cn("min-w-0 flex-1", leading && "flex items-center gap-4"), children: [
+                leading ? /* @__PURE__ */ jsx4("span", { className: "flex shrink-0 items-center justify-center", children: leading }) : null,
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "min-w-0 flex-1",
+                      (appearance === "card" || hasDescription) && "flex flex-col gap-2"
+                    ),
+                    children: [
+                      renderTextContent(children, {
+                        as: "span",
+                        className: "block min-w-0 text-foreground",
+                        size: appearance === "card" ? "h5" : "body",
+                        style: appearance === "card" ? void 0 : {
+                          color: "inherit",
+                          fontFamily: "inherit",
+                          fontSize: "inherit",
+                          fontWeight: "inherit",
+                          letterSpacing: "inherit",
+                          lineHeight: "inherit"
+                        }
+                      }),
+                      hasDescription ? renderTextContent(description, {
+                        as: "span",
+                        className: "block min-w-0 text-muted-foreground",
+                        size: "body"
+                      }) : null
+                    ]
+                  }
+                )
+              ] }),
+              shouldRenderIndicator ? /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "sofya-accordion-indicator flex h-5 w-5 shrink-0 items-center justify-center text-muted-foreground transition-transform duration-sofya ease-sofya",
+                    appearance === "card" && "text-secondary"
+                  ),
+                  children: indicatorNode
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React4.forwardRef(({ className, children, contentClassName, ...props }, ref) => {
+  const appearance = useAccordionAppearance();
+  return /* @__PURE__ */ jsx4(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      "data-appearance": appearance === "card" ? appearance : void 0,
+      className: cn(accordionContentClasses[appearance], className),
+      ...props,
+      children: /* @__PURE__ */ jsx4(
+        "div",
         {
-          "aria-hidden": "true",
           className: cn(
-            "sofya-accordion-indicator flex h-5 w-5 shrink-0 items-center justify-center text-muted-foreground transition-transform duration-sofya ease-sofya"
+            "sofya-accordion-content-body",
+            accordionContentBodyClasses[appearance],
+            contentClassName
           ),
-          children: indicator ?? /* @__PURE__ */ jsx4(Icon, { name: "caret-down", size: 12 })
+          children: renderTextContent(children, {
+            className: appearance === "card" ? "text-foreground" : "text-muted-foreground"
+          })
         }
       )
-    ]
-  }
-) }));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React4.forwardRef(({ className, children, contentClassName, ...props }, ref) => /* @__PURE__ */ jsx4(
-  AccordionPrimitive.Content,
-  {
-    ref,
-    className: cn("sofya-accordion-content overflow-hidden text-sm text-muted-foreground", className),
-    ...props,
-    children: /* @__PURE__ */ jsx4("div", { className: cn("pb-4 pr-10", contentClassName), children: renderTextContent(children, {
-      className: "text-muted-foreground"
-    }) })
-  }
-));
+    }
+  );
+});
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 // src/components/alert.tsx
@@ -1706,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",
@@ -1741,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(
@@ -1772,6 +1912,7 @@ function LanguageFlagIcon({ locale }) {
 }
 function Dropdown({
   align = "start",
+  appearance,
   contentClassName,
   defaultOpen,
   defaultValue,
@@ -1786,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 ?? [],
@@ -1840,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
             ),
@@ -1859,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(
@@ -4237,12 +4387,22 @@ Spinner.displayName = "Spinner";
 import * as React31 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { jsx as jsx33 } from "react/jsx-runtime";
-var Switch = React31.forwardRef(({ className, ...props }, ref) => {
+var switchSizeOptions = ["default", "sm"];
+var switchRootSizeClasses = {
+  default: "h-6 w-11",
+  sm: "h-5 w-9"
+};
+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 h-6 w-11 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",
+        "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,
@@ -4250,7 +4410,10 @@ var Switch = React31.forwardRef(({ className, ...props }, ref) => {
       children: /* @__PURE__ */ jsx33(
         SwitchPrimitives.Thumb,
         {
-          className: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-sm ring-0 transition-transform duration-sofya ease-sofya data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+          className: cn(
+            "pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform duration-sofya ease-sofya",
+            switchThumbSizeClasses[size]
+          )
         }
       )
     }
@@ -4895,6 +5058,7 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  accordionAppearanceOptions,
   alertSizeOptions,
   alertToneOptions,
   avatarSizeOptions,
@@ -4913,7 +5077,9 @@ export {
   cardVariants,
   createWhitelabelTheme2 as createWhitelabelTheme,
   defaultTheme2 as defaultTheme,
+  dropdownAppearanceOptions,
   dropdownLanguageItems,
+  dropdownTriggerSizeOptions,
   dropdownVariantOptions,
   emptyMediaVariantOptions,
   gradientToCss,
@@ -4943,6 +5109,7 @@ export {
   sofyaSurfaceNames,
   sofyaTextStyleNames,
   spinnerSizeOptions,
+  switchSizeOptions,
   tableActionToneOptions,
   tableCellVariantOptions,
   tableStatusToneOptions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofya-ds/react",
-  "version": "1.1.16",
+  "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.1.16"
+    "@sofya-ds/tokens": "1.3.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",