@stackshift-ui/radio-group 6.0.11 → 7.0.0-beta.1

package/dist/chunk-VF5HEQDQ.mjs

@@ -0,0 +1 @@
+import*as o from"@radix-ui/react-radio-group";import{Circle as f}from"lucide-react";import*as m from"react";import{cn as n,DefaultComponent as s,useStackShiftUIComponents as p}from"@stackshift-ui/system";import{jsx as e}from"react/jsx-runtime";var c="RadioGroup",d="RadioGroupItem",u=m.forwardRef(({className:i,...t},r)=>{let{[c]:a=s}=p();return e(a,{as:o.Root,className:n("grid gap-2",i),...t,ref:r})});u.displayName=c;var R=m.forwardRef(({className:i,...t},r)=>{let{[d]:a=s}=p();return e(a,{as:o.Item,ref:r,className:n("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",i),...t,children:e(o.Indicator,{className:"flex items-center justify-center",children:e(f,{className:"h-2.5 w-2.5 fill-current text-current"})})})});R.displayName=d;export{u as a,R as b};

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var x=Object.create;var r=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var P=(t,a)=>{for(var e in a)r(t,e,{get:a[e],enumerable:!0})},d=(t,a,e,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of b(a))!L.call(t,n)&&n!==e&&r(t,n,{get:()=>a[n],enumerable:!(s=V(a,n))||s.enumerable});return t};var S=(t,a,e)=>(e=t!=null?x(G(t)):{},d(a||!t||!t.__esModule?r(e,"default",{value:t,enumerable:!0}):e,t)),E=t=>d(r({},"__esModule",{value:!0}),t);var H={};P(H,{RadioGroup:()=>f});module.exports=E(H);var i=require("@stackshift-ui/system"),y=S(require("classnames")),o=require("react/jsx-runtime"),p="RadioGroup",f=({variant:t="primary",label:a,name:e,labelClass:s,noLabel:n=!1,children:C,className:R,as:g,...u})=>{var c;let{[p]:N=i.DefaultComponent}=(0,i.useStackShiftUIComponents)(),l="ml-2",m=`${l}`,T=`${l} flex items-center gap-2`,v=(c={primary:m,inline:T}[t])!=null?c:m;return(0,o.jsxs)("div",{children:[!n&&(0,o.jsx)("p",{className:s,children:a||e}),(0,o.jsx)(N,{as:g,className:(0,y.default)(v,R),...u,"data-testid":p,children:C})]})};f.displayName=p;0&&(module.exports={RadioGroup});
+"use strict";var v=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(o,e)=>{for(var t in e)s(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let m of P(e))!b.call(o,m)&&m!==t&&s(o,m,{get:()=>e[m],enumerable:!(r=y(e,m))||r.enumerable});return o};var f=(o,e,t)=>(t=o!=null?v(I(o)):{},c(e||!o||!o.__esModule?s(t,"default",{value:o,enumerable:!0}):t,o)),C=o=>c(s({},"__esModule",{value:!0}),o);var N={};g(N,{RadioGroup:()=>l,RadioGroupItem:()=>G});module.exports=C(N);var a=f(require("@radix-ui/react-radio-group")),u=require("lucide-react"),p=f(require("react")),i=require("@stackshift-ui/system"),n=require("react/jsx-runtime"),d="RadioGroup",R="RadioGroupItem",l=p.forwardRef(({className:o,...e},t)=>{let{[d]:r=i.DefaultComponent}=(0,i.useStackShiftUIComponents)();return(0,n.jsx)(r,{as:a.Root,className:(0,i.cn)("grid gap-2",o),...e,ref:t})});l.displayName=d;var G=p.forwardRef(({className:o,...e},t)=>{let{[R]:r=i.DefaultComponent}=(0,i.useStackShiftUIComponents)();return(0,n.jsx)(r,{as:a.Item,ref:t,className:(0,i.cn)("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",o),...e,children:(0,n.jsx)(a.Indicator,{className:"flex items-center justify-center",children:(0,n.jsx)(u.Circle,{className:"h-2.5 w-2.5 fill-current text-current"})})})});G.displayName=R;0&&(module.exports={RadioGroup,RadioGroupItem});

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a as e}from"./chunk-4DUYAL2R.mjs";export{e as RadioGroup};
+"use strict";import{a as e,b as o}from"./chunk-VF5HEQDQ.mjs";export{e as RadioGroup,o as RadioGroupItem};

