@kinetixui/ui 0.6.4 → 0.7.0

package/src/components/sheet.tsx

@@ -18,7 +18,7 @@ const SheetOverlay = React.forwardRef<
   <SheetPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -27,7 +27,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 font-sans",
+  "fixed z-overlay gap-4 bg-background p-6 shadow-lg transition ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-base data-[state=open]:duration-slow font-sans",
   {
     variants: {
       side: {
@@ -55,7 +55,7 @@ const SheetContent = React.forwardRef<
     <SheetOverlay />
     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring">
         <X className="size-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>

package/src/components/sidebar.tsx

@@ -159,7 +159,7 @@ const Sidebar = React.forwardRef<
     >
       <div
         className={cn(
-          "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+          "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-fast ease-linear",
           "group-data-[collapsible=offcanvas]:w-0",
           variant === "floating" || variant === "inset"
             ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+theme(spacing.4))]"
@@ -168,7 +168,7 @@ const Sidebar = React.forwardRef<
       />
       <div
         className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+          "fixed inset-y-0 z-docked hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-fast ease-linear md:flex",
           side === "left"
             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -269,8 +269,8 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none transition-[margin,opacity] duration-fast ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-hidden",
         className,
       )}
       {...props}
@@ -297,7 +297,7 @@ const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-disabled data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {

package/src/components/slider.tsx

@@ -16,7 +16,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;

package/src/components/switch.tsx

@@ -18,7 +18,7 @@ const Switch = React.forwardRef<
     className={cn(
       "peer inline-flex h-6 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-      "disabled:cursor-not-allowed disabled:opacity-50",
+      "disabled:cursor-not-allowed disabled:opacity-disabled",
       "data-[state=checked]:bg-primary data-[state=unchecked]:bg-tertiary",
       className,
     )}

package/src/components/tabs.tsx

@@ -30,7 +30,7 @@ const TabsTrigger = React.forwardRef<
     className={cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-      "disabled:pointer-events-none disabled:opacity-50",
+      "disabled:pointer-events-none disabled:opacity-disabled",
       "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
       className,
     )}

package/src/components/tag.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "../lib/utils";
@@ -32,24 +33,35 @@ export interface TagProps
     VariantProps<typeof tagVariants> {
   /** show a dismiss button; called when it's clicked */
   onRemove?: () => void;
+  /** render as the single child element (Radix Slot) instead of <span> —
+   * e.g. `<Tag asChild><a href="/filter">Active</a></Tag>` for a linked tag.
+   * Combined with `onRemove`, the remove button nests inside the slotted
+   * element (Slot can only render one root node) — fine for a <div>/<span>,
+   * but avoid pairing asChild+onRemove with an <a>, since a nested <button>
+   * inside an anchor is invalid HTML. */
+  asChild?: boolean;
 }
 
 const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, onRemove, children, ...props }, ref) => (
-    <span ref={ref} className={cn(tagVariants({ variant }), className)} {...props}>
-      {children}
-      {onRemove && (
-        <button
-          type="button"
-          onClick={onRemove}
-          aria-label="Remove"
-          className="-mr-0.5 ml-0.5 rounded-[2px] opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:ring-1 focus-visible:ring-current"
-        >
-          <X className="size-3.5" />
-        </button>
-      )}
-    </span>
-  ),
+  ({ className, variant, onRemove, children, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "span";
+    const removeButton = onRemove && (
+      <button
+        type="button"
+        onClick={onRemove}
+        aria-label="Remove"
+        className="-mr-0.5 ml-0.5 rounded-[2px] opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:ring-1 focus-visible:ring-current"
+      >
+        <X className="size-3.5" />
+      </button>
+    );
+    return (
+      <Comp ref={ref} className={cn(tagVariants({ variant }), className)} {...props}>
+        {asChild ? <Slottable>{children}</Slottable> : children}
+        {removeButton}
+      </Comp>
+    );
+  },
 );
 Tag.displayName = "Tag";
 

package/src/components/textarea.tsx

