@gunjo/ui 0.0.1-alpha.0

package/src/components/atoms/Spinner.tsx

@@ -0,0 +1,34 @@
+import { ComponentProps } from "react"
+import { RefreshCw } from "lucide-react"
+import { cn } from "../../lib/utils"
+import type { SpinnerVariantKey } from "./generated/variant-keys"
+import { spinnerDefaultVariantKey } from "./generated/default-variant-keys"
+
+type SpinnerSize = SpinnerVariantKey | "icon"
+
+const spinnerSizeClasses: Record<SpinnerVariantKey, string> = {
+    default: "h-4 w-4",
+    lg: "h-6 w-6",
+    sm: "h-3 w-3",
+}
+
+function isSpinnerVariantKey(size: SpinnerSize): size is SpinnerVariantKey {
+    return Object.prototype.hasOwnProperty.call(spinnerSizeClasses, size)
+}
+
+export interface SpinnerProps extends ComponentProps<"svg"> {
+    size?: SpinnerSize
+}
+
+export function Spinner({ className, size = spinnerDefaultVariantKey, ...props }: SpinnerProps) {
+    return (
+        <RefreshCw
+            className={cn(
+                "animate-spin text-muted-foreground",
+                isSpinnerVariantKey(size) ? spinnerSizeClasses[size] : "h-10 w-10",
+                className
+            )}
+            {...props}
+        />
+    )
+}

package/src/components/atoms/Switch.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import type { SwitchVariantKey } from "./generated/variant-keys"
+import { switchDefaultVariantKey } from "./generated/default-variant-keys"
+
+const switchStateClasses: Record<SwitchVariantKey, string> = {
+    checked: "justify-end bg-foreground",
+    unchecked: "justify-start bg-secondary",
+}
+
+export interface SwitchProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    checked?: boolean
+    onCheckedChange?: (checked: boolean) => void
+}
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+    ({ className, checked, onCheckedChange, ...props }, ref) => {
+        const switchState: SwitchVariantKey = checked ? "checked" : switchDefaultVariantKey
+
+        return (
+            <button
+                type="button"
+                role="switch"
+                aria-checked={checked}
+                onClick={() => onCheckedChange?.(!checked)}
+                className={cn(
+                    "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent p-0.5 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    switchStateClasses[switchState],
+                    className
+                )}
+                ref={ref}
+                {...props}
+            >
+                <span
+                    className={cn(
+                        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-sm ring-0 transition-transform"
+                    )}
+                />
+            </button>
+        )
+    }
+)
+Switch.displayName = "Switch"
+
+export { Switch }

