@beemafrica/ui 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beemafrica/ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Shared Beem UI components built on shadcn/Radix",
   "type": "module",
   "publishConfig": {

package/src/components/badge.tsx

@@ -1,8 +1,7 @@
-import * as React from "react"
+import { cn } from "@beemafrica/ui/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
-
-import { cn } from "@beemafrica/ui/lib/utils"
+import type * as React from "react"
 
 const badgeVariants = cva(
   "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",

package/src/components/command.tsx

@@ -1,9 +1,5 @@
 "use client"
 
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-
-import { cn } from "@beemafrica/ui/lib/utils"
 import {
   Dialog,
   DialogContent,
@@ -15,7 +11,11 @@ import {
   InputGroup,
   InputGroupAddon,
 } from "@beemafrica/ui/components/input-group"
-import { SearchIcon, CheckIcon } from "lucide-react"
+
+import { cn } from "@beemafrica/ui/lib/utils"
+import { Command as CommandPrimitive } from "cmdk"
+import { CheckIcon, SearchIcon } from "lucide-react"
+import type * as React from "react"
 
 function Command({
   className,
@@ -185,11 +185,11 @@ function CommandShortcut({
 export {
   Command,
   CommandDialog,
-  CommandInput,
-  CommandList,
   CommandEmpty,
   CommandGroup,
+  CommandInput,
   CommandItem,
-  CommandShortcut,
+  CommandList,
   CommandSeparator,
+  CommandShortcut,
 }

package/src/components/input-group.tsx

@@ -1,12 +1,11 @@
 "use client"
 
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@beemafrica/ui/lib/utils"
 import { Button } from "@beemafrica/ui/components/button"
 import { Input } from "@beemafrica/ui/components/input"
 import { Textarea } from "@beemafrica/ui/components/textarea"
+import { cn } from "@beemafrica/ui/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+import type * as React from "react"
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -150,7 +149,7 @@ export {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
-  InputGroupText,
   InputGroupInput,
+  InputGroupText,
   InputGroupTextarea,
 }

package/src/components/radio-group.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import * as React from "react"
-import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
-
 import { cn } from "@beemafrica/ui/lib/utils"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+import type * as React from "react"
 
 function RadioGroup({
   className,

package/src/components/switch.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@beemafrica/ui/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ticket.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Avatar, AvatarFallback } from "@beemafrica/ui/components/avatar"
 import { Button } from "@beemafrica/ui/components/button"
 import {
@@ -6,20 +8,20 @@ import {
   CollapsibleTrigger,
 } from "@beemafrica/ui/components/collapsible"
 import { cn } from "@beemafrica/ui/lib/utils"
-import { ChevronRightIcon } from "lucide-react"
+import { ChevronRightIcon, ExternalLink } from "lucide-react"
 
 interface History {
   label: string
   value: string
 }
 interface TicketProps {
-  key: number
   user_initial?: string
   user_name?: string
   message?: string
   time?: string
   type?: string
   history?: History[]
+  click: () => void
 }
 
 function Ticket({
@@ -29,6 +31,7 @@ function Ticket({
   message,
   time,
   history,
+  click,
 }: TicketProps) {
   let avatar_background = ""
   let container_background = ""
@@ -72,42 +75,45 @@ function Ticket({
       className={cn(
         container_background,
         border,
-        "py-[14px] px-[16px] rounded-[12px] border shadow-sm flex flex-col gap-3"
+        "py-[14px] px-[16px] rounded-[12px] border shadow-sm flex flex-col gap-3 cursor-pointer"
       )}
     >
-      <div className="flex flex-row items-center justify-between">
-        <div className="flex flex-row gap-1.5 items-center">
-          <Avatar
-            className={cn(
-              avatar_background,
-              "inline-flex size-[30px] select-none items-center justify-center overflow-hidden rounded-full align-middle"
-            )}
-          >
-            <AvatarFallback
+      <button type="button" onClick={click} className="w-full text-left">
+        <div className="flex flex-row items-center justify-between">
+          <div className="flex flex-row gap-1.5 items-center">
+            <Avatar
               className={cn(
                 avatar_background,
-                "leading-1 flex size-full items-center justify-center text-[12px] text-white font-semibold"
+                "inline-flex size-[30px] select-none items-center justify-center overflow-hidden rounded-full align-middle"
               )}
-              delayMs={600}
             >
-              <p>{user_initial ?? "N/A"}</p>
-            </AvatarFallback>
-          </Avatar>
+              <AvatarFallback
+                className={cn(
+                  avatar_background,
+                  "leading-1 flex size-full items-center justify-center text-[12px] text-white font-semibold"
+                )}
+                delayMs={600}
+              >
+                <p>{user_initial ?? "N/A"}</p>
+              </AvatarFallback>
+            </Avatar>
 
-          {user_name && <p className="font-bold text-black">{user_name}</p>}
-          <p
-            className={cn(
-              pill_background,
-              pill_text_color,
-              "py-[3px] px-[10px] rounded-[9999px] text-xs"
-            )}
-          >
-            {ticket_type}
-          </p>
-        </div>
+            {user_name && <p className="font-bold text-black">{user_name}</p>}
+            <p
+              className={cn(
+                pill_background,
+                pill_text_color,
+                "py-[3px] px-[10px] rounded-[9999px] text-xs"
+              )}
+            >
+              {ticket_type}
+            </p>
+            <ExternalLink size="12px" className="text-[#6B7B8D]" />
+          </div>
 
-        {time && <p className="text-[#98A9B8] text-[11.5px]">{time} </p>}
-      </div>
+          {time && <p className="text-[#98A9B8] text-[11.5px]">{time} </p>}
+        </div>
+      </button>
 
       {message && <p className="leading-snug">{message}</p>}
       {history && history.length > 0 && (