package/dist/radio-group.d.ts

@@ -1,14 +1,5 @@
-import type { ElementType, HTMLProps, ReactNode } from "react";
-type Variant = "primary" | "inline";
-export interface RadioGroupProps extends Omit<HTMLProps<HTMLElement>, "as"> {
-    variant?: Variant;
-    label?: string;
-    name: string;
-    labelClass?: string;
-    noLabel?: boolean;
-    children?: ReactNode;
-    className?: string;
-    as?: ElementType;
-}
-export declare const RadioGroup: React.FC<RadioGroupProps>;
-export {};
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { RadioGroup, RadioGroupItem };

package/dist/radio-group.js

@@ -1 +1,2 @@
-"use strict";var V=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var P=(a,t)=>{for(var e in t)r(a,e,{get:t[e],enumerable:!0})},d=(a,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of x(t))!L.call(a,n)&&n!==e&&r(a,n,{get:()=>t[n],enumerable:!(o=b(t,n))||o.enumerable});return a};var S=(a,t,e)=>(e=a!=null?V(G(a)):{},d(t||!a||!a.__esModule?r(e,"default",{value:a,enumerable:!0}):e,a)),E=a=>d(r({},"__esModule",{value:!0}),a);var H={};P(H,{RadioGroup:()=>f});module.exports=E(H);var i=require("@stackshift-ui/system"),y=S(require("classnames")),s=require("react/jsx-runtime"),p="RadioGroup",f=({variant:a="primary",label:t,name:e,labelClass:o,noLabel:n=!1,children:C,className:R,as:g,...N})=>{var c;let{[p]:T=i.DefaultComponent}=(0,i.useStackShiftUIComponents)(),l="ml-2",m=`${l}`,u=`${l} flex items-center gap-2`,v=(c={primary:m,inline:u}[a])!=null?c:m;return(0,s.jsxs)("div",{children:[!n&&(0,s.jsx)("p",{className:o,children:t||e}),(0,s.jsx)(T,{as:g,className:(0,y.default)(v,R),...N,"data-testid":p,children:C})]})};f.displayName=p;0&&(module.exports={RadioGroup});
+"use client";
+"use strict";var v=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(o,e)=>{for(var i in e)s(o,i,{get:e[i],enumerable:!0})},c=(o,e,i,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let m of P(e))!b.call(o,m)&&m!==i&&s(o,m,{get:()=>e[m],enumerable:!(r=y(e,m))||r.enumerable});return o};var d=(o,e,i)=>(i=o!=null?v(I(o)):{},c(e||!o||!o.__esModule?s(i,"default",{value:o,enumerable:!0}):i,o)),C=o=>c(s({},"__esModule",{value:!0}),o);var N={};g(N,{RadioGroup:()=>l,RadioGroupItem:()=>G});module.exports=C(N);var a=d(require("@radix-ui/react-radio-group")),f=require("lucide-react"),p=d(require("react")),t=require("@stackshift-ui/system"),n=require("react/jsx-runtime"),u="RadioGroup",R="RadioGroupItem",l=p.forwardRef(({className:o,...e},i)=>{let{[u]:r=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,n.jsx)(r,{as:a.Root,className:(0,t.cn)("grid gap-2",o),...e,ref:i})});l.displayName=u;var G=p.forwardRef(({className:o,...e},i)=>{let{[R]:r=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,n.jsx)(r,{as:a.Item,ref:i,className:(0,t.cn)("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",o),...e,children:(0,n.jsx)(a.Indicator,{className:"flex items-center justify-center",children:(0,n.jsx)(f.Circle,{className:"h-2.5 w-2.5 fill-current text-current"})})})});G.displayName=R;0&&(module.exports={RadioGroup,RadioGroupItem});

package/dist/radio-group.mjs

