banhaten 0.3.0 → 0.5.0

package/registry/components/expanded/OnboardingStepListItem.tsx

@@ -1,59 +1,60 @@
-import { CircleCheckIcon } from "lucide-react";
-
-import "./onboardingStepListItem.css";
-
-export type OnboardingStepState = "finished" | "active" | "inactive";
-
-export type OnboardingStepListItemProps = {
-  className?: string;
-  dir?: "ltr" | "rtl";
-  label?: string;
-  showLeadingLine?: boolean;
-  showTrailingLine?: boolean;
-  state?: OnboardingStepState;
-};
-
-export function OnboardingStepListItem({
-  className = "",
-  dir,
-  label,
-  showLeadingLine = true,
-  showTrailingLine = true,
-  state = "finished",
-}: OnboardingStepListItemProps) {
-  const isFinished = state === "finished";
-  const isActive = state === "active";
-  const isInactive = state === "inactive";
-
-  return (
-    <div
-      className={[
-        "ds-onboarding-step",
-        `ds-onboarding-step--${state}`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      dir={dir}
-    >
-      <span className="ds-onboarding-step__line-wrap" aria-hidden="true">
-        {isFinished && showLeadingLine && <span className="ds-onboarding-step__line ds-onboarding-step__line--leading" />}
-        {isFinished && <CheckCircleIcon />}
-        {isFinished && showTrailingLine && <span className="ds-onboarding-step__line ds-onboarding-step__line--trailing" />}
-        {isActive && <span className="ds-onboarding-step__line ds-onboarding-step__line--active" />}
-        {isInactive && <span className="ds-onboarding-step__line ds-onboarding-step__line--inactive" />}
-      </span>
-      {label && <span className="ds-onboarding-step__label">{label}</span>}
-    </div>
-  );
-}
-
-function CheckCircleIcon() {
-  return (
-    <CircleCheckIcon
-      aria-hidden="true"
-      className="ds-onboarding-step__check"
-      strokeWidth="var(--bh-icon-stroke-225)"
-    />
-  );
-}
+import { CircleCheckIcon } from "lucide-react";
+
+import "./onboardingStepListItem.css";
+
+export type OnboardingStepState = "finished" | "active" | "inactive";
+
+export type OnboardingStepListItemProps = {
+  className?: string;
+  dir?: "ltr" | "rtl";
+  label?: string;
+  showLeadingLine?: boolean;
+  showTrailingLine?: boolean;
+  state?: OnboardingStepState;
+};
+
+export function OnboardingStepListItem({
+  className = "",
+  dir,
+  label,
+  showLeadingLine = true,
+  showTrailingLine = true,
+  state = "finished",
+}: OnboardingStepListItemProps) {
+  const isFinished = state === "finished";
+  const isActive = state === "active";
+  const isInactive = state === "inactive";
+
+  return (
+    <div
+      className={[
+        "ds-onboarding-step",
+        `ds-onboarding-step--${state}`,
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      dir={dir}
+    >
+      <span className="ds-onboarding-step__line-wrap" aria-hidden="true">
+        {isFinished && showLeadingLine && <span className="ds-onboarding-step__line ds-onboarding-step__line--leading" />}
+        {isFinished && <CheckCircleIcon />}
+        {isFinished && showTrailingLine && <span className="ds-onboarding-step__line ds-onboarding-step__line--trailing" />}
+        {isActive && <span className="ds-onboarding-step__line ds-onboarding-step__line--active" />}
+        {isInactive && <span className="ds-onboarding-step__line ds-onboarding-step__line--inactive" />}
+      </span>
+      {label && <span className="ds-onboarding-step__label">{label}</span>}
+    </div>
+  );
+}
+
+function CheckCircleIcon() {
+  return (
+    <span className="ds-onboarding-step__check-slot" aria-hidden="true">
+      <CircleCheckIcon
+        className="ds-onboarding-step__check"
+        strokeWidth="var(--bh-icon-stroke-225)"
+      />
+    </span>
+  );
+}

package/registry/components/expanded/PageHeader.tsx

@@ -1,166 +1,179 @@
-import type { ElementType, ReactNode } from "react";
-import { HomeIcon as LucideHomeIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Breadcrumbs as OwnedBreadcrumbs } from "./Breadcrumbs";
-import { Tabs, type TabsProps } from "../tabs";
-import "./pageHeader.css";
-
-export type PageHeaderBreadcrumb = {
-  label: string;
-  href?: string;
-  current?: boolean;
-  icon?: ReactNode;
-};
-
-export type PageHeaderAction = {
-  label: string;
-  ariaLabel?: string;
-  disabled?: boolean;
-  href?: string;
-  onClick?: () => void;
-};
-
-export type PageHeaderTabs = Pick<
-  TabsProps,
-  "activeIndex" | "ariaLabel" | "defaultActiveIndex" | "items" | "onActiveIndexChange"
->;
-
-export type PageHeaderProps = {
-  actions?: PageHeaderAction[] | false;
-  breadcrumbLabel?: string;
-  breadcrumbs?: PageHeaderBreadcrumb[] | false;
-  className?: string;
-  description?: string;
-  dir?: "ltr" | "rtl";
-  icon?: ReactNode | false;
-  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-  metaInfo?: string;
-  tabs?: PageHeaderTabs | false;
-  title?: string;
-};
-
-function classes(...names: Array<string | false | undefined>) {
-  return names.filter(Boolean).join(" ");
-}
-
-function HomeIcon() {
-  return <LucideHomeIcon aria-hidden="true" className="ds-page-header__home-icon" strokeWidth="var(--bh-icon-stroke-190)" />;
-}
-
-function Action({ action }: { action: PageHeaderAction }) {
-  const className = "ds-page-header__action";
-  const label = <span>{action.label}</span>;
-
-  if (action.href) {
-    return (
-      <Button asChild className={className} variant="secondary">
-        <a
-          aria-disabled={action.disabled || undefined}
-          aria-label={action.ariaLabel}
-          href={action.disabled ? undefined : action.href}
-          onClick={(event) => {
-            if (action.disabled) {
-              event.preventDefault();
-              return;
-            }
-            action.onClick?.();
-          }}
-          tabIndex={action.disabled ? -1 : undefined}
-        >
-          {label}
-        </a>
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      aria-label={action.ariaLabel}
-      className={className}
-      disabled={action.disabled}
-      onClick={action.onClick}
-      type="button"
-      variant="secondary"
-    >
-      {label}
-    </Button>
-  );
-}
-
-export function PageHeader({
-  actions = [],
-  breadcrumbLabel,
-  breadcrumbs = [],
-  className,
-  description,
-  dir,
-  headingLevel = 1,
-  icon,
-  metaInfo,
-  tabs = {},
-  title,
-}: PageHeaderProps) {
-  const breadcrumbItems = breadcrumbs === false ? [] : breadcrumbs;
-  const actionItems = actions === false ? [] : actions;
-  const showIcon = icon !== false;
-  const Heading = `h${headingLevel}` as ElementType;
-
-  return (
-    <header className={classes("ds-page-header", className)} dir={dir}>
-      {breadcrumbItems.length > 0 && (
-        <OwnedBreadcrumbs
-          aria-label={breadcrumbLabel ?? "Breadcrumb"}
-          className="ds-page-header__breadcrumbs"
-          dir={dir}
-          items={breadcrumbItems}
-        />
-      )}
-
-      <div className="ds-page-header__section">
-        <div className="ds-page-header__topline">
-          <div className="ds-page-header__copy">
-            <div className="ds-page-header__heading-row">
-              <div className="ds-page-header__heading-main">
-                {showIcon && <span className="ds-page-header__icon">{icon ?? <HomeIcon />}</span>}
-                {title && <Heading className="ds-page-header__title">{title}</Heading>}
-              </div>
-              {metaInfo && (
-                <span className="ds-page-header__meta">
-                  {metaInfo}
-                </span>
-              )}
-            </div>
-            {description && (
-              <p className="ds-page-header__description">
-                {description}
-              </p>
-            )}
-          </div>
-
-          {actionItems.length > 0 && (
-            <div className="ds-page-header__actions">
-              {actionItems.map((action, index) => (
-                <Action action={action} key={`${action.label}-${index}`} />
-              ))}
-            </div>
-          )}
-        </div>
-
-        {tabs !== false && (
-          <Tabs
-            ariaLabel={tabs.ariaLabel}
-            className="ds-page-header__tabs"
-            fullWidth
-            items={tabs.items}
-            activeIndex={tabs.activeIndex}
-            defaultActiveIndex={tabs.defaultActiveIndex}
-            onActiveIndexChange={tabs.onActiveIndexChange}
-            size="md"
-            variant="underline"
-            dir={dir}
-          />
-        )}
-      </div>
-    </header>
-  );
-}
+import type { ElementType, ReactNode } from "react";
+import { HomeIcon as LucideHomeIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Breadcrumbs as OwnedBreadcrumbs } from "./Breadcrumbs";
+import { Tabs, type TabsProps } from "../tabs";
+import "./pageHeader.css";
+
+export type PageHeaderBreadcrumb = {
+  label: string;
+  href?: string;
+  current?: boolean;
+  icon?: ReactNode;
+};
+
+export type PageHeaderAction = {
+  label: string;
+  ariaLabel?: string;
+  disabled?: boolean;
+  href?: string;
+  onClick?: () => void;
+};
+
+export type PageHeaderTabs = Pick<
+  TabsProps,
+  | "activeIndex"
+  | "ariaLabel"
+  | "defaultActiveIndex"
+  | "fullWidth"
+  | "items"
+  | "onActiveIndexChange"
+>;
+
+export type PageHeaderProps = {
+  actions?: PageHeaderAction[] | false;
+  breadcrumbLabel?: string;
+  breadcrumbs?: PageHeaderBreadcrumb[] | false;
+  className?: string;
+  description?: string;
+  dir?: "ltr" | "rtl";
+  icon?: ReactNode | false;
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  metaInfo?: string;
+  tabs?: PageHeaderTabs | false;
+  title?: string;
+};
+
+function classes(...names: Array<string | false | undefined>) {
+  return names.filter(Boolean).join(" ");
+}
+
+function HomeIcon() {
+  return <LucideHomeIcon aria-hidden="true" className="ds-page-header__home-icon" strokeWidth="var(--bh-icon-stroke-190)" />;
+}
+
+function Action({ action }: { action: PageHeaderAction }) {
+  const label = (
+    <span
+      className="min-w-0 px-[var(--bh-button-label-padding-x)]"
+      data-slot="button-label"
+      dir="auto"
+    >
+      {action.label}
+    </span>
+  );
+
+  if (action.href) {
+    return (
+      <Button asChild density="default" variant="secondary">
+        <a
+          aria-disabled={action.disabled || undefined}
+          aria-label={action.ariaLabel}
+          href={action.disabled ? undefined : action.href}
+          onClick={(event) => {
+            if (action.disabled) {
+              event.preventDefault();
+              return;
+            }
+            action.onClick?.();
+          }}
+          tabIndex={action.disabled ? -1 : undefined}
+        >
+          {label}
+        </a>
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      aria-label={action.ariaLabel}
+      disabled={action.disabled}
+      onClick={action.onClick}
+      density="default"
+      type="button"
+      variant="secondary"
+    >
+      {label}
+    </Button>
+  );
+}
+
+export function PageHeader({
+  actions = [],
+  breadcrumbLabel,
+  breadcrumbs = [],
+  className,
+  description,
+  dir,
+  headingLevel = 1,
+  icon,
+  metaInfo,
+  tabs = {},
+  title,
+}: PageHeaderProps) {
+  const breadcrumbItems = breadcrumbs === false ? [] : breadcrumbs;
+  const actionItems = actions === false ? [] : actions;
+  const showIcon = icon !== false;
+  const Heading = `h${headingLevel}` as ElementType;
+
+  return (
+    <header className={classes("ds-page-header", className)} dir={dir}>
+      {breadcrumbItems.length > 0 && (
+        <OwnedBreadcrumbs
+          aria-label={breadcrumbLabel ?? "Breadcrumb"}
+          className="ds-page-header__breadcrumbs"
+          dir={dir}
+          items={breadcrumbItems}
+        />
+      )}
+
+      <div className="ds-page-header__section">
+        <div className="ds-page-header__topline">
+          <div className="ds-page-header__copy">
+            <div className="ds-page-header__heading-row">
+              <div className="ds-page-header__heading-main">
+                {showIcon && <span className="ds-page-header__icon">{icon ?? <HomeIcon />}</span>}
+                {title && <Heading className="ds-page-header__title" dir="auto">{title}</Heading>}
+              </div>
+              {metaInfo && (
+                <span className="ds-page-header__meta">
+                  {metaInfo}
+                </span>
+              )}
+            </div>
+            {description && (
+              <p className="ds-page-header__description" dir="auto">
+                {description}
+              </p>
+            )}
+          </div>
+
+          {actionItems.length > 0 && (
+            <div className="ds-page-header__actions">
+              {actionItems.map((action, index) => (
+                <Action action={action} key={`${action.label}-${index}`} />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {tabs !== false && (
+          <Tabs
+            ariaLabel={tabs.ariaLabel}
+            className="ds-page-header__tabs"
+            fullWidth={tabs.fullWidth ?? true}
+            items={tabs.items}
+            activeIndex={tabs.activeIndex}
+            defaultActiveIndex={tabs.defaultActiveIndex}
+            onActiveIndexChange={tabs.onActiveIndexChange}
+            rootClassName="ds-page-header__tabs-root"
+            size="md"
+            variant="underline"
+            dir={dir}
+          />
+        )}
+      </div>
+    </header>
+  );
+}