@sofya-ds/react 1.1.15 → 1.2.0

package/dist/index.cjs

@@ -133,6 +133,7 @@ __export(index_exports, {
   TooltipContent: () => TooltipContent,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
+  accordionAppearanceOptions: () => accordionAppearanceOptions,
   alertSizeOptions: () => alertSizeOptions,
   alertToneOptions: () => alertToneOptions,
   avatarSizeOptions: () => avatarSizeOptions,
@@ -181,6 +182,7 @@ __export(index_exports, {
   sofyaSurfaceNames: () => import_tokens2.sofyaSurfaceNames,
   sofyaTextStyleNames: () => import_tokens2.sofyaTextStyleNames,
   spinnerSizeOptions: () => spinnerSizeOptions,
+  switchSizeOptions: () => switchSizeOptions,
   tableActionToneOptions: () => tableActionToneOptions,
   tableCellVariantOptions: () => tableCellVariantOptions,
   tableStatusToneOptions: () => tableStatusToneOptions,
@@ -340,6 +342,8 @@ var tablerIconRegistry = {
   IconTrashOff: import_icons_react.IconTrashOff,
   IconTrashX: import_icons_react.IconTrashX,
   IconChevronRight: import_icons_react.IconChevronRight,
+  IconLogout: import_icons_react.IconLogout,
+  IconSettings: import_icons_react.IconSettings,
   IconX: import_icons_react.IconX
 };
 var tablerIconNames = Object.keys(tablerIconRegistry).sort(
@@ -383,6 +387,7 @@ var legacyIconToTablerNameMap = {
   "caret-up": "IconChevronUp",
   "caret-left": "IconChevronLeft",
   "caret-right": "IconChevronRight",
+  "logout": "IconLogout",
   "users-group": "IconUsersGroup",
   "archive": "IconArchive",
   "folder": "IconFolder",
@@ -392,7 +397,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(
@@ -753,67 +759,154 @@ function renderTextContent(children, { as, className, size = "body", style, vari
 
 // src/components/accordion.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-  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__ */ (0, import_jsx_runtime4.jsx)(AccordionAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  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__ */ (0, import_jsx_runtime4.jsx)(
+    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__ */ (0, import_jsx_runtime4.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)(
-        "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__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "caret-down", size: 12 });
+    const shouldRenderIndicator = !resolvedHideIndicator && indicatorNode != null;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      AccordionPrimitive.Header,
+      {
+        "data-appearance": appearance === "card" ? appearance : void 0,
+        className: cn("flex", appearance === "card" && "w-full"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          AccordionPrimitive.Trigger,
+          {
+            ref,
+            "data-appearance": appearance === "card" ? appearance : void 0,
+            className: cn(accordionTriggerClasses[appearance], className),
+            ...props,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: cn("min-w-0 flex-1", leading && "flex items-center gap-4"), children: [
+                leading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex shrink-0 items-center justify-center", children: leading }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+                "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__ */ (0, import_jsx_runtime4.jsx)(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      "data-appearance": appearance === "card" ? appearance : void 0,
+      className: cn(accordionContentClasses[appearance], className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)(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__ */ (0, import_jsx_runtime4.jsx)(
-  AccordionPrimitive.Content,
-  {
-    ref,
-    className: cn("sofya-accordion-content overflow-hidden text-sm text-muted-foreground", className),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("pb-4 pr-10", contentClassName), children: renderTextContent(children, {
-      className: "text-muted-foreground"
-    }) })
-  }
-));
+    }
+  );
+});
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 // src/components/alert.tsx
@@ -4384,12 +4477,22 @@ Spinner.displayName = "Spinner";
 var React31 = __toESM(require("react"), 1);
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
 var import_jsx_runtime33 = require("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__ */ (0, import_jsx_runtime33.jsx)(
     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,
@@ -4397,7 +4500,10 @@ var Switch = React31.forwardRef(({ className, ...props }, ref) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         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]
+          )
         }
       )
     }
@@ -5021,6 +5127,7 @@ var import_tokens2 = require("@sofya-ds/tokens");
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  accordionAppearanceOptions,
   alertSizeOptions,
   alertToneOptions,
   avatarSizeOptions,
@@ -5069,6 +5176,7 @@ var import_tokens2 = require("@sofya-ds/tokens");
   sofyaSurfaceNames,
   sofyaTextStyleNames,
   spinnerSizeOptions,
+  switchSizeOptions,
   tableActionToneOptions,
   tableCellVariantOptions,
   tableStatusToneOptions,