@sofya-ds/react 1.3.2 → 1.3.6

package/dist/index.cjs

@@ -48,6 +48,7 @@ __export(index_exports, {
   CardTitle: () => CardTitle,
   Checkbox: () => Checkbox,
   Dialog: () => Dialog,
+  DialogBody: () => DialogBody,
   DialogCancel: () => DialogCancel,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -551,7 +552,7 @@ Icon.displayName = "Icon";
 // src/components/text.tsx
 var React3 = __toESM(require("react"), 1);
 var import_jsx_runtime3 = require("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 = {
@@ -561,7 +562,8 @@ var defaultElements = {
   h4: "h4",
   h5: "h5",
   body: "p",
-  tiny: "span"
+  tiny: "span",
+  "extra-tiny": "span"
 };
 var textSizeStyles = Object.fromEntries(
   textSizeOptions.map((size) => [
@@ -1514,7 +1516,7 @@ var buttonVariants = (0, import_class_variance_authority4.cva)(
         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: {
@@ -1640,7 +1642,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"
@@ -1720,21 +1722,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))"
   }
@@ -1758,9 +1751,9 @@ var Surface = SurfaceBase;
 
 // src/components/card.tsx
 var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsx)(
     Surface,
     {
@@ -1959,11 +1952,10 @@ function useControllableState({
 var import_jsx_runtime12 = require("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" },
@@ -1972,7 +1964,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)]"
 };
@@ -1988,16 +1979,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]"
@@ -2005,13 +1992,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"
 };
@@ -2028,13 +2013,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") {
@@ -2069,8 +2050,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"
     }
   );
 }
@@ -2183,12 +2164,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__ */ (0, import_jsx_runtime12.jsx)(DefaultDropdownItemIndicator, {});
                   const itemIcon = item.icon ?? (variant === "language" && itemLanguageLocale ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LanguageFlagIcon, { locale: itemLanguageLocale }) : null);
+                  if (!usesDefaultListStyle) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      DropdownMenuPrimitive.RadioItem,
+                      {
+                        value: item.value,
+                        disabled: item.disabled,
+                        asChild: true,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          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__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex w-full items-center gap-2.5", children: [
+                              itemIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }),
+                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children: renderTextContent(item.label, {
+                                as: "span",
+                                className: "block truncate text-inherit",
+                                size: "tiny"
+                              }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                "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__ */ (0, import_jsx_runtime12.jsx)(
                     DropdownMenuPrimitive.RadioItem,
                     {
@@ -2196,11 +2218,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__ */ (0, import_jsx_runtime12.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                         "span",
                         {
                           "data-dropdown-item-body": true,
@@ -2213,7 +2235,7 @@ function Dropdown({
                             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate", children: renderTextContent(item.label, {
                               as: "span",
                               className: "block truncate text-inherit",
-                              size: "body"
+                              size: "tiny"
                             }) }),
                             isSelected ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                               "span",
@@ -2225,28 +2247,7 @@ function Dropdown({
                             ) : null
                           ]
                         }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-                          itemIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex shrink-0 items-center justify-center", children: itemIcon }) : null,
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate", children: renderTextContent(item.label, {
-                            as: "span",
-                            className: "block truncate text-inherit",
-                            size: "body"
-                          }) })
-                        ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                          "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
                   );
@@ -2268,6 +2269,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__ */ (0, import_jsx_runtime13.jsx)(
   DialogPrimitive.Overlay,
   {
@@ -2285,15 +2289,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__ */ (0, import_jsx_runtime13.jsxs)(DialogPortal, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogInternalContext.Provider, { value: { showCloseButton }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DialogPortal, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogOverlay, { className: overlayClassName }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "sofya-dialog-positioner fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         DialogPrimitive.Content,
@@ -2304,54 +2308,68 @@ var DialogContent = React13.forwardRef(
             className
           ),
           ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             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__ */ (0, import_jsx_runtime13.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "icon",
-                    "aria-label": "Close",
-                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: cn("flex w-full items-start justify-between gap-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex min-w-0 flex-1 flex-col gap-2 text-left", children }),
+        showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            "aria-label": "Close",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "x", size: 18 }),
+            className: "shrink-0 text-muted-foreground hover:text-foreground"
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function DialogBody({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      className: cn("flex flex-col gap-4", className),
+      ...props
+    }
+  );
 }
 function DialogFooter({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "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__ */ (0, import_jsx_runtime13.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { ref, type, variant, ...props }) })
+  ({ type = "button", variant = "ghost", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { ref, type, variant, ...props }) })
 );
 DialogCancel.displayName = "DialogCancel";
 var DialogTitle = React13.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -2363,7 +2381,7 @@ var DialogTitle = React13.forwardRef(({ children, className, ...props }, ref) =>
     children: renderTextContent(children, {
       as: "span",
       className: "block text-card-foreground",
-      size: "h4"
+      size: "h3"
     })
   }
 ));
@@ -2871,7 +2889,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",
@@ -2898,7 +2916,7 @@ var UploadInputControl = React15.forwardRef(function UploadInputControl2({
           resolvedDescription ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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
         ]
       }
@@ -2914,7 +2932,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__ */ (0, import_jsx_runtime16.jsxs)(Card, { variant: "panel", className: "flex items-center gap-4 p-4", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Card, { variant: "card", className: "flex items-center gap-4 p-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-[color:var(--sofya-surface-hover)] text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               UploadFileTypeGlyph,
               {
@@ -5182,6 +5200,7 @@ var import_tokens2 = require("@sofya-ds/tokens");
   CardTitle,
   Checkbox,
   Dialog,
+  DialogBody,
   DialogCancel,
   DialogClose,
   DialogContent,