azamat-ui-kit-cli 0.2.2

package/vendor/src/components/ui/switch.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type SwitchProps = Omit<
+  React.ComponentPropsWithoutRef<"button">,
+  "onChange" | "value"
+> & {
+  checked?: boolean
+  defaultChecked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+}
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    {
+      className,
+      checked,
+      defaultChecked = false,
+      onCheckedChange,
+      disabled,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const isControlled = checked !== undefined
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
+    const currentChecked = isControlled ? checked : internalChecked
+
+    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+      const nextChecked = !currentChecked
+
+      if (!isControlled) {
+        setInternalChecked(nextChecked)
+      }
+
+      onCheckedChange?.(nextChecked)
+      onClick?.(event)
+    }
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={currentChecked}
+        data-state={currentChecked ? "checked" : "unchecked"}
+        data-slot="switch"
+        disabled={disabled}
+        className={cn(
+          "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-border/70 bg-input/85 shadow-sm transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary/50 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:bg-input/80",
+          className
+        )}
+        onClick={handleClick}
+        {...props}
+      >
+        <span
+          data-slot="switch-thumb"
+          data-state={currentChecked ? "checked" : "unchecked"}
+          className={cn(
+            "pointer-events-none block size-5 rounded-full bg-background shadow-[0_2px_10px_color-mix(in_oklch,var(--foreground),transparent_86%)] ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5"
+          )}
+        />
+      </button>
+    )
+  }
+)
+Switch.displayName = "Switch"
+
+export { Switch }

package/vendor/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", 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 bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/vendor/src/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Tabs as BaseTabs } from "@base-ui/react/tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = BaseTabs.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof BaseTabs.List>,
+  React.ComponentPropsWithoutRef<typeof BaseTabs.List>
+>(({ className, ...props }, ref) => (
+    <BaseTabs.List
+      ref={ref}
+      data-slot="tabs-list"
+      className={cn(
+        "inline-flex min-h-11 items-center justify-center rounded-[var(--radius-2xl)] border border-border/80 bg-muted/80 p-1 text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] backdrop-blur",
+        className
+      )}
+    {...props}
+  />
+))
+TabsList.displayName = "TabsList"
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof BaseTabs.Tab>,
+  React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>
+>(({ className, ...props }, ref) => (
+    <BaseTabs.Tab
+      ref={ref}
+      data-slot="tabs-trigger"
+      className={cn(
+        "inline-flex min-h-9 items-center justify-center whitespace-nowrap rounded-[calc(var(--radius-xl)-2px)] border border-transparent px-3.5 py-1.5 text-sm font-medium text-muted-foreground ring-offset-background transition-[background-color,color,box-shadow,border-color,transform] hover:bg-background/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[selected]:border-border/80 data-[selected]:bg-background data-[selected]:text-foreground data-[selected]:shadow-[0_1px_0_rgba(255,255,255,0.22),0_10px_24px_rgba(15,23,42,0.12)] dark:data-[selected]:border-white/12 dark:data-[selected]:bg-white/8 dark:data-[selected]:shadow-[0_1px_0_rgba(255,255,255,0.06),0_14px_32px_rgba(0,0,0,0.24)]",
+        className
+      )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = "TabsTrigger"
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof BaseTabs.Panel>,
+  React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>
+>(({ className, ...props }, ref) => (
+    <BaseTabs.Panel
+      ref={ref}
+      className={cn(
+      "mt-3 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = "TabsContent"
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/vendor/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-24 w-full rounded-[var(--radius-2xl)] border border-input/85 bg-background/92 px-3.5 py-3 text-base shadow-sm transition-[background-color,border-color,box-shadow,color] outline-none placeholder:text-muted-foreground/95 hover:border-border focus-visible:border-ring focus-visible:bg-background focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:bg-input/55 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:hover:bg-input/45 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/vendor/src/components/ui/tooltip.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type TooltipProps = React.ComponentProps<"span"> & {
+  content: React.ReactNode
+  side?: "top" | "bottom" | "left" | "right"
+  disabled?: boolean
+}
+
+const sideClassName = {
+  top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
+  bottom: "left-1/2 top-full mt-2 -translate-x-1/2",
+  left: "right-full top-1/2 mr-2 -translate-y-1/2",
+  right: "left-full top-1/2 ml-2 -translate-y-1/2",
+}
+
+function Tooltip({ content, side = "top", disabled = false, className, children, ...props }: TooltipProps) {
+  return (
+    <span data-slot="tooltip" className={cn("group/tooltip relative inline-flex", className)} {...props}>
+      {children}
+      {!disabled && (
+        <span
+          data-slot="tooltip-content"
+          role="tooltip"
+          className={cn(
+            "pointer-events-none absolute z-50 hidden max-w-64 whitespace-nowrap rounded-xl border border-border/75 bg-popover/98 px-2.5 py-1.5 text-[11px] font-medium text-popover-foreground shadow-[0_16px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] backdrop-blur group-hover/tooltip:block group-focus-within/tooltip:block",
+            sideClassName[side]
+          )}
+        >
+          {content}
+        </span>
+      )}
+    </span>
+  )
+}
+
+export { Tooltip }