@sofya-ds/react 1.3.0 → 1.3.1

package/dist/index.cjs

@@ -4545,29 +4545,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__ */ (0, import_jsx_runtime33.jsx)(
-    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__ */ (0, import_jsx_runtime33.jsx)(
-        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__ */ (0, import_jsx_runtime33.jsx)(
+      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__ */ (0, import_jsx_runtime33.jsx)(
+          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__ */ (0, import_jsx_runtime33.jsxs)(
+      "div",
+      {
+        "data-slot": "switch-container",
+        className: selectionControlContainerClasses({
+          alignClassName,
+          className: containerClassName,
+          disabled
+        }),
+        children: [
+          switchControl,
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
+            label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "span",
+              {
+                id: labelId,
+                className: cn(
+                  selectionControlLabelTextBaseClasses,
+                  labelClassName
+                ),
+                children: renderTextContent(label, {
+                  as: "span",
+                  className: "text-[color:var(--sofya-text-default)]",
+                  size: "body"
+                })
+              }
+            ) }) : null,
+            description ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "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

package/dist/index.d.cts

@@ -544,6 +544,11 @@ declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefA
 declare const switchSizeOptions: readonly ["default", "sm"];
 type SwitchSize = (typeof switchSizeOptions)[number];
 interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+    containerClassName?: string;
+    description?: React.ReactNode;
+    descriptionClassName?: string;
+    label?: React.ReactNode;
+    labelClassName?: string;
     size?: SwitchSize;
 }
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/index.d.ts

@@ -544,6 +544,11 @@ declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefA
 declare const switchSizeOptions: readonly ["default", "sm"];
 type SwitchSize = (typeof switchSizeOptions)[number];
 interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+    containerClassName?: string;
+    description?: React.ReactNode;
+    descriptionClassName?: string;
+    label?: React.ReactNode;
+    labelClassName?: string;
     size?: SwitchSize;
 }
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/index.js

@@ -4386,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",
@@ -4396,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
@@ -4672,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;
@@ -4702,7 +4780,7 @@ function Tabs({
       setUncontrolledCurrentValue(resolvedDefaultValue);
     }
   }, [resolvedDefaultValue, setUncontrolledCurrentValue, value]);
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     TabsPrimitive.Root,
     {
       className: cn("w-full", className),
@@ -4721,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,
@@ -4743,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",
                         {

package/package.json

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