@sofya-ds/react 1.3.2 → 1.3.6

package/dist/index.js

@@ -391,7 +391,7 @@ Icon.displayName = "Icon";
 // src/components/text.tsx
 import * as React3 from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var textSizeOptions = ["h1", "h2", "h3", "h4", "h5", "body", "tiny"];
+var textSizeOptions = ["h1", "h2", "h3", "h4", "h5", "body", "tiny", "extra-tiny"];
 var textVariantOptions = ["default", "gradient", "shiny", "split"];
 var textSplitTypeOptions = ["chars", "words", "words, chars"];
 var defaultElements = {
@@ -401,7 +401,8 @@ var defaultElements = {
   h4: "h4",
   h5: "h5",
   body: "p",
-  tiny: "span"
+  tiny: "span",
+  "extra-tiny": "span"
 };
 var textSizeStyles = Object.fromEntries(
   textSizeOptions.map((size) => [
@@ -1354,7 +1355,7 @@ var buttonVariants = cva4(
         language: "border-0 bg-muted bg-cover bg-center bg-no-repeat text-primary-foreground shadow-none hover:brightness-[1.03]",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/85",
         outline: "border border-primary/15 bg-background text-foreground hover:border-primary/30 hover:bg-background active:bg-background",
-        ghost: "bg-background text-foreground hover:bg-muted",
+        ghost: "bg-transparent text-foreground hover:bg-muted",
         destructive: "bg-destructive text-destructive-foreground hover:brightness-[1.04]"
       },
       size: {
@@ -1480,7 +1481,7 @@ var Button = React8.forwardRef(
       hasChildren ? renderTextContent(children, {
         as: "span",
         className: "inline-flex items-center text-current",
-        size: "body",
+        size: "tiny",
         style: {
           fontWeight: "inherit",
           letterSpacing: "inherit"
@@ -1560,21 +1561,12 @@ var surfaceStyles = {
     "--sofya-surface-shadow-base": "var(--sofya-surface-card-shadow)",
     boxShadow: "var(--sofya-surface-shadow-override, var(--sofya-surface-shadow-base))"
   },
-  panel: {
-    backgroundColor: "hsl(var(--sofya-surface-panel-background))",
-    borderColor: "hsl(var(--sofya-surface-panel-border-color))",
-    borderWidth: "var(--sofya-surface-panel-border-width)",
-    borderStyle: "solid",
-    borderRadius: "var(--sofya-surface-panel-radius)",
-    "--sofya-surface-shadow-base": "var(--sofya-surface-panel-shadow)",
-    boxShadow: "var(--sofya-surface-shadow-override, var(--sofya-surface-shadow-base))"
-  },
   focus: {
     backgroundColor: "hsl(var(--sofya-surface-focus-background))",
     borderColor: "hsl(var(--sofya-surface-focus-border-color))",
     borderWidth: "var(--sofya-surface-focus-border-width)",
     borderStyle: "solid",
-    borderRadius: "var(--sofya-surface-focus-radius)",
+    borderRadius: "var(--sofya-surface-card-radius)",
     "--sofya-surface-shadow-base": "var(--sofya-surface-focus-shadow)",
     boxShadow: "var(--sofya-surface-shadow-override, var(--sofya-surface-shadow-base))"
   }
@@ -1598,9 +1590,9 @@ var Surface = SurfaceBase;
 
 // src/components/card.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var cardVariants = ["card", "panel", "focus"];
+var cardVariants = ["card", "focus"];
 function Card({ className, variant = "card", ...props }) {
-  const hasHoverShadow = variant === "card" || variant === "panel";
+  const hasHoverShadow = variant === "card";
   return /* @__PURE__ */ jsx10(
     Surface,
     {
@@ -1796,14 +1788,13 @@ function useControllableState({
 }
 
 // src/components/dropdown.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var dropdownVariantOptions = [
   "card",
-  "panel",
   "language",
   "selected"
 ];
-var dropdownAppearanceOptions = ["panel", "card"];
+var dropdownAppearanceOptions = ["card"];
 var dropdownTriggerSizeOptions = ["default", "sm", "lg"];
 var dropdownLanguageItems = [
   { value: "en-US", label: "English", languageLocale: "en-US" },
@@ -1812,7 +1803,6 @@ var dropdownLanguageItems = [
 ];
 var dropdownTriggerToneClasses = {
   card: "text-primary",
-  panel: "text-foreground",
   language: "",
   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)]"
 };
@@ -1828,16 +1818,12 @@ var dropdownTriggerSizeClasses = {
     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"
+    default: "h-5 w-5 p-0",
+    sm: "h-[18px] w-[18px] p-0",
+    lg: "h-6 w-6 p-0"
   }
 };
 var dropdownAppearanceClasses = {
-  panel: {
-    content: "rounded-[10px]",
-    trigger: "rounded-[10px]"
-  },
   card: {
     content: "rounded-[20px]",
     trigger: "rounded-[20px]"
@@ -1845,13 +1831,11 @@ var dropdownAppearanceClasses = {
 };
 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",
-  panel: "text-foreground",
   language: "text-foreground",
   selected: "text-foreground"
 };
@@ -1868,13 +1852,9 @@ function resolveItemLanguageLocale(item) {
   return isButtonLanguageLocale(item.value) ? item.value : void 0;
 }
 function resolveDropdownAppearance({
-  appearance,
-  variant
+  appearance
 }) {
-  if (appearance) {
-    return appearance;
-  }
-  return variant === "card" ? "card" : "panel";
+  return appearance ?? "card";
 }
 function resolveDropdownTriggerSizeFamily(variant) {
   if (variant === "language") {
@@ -1909,8 +1889,8 @@ function LanguageFlagIcon({ locale }) {
     {
       alt: "",
       "aria-hidden": "true",
-      src: dropdownLanguageFlagSrc[locale],
-      className: "h-[12px] w-[16px] shrink-0 object-cover"
+      src: buttonLanguageFlagSrc[locale],
+      className: "h-[18px] w-[18px] shrink-0 rounded-full object-cover"
     }
   );
 }
@@ -2023,12 +2003,53 @@ function Dropdown({
               {
                 value: radioValue,
                 onValueChange: setSelectedValue,
-                className: "grid gap-2",
+                className: "grid gap-1",
                 children: resolvedItems.map((item) => {
                   const isSelected = item.value === selectedValue;
                   const itemLanguageLocale = resolveItemLanguageLocale(item);
                   const indicator = item.indicator ?? /* @__PURE__ */ jsx12(DefaultDropdownItemIndicator, {});
                   const itemIcon = item.icon ?? (variant === "language" && itemLanguageLocale ? /* @__PURE__ */ jsx12(LanguageFlagIcon, { locale: itemLanguageLocale }) : null);
+                  if (!usesDefaultListStyle) {
+                    return /* @__PURE__ */ jsx12(
+                      DropdownMenuPrimitive.RadioItem,
+                      {
+                        value: item.value,
+                        disabled: item.disabled,
+                        asChild: true,
+                        children: /* @__PURE__ */ jsx12(
+                          Button,
+                          {
+                            variant: "ghost",
+                            className: cn(
+                              "h-auto w-full px-1.5 py-1 font-normal data-[highlighted]:bg-muted [&>span.relative]:w-full",
+                              dropdownItemClasses[variant],
+                              itemClassName
+                            ),
+                            children: /* @__PURE__ */ jsxs5("span", { className: "flex w-full items-center gap-2.5", children: [
+                              itemIcon && /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }),
+                              /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1 truncate text-left", children: renderTextContent(item.label, {
+                                as: "span",
+                                className: "block truncate text-inherit",
+                                size: "tiny"
+                              }) }),
+                              /* @__PURE__ */ jsx12(
+                                "span",
+                                {
+                                  "aria-hidden": "true",
+                                  className: cn(
+                                    "flex h-4 w-4 shrink-0 items-center justify-center text-primary transition-opacity duration-sofya ease-sofya",
+                                    isSelected ? "opacity-100" : "opacity-0"
+                                  ),
+                                  children: indicator
+                                }
+                              )
+                            ] })
+                          }
+                        )
+                      },
+                      item.value
+                    );
+                  }
                   return /* @__PURE__ */ jsx12(
                     DropdownMenuPrimitive.RadioItem,
                     {
@@ -2036,11 +2057,11 @@ function Dropdown({
                       disabled: item.disabled,
                       className: cn(
                         "flex w-full cursor-pointer items-center rounded-[4px] [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-[22px] tracking-[var(--sofya-text-body-letter-spacing)] outline-none transition-colors duration-sofya ease-sofya data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
-                        usesDefaultListStyle ? "px-0 py-0 data-[highlighted]:bg-transparent [&[data-highlighted]_span[data-dropdown-item-body]]:bg-[color:var(--sofya-surface-selected)]" : "px-2 py-2 data-[highlighted]:bg-[color:var(--sofya-surface-hover)]",
+                        "px-0 py-0 data-[highlighted]:bg-transparent [&[data-highlighted]_span[data-dropdown-item-body]]:bg-[color:var(--sofya-surface-selected)]",
                         dropdownItemClasses[variant],
                         itemClassName
                       ),
-                      children: usesDefaultListStyle ? /* @__PURE__ */ jsxs5(
+                      children: /* @__PURE__ */ jsxs5(
                         "span",
                         {
                           "data-dropdown-item-body": true,
@@ -2053,7 +2074,7 @@ function Dropdown({
                             /* @__PURE__ */ jsx12("span", { className: "truncate", children: renderTextContent(item.label, {
                               as: "span",
                               className: "block truncate text-inherit",
-                              size: "body"
+                              size: "tiny"
                             }) }),
                             isSelected ? /* @__PURE__ */ jsx12(
                               "span",
@@ -2065,28 +2086,7 @@ function Dropdown({
                             ) : null
                           ]
                         }
-                      ) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                        /* @__PURE__ */ jsxs5("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-                          itemIcon ? /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
-                          /* @__PURE__ */ jsx12("span", { className: "truncate", children: renderTextContent(item.label, {
-                            as: "span",
-                            className: "block truncate text-inherit",
-                            size: "body"
-                          }) })
-                        ] }),
-                        /* @__PURE__ */ jsx12(
-                          "span",
-                          {
-                            "aria-hidden": "true",
-                            className: cn(
-                              "flex h-4 w-4 shrink-0 items-center justify-center transition-opacity duration-sofya ease-sofya",
-                              variant === "language" && "text-primary",
-                              isSelected ? "opacity-100" : "opacity-0"
-                            ),
-                            children: indicator
-                          }
-                        )
-                      ] })
+                      )
                     },
                     item.value
                   );
@@ -2108,6 +2108,9 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
+var DialogInternalContext = React13.createContext({
+  showCloseButton: true
+});
 var DialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   DialogPrimitive.Overlay,
   {
@@ -2125,15 +2128,15 @@ var DialogContent = React13.forwardRef(
     className,
     children,
     cardClassName,
-    cardVariant = "panel",
     overlayClassName,
     showCloseButton = true,
+    variant = "card",
     ...props
   }, ref) => {
     const dialogCardStyle = {
       "--sofya-surface-shadow-override": "var(--sofya-shadow-lg)"
     };
-    return /* @__PURE__ */ jsxs6(DialogPortal, { children: [
+    return /* @__PURE__ */ jsx13(DialogInternalContext.Provider, { value: { showCloseButton }, children: /* @__PURE__ */ jsxs6(DialogPortal, { children: [
       /* @__PURE__ */ jsx13(DialogOverlay, { className: overlayClassName }),
       /* @__PURE__ */ jsx13("div", { className: "sofya-dialog-positioner fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx13(
         DialogPrimitive.Content,
@@ -2144,54 +2147,68 @@ var DialogContent = React13.forwardRef(
             className
           ),
           ...props,
-          children: /* @__PURE__ */ jsxs6(
+          children: /* @__PURE__ */ jsx13(
             Card,
             {
-              variant: cardVariant,
+              variant,
               className: cn(
-                "relative flex max-h-[inherit] min-h-0 w-full flex-col overflow-y-auto overflow-x-hidden border-border bg-card",
+                "flex max-h-[inherit] min-h-0 w-full flex-col gap-6 overflow-y-auto overflow-x-hidden p-6",
                 cardClassName
               ),
               style: dialogCardStyle,
-              children: [
-                children,
-                showCloseButton ? /* @__PURE__ */ jsx13(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx13(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "icon",
-                    "aria-label": "Close",
-                    leftIcon: /* @__PURE__ */ jsx13(Icon, { name: "x", size: 18 }),
-                    className: "absolute right-4 top-4 z-10 text-muted-foreground hover:text-foreground"
-                  }
-                ) }) : null
-              ]
+              children
             }
           )
         }
       ) })
-    ] });
+    ] }) });
   }
 );
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx13("div", { className: cn("grid gap-2 px-6 pt-6 pr-16 text-left", className), ...props });
+function DialogHeader({ className, children, ...props }) {
+  const { showCloseButton } = React13.useContext(DialogInternalContext);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn("flex w-full items-start justify-between gap-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx13("div", { className: "flex min-w-0 flex-1 flex-col gap-2 text-left", children }),
+        showCloseButton ? /* @__PURE__ */ jsx13(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx13(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            "aria-label": "Close",
+            leftIcon: /* @__PURE__ */ jsx13(Icon, { name: "x", size: 18 }),
+            className: "shrink-0 text-muted-foreground hover:text-foreground"
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function DialogBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      className: cn("flex flex-col gap-4", className),
+      ...props
+    }
+  );
 }
 function DialogFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx13(
     "div",
     {
-      className: cn(
-        "flex flex-col-reverse gap-4 px-6 pb-6 pt-4 sm:flex-row sm:justify-end",
-        className
-      ),
+      className: cn("flex items-center justify-end gap-2", className),
       ...props
     }
   );
 }
 var DialogCancel = React13.forwardRef(
-  ({ type = "button", variant = "outline", ...props }, ref) => /* @__PURE__ */ jsx13(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx13(Button, { ref, type, variant, ...props }) })
+  ({ type = "button", variant = "ghost", ...props }, ref) => /* @__PURE__ */ jsx13(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx13(Button, { ref, type, variant, ...props }) })
 );
 DialogCancel.displayName = "DialogCancel";
 var DialogTitle = React13.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx13(
@@ -2203,7 +2220,7 @@ var DialogTitle = React13.forwardRef(({ children, className, ...props }, ref) =>
     children: renderTextContent(children, {
       as: "span",
       className: "block text-card-foreground",
-      size: "h4"
+      size: "h3"
     })
   }
 ));
@@ -2226,7 +2243,7 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 // src/components/empty.tsx
 import * as React14 from "react";
 import { cva as cva5 } from "class-variance-authority";
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var emptyMediaVariantOptions = ["default", "icon"];
 var emptyMediaVariants = cva5(
   "inline-flex shrink-0 items-center justify-center transition-[background-color,border-color,color,box-shadow] duration-sofya ease-sofya",
@@ -2309,7 +2326,7 @@ var Empty = React14.forwardRef(function Empty2({ children, className, content, d
         className
       ),
       ...props,
-      children: hasCustomChildren ? children : /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      children: hasCustomChildren ? children : /* @__PURE__ */ jsxs7(Fragment2, { children: [
         /* @__PURE__ */ jsxs7(EmptyHeader, { children: [
           media ?? /* @__PURE__ */ jsx14(EmptyMedia, { variant: "icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx14(Icon, { name: "folders", size: 28 }) }),
           /* @__PURE__ */ jsx14(EmptyTitle, { children: title ?? "Nada por aqui" }),
@@ -2716,7 +2733,7 @@ var UploadInputControl = React15.forwardRef(function UploadInputControl2({
       {
         "aria-disabled": disabled || void 0,
         className: cn(
-          "flex w-full flex-col items-center justify-center gap-2 overflow-clip rounded-[20px] border-2 border-dashed border-[color:var(--sofya-border-soft)] bg-[color:var(--sofya-tone-default-background)] px-4 py-4 text-center transition-[border-color,background-color,box-shadow,color] duration-sofya ease-sofya",
+          "flex w-full flex-col items-center justify-center gap-2 overflow-clip rounded-[20px] border-2 border-dashed border-[color:var(--sofya-border-soft)] bg-transparent px-2 pt-2 pb-4 text-center transition-[border-color,background-color,box-shadow,color] duration-sofya ease-sofya",
           !disabled && "cursor-pointer hover:border-[color:var(--sofya-border-hover)] hover:bg-[color:var(--sofya-surface-hover)] focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-within:border-transparent focus-within:ring-2 focus-within:ring-[color:var(--sofya-focus-ring-soft)] active:border-transparent active:ring-2 active:ring-[color:var(--sofya-focus-ring-soft)]",
           isDragActive && "border-[color:var(--sofya-border-hover)] bg-[color:var(--sofya-surface-selected)] shadow-[var(--sofya-shadow-dropzone-focus)]",
           disabled && "cursor-not-allowed opacity-60",
@@ -2743,7 +2760,7 @@ var UploadInputControl = React15.forwardRef(function UploadInputControl2({
           resolvedDescription ? /* @__PURE__ */ jsx16("span", { className: "text-[color:var(--sofya-text-subtle)]", children: renderTextContent(resolvedDescription, {
             as: "span",
             className: "block text-[color:var(--sofya-text-subtle)]",
-            size: "tiny"
+            size: "extra-tiny"
           }) }) : null
         ]
       }
@@ -2759,7 +2776,7 @@ var UploadInputControl = React15.forwardRef(function UploadInputControl2({
           animate: prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 },
           exit: prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -6 },
           transition: uploadListItemTransition,
-          children: /* @__PURE__ */ jsxs9(Card, { variant: "panel", className: "flex items-center gap-4 p-4", children: [
+          children: /* @__PURE__ */ jsxs9(Card, { variant: "card", className: "flex items-center gap-4 p-4", children: [
             /* @__PURE__ */ jsx16("span", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-[color:var(--sofya-surface-hover)] text-primary", children: /* @__PURE__ */ jsx16(
               UploadFileTypeGlyph,
               {
@@ -2910,7 +2927,7 @@ var InputOTPSeparator = React16.forwardRef(({ className, ...props }, ref) => {
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/input.tsx
-import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var inputVariantOptions = [
   "default",
   "search",
@@ -3009,7 +3026,7 @@ var Input = React17.forwardRef((props, ref) => {
         resolvedId
       }
     );
-    const uploadLabel = label2 || uploadOptionalLabel ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    const uploadLabel = label2 || uploadOptionalLabel ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
       renderTextContent(label2, {
         as: "span",
         className: "text-[color:var(--sofya-text-default)]",
@@ -5055,6 +5072,7 @@ export {
   CardTitle,
   Checkbox,
   Dialog,
+  DialogBody,
   DialogCancel,
   DialogClose,
   DialogContent,

package/package.json

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