@underverse-ui/underverse 1.0.206 → 1.0.208

package/api-reference.json

@@ -1,8 +1,8 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.206",
+  "version": "1.0.208",
   "sourceEntry": "src/index.ts",
-  "totalExports": 252,
+  "totalExports": 256,
   "exports": [
     {
       "name": "*",
@@ -1121,6 +1121,13 @@
       "reexport": true,
       "local": false
     },
+    {
+      "name": "RadioButtonGroup",
+      "kind": "value",
+      "source": "./components/RadioGroup",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "RadioGroup",
       "kind": "value",
@@ -1171,6 +1178,13 @@
       "local": false,
       "aliasOf": "default"
     },
+    {
+      "name": "SegmentedControl",
+      "kind": "value",
+      "source": "./components/RadioGroup",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "SelectDropdown",
       "kind": "value",
@@ -1241,6 +1255,13 @@
       "reexport": true,
       "local": false
     },
+    {
+      "name": "SimpleRadioGroup",
+      "kind": "value",
+      "source": "./components/RadioGroup",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "SimpleTabs",
       "kind": "value",
@@ -1491,6 +1512,13 @@
       "local": false,
       "aliasOf": "default"
     },
+    {
+      "name": "ToggleGroup",
+      "kind": "value",
+      "source": "./components/RadioGroup",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "Tooltip",
       "kind": "value",

package/dist/index.cjs

@@ -9390,17 +9390,20 @@ __export(src_exports, {
   Popover: () => Popover,
   Progress: () => Progress,
   PulseBadge: () => PulseBadge,
+  RadioButtonGroup: () => RadioButtonGroup,
   RadioGroup: () => RadioGroup,
   RadioGroupItem: () => RadioGroupItem,
   SIZE_STYLES_BTN: () => SIZE_STYLES_BTN,
   ScrollArea: () => ScrollArea,
   SearchInput: () => SearchInput,
   Section: () => Section_default,
+  SegmentedControl: () => SegmentedControl,
   SegmentedProgress: () => SegmentedProgress,
   SelectDropdown: () => SelectDropdown,
   Sheet: () => Sheet,
   SidebarSheet: () => SidebarSheet,
   SimplePagination: () => SimplePagination,
+  SimpleRadioGroup: () => SimpleRadioGroup,
   SimpleTabs: () => SimpleTabs,
   Skeleton: () => Skeleton_default,
   SkeletonAvatar: () => SkeletonAvatar,
@@ -9437,6 +9440,7 @@ __export(src_exports, {
   Timeline: () => Timeline_default,
   TimelineItem: () => TimelineItem,
   ToastProvider: () => Toast_default,
+  ToggleGroup: () => ToggleGroup,
   Tooltip: () => Tooltip,
   TranslationProvider: () => TranslationProvider,
   UEditor: () => UEditor_default,
@@ -25166,6 +25170,158 @@ var RadioGroupItem = React47.forwardRef(
   }
 );
 RadioGroupItem.displayName = "RadioGroupItem";
+var SimpleRadioGroup = ({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  disabled = false,
+  orientation = "vertical",
+  size = "md",
+  variant = "default",
+  borderMode,
+  className,
+  required = false,
+  error = false,
+  errorMessage
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    RadioGroup,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      name,
+      disabled,
+      orientation,
+      size,
+      variant,
+      borderMode,
+      className,
+      required,
+      error,
+      errorMessage,
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        RadioGroupItem,
+        {
+          value: item.value,
+          label: item.label,
+          description: item.description,
+          disabled: item.disabled,
+          icon: item.icon
+        },
+        item.value
+      ))
+    }
+  );
+};
+var RadioButtonGroup = ({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  disabled = false,
+  size = "md",
+  variant = "default",
+  borderMode,
+  className,
+  fullWidth = false
+}) => {
+  const globalConfig = useUnderverseUIConfig();
+  const resolvedBorderMode = borderMode ?? globalConfig.input?.borderMode ?? globalConfig.borderMode ?? "full";
+  const [internalValue, setInternalValue] = React47.useState(defaultValue || "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const handleValueChange = (newValue) => {
+    if (!disabled) {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    }
+  };
+  const sizeClasses2 = {
+    sm: "px-3 py-1.5 text-xs",
+    md: "px-4 py-2 text-sm",
+    lg: "px-6 py-3 text-base"
+  };
+  const variantClasses3 = {
+    default: {
+      container: "bg-muted p-1",
+      base: "bg-transparent hover:bg-background/50",
+      selected: "bg-background text-foreground shadow-sm"
+    },
+    outline: {
+      container: "border border-border/50 overflow-hidden",
+      base: "bg-background border-r border-border/50 hover:bg-accent",
+      selected: "bg-primary text-primary-foreground border-primary"
+    },
+    solid: {
+      container: "border border-border/50 overflow-hidden",
+      base: "bg-background hover:bg-accent",
+      selected: "bg-primary text-primary-foreground"
+    },
+    primary: {
+      container: "bg-muted py-1 px-2",
+      base: "bg-transparent hover:bg-background/50",
+      selected: "bg-primary text-primary-foreground shadow-sm"
+    }
+  };
+  const uniqueId = React47.useId();
+  const radioName = name || `radio-button-group-${uniqueId}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("inline-flex", variantClasses3[variant].container, getBorderRadiusClass(resolvedBorderMode), fullWidth && "w-full", className), role: "radiogroup", children: items.map((item, index) => {
+    const isSelected = currentValue === item.value;
+    const isDisabled = item.disabled || disabled;
+    const Icon = item.icon;
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      "button",
+      {
+        type: "button",
+        disabled: isDisabled,
+        role: "radio",
+        "aria-checked": isSelected,
+        className: cn(
+          "relative inline-flex items-center justify-center gap-2 font-medium transition-all duration-200",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          sizeClasses2[size],
+          isSelected ? variantClasses3[variant].selected : variantClasses3[variant].base,
+          variant === "outline" && !isLast && "border-r border-border/50",
+          variant === "default" && getBorderRadiusClass(resolvedBorderMode),
+          fullWidth && "flex-1"
+        ),
+        onClick: () => handleValueChange(item.value),
+        children: [
+          Icon && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { className: "w-4 h-4" }),
+          item.label,
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            "input",
+            {
+              type: "radio",
+              name: radioName,
+              value: item.value,
+              checked: isSelected,
+              onChange: () => {
+              },
+              className: "sr-only",
+              tabIndex: -1
+            }
+          )
+        ]
+      },
+      item.value
+    );
+  }) });
+};
+var SegmentedControl = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadioButtonGroup, { ...props, variant: "default" });
+};
+var ToggleGroup = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadioButtonGroup, { ...props, variant: "outline" });
+};
 
 // src/components/Slider.tsx
 var React48 = __toESM(require("react"), 1);
@@ -47697,17 +47853,20 @@ function getUnderverseMessages(locale = "en") {
   Popover,
   Progress,
   PulseBadge,
+  RadioButtonGroup,
   RadioGroup,
   RadioGroupItem,
   SIZE_STYLES_BTN,
   ScrollArea,
   SearchInput,
   Section,
+  SegmentedControl,
   SegmentedProgress,
   SelectDropdown,
   Sheet,
   SidebarSheet,
   SimplePagination,
+  SimpleRadioGroup,
   SimpleTabs,
   Skeleton,
   SkeletonAvatar,
@@ -47744,6 +47903,7 @@ function getUnderverseMessages(locale = "en") {
   Timeline,
   TimelineItem,
   ToastProvider,
+  ToggleGroup,
   Tooltip,
   TranslationProvider,
   UEditor,