@@ -18,7 +18,7 @@ const textareaVariants = cva(
     "placeholder:text-muted-foreground",
     "outline-none transition-colors",
     "focus-visible:border-primary focus-visible:shadow-focus",
-    "disabled:cursor-not-allowed disabled:opacity-50",
+    "disabled:cursor-not-allowed disabled:opacity-disabled",
     "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive",
   ],
   {
@@ -27,7 +27,7 @@ const textareaVariants = cva(
         Default: "",
         Focus: "border-primary shadow-focus",
         Error: "border-destructive",
-        Disabled: "opacity-50 pointer-events-none resize-none",
+        Disabled: "opacity-disabled pointer-events-none resize-none",
       },
     },
     defaultVariants: { state: "Default" },

package/src/components/toggle.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium font-sans transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-ring [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium font-sans transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-ring [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

package/src/components/tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground font-sans",
+        "z-overlay overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground font-sans",
         "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
         className,

package/src/components-behavior.test.tsx

@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from "vitest";
 import { Badge } from "./components/badge";
 import { Button } from "./components/button";
 import { Input } from "./components/input";
+import { Tag } from "./components/tag";
 import {
   Accordion,
   AccordionContent,
@@ -55,6 +56,42 @@ describe("Badge", () => {
     expect(screen.getByText("tag").className).not.toBe(def);
     expect(screen.getByText("tag")).toHaveClass("text-secondary");
   });
+
+  it("renders as a child element with asChild", () => {
+    render(
+      <Badge asChild>
+        <a href="/new">New</a>
+      </Badge>,
+    );
+    const link = screen.getByRole("link", { name: "New" });
+    expect(link).toHaveAttribute("href", "/new");
+    expect(link).toHaveClass("bg-primary"); // badge classes merged onto the <a>
+  });
+});
+
+describe("Tag", () => {
+  it("renders as a child element with asChild", () => {
+    render(
+      <Tag asChild>
+        <a href="/filter">Active</a>
+      </Tag>,
+    );
+    const link = screen.getByRole("link", { name: "Active" });
+    expect(link).toHaveAttribute("href", "/filter");
+    expect(link).toHaveClass("bg-accent"); // tag classes merged onto the <a>
+  });
+
+  it("nests the remove button inside the slotted element when combined with onRemove", async () => {
+    const onRemove = vi.fn();
+    render(
+      <Tag asChild onRemove={onRemove}>
+        <div>Active</div>
+      </Tag>,
+    );
+    const remove = screen.getByRole("button", { name: "Remove" });
+    await userEvent.click(remove);
+    expect(onRemove).toHaveBeenCalledOnce();
+  });
 });
 
 describe("Accordion", () => {

package/tailwind.config.ts

@@ -94,6 +94,35 @@ export default {
         "2xl": "calc(var(--radius-lg) + 8px)",
         full: "var(--radius-full)",
       },
+      // Motion + scale — tokens/primitives/{motion,opacity,z-index}.json.
+      // Added alongside Tailwind's own numeric scales (z-10, opacity-50, …),
+      // not replacing them — these are the token-backed semantic names.
+      transitionDuration: {
+        fast: "var(--duration-fast)",
+        base: "var(--duration-base)",
+        slow: "var(--duration-slow)",
+        slower: "var(--duration-slower)",
+      },
+      transitionTimingFunction: {
+        // overrides Tailwind's built-in `ease-linear` with the identical
+        // cubic-bezier(0,0,1,1) value, now token-backed instead of hardcoded
+        linear: "var(--easing-linear)",
+        standard: "var(--easing-standard)",
+      },
+      zIndex: {
+        base: "var(--z-index-base)",
+        raised: "var(--z-index-raised)",
+        docked: "var(--z-index-docked)",
+        focus: "var(--z-index-focus)",
+        sticky: "var(--z-index-sticky)",
+        overlay: "var(--z-index-overlay)",
+      },
+      opacity: {
+        hidden: "var(--opacity-hidden)",
+        disabled: "var(--opacity-disabled)",
+        muted: "var(--opacity-muted)",
+        visible: "var(--opacity-visible)",
+      },
       keyframes: {
         "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" } },
         "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" } },