banhaten 0.3.0 → 0.5.0

package/registry/components/navigation-menu.tsx

@@ -1,171 +1,171 @@
-"use client"
-
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-type NavigationMenuProps = React.ComponentProps<
-  typeof NavigationMenuPrimitive.Root
->
-type NavigationMenuListProps = React.ComponentPropsWithoutRef<
-  typeof NavigationMenuPrimitive.List
->
-type NavigationMenuTriggerProps = React.ComponentPropsWithoutRef<
-  typeof NavigationMenuPrimitive.Trigger
->
-type NavigationMenuContentProps = React.ComponentPropsWithoutRef<
-  typeof NavigationMenuPrimitive.Content
->
-type NavigationMenuLinkProps = React.ComponentPropsWithoutRef<
-  typeof NavigationMenuPrimitive.Link
->
-type NavigationMenuViewportProps = React.ComponentPropsWithoutRef<
-  typeof NavigationMenuPrimitive.Viewport
->
-type NavigationMenuIndicatorProps = React.ComponentPropsWithoutRef<
-  typeof NavigationMenuPrimitive.Indicator
->
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  NavigationMenuProps
->(function NavigationMenu({ className, ...props }, ref) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      ref={ref}
-      className={cn("relative z-[var(--bh-z-raised)] flex max-w-max flex-1 items-center justify-center", className)}
-      {...props}
-    />
-  )
-})
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  NavigationMenuListProps
->(function NavigationMenuList({ className, ...props }, ref) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      ref={ref}
-      className={cn("group flex flex-1 list-none items-center justify-center gap-[var(--bh-space-xs-4)]", className)}
-      {...props}
-    />
-  )
-})
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  NavigationMenuTriggerProps
->(function NavigationMenuTrigger({ children, className, ...props }, ref) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      ref={ref}
-      className={cn(
-        "group inline-flex h-[var(--bh-space-7xl-40)] items-center justify-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] bg-transparent px-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-colors hover:bg-[var(--bh-interactive-ghost-hover)] focus:bg-[var(--bh-interactive-ghost-hover)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)] data-[state=open]:bg-[var(--bh-interactive-soft-default)]",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDownIcon
-        aria-hidden="true"
-        className="size-[var(--bh-space-3xl-16)] transition-transform group-data-[state=open]:rotate-180"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  )
-})
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  NavigationMenuContentProps
->(function NavigationMenuContent({ className, ...props }, ref) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      ref={ref}
-      className={cn(
-        "start-0 top-0 w-full rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] text-[var(--bh-content-default)] shadow-[var(--shadow-popover)] md:absolute md:w-[var(--bh-space-19xl-384)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-const NavigationMenuLink = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Link>,
-  NavigationMenuLinkProps
->(function NavigationMenuLink({ className, ...props }, ref) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      ref={ref}
-      className={cn(
-        "block rounded-[var(--bh-radius-lg-8)] p-[var(--bh-space-xl-12)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-colors hover:bg-[var(--bh-interactive-ghost-hover)] focus:bg-[var(--bh-interactive-ghost-hover)]",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  NavigationMenuViewportProps
->(function NavigationMenuViewport({ className, ...props }, ref) {
-  return (
-    <div className="absolute start-0 top-full flex justify-center">
-      <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
-        ref={ref}
-        className={cn(
-          "origin-top-center relative mt-[var(--bh-space-xs-4)] h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] shadow-[var(--shadow-popover)] md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-})
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  NavigationMenuIndicatorProps
->(function NavigationMenuIndicator({ className, ...props }, ref) {
-  return (
-    <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
-      ref={ref}
-      className={cn("top-full z-[var(--bh-z-popover)] flex h-[var(--bh-space-lg-10)] items-end justify-center overflow-hidden", className)}
-      {...props}
-    >
-      <div className="relative top-[var(--bh-space-xs-4)] size-[var(--bh-space-lg-10)] rotate-45 rounded-tl-[var(--bh-radius-sm-4)] bg-[var(--bh-bg-raised)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)]" />
-    </NavigationMenuPrimitive.Indicator>
-  )
-})
-
-export {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-}
-export type {
-  NavigationMenuContentProps,
-  NavigationMenuIndicatorProps,
-  NavigationMenuLinkProps,
-  NavigationMenuListProps,
-  NavigationMenuProps,
-  NavigationMenuTriggerProps,
-  NavigationMenuViewportProps,
-}
+"use client"
+
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type NavigationMenuProps = React.ComponentProps<
+  typeof NavigationMenuPrimitive.Root
+>
+type NavigationMenuListProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.List
+>
+type NavigationMenuTriggerProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Trigger
+>
+type NavigationMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Content
+>
+type NavigationMenuLinkProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Link
+>
+type NavigationMenuViewportProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Viewport
+>
+type NavigationMenuIndicatorProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Indicator
+>
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  NavigationMenuProps
+>(function NavigationMenu({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      ref={ref}
+      className={cn("relative z-[var(--bh-z-raised)] flex max-w-max flex-1 items-center justify-center", className)}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  NavigationMenuListProps
+>(function NavigationMenuList({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      ref={ref}
+      className={cn("group flex flex-1 list-none items-center justify-center gap-[var(--bh-space-xs-4)]", className)}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  NavigationMenuTriggerProps
+>(function NavigationMenuTrigger({ children, className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      ref={ref}
+      className={cn(
+        "group inline-flex h-[var(--bh-space-7xl-40)] items-center justify-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] bg-transparent px-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-colors hover:bg-[var(--bh-interactive-ghost-hover)] focus:bg-[var(--bh-interactive-ghost-hover)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)] data-[state=open]:bg-[var(--bh-interactive-soft-default)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon
+        aria-hidden="true"
+        className="size-[var(--bh-space-3xl-16)] transition-transform group-data-[state=open]:rotate-180"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+})
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  NavigationMenuContentProps
+>(function NavigationMenuContent({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      ref={ref}
+      className={cn(
+        "start-0 top-0 w-full rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] text-[var(--bh-content-default)] shadow-[var(--elevation-popover)] md:absolute md:w-[var(--bh-space-19xl-384)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuLink = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Link>,
+  NavigationMenuLinkProps
+>(function NavigationMenuLink({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      ref={ref}
+      className={cn(
+        "block rounded-[var(--bh-radius-lg-8)] p-[var(--bh-space-xl-12)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-colors hover:bg-[var(--bh-interactive-ghost-hover)] focus:bg-[var(--bh-interactive-ghost-hover)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  NavigationMenuViewportProps
+>(function NavigationMenuViewport({ className, ...props }, ref) {
+  return (
+    <div className="absolute start-0 top-full flex justify-center">
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        ref={ref}
+        className={cn(
+          "origin-top-center relative mt-[var(--bh-space-xs-4)] h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] shadow-[var(--elevation-popover)] md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  NavigationMenuIndicatorProps
+>(function NavigationMenuIndicator({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      ref={ref}
+      className={cn("top-full z-[var(--bh-z-popover)] flex h-[var(--bh-space-lg-10)] items-end justify-center overflow-hidden", className)}
+      {...props}
+    >
+      <div className="relative top-[var(--bh-space-xs-4)] size-[var(--bh-space-lg-10)] rotate-45 rounded-tl-[var(--bh-radius-sm-4)] bg-[var(--bh-bg-raised)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)]" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+})
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+}
+export type {
+  NavigationMenuContentProps,
+  NavigationMenuIndicatorProps,
+  NavigationMenuLinkProps,
+  NavigationMenuListProps,
+  NavigationMenuProps,
+  NavigationMenuTriggerProps,
+  NavigationMenuViewportProps,
+}

package/registry/components/pagination.css

@@ -1,36 +1,36 @@
-.ds-pagination {
-  container-type: inline-size;
-}
-
-.ds-pagination__controls {
-  overflow-x: auto;
-  overscroll-behavior-inline: contain;
-  scrollbar-width: thin;
-}
-
-/* Approved exception: container-query breakpoints stay literal because CSS vars are not reliable in query conditions. */
-@container (max-width: 28rem) {
-  .ds-pagination [data-slot="pagination-caption"] {
-    width: 100%;
-    flex: 1 0 100%;
-  }
-
-  .ds-pagination[data-type="numeric"] .ds-pagination__controls {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .ds-pagination[data-type="numeric"] .ds-pagination__pages > :nth-child(n + 4):not(:last-child) {
-    display: none;
-  }
-
-  .ds-pagination[data-type="simple"] .ds-pagination__controls {
-    margin-inline-start: auto;
-  }
-
-  .ds-pagination[data-type="summary"] [data-slot="pagination-summary"] {
-    order: -1;
-    width: 100%;
-    text-align: center;
-  }
-}
+.ds-pagination {
+  container-type: inline-size;
+}
+
+.ds-pagination__controls {
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: thin;
+}
+
+/* Approved exception: container-query breakpoints stay literal because CSS vars are not reliable in query conditions. */
+@container (max-width: 28rem) {
+  .ds-pagination [data-slot="pagination-caption"] {
+    width: 100%;
+    flex: 1 0 100%;
+  }
+
+  .ds-pagination[data-type="numeric"] .ds-pagination__controls {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .ds-pagination[data-type="numeric"] .ds-pagination__pages > :nth-child(n + 4):not(:last-child) {
+    display: none;
+  }
+
+  .ds-pagination[data-type="simple"] .ds-pagination__controls {
+    margin-inline-start: auto;
+  }
+
+  .ds-pagination[data-type="summary"] [data-slot="pagination-summary"] {
+    order: -1;
+    width: 100%;
+    text-align: center;
+  }
+}