package/src/components/atoms/Textarea.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import type { TextareaVariantKey } from "./generated/variant-keys"
+import { textareaDefaultVariantKey } from "./generated/default-variant-keys"
+
+const textareaVariantClasses: Record<TextareaVariantKey, string> = {
+    default: "placeholder:text-muted-foreground",
+    disabled:
+        "placeholder:text-muted-foreground disabled:bg-muted disabled:text-muted-foreground disabled:opacity-50",
+}
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, disabled, ...props }, ref) => {
+        const textareaState: TextareaVariantKey = disabled ? "disabled" : textareaDefaultVariantKey
+
+        return (
+            <textarea
+                className={cn(
+                    "inline-flex h-20 w-[280px] max-w-full items-center rounded-lg border border-input bg-transparent px-3 py-2 text-sm font-normal shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed",
+                    textareaVariantClasses[textareaState],
+                    className
+                )}
+                ref={ref}
+                disabled={disabled}
+                {...props}
+            />
+        )
+    }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/components/atoms/ToggleGroup.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+
+import { cn } from "../../lib/utils"
+import type { ToggleGroupVariantKey } from "./generated/variant-keys"
+import { toggleGroupDefaultVariantKey } from "./generated/default-variant-keys"
+
+const toggleGroupVariantClasses: Record<ToggleGroupVariantKey, string> = {
+    default: "bg-secondary text-foreground hover:bg-secondary/80",
+    outline: "border border-input bg-transparent text-foreground hover:bg-muted",
+}
+
+const ToggleGroup = React.forwardRef<
+    React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+    <ToggleGroupPrimitive.Root
+        ref={ref}
+        className={cn("flex items-center justify-center gap-1", className)}
+        {...props}
+    >
+        {children}
+    </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+    React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & {
+        variant?: ToggleGroupVariantKey
+        size?: "default" | "sm" | "lg"
+    }
+>(({ className, children, variant, size = "default", ...props }, ref) => {
+    const resolvedVariant = variant ?? toggleGroupDefaultVariantKey
+
+    return (
+        <ToggleGroupPrimitive.Item
+            ref={ref}
+            className={cn(
+                "inline-flex w-fit items-center justify-center rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-foreground data-[state=on]:text-primary-foreground",
+                // Size variants
+                size === "default" && "h-9 py-0 px-3",
+                size === "sm" && "h-8 px-2",
+                size === "lg" && "h-10 px-3",
+                toggleGroupVariantClasses[resolvedVariant],
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </ToggleGroupPrimitive.Item>
+    )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/atoms/ToolPill.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+import { LucideIcon } from 'lucide-react';
+import type { ToolPillVariantKey } from "./generated/variant-keys";
+import { toolPillDefaultVariantKey } from "./generated/default-variant-keys";
+
+interface ToolPillProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: LucideIcon;
+    label?: string;
+    isActive?: boolean;
+    variant?: ToolPillVariantKey;
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export const ToolPill: React.FC<ToolPillProps> = ({
+    icon: Icon,
+    label,
+    isActive,
+    variant = toolPillDefaultVariantKey,
+    size = 'md',
+    className,
+    ...props
+}) => {
+    const sizeClasses = {
+        sm: 'p-1.5',
+        md: 'p-2.5',
+        lg: 'p-3.5',
+    };
+
+    const iconSizes = {
+        sm: 14,
+        md: 18,
+        lg: 22,
+    };
+
+    const variantClasses: Record<ToolPillVariantKey, { inactive: string; active: string }> = {
+        primary: {
+            inactive: "bg-primary/10 text-primary hover:bg-primary/20 hover:shadow-md hover:-translate-y-0.5",
+            active: "bg-primary text-primary-foreground shadow-lg shadow-primary/30 ring-2 ring-primary/20",
+        },
+        secondary: {
+            inactive: "bg-background/70 text-muted-foreground hover:bg-background hover:shadow-md hover:-translate-y-0.5",
+            active: "bg-secondary text-secondary-foreground shadow-lg shadow-foreground/10 ring-2 ring-border",
+        },
+        danger: {
+            inactive: "bg-destructive/10 text-destructive hover:bg-destructive/20 hover:shadow-md hover:-translate-y-0.5",
+            active: "bg-destructive text-destructive-foreground shadow-lg shadow-destructive/30 ring-2 ring-destructive/20",
+        },
+    };
+
+    return (
+        <button
+            type="button"
+            className={cn(
+                "group relative flex h-10 w-10 items-center justify-center rounded-xl transition-all duration-200",
+                isActive ? variantClasses[variant].active : variantClasses[variant].inactive,
+
+                sizeClasses[size],
+                className
+            )}
+            {...props}
+        >
+            <Icon size={iconSizes[size]} strokeWidth={isActive ? 2.5 : 2} />
+
+            {label && (
+                <span className="sr-only">{label}</span>
+            )}
+
+            {/* Tooltip on Hover */}
+            {label && (
+                <div className="absolute left-full ml-2 px-2 py-1 bg-foreground text-background text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-50">
+                    {label}
+                </div>
+            )}
+        </button>
+    );
+};

package/src/components/atoms/generated/default-variant-keys.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+import type { AlertVariantKey, AvatarVariantKey, BadgeVariantKey, ButtonVariantKey, CheckboxVariantKey, ImgVariantKey, InputVariantKey, RadioGroupVariantKey, SeparatorVariantKey, SpinnerVariantKey, SwitchVariantKey, TextareaVariantKey, ToggleGroupVariantKey, ToolPillVariantKey } from "./variant-keys";
+
+export const alertDefaultVariantKey: AlertVariantKey = "default";
+export const avatarDefaultVariantKey: AvatarVariantKey = "fallback";
+export const badgeDefaultVariantKey: BadgeVariantKey = "default";
+export const buttonDefaultVariantKey: ButtonVariantKey = "default";
+export const checkboxDefaultVariantKey: CheckboxVariantKey = "unchecked";
+export const imgDefaultVariantKey: ImgVariantKey = "loading";
+export const inputDefaultVariantKey: InputVariantKey = "default";
+export const radioGroupDefaultVariantKey: RadioGroupVariantKey = "unchecked";
+export const separatorDefaultVariantKey: SeparatorVariantKey = "horizontal";
+export const spinnerDefaultVariantKey: SpinnerVariantKey = "default";
+export const switchDefaultVariantKey: SwitchVariantKey = "unchecked";
+export const textareaDefaultVariantKey: TextareaVariantKey = "default";
+export const toggleGroupDefaultVariantKey: ToggleGroupVariantKey = "default";
+export const toolPillDefaultVariantKey: ToolPillVariantKey = "primary";
+
+export const atomDefaultVariantKeys = {
+  alert: alertDefaultVariantKey,
+  avatar: avatarDefaultVariantKey,
+  badge: badgeDefaultVariantKey,
+  button: buttonDefaultVariantKey,
+  checkbox: checkboxDefaultVariantKey,
+  img: imgDefaultVariantKey,
+  input: inputDefaultVariantKey,
+  radioGroup: radioGroupDefaultVariantKey,
+  separator: separatorDefaultVariantKey,
+  spinner: spinnerDefaultVariantKey,
+  switch: switchDefaultVariantKey,
+  textarea: textareaDefaultVariantKey,
+  toggleGroup: toggleGroupDefaultVariantKey,
+  toolPill: toolPillDefaultVariantKey,
+} as const;

package/src/components/atoms/generated/variant-keys.ts

@@ -0,0 +1,61 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+export const alertVariantKeys = ["default", "destructive"] as const;
+export type AlertVariantKey = (typeof alertVariantKeys)[number];
+
+export const avatarVariantKeys = ["fallback", "image"] as const;
+export type AvatarVariantKey = (typeof avatarVariantKeys)[number];
+
+export const badgeVariantKeys = ["default", "destructive", "outline", "secondary"] as const;
+export type BadgeVariantKey = (typeof badgeVariantKeys)[number];
+
+export const buttonVariantKeys = ["default", "destructive", "ghost", "link", "outline", "secondary"] as const;
+export type ButtonVariantKey = (typeof buttonVariantKeys)[number];
+
+export const checkboxVariantKeys = ["checked", "disabled", "unchecked"] as const;
+export type CheckboxVariantKey = (typeof checkboxVariantKeys)[number];
+
+export const imgVariantKeys = ["error", "loaded", "loading"] as const;
+export type ImgVariantKey = (typeof imgVariantKeys)[number];
+
+export const inputVariantKeys = ["default", "disabled", "placeholder"] as const;
+export type InputVariantKey = (typeof inputVariantKeys)[number];
+
+export const radioGroupVariantKeys = ["checked", "unchecked"] as const;
+export type RadioGroupVariantKey = (typeof radioGroupVariantKeys)[number];
+
+export const separatorVariantKeys = ["horizontal", "vertical"] as const;
+export type SeparatorVariantKey = (typeof separatorVariantKeys)[number];
+
+export const spinnerVariantKeys = ["default", "lg", "sm"] as const;
+export type SpinnerVariantKey = (typeof spinnerVariantKeys)[number];
+
+export const switchVariantKeys = ["checked", "unchecked"] as const;
+export type SwitchVariantKey = (typeof switchVariantKeys)[number];
+
+export const textareaVariantKeys = ["default", "disabled"] as const;
+export type TextareaVariantKey = (typeof textareaVariantKeys)[number];
+
+export const toggleGroupVariantKeys = ["default", "outline"] as const;
+export type ToggleGroupVariantKey = (typeof toggleGroupVariantKeys)[number];
+
+export const toolPillVariantKeys = ["danger", "primary", "secondary"] as const;
+export type ToolPillVariantKey = (typeof toolPillVariantKeys)[number];
+
+export const atomVariantKeys = {
+  alert: alertVariantKeys,
+  avatar: avatarVariantKeys,
+  badge: badgeVariantKeys,
+  button: buttonVariantKeys,
+  checkbox: checkboxVariantKeys,
+  img: imgVariantKeys,
+  input: inputVariantKeys,
+  radioGroup: radioGroupVariantKeys,
+  separator: separatorVariantKeys,
+  spinner: spinnerVariantKeys,
+  switch: switchVariantKeys,
+  textarea: textareaVariantKeys,
+  toggleGroup: toggleGroupVariantKeys,
+  toolPill: toolPillVariantKeys,
+} as const;