banhaten 0.3.0 → 0.5.0

package/registry/components/expanded/Banner.tsx

@@ -1,179 +1,179 @@
-import type { ReactNode } from "react";
-import { MegaphoneIcon as LucideMegaphoneIcon, XIcon } from "lucide-react";
-
-import { Button, type ButtonProps } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-
-import "./banner.css";
-
-export type BannerType = "slim" | "single-action-inline" | "single-action" | "input";
-export type BannerSize = "floating" | "full-width";
-export type BannerColor = "brand" | "grey" | "brand-light";
-export type BannerContent = "title" | "title-description";
-export type BannerDirection = "ltr" | "rtl";
-
-export type BannerProps = {
-  actionLabel?: string;
-  ariaLabel?: string;
-  className?: string;
-  closeLabel?: string;
-  color?: BannerColor;
-  content?: BannerContent;
-  dir?: BannerDirection;
-  description?: string;
-  icon?: ReactNode;
-  inputAriaLabel?: string;
-  inputPlaceholder?: string;
-  linkLabel?: string;
-  onAction?: () => void;
-  onClose?: () => void;
-  showIcon?: boolean;
-  showInlineAction?: boolean;
-  size?: BannerSize;
-  title?: string;
-  type?: BannerType;
-};
-
-function MegaphoneIcon() {
-  return <LucideMegaphoneIcon aria-hidden="true" className="ds-banner__icon" strokeWidth="var(--bh-icon-stroke-210)" />;
-}
-
-function CloseIcon() {
-  return <XIcon aria-hidden="true" className="ds-banner__close-icon" strokeWidth="var(--bh-icon-stroke-225)" />;
-}
-
-function getBannerActionVariant(color: BannerColor): ButtonProps["variant"] {
-  if (color === "brand-light") return "default";
-  if (color === "grey") return "secondary";
-  return "white";
-}
-
-function cx(...classes: Array<string | false | undefined>) {
-  return classes.filter(Boolean).join(" ");
-}
-
-export function Banner({
-  actionLabel,
-  ariaLabel,
-  className = "",
-  closeLabel,
-  color = "brand",
-  content = "title",
-  description,
-  dir,
-  icon,
-  inputAriaLabel,
-  inputPlaceholder,
-  linkLabel,
-  onAction,
-  onClose,
-  showIcon = true,
-  showInlineAction,
-  size = "floating",
-  title,
-  type = "slim",
-}: BannerProps) {
-  const hasDescription = content === "title-description" && Boolean(title || description);
-  const titleOnlyMessage = title ?? description;
-  const isInlineAction = type === "slim" || type === "single-action-inline";
-  const inlineActionLabel = type === "single-action-inline" ? actionLabel : linkLabel;
-  const hasInlineAction = isInlineAction && (showInlineAction ?? true) && Boolean(inlineActionLabel);
-  const actionVariant = getBannerActionVariant(color);
-  const closeButton = (
-    <Button
-      aria-label={closeLabel ?? "Dismiss banner"}
-      className="ds-banner__close"
-      onClick={onClose}
-      size="icon-xs"
-      type="button"
-      variant="ghost"
-    >
-      <CloseIcon />
-    </Button>
-  );
-
-  return (
-    <section
-      aria-label={ariaLabel}
-      className={cx(
-        "ds-banner",
-        `ds-banner--${type}`,
-        `ds-banner--${size}`,
-        `ds-banner--${color}`,
-        `ds-banner--${content}`,
-        className,
-      )}
-      dir={dir}
-    >
-      <div className="ds-banner__main">
-        <div className="ds-banner__leading">
-          {showIcon && <span className="ds-banner__icon-wrap">{icon ?? <MegaphoneIcon />}</span>}
-          {hasDescription ? (
-            <span className="ds-banner__message">
-              {title && <strong className="ds-banner__title">{title}</strong>}
-              {title && description && <span className="ds-banner__separator">{"\u00b7"}</span>}
-              {description && <span className="ds-banner__description">{description}</span>}
-            </span>
-          ) : titleOnlyMessage ? (
-            <span className="ds-banner__title-only">{titleOnlyMessage}</span>
-          ) : null}
-        </div>
-
-        {hasInlineAction && (
-          <Button
-            className="ds-banner__link"
-            onClick={onAction}
-            size="sm"
-            type="button"
-            variant={type === "single-action-inline" ? actionVariant : "link"}
-          >
-            {inlineActionLabel}
-          </Button>
-        )}
-      </div>
-
-      {type === "single-action" && (
-        <div className="ds-banner__tail">
-          {actionLabel && (
-            <Button
-              className="ds-banner__action"
-              onClick={onAction}
-              size="sm"
-              type="button"
-              variant={actionVariant}
-            >
-              {actionLabel}
-            </Button>
-          )}
-          {closeButton}
-        </div>
-      )}
-
-      {type === "input" && (
-        <div className="ds-banner__tail ds-banner__tail--input">
-          <Input
-            aria-label={inputAriaLabel}
-            className="ds-banner__input"
-            hasInformationIcon={false}
-            placeholder={inputPlaceholder}
-            size="md"
-          />
-          {actionLabel && (
-            <Button
-              className="ds-banner__action"
-              onClick={onAction}
-              size="sm"
-              type="button"
-              variant={actionVariant}
-            >
-              {actionLabel}
-            </Button>
-          )}
-          {closeButton}
-        </div>
-      )}
-
-      {isInlineAction && closeButton}
-    </section>
-  );
-}
+import type { ReactNode } from "react";
+import { MegaphoneIcon as LucideMegaphoneIcon, XIcon } from "lucide-react";
+
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+import "./banner.css";
+
+export type BannerType = "slim" | "single-action-inline" | "single-action" | "input";
+export type BannerSize = "floating" | "full-width";
+export type BannerColor = "brand" | "grey" | "brand-light";
+export type BannerContent = "title" | "title-description";
+export type BannerDirection = "ltr" | "rtl";
+
+export type BannerProps = {
+  actionLabel?: string;
+  ariaLabel?: string;
+  className?: string;
+  closeLabel?: string;
+  color?: BannerColor;
+  content?: BannerContent;
+  dir?: BannerDirection;
+  description?: string;
+  icon?: ReactNode;
+  inputAriaLabel?: string;
+  inputPlaceholder?: string;
+  linkLabel?: string;
+  onAction?: () => void;
+  onClose?: () => void;
+  showIcon?: boolean;
+  showInlineAction?: boolean;
+  size?: BannerSize;
+  title?: string;
+  type?: BannerType;
+};
+
+function MegaphoneIcon() {
+  return <LucideMegaphoneIcon aria-hidden="true" className="ds-banner__icon" strokeWidth="var(--bh-icon-stroke-210)" />;
+}
+
+function CloseIcon() {
+  return <XIcon aria-hidden="true" className="ds-banner__close-icon" strokeWidth="var(--bh-icon-stroke-225)" />;
+}
+
+function getBannerActionVariant(color: BannerColor): ButtonProps["variant"] {
+  if (color === "brand-light") return "default";
+  if (color === "grey") return "secondary";
+  return "white";
+}
+
+function cx(...classes: Array<string | false | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function Banner({
+  actionLabel,
+  ariaLabel,
+  className = "",
+  closeLabel,
+  color = "brand",
+  content = "title",
+  description,
+  dir,
+  icon,
+  inputAriaLabel,
+  inputPlaceholder,
+  linkLabel,
+  onAction,
+  onClose,
+  showIcon = true,
+  showInlineAction,
+  size = "floating",
+  title,
+  type = "slim",
+}: BannerProps) {
+  const hasDescription = content === "title-description" && Boolean(title || description);
+  const titleOnlyMessage = title ?? description;
+  const isInlineAction = type === "slim" || type === "single-action-inline";
+  const inlineActionLabel = type === "single-action-inline" ? actionLabel : linkLabel;
+  const hasInlineAction = isInlineAction && (showInlineAction ?? true) && Boolean(inlineActionLabel);
+  const actionVariant = getBannerActionVariant(color);
+  const closeButton = (
+    <Button
+      aria-label={closeLabel ?? "Dismiss banner"}
+      className="ds-banner__close"
+      onClick={onClose}
+      size="icon-xs"
+      type="button"
+      variant="ghost"
+    >
+      <CloseIcon />
+    </Button>
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cx(
+        "ds-banner",
+        `ds-banner--${type}`,
+        `ds-banner--${size}`,
+        `ds-banner--${color}`,
+        `ds-banner--${content}`,
+        className,
+      )}
+      dir={dir}
+    >
+      <div className="ds-banner__main">
+        <div className="ds-banner__leading">
+          {showIcon && <span className="ds-banner__icon-wrap">{icon ?? <MegaphoneIcon />}</span>}
+          {hasDescription ? (
+            <span className="ds-banner__message">
+              {title && <strong className="ds-banner__title">{title}</strong>}
+              {title && description && <span className="ds-banner__separator">{"\u00b7"}</span>}
+              {description && <span className="ds-banner__description">{description}</span>}
+            </span>
+          ) : titleOnlyMessage ? (
+            <span className="ds-banner__title-only">{titleOnlyMessage}</span>
+          ) : null}
+        </div>
+
+        {hasInlineAction && (
+          <Button
+            className="ds-banner__link"
+            onClick={onAction}
+            size="sm"
+            type="button"
+            variant={type === "single-action-inline" ? actionVariant : "link"}
+          >
+            {inlineActionLabel}
+          </Button>
+        )}
+      </div>
+
+      {type === "single-action" && (
+        <div className="ds-banner__tail">
+          {actionLabel && (
+            <Button
+              className="ds-banner__action"
+              onClick={onAction}
+              size="sm"
+              type="button"
+              variant={actionVariant}
+            >
+              {actionLabel}
+            </Button>
+          )}
+          {closeButton}
+        </div>
+      )}
+
+      {type === "input" && (
+        <div className="ds-banner__tail ds-banner__tail--input">
+          <Input
+            aria-label={inputAriaLabel}
+            className="ds-banner__input"
+            hasInformationIcon={false}
+            placeholder={inputPlaceholder}
+            size="md"
+          />
+          {actionLabel && (
+            <Button
+              className="ds-banner__action"
+              onClick={onAction}
+              size="sm"
+              type="button"
+              variant={actionVariant}
+            >
+              {actionLabel}
+            </Button>
+          )}
+          {closeButton}
+        </div>
+      )}
+
+      {isInlineAction && closeButton}
+    </section>
+  );
+}

