@beemafrica/ui 0.1.0

package/src/components/ticket.tsx

@@ -0,0 +1,144 @@
+import { Avatar, AvatarFallback } from "@beem/ui/components/avatar"
+import { Button } from "@beem/ui/components/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@beem/ui/components/collapsible"
+import { cn } from "@beem/ui/lib/utils"
+import { ChevronRightIcon } 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[]
+}
+
+function Ticket({
+  user_initial,
+  type,
+  user_name,
+  message,
+  time,
+  history,
+}: TicketProps) {
+  let avatar_background = ""
+  let container_background = ""
+  let border = ""
+  let ticket_type = ""
+  let pill_background = ""
+  let pill_text_color = ""
+  switch (type) {
+    case "system":
+      avatar_background = "bg-[#B8C6D1]"
+      container_background = "bg-[#F7FAFC]"
+      border = "border-[#E3EAF0]"
+      ticket_type = "System"
+      pill_text_color = "text-[#364550]"
+      pill_background = "bg-[#EEF2F5]"
+      break
+    case "notes":
+      avatar_background = "bg-[#f3a929]"
+      container_background = "bg-[#FFFBEB]"
+      border = "border-[#FDE9B8]"
+      ticket_type = "Internal Note"
+      pill_text_color = "text-[#B45309]"
+      pill_background = "bg-[#FEF3C7]"
+      break
+    case "user":
+      avatar_background = "bg-[#6B7B8D]"
+      container_background = "bg-[#FFFFFF]"
+      border = "border-[#D5DEE6]"
+      ticket_type = "Customer Email"
+      pill_text_color = "text-[#1A6B72]"
+      pill_background = "bg-[#EAF8F9]"
+      break
+    default:
+      avatar_background = "bg-[#6b7b8d]"
+      container_background = "bg-[#FFFFFF]"
+      border = "border-[#D5DEE6]"
+      break
+  }
+  return (
+    <div
+      className={cn(
+        container_background,
+        border,
+        "py-[14px] px-[16px] rounded-[12px] border shadow-sm flex flex-col gap-3"
+      )}
+    >
+      <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
+              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>
+
+        {time && <p className="text-[#98A9B8] text-[11.5px]">{time} </p>}
+      </div>
+
+      {message && <p className="leading-snug">{message}</p>}
+      {history && history.length > 0 && (
+        <div className="border-t border-dashed">
+          <Collapsible>
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                className="group w-full hover:bg-transparent hover:text-inherit data-[state=open]:bg-transparent justify-start -ml-4"
+              >
+                <ChevronRightIcon className="group-data-[state=open]:rotate-90" />
+                Product details
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent className="flex flex-col items-start gap-2 p-2.5 pt-0 text-sm max-h-[150px] overflow-y-auto scrollbar scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full">
+              {history.map((hs, index) => {
+                return (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  <div key={index} className="">
+                    {" "}
+                    <div>{hs.label}</div>
+                    <div>{hs.value}</div>
+                  </div>
+                )
+              })}
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { Ticket }

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/styles/globals.css

@@ -0,0 +1,62 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+@source "../**/*.{ts,tsx}";
+
+@theme inline {
+  --font-heading: var(--beem-font-heading);
+  --font-sans: var(--beem-font-sans);
+  --font-mono: var(--beem-font-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--beem-font-sans);
+  }
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}

package/src/styles/tailwind-theme.css

@@ -0,0 +1,68 @@
+@theme inline {
+  --font-heading: var(--beem-font-heading);
+  --font-sans: var(--beem-font-sans);
+  --font-mono: var(--beem-font-mono);
+
+  /* Semantic / shadcn tokens (from semantic.css) */
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+
+  /* Brand primitives (from beem.css) → bg/text/border-brand-* */
+  --color-brand-primary: var(--beem-brand);
+  --color-brand-primary-foreground: var(--beem-brand-foreground);
+  --color-brand-light: var(--beem-brand-light);
+  --color-brand-muted: var(--beem-brand-muted);
+  --color-brand-ste: var(--beem-brand-ste);
+  --color-brand-secondary: var(--beem-brand-secondary);
+  --color-brand-secondary-foreground: var(--beem-secondary-brand-foreground);
+  --color-brand-accent: var(--beem-accent);
+  --color-brand-accent-foreground: var(--beem-accent-foreground);
+
+  /* Raw beem surfaces (optional direct access) */
+  --color-beem-brand: var(--beem-brand);
+  --color-beem-brand-light: var(--beem-brand-light);
+  --color-beem-brand-muted: var(--beem-brand-muted);
+  --color-beem-brand-ste: var(--beem-brand-ste);
+  --color-beem-secondary: var(--beem-secondary);
+  --color-beem-secondary-brand: var(--beem-secondary-brand);
+  --color-beem-accent: var(--beem-accent);
+  --color-beem-border: var(--beem-border);
+  --color-beem-ring: var(--beem-ring);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}

package/src/styles/theme/beem.css

@@ -0,0 +1,152 @@
+/**
+ * Beem brand theme — design system tokens.
+ *
+ * Brand:
+ *   Primary: #33B1BA
+ *   Yellow:  #F3A929
+ *   Font:    Inter
+ *
+ * Primitive tokens (--beem-*) are mapped to shadcn/Tailwind
+ * semantic tokens in semantic.css.
+ */
+
+:root {
+  /* Brand colors */
+  --beem-brand: #33b1ba;
+  --beem-brand-light: #eef6f7;
+  --beem-brand-foreground: #ffffff;
+  --beem-brand-secondary: #f3a929;
+  --beem-brand-ste: #eef2f5;
+
+
+  /* Lighter primary shade */
+  --beem-brand-muted: #d9f3f5;
+
+  /* Surfaces */
+  --beem-background: #ffffff;
+  --beem-foreground: #1f2937;
+
+  --beem-card: #ffffff;
+  --beem-card-foreground: #1f2937;
+
+  --beem-popover: #ffffff;
+  --beem-popover-foreground: #1f2937;
+
+  /* UI states */
+  --beem-secondary: #f4f7f8;
+  --beem-secondary-foreground: #374151;
+
+  --beem-muted: #eef2f5;
+  --beem-muted-foreground: #6b7280;
+
+  --beem-accent: #e6f7f8;
+  --beem-accent-foreground: #1f6f75;
+
+  /* Beem yellow */
+  --beem-secondary-brand: #f3a929;
+  --beem-secondary-brand-foreground: #1f2937;
+
+  /* Beem yellow / CTA */
+  --beem-destructive: #dc4a4a;
+
+  --beem-border: #d5dee6;
+  --beem-input: #e2e8ea;
+  --beem-ring: #33b1ba;
+
+  /* Sidebar */
+  --beem-sidebar: #f8fafa;
+  --beem-sidebar-foreground: #1f2937;
+
+  --beem-sidebar-primary: #33b1ba;
+  --beem-sidebar-primary-foreground: #ffffff;
+
+  --beem-sidebar-accent: #e6f7f8;
+  --beem-sidebar-accent-foreground: #1f6f75;
+
+  --beem-sidebar-border: #e2e8ea;
+  --beem-sidebar-ring: #33b1ba;
+
+  /* Charts */
+  --beem-chart-1: #33b1ba;
+  --beem-chart-2: #5fc2c9;
+  --beem-chart-3: #89d3d8;
+  --beem-chart-4: #b3e4e7;
+  --beem-chart-5: #d9f3f5;
+
+  /* Typography & shape */
+  --beem-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+  --beem-font-heading: Inter, ui-sans-serif, system-ui, sans-serif;
+  --beem-font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --beem-radius: 0.5rem;
+}
+
+/* Beem dark theme */
+.dark {
+  /* Brand */
+  --beem-brand: #5fc2c9;
+  --beem-brand-light: #164b50;
+  --beem-brand-foreground: #103b3e;
+  --beem-brand-secondary: #f3a929;
+  --beem-brand-ste: #223031;
+  --beem-brand-muted: #164b50;
+
+  /* Surfaces */
+  --beem-background: #11191a;
+  --beem-foreground: #f4fafa;
+
+  --beem-card: #182223;
+  --beem-card-foreground: #f4fafa;
+
+  --beem-popover: #182223;
+  --beem-popover-foreground: #f4fafa;
+
+  /* UI states */
+  --beem-secondary: #223031;
+  --beem-secondary-foreground: #f4fafa;
+
+  --beem-muted: #223031;
+  --beem-muted-foreground: #a9b9ba;
+
+  --beem-accent: #164b50;
+  --beem-accent-foreground: #e6f7f8;
+
+  --beem-secondary-brand: #f3a929;
+  --beem-secondary-brand-foreground: #ffffff;
+
+  /* States */
+  --beem-destructive: #f06a6a;
+
+  --beem-border: rgba(255, 255, 255, 0.12);
+  --beem-input: rgba(255, 255, 255, 0.16);
+  --beem-ring: #5fc2c9;
+
+  /* Sidebar */
+  --beem-sidebar: #182223;
+  --beem-sidebar-foreground: #f4fafa;
+
+  --beem-sidebar-primary: #5fc2c9;
+  --beem-sidebar-primary-foreground: #103b3e;
+
+  --beem-sidebar-accent: #223031;
+  --beem-sidebar-accent-foreground: #f4fafa;
+
+  --beem-sidebar-border: rgba(255, 255, 255, 0.12);
+  --beem-sidebar-ring: #5fc2c9;
+
+  /* Charts */
+  --beem-chart-1: #5fc2c9;
+  --beem-chart-2: #7ccdd2;
+  --beem-chart-3: #99d9dd;
+  --beem-chart-4: #b6e5e8;
+  --beem-chart-5: #d3f1f2;
+
+  /* Typography */
+  --beem-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+  --beem-font-heading: Inter, ui-sans-serif, system-ui, sans-serif;
+  --beem-font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --beem-radius: 0.5rem;
+}

package/src/styles/theme/semantic.css

@@ -0,0 +1,75 @@
+/**
+ * Maps Beem brand tokens → shadcn semantic CSS variables.
+ * You usually don't need to edit this file — change theme/beem.css instead.
+ */
+
+:root {
+  --background: var(--beem-background);
+  --foreground: var(--beem-foreground);
+  --card: var(--beem-card);
+  --card-foreground: var(--beem-card-foreground);
+  --popover: var(--beem-popover);
+  --popover-foreground: var(--beem-popover-foreground);
+  --primary: var(--beem-brand);
+  --brand-light: var(--beem-brand-light);
+  --primary-foreground: var(--beem-brand-foreground);
+  --secondary: var(--beem-brand-secondary);
+  --secondary-foreground: var(--beem-secondary-foreground);
+  --muted: var(--beem-muted);
+  --muted-foreground: var(--beem-muted-foreground);
+  --accent: var(--beem-accent);
+  --accent-foreground: var(--beem-accent-foreground);
+  --destructive: var(--beem-destructive);
+  --border: var(--beem-border);
+  --input: var(--beem-input);
+  --ring: var(--beem-ring);
+  --chart-1: var(--beem-chart-1);
+  --chart-2: var(--beem-chart-2);
+  --chart-3: var(--beem-chart-3);
+  --chart-4: var(--beem-chart-4);
+  --chart-5: var(--beem-chart-5);
+  --radius: var(--beem-radius);
+  --sidebar: var(--beem-sidebar);
+  --sidebar-foreground: var(--beem-sidebar-foreground);
+  --sidebar-primary: var(--beem-sidebar-primary);
+  --sidebar-primary-foreground: var(--beem-sidebar-primary-foreground);
+  --sidebar-accent: var(--beem-sidebar-accent);
+  --sidebar-accent-foreground: var(--beem-sidebar-accent-foreground);
+  --sidebar-border: var(--beem-sidebar-border);
+  --sidebar-ring: var(--beem-sidebar-ring);
+}
+
+.dark {
+  --background: var(--beem-background);
+  --foreground: var(--beem-foreground);
+  --card: var(--beem-card);
+  --card-foreground: var(--beem-card-foreground);
+  --popover: var(--beem-popover);
+  --popover-foreground: var(--beem-popover-foreground);
+  --primary: var(--beem-brand);
+  --brand-light: var(--beem-brand-light);
+  --primary-foreground: var(--beem-brand-foreground);
+  --secondary: var(--beem-secondary);
+  --secondary-foreground: var(--beem-secondary-foreground);
+  --muted: var(--beem-muted);
+  --muted-foreground: var(--beem-muted-foreground);
+  --accent: var(--beem-accent);
+  --accent-foreground: var(--beem-accent-foreground);
+  --destructive: var(--beem-destructive);
+  --border: var(--beem-border);
+  --input: var(--beem-input);
+  --ring: var(--beem-ring);
+  --chart-1: var(--beem-chart-1);
+  --chart-2: var(--beem-chart-2);
+  --chart-3: var(--beem-chart-3);
+  --chart-4: var(--beem-chart-4);
+  --chart-5: var(--beem-chart-5);
+  --sidebar: var(--beem-sidebar);
+  --sidebar-foreground: var(--beem-sidebar-foreground);
+  --sidebar-primary: var(--beem-sidebar-primary);
+  --sidebar-primary-foreground: var(--beem-sidebar-primary-foreground);
+  --sidebar-accent: var(--beem-sidebar-accent);
+  --sidebar-accent-foreground: var(--beem-sidebar-accent-foreground);
+  --sidebar-border: var(--beem-sidebar-border);
+  --sidebar-ring: var(--beem-sidebar-ring);
+}