@@ -1 +1,2 @@
-import{a}from"./chunk-4DUYAL2R.mjs";export{a as RadioGroup};
+"use client";
+"use strict";import{a,b}from"./chunk-VF5HEQDQ.mjs";export{a as RadioGroup,b as RadioGroupItem};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/radio-group",
   "description": "",
-  "version": "6.0.11",
+  "version": "7.0.0-beta.1",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,20 +29,22 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.10",
-    "@stackshift-ui/eslint-config": "6.0.10"
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
   },
   "dependencies": {
+    "@radix-ui/react-radio-group": "^1.3.7",
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.10",
-    "@stackshift-ui/system": "6.0.11"
+    "lucide-react": "^0.468.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.1"
   },
   "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.1",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
-    "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11"
+    "react-dom": "16.8 - 19"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/radio-group.test.tsx

@@ -7,7 +7,10 @@ describe.concurrent("radio-group", () => {
 
   test("Common: Radio Group - test if renders without errors", ({ expect }) => {
     const clx = "radiogroup-class";
-    render(<RadioGroup className={clx} name="stackshift-radiogroup" />);
-    expect(screen.getByTestId("div").classList).toContain(clx);
+    const { unmount } = render(
+      <RadioGroup data-testid="radio-group" className={clx} name="stackshift-radiogroup" />,
+    );
+    expect(screen.getByTestId("radio-group").classList).toContain(clx);
+    unmount();
   });
 });

package/src/radio-group.tsx

@@ -1,59 +1,52 @@
-import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
-import type { ElementType, HTMLProps, ReactNode } from "react";
-import cn from "classnames";
-
-type StyleVariants<T extends string> = Record<T, string>;
-type Variant = "primary" | "inline";
-
-export interface RadioGroupProps extends Omit<HTMLProps<HTMLElement>, "as"> {
-  variant?: Variant;
-  label?: string;
-  name: string;
-  labelClass?: string;
-  noLabel?: boolean;
-  children?: ReactNode;
-  className?: string;
-  as?: ElementType;
-}
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import * as React from "react";
+
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
 
 const displayName = "RadioGroup";
+const displayNameItem = "RadioGroupItem";
 
-export const RadioGroup: React.FC<RadioGroupProps> = ({
-  variant = "primary",
-  label,
-  name,
-  labelClass,
-  noLabel = false,
-  children,
-  className,
-  as,
-  ...props
-}) => {
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
   const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  const commonClass = "ml-2";
-  const primary = `${commonClass}`;
-  const inline = `${commonClass} flex items-center gap-2`;
-
-  const variants: StyleVariants<Variant> = {
-    primary,
-    inline,
-  };
+  return (
+    <Component
+      as={RadioGroupPrimitive.Root}
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = displayName;
 
-  const variantClass = variants[variant] ?? primary;
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  const { [displayNameItem]: Component = DefaultComponent } = useStackShiftUIComponents();
 
   return (
-    <div>
-      {!noLabel && <p className={labelClass}>{label || name}</p>}
-      <Component
-        as={as}
-        className={cn(variantClass, className)}
-        {...props}
-        data-testid={displayName}>
-        {children}
-      </Component>
-    </div>
+    <Component
+      as={RadioGroupPrimitive.Item}
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}>
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </Component>
   );
-};
+});
+RadioGroupItem.displayName = displayNameItem;
 
-RadioGroup.displayName = displayName;
+export { RadioGroup, RadioGroupItem };

package/dist/chunk-4DUYAL2R.mjs

@@ -1 +0,0 @@
-import{DefaultComponent as g,useStackShiftUIComponents as N}from"@stackshift-ui/system";import T from"classnames";import{jsx as s,jsxs as v}from"react/jsx-runtime";var a="RadioGroup",u=({variant:o="primary",label:r,name:i,labelClass:p,noLabel:l=!1,children:m,className:c,as:d,...y})=>{var n;let{[a]:f=g}=N(),t="ml-2",e=`${t}`,C=`${t} flex items-center gap-2`,R=(n={primary:e,inline:C}[o])!=null?n:e;return v("div",{children:[!l&&s("p",{className:p,children:r||i}),s(f,{as:d,className:T(R,c),...y,"data-testid":a,children:m})]})};u.displayName=a;export{u as a};