package/registry/components/expanded/Breadcrumbs.tsx

@@ -1,131 +1,131 @@
-import type { ReactNode } from "react";
-import {
-  ChevronRightIcon,
-  EllipsisIcon,
-  FolderIcon,
-  HomeIcon,
-} from "lucide-react";
-import "./breadcrumbs.css";
-
-export type BreadcrumbSeparator = "slash" | "chevron";
-export type BreadcrumbStyle = "default" | "raised";
-
-export type BreadcrumbItem = {
-  label: string;
-  href?: string;
-  icon?: ReactNode;
-  current?: boolean;
-};
-
-export type BreadcrumbsProps = {
-  "aria-label"?: string;
-  className?: string;
-  dir?: "ltr" | "rtl" | "auto";
-  iconOnly?: boolean;
-  items: BreadcrumbItem[];
-  maxItems?: number;
-  overflowLabel?: string;
-  separator?: BreadcrumbSeparator;
-  style?: BreadcrumbStyle;
-};
-
-type VisibleBreadcrumbItem = BreadcrumbItem & { overflow?: boolean };
-
-function cx(...classes: Array<string | false | undefined>) {
-  return classes.filter(Boolean).join(" ");
-}
-
-function visibleItems(
-  items: BreadcrumbItem[],
-  maxItems?: number,
-  overflowLabel?: string,
-): VisibleBreadcrumbItem[] {
-  if (!maxItems || maxItems < 3 || items.length <= maxItems) {
-    return items;
-  }
-
-  const tailCount = maxItems - 2;
-  return [items[0], { label: overflowLabel ?? "", overflow: true }, ...items.slice(-tailCount)];
-}
-
-export function Breadcrumbs({
-  "aria-label": ariaLabel,
-  className,
-  dir,
-  iconOnly = false,
-  items,
-  maxItems,
-  overflowLabel,
-  separator = "slash",
-  style: surfaceStyle = "default",
-}: BreadcrumbsProps) {
-  const renderedItems = visibleItems(items, maxItems, overflowLabel);
-
-  return (
-    <nav
-      aria-label={ariaLabel}
-      className={cx(
-        "ds-breadcrumbs",
-        `ds-breadcrumbs--${surfaceStyle}`,
-        `ds-breadcrumbs--${separator}`,
-        iconOnly && "ds-breadcrumbs--icon-only",
-        className,
-      )}
-      dir={dir}
-    >
-      <ol>
-        {renderedItems.map((item, index) => {
-          const isLast = index === renderedItems.length - 1;
-          const isCurrent = item.current || isLast;
-          const content = (
-            <>
-              <span className="ds-breadcrumbs__icon" aria-hidden={item.icon ? "true" : undefined}>
-                {item.overflow ? <OverflowIcon /> : item.icon}
-              </span>
-              <span className={cx("ds-breadcrumbs__label", iconOnly && "ds-breadcrumbs__label--hidden")}>
-                {item.label}
-              </span>
-            </>
-          );
-
-          return (
-            <li key={`${item.label}-${index}`}>
-              {index > 0 && <Separator separator={separator} />}
-              {item.href && !isCurrent && !item.overflow ? (
-                <a href={item.href}>{content}</a>
-              ) : (
-                <span aria-current={isCurrent ? "page" : undefined} className={isCurrent ? "is-current" : undefined}>
-                  {content}
-                </span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}
-
-function Separator({ separator }: { separator: BreadcrumbSeparator }) {
-  return (
-    <span aria-hidden="true" className="ds-breadcrumbs__separator">
-      {separator === "slash" ? "/" : <ChevronIcon />}
-    </span>
-  );
-}
-
-export function BreadcrumbHomeIcon() {
-  return <HomeIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
-}
-
-export function BreadcrumbFolderIcon() {
-  return <FolderIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
-}
-
-function ChevronIcon() {
-  return <ChevronRightIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-200)" />;
-}
-
-function OverflowIcon() {
-  return <EllipsisIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-225)" />;
-}
+import type { ReactNode } from "react";
+import {
+  ChevronRightIcon,
+  EllipsisIcon,
+  FolderIcon,
+  HomeIcon,
+} from "lucide-react";
+import "./breadcrumbs.css";
+
+export type BreadcrumbSeparator = "slash" | "chevron";
+export type BreadcrumbStyle = "default" | "raised";
+
+export type BreadcrumbItem = {
+  label: string;
+  href?: string;
+  icon?: ReactNode;
+  current?: boolean;
+};
+
+export type BreadcrumbsProps = {
+  "aria-label"?: string;
+  className?: string;
+  dir?: "ltr" | "rtl" | "auto";
+  iconOnly?: boolean;
+  items: BreadcrumbItem[];
+  maxItems?: number;
+  overflowLabel?: string;
+  separator?: BreadcrumbSeparator;
+  style?: BreadcrumbStyle;
+};
+
+type VisibleBreadcrumbItem = BreadcrumbItem & { overflow?: boolean };
+
+function cx(...classes: Array<string | false | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+function visibleItems(
+  items: BreadcrumbItem[],
+  maxItems?: number,
+  overflowLabel?: string,
+): VisibleBreadcrumbItem[] {
+  if (!maxItems || maxItems < 3 || items.length <= maxItems) {
+    return items;
+  }
+
+  const tailCount = maxItems - 2;
+  return [items[0], { label: overflowLabel ?? "", overflow: true }, ...items.slice(-tailCount)];
+}
+
+export function Breadcrumbs({
+  "aria-label": ariaLabel,
+  className,
+  dir,
+  iconOnly = false,
+  items,
+  maxItems,
+  overflowLabel,
+  separator = "slash",
+  style: surfaceStyle = "default",
+}: BreadcrumbsProps) {
+  const renderedItems = visibleItems(items, maxItems, overflowLabel);
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={cx(
+        "ds-breadcrumbs",
+        `ds-breadcrumbs--${surfaceStyle}`,
+        `ds-breadcrumbs--${separator}`,
+        iconOnly && "ds-breadcrumbs--icon-only",
+        className,
+      )}
+      dir={dir}
+    >
+      <ol>
+        {renderedItems.map((item, index) => {
+          const isLast = index === renderedItems.length - 1;
+          const isCurrent = item.current || isLast;
+          const content = (
+            <>
+              <span className="ds-breadcrumbs__icon" aria-hidden={item.icon ? "true" : undefined}>
+                {item.overflow ? <OverflowIcon /> : item.icon}
+              </span>
+              <span className={cx("ds-breadcrumbs__label", iconOnly && "ds-breadcrumbs__label--hidden")} dir="auto">
+                {item.label}
+              </span>
+            </>
+          );
+
+          return (
+            <li key={`${item.label}-${index}`}>
+              {index > 0 && <Separator separator={separator} />}
+              {item.href && !isCurrent && !item.overflow ? (
+                <a href={item.href}>{content}</a>
+              ) : (
+                <span aria-current={isCurrent ? "page" : undefined} className={isCurrent ? "is-current" : undefined}>
+                  {content}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+function Separator({ separator }: { separator: BreadcrumbSeparator }) {
+  return (
+    <span aria-hidden="true" className="ds-breadcrumbs__separator">
+      {separator === "slash" ? "/" : <ChevronIcon />}
+    </span>
+  );
+}
+
+export function BreadcrumbHomeIcon() {
+  return <HomeIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
+}
+
+export function BreadcrumbFolderIcon() {
+  return <FolderIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
+}
+
+function ChevronIcon() {
+  return <ChevronRightIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-200)" />;
+}
+
+function OverflowIcon() {
+  return <EllipsisIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-225)" />;
+}