@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/ui/select.tsx

@@ -0,0 +1,193 @@
+import { cn } from "../support/utils";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import * as React from "react";
+
+function Select({
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+    return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+    return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+    return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+    className,
+    size = "default",
+    children,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}) {
+    return (
+        <SelectPrimitive.Trigger
+            data-slot="select-trigger"
+            data-size={size}
+            className={cn(
+                "flex w-fit items-center justify-between gap-2 rounded-md border border-dashboard-border bg-dashboard-card px-2.5 py-1 text-xs text-dashboard-foreground whitespace-nowrap shadow-xs transition-colors outline-none focus-visible:ring-1 focus-visible:ring-dashboard-primary/40 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-dashboard-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[5px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 hover:bg-dashboard-secondary cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-dashboard-muted-foreground",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <SelectPrimitive.Icon asChild>
+                <ChevronDownIcon className="size-3.5 opacity-60" />
+            </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+    );
+}
+
+function SelectContent({
+    className,
+    children,
+    position = "item-aligned",
+    align = "center",
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+    return (
+        <SelectPrimitive.Portal>
+            <SelectPrimitive.Content
+                data-slot="select-content"
+                className={cn(
+                    "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-dashboard-border bg-dashboard-card text-dashboard-foreground shadow-2xl text-xs backdrop-blur-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+                    position === "popper" &&
+                        "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+                    className,
+                )}
+                position={position}
+                align={align}
+                {...props}
+            >
+                <SelectScrollUpButton />
+                <SelectPrimitive.Viewport
+                    className={cn(
+                        "p-1",
+                        position === "popper" &&
+                            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+                    )}
+                >
+                    {children}
+                </SelectPrimitive.Viewport>
+                <SelectScrollDownButton />
+            </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+    );
+}
+
+function SelectLabel({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+    return (
+        <SelectPrimitive.Label
+            data-slot="select-label"
+            className={cn(
+                "px-2.5 py-1 text-[11px] font-semibold text-dashboard-muted-foreground uppercase tracking-wider",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function SelectItem({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+    return (
+        <SelectPrimitive.Item
+            data-slot="select-item"
+            className={cn(
+                "relative flex w-full cursor-pointer items-center gap-2 rounded-[5px] py-1.5 pr-7 pl-2 text-xs text-dashboard-foreground outline-hidden select-none hover:bg-dashboard-secondary focus:bg-dashboard-secondary focus:text-dashboard-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-dashboard-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+                className,
+            )}
+            {...props}
+        >
+            <span
+                data-slot="select-item-indicator"
+                className="absolute right-2 flex size-3.5 items-center justify-center text-dashboard-primary"
+            >
+                <SelectPrimitive.ItemIndicator>
+                    <CheckIcon className="size-3.5 text-dashboard-primary" />
+                </SelectPrimitive.ItemIndicator>
+            </span>
+            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        </SelectPrimitive.Item>
+    );
+}
+
+function SelectSeparator({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+    return (
+        <SelectPrimitive.Separator
+            data-slot="select-separator"
+            className={cn(
+                "pointer-events-none -mx-1 my-1 h-px bg-dashboard-border/80",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function SelectScrollUpButton({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+    return (
+        <SelectPrimitive.ScrollUpButton
+            data-slot="select-scroll-up-button"
+            className={cn(
+                "flex cursor-default items-center justify-center py-1",
+                className,
+            )}
+            {...props}
+        >
+            <ChevronUpIcon className="size-4" />
+        </SelectPrimitive.ScrollUpButton>
+    );
+}
+
+function SelectScrollDownButton({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+    return (
+        <SelectPrimitive.ScrollDownButton
+            data-slot="select-scroll-down-button"
+            className={cn(
+                "flex cursor-default items-center justify-center py-1",
+                className,
+            )}
+            {...props}
+        >
+            <ChevronDownIcon className="size-4" />
+        </SelectPrimitive.ScrollDownButton>
+    );
+}
+
+export {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectScrollDownButton,
+    SelectScrollUpButton,
+    SelectSeparator,
+    SelectTrigger,
+    SelectValue,
+};

package/src/ui/switch.tsx

@@ -0,0 +1,32 @@
+import { cn } from "../support/utils";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import * as React from "react";
+
+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 inline-flex shrink-0 items-center rounded-full border border-dashboard-border shadow-xs transition-colors outline-none focus-visible:ring-1 focus-visible:ring-dashboard-primary/40 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-5 data-[size=default]:w-9 data-[size=sm]:h-4 data-[size=sm]:w-7 data-[state=checked]:bg-dashboard-primary data-[state=unchecked]:bg-dashboard-secondary cursor-pointer",
+                className,
+            )}
+            {...props}
+        >
+            <SwitchPrimitive.Thumb
+                data-slot="switch-thumb"
+                className={cn(
+                    "pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0.5 data-[state=checked]:bg-white data-[state=unchecked]:bg-dashboard-muted-foreground shadow-xs",
+                )}
+            />
+        </SwitchPrimitive.Root>
+    );
+}
+
+export { Switch };

package/src/ui/table.tsx

@@ -0,0 +1,119 @@
+import { cn } from "../support/utils";
+import * as React from "react";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+    return (
+        <div
+            data-slot="table-container"
+            className="relative w-full overflow-x-auto rounded-lg border border-dashboard-border"
+        >
+            <table
+                data-slot="table"
+                className={cn("w-full caption-bottom text-xs", className)}
+                {...props}
+            />
+        </div>
+    );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+    return (
+        <thead
+            data-slot="table-header"
+            className={cn(
+                "border-b border-dashboard-border bg-dashboard-secondary/40",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+    return (
+        <tbody
+            data-slot="table-body"
+            className={cn("[&_tr:last-child]:border-0", className)}
+            {...props}
+        />
+    );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+    return (
+        <tfoot
+            data-slot="table-footer"
+            className={cn(
+                "border-t border-dashboard-border bg-dashboard-secondary/30 font-medium [&>tr]:last:border-b-0 text-xs",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+    return (
+        <tr
+            data-slot="table-row"
+            className={cn(
+                "border-b border-dashboard-border transition-colors hover:bg-dashboard-secondary has-aria-expanded:bg-dashboard-secondary/40 data-[state=selected]:bg-dashboard-secondary/50",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+    return (
+        <th
+            data-slot="table-head"
+            className={cn(
+                "h-8 px-3 py-1.5 text-left align-middle font-semibold text-[10.5px] uppercase tracking-wider whitespace-nowrap text-dashboard-muted-foreground bg-dashboard-secondary/40 border-b border-dashboard-border [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+    return (
+        <td
+            data-slot="table-cell"
+            className={cn(
+                "h-9 px-3 py-1.5 align-middle whitespace-nowrap text-xs text-dashboard-foreground border-b border-dashboard-border/60 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableCaption({
+    className,
+    ...props
+}: React.ComponentProps<"caption">) {
+    return (
+        <caption
+            data-slot="table-caption"
+            className={cn(
+                "mt-3 text-xs text-dashboard-muted-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableFooter,
+    TableHead,
+    TableHeader,
+    TableRow,
+};

package/src/ui/tabs.tsx

@@ -0,0 +1,89 @@
+import { cn } from "../support/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import * as React from "react";
+
+function Tabs({
+    className,
+    orientation = "horizontal",
+    ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+    return (
+        <TabsPrimitive.Root
+            data-slot="tabs"
+            data-orientation={orientation}
+            orientation={orientation}
+            className={cn(
+                "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+const tabsListVariants = cva(
+    "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-0.5 text-dashboard-muted-foreground group-data-[orientation=horizontal]/tabs:h-8.5 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-dashboard-card border border-dashboard-border",
+                line: "gap-1 bg-transparent border-b border-dashboard-border rounded-none",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+function TabsList({
+    className,
+    variant = "default",
+    ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+    VariantProps<typeof tabsListVariants>) {
+    return (
+        <TabsPrimitive.List
+            data-slot="tabs-list"
+            data-variant={variant}
+            className={cn(tabsListVariants({ variant }), className)}
+            {...props}
+        />
+    );
+}
+
+function TabsTrigger({
+    className,
+    ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+    return (
+        <TabsPrimitive.Trigger
+            data-slot="tabs-trigger"
+            className={cn(
+                "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium whitespace-nowrap text-dashboard-muted-foreground transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-dashboard-foreground hover:bg-dashboard-secondary focus-visible:ring-1 focus-visible:ring-dashboard-primary/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+                "data-[state=active]:bg-dashboard-secondary data-[state=active]:text-dashboard-primary data-[state=active]:font-semibold data-[state=active]:shadow-xs",
+                "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+                "after:absolute after:bg-dashboard-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-2px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TabsContent({
+    className,
+    ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+    return (
+        <TabsPrimitive.Content
+            data-slot="tabs-content"
+            className={cn("flex-1 text-xs outline-none", className)}
+            {...props}
+        />
+    );
+}
+
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger };

package/src/ui/textarea.tsx

@@ -0,0 +1,21 @@
+import { cn } from "../support/utils";
+import * as React from "react";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+    return (
+        <textarea
+            data-slot="textarea"
+            className={cn(
+                "flex field-sizing-content min-h-16 w-full rounded-md border border-dashboard-border bg-dashboard-card px-2.5 py-2 text-xs text-dashboard-foreground shadow-xs transition-colors outline-none",
+                "placeholder:text-dashboard-muted-foreground selection:bg-dashboard-primary selection:text-white",
+                "focus-visible:border-dashboard-primary focus-visible:ring-1 focus-visible:ring-dashboard-primary/30",
+                "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+                "aria-invalid:border-dashboard-destructive aria-invalid:ring-1 aria-invalid:ring-dashboard-destructive/20",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Textarea };

package/src/ui/tooltip.tsx

@@ -0,0 +1,54 @@
+import { cn } from "../support/utils";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import * as React from "react";
+
+function TooltipProvider({
+    delayDuration = 0,
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+    return (
+        <TooltipPrimitive.Provider
+            data-slot="tooltip-provider"
+            delayDuration={delayDuration}
+            {...props}
+        />
+    );
+}
+
+function Tooltip({
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+    return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+    className,
+    sideOffset = 4,
+    children,
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+    return (
+        <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+                data-slot="tooltip-content"
+                sideOffset={sideOffset}
+                className={cn(
+                    "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md border border-dashboard-border bg-dashboard-card px-2.5 py-1 text-xs text-dashboard-foreground shadow-xl fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-dashboard-card fill-dashboard-card border border-dashboard-border" />
+            </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+    );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/workspace/index.ts

@@ -0,0 +1,2 @@
+export * from "../components/TicketWorkspaceLayout";
+export * from "../components/PinnedAttributeRow";