@beemafrica/ui 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beemafrica/ui",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "description": "Shared Beem UI components built on shadcn/Radix",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -0,0 +1,44 @@
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
5
+
6
+ import { cn } from "@beemafrica/ui/lib/utils"
7
+
8
+ function RadioGroup({
9
+ className,
10
+ ...props
11
+ }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
12
+ return (
13
+ <RadioGroupPrimitive.Root
14
+ data-slot="radio-group"
15
+ className={cn("grid w-full gap-2", className)}
16
+ {...props}
17
+ />
18
+ )
19
+ }
20
+
21
+ function RadioGroupItem({
22
+ className,
23
+ ...props
24
+ }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
25
+ return (
26
+ <RadioGroupPrimitive.Item
27
+ data-slot="radio-group-item"
28
+ className={cn(
29
+ "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
30
+ className
31
+ )}
32
+ {...props}
33
+ >
34
+ <RadioGroupPrimitive.Indicator
35
+ data-slot="radio-group-indicator"
36
+ className="flex size-4 items-center justify-center"
37
+ >
38
+ <span className="absolute top-1/2 start-1/2 size-2 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
39
+ </RadioGroupPrimitive.Indicator>
40
+ </RadioGroupPrimitive.Item>
41
+ )
42
+ }
43
+
44
+ export { RadioGroup, RadioGroupItem }