@traky-app/ui 1.0.0 → 1.2.0

package/src/ui/item.tsx

@@ -0,0 +1,193 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Separator } from "./separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn("group/item-group flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-0", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

package/src/ui/kbd.tsx

@@ -0,0 +1,28 @@
+import { cn } from "../lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

package/src/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "../lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/src/ui/logo.tsx

@@ -0,0 +1,77 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const logoVariants = cva("inline-flex items-start", {
+  variants: {
+    variant: {
+      green: "text-[#a5dd64]",
+      blue: "text-[#000b27]",
+      white: "text-white",
+    },
+    size: {
+      xs: "[&_svg]:h-6",
+      sm: "[&_svg]:h-10",
+      md: "[&_svg]:h-14",
+      lg: "[&_svg]:h-20",
+    },
+  },
+  defaultVariants: {
+    variant: "green",
+    size: "md",
+  },
+})
+
+const LOGO_PATHS = [
+  "M259.89,30.16l-12,44.79h-5.2c-14.45,0-17.26-8.8-14.36-19.61l6.76-25.24h-14.21l-6.76,25.24c-5,18.65,6.11,33.82,24.76,33.82h5.2l-1.84,6.08c-2.9,10.81-14.06,19.61-24.87,19.61h-16.38l-3.81,14.21h16.38c18.65,0,37.89-15.17,42.88-33.82l17.65-65.08h-14.21Z",
+  "M15.4,55.45l2.72-10.15h28.64l4-14.91h-28.64L30.26,0h-14.21L1.2,55.45c-5,18.65,6.11,33.82,24.76,33.82h9.02l3.81-14.21h-9.02c-10.82,0-17.26-8.8-14.36-19.62Z",
+  "M186.36,56.58l25.6-16.04,2.71-10.11h-10.01l-38.7,24.32,6.53-24.38h-13.6l-15.77,58.85h13.6l5.47-20.43h10.6c10.56,0,16.85,8.59,14.02,19.15l-.33,1.23h13.87l.33-1.23c3.91-14.61-2.31-27.01-14.32-31.35Z",
+  "M122.83,28.78c-11.62,0-23.48,6.65-31.07,16.33l3.78-14.1h-4.37c-7.07,0-14.34,2.25-20.93,6.04l1.78-6.64h-15.15l-4.06,15.15h6.4c-5.58,5.6-9.85,12.4-11.81,19.68l-6.52,24.33h14.98s6.63-24.74,6.63-24.74c2.9-10.81,14.06-19.61,24.87-19.61h4.32c-3.18,4.09-5.62,8.7-6.93,13.6-4.44,16.56,5.43,30.03,21.99,30.03,6.5,0,13.07-2.1,18.94-5.62l-1.59,5.92h12.45s8-29.31,8.28-30.33c4.44-16.56-5.43-30.03-21.99-30.03ZM110.45,74.99c-8.91,0-14.22-7.25-11.84-16.17,2.39-8.91,11.59-16.17,20.5-16.17s14.22,7.25,11.84,16.17c-2.39,8.91-11.59,16.17-20.5,16.17Z",
+] as const
+
+type LogoProps = React.ComponentProps<"span"> &
+  VariantProps<typeof logoVariants> & {
+    /** Muestra ® junto al wordmark. */
+    registered?: boolean
+  }
+
+function Logo({
+  className,
+  variant = "green",
+  size = "md",
+  registered = false,
+  ...props
+}: LogoProps) {
+  return (
+    <span
+      data-slot="logo"
+      data-variant={variant}
+      data-size={size}
+      className={cn(logoVariants({ variant, size }), className)}
+      {...props}
+    >
+      <svg
+        viewBox="0 0 274.1 129.06"
+        role="img"
+        aria-label="Traky"
+        className="block w-auto fill-current"
+      >
+        {LOGO_PATHS.map((d) => (
+          <path key={d.slice(0, 12)} d={d} />
+        ))}
+      </svg>
+      {registered ? (
+        <sup
+          className="ml-0.5 text-[0.55em] leading-none font-semibold select-none opacity-80"
+          aria-hidden
+        >
+          ®
+        </sup>
+      ) : null}
+    </span>
+  )
+}
+
+export { Logo, logoVariants }
+export type { LogoProps }