banhaten 0.1.0

package/registry/components/divider.tsx

@@ -0,0 +1,82 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const dividerVariants = cva("shrink-0 border-0 p-0", {
+  variants: {
+    direction: {
+      horizontal:
+        "h-[var(--bh-space-xxxs-1)] w-[var(--bh-space-15xl-224)]",
+      vertical:
+        "h-[var(--bh-space-15xl-224)] w-[var(--bh-space-xxxs-1)]",
+    },
+    type: {
+      solid: "bg-[var(--bh-border-subtle)]",
+      dotted: "bg-transparent",
+    },
+  },
+  defaultVariants: {
+    direction: "horizontal",
+    type: "solid",
+  },
+})
+
+type DividerDirection = NonNullable<
+  VariantProps<typeof dividerVariants>["direction"]
+>
+type DividerType = NonNullable<VariantProps<typeof dividerVariants>["type"]>
+
+type DividerProps = React.ComponentProps<"div"> &
+  VariantProps<typeof dividerVariants> & {
+    decorative?: boolean
+  }
+
+function Divider({
+  className,
+  direction = "horizontal",
+  type = "solid",
+  decorative = false,
+  role,
+  style,
+  "aria-hidden": ariaHidden,
+  ...props
+}: DividerProps) {
+  const selectedDirection = direction || "horizontal"
+  const selectedType = type || "solid"
+  const dottedStyle =
+    selectedType === "dotted"
+      ? getDottedDividerStyle(selectedDirection)
+      : undefined
+
+  return (
+    <div
+      aria-hidden={decorative ? true : ariaHidden}
+      aria-orientation={decorative ? undefined : selectedDirection}
+      data-direction={selectedDirection}
+      data-slot="divider"
+      data-type={selectedType}
+      role={decorative ? "presentation" : role || "separator"}
+      style={{ ...dottedStyle, ...style }}
+      className={cn(
+        dividerVariants({
+          direction: selectedDirection,
+          type: selectedType,
+          className,
+        })
+      )}
+      {...props}
+    />
+  )
+}
+
+function getDottedDividerStyle(direction: DividerDirection): React.CSSProperties {
+  const axis = direction === "vertical" ? "bottom" : "right"
+
+  return {
+    backgroundImage: `repeating-linear-gradient(to ${axis}, var(--bh-border-subtle) 0 var(--bh-space-xxs-2), transparent var(--bh-space-xxs-2) calc(var(--bh-space-xxs-2) + var(--bh-space-xxs-2)))`,
+  }
+}
+
+export { Divider, dividerVariants }
+export type { DividerDirection, DividerProps, DividerType }

package/registry/components/expanded/ActivityFeed.tsx

@@ -0,0 +1,226 @@
+import type { ReactNode } from "react";
+import "./activityFeed.css";
+
+const defaultAvatarSrc = new URL("../assets/activity-feed-avatar.png", import.meta.url).href;
+
+export type ActivityFeedItemType = "caption" | "slot";
+export type ActivityFeedActionVariant = "primary" | "secondary";
+
+export type ActivityFeedAction = {
+  ariaLabel?: string;
+  disabled?: boolean;
+  href?: string;
+  label: string;
+  onClick?: () => void;
+  variant?: ActivityFeedActionVariant;
+};
+
+export type ActivityFeedItemProps = {
+  actions?: ActivityFeedAction[] | false;
+  avatarAlt?: string;
+  avatarSrc?: string;
+  caption?: ReactNode;
+  className?: string;
+  hasActionButtons?: boolean;
+  hasCaption?: boolean;
+  hasLink?: boolean;
+  hasStatus?: boolean;
+  hasSupportText?: boolean;
+  hasTimestamp?: boolean;
+  hasTwoActionButtons?: boolean;
+  label?: ReactNode;
+  link?: ReactNode;
+  dir?: "ltr" | "rtl";
+  showLine?: boolean;
+  showPaddingBottom?: boolean;
+  slotContent?: ReactNode;
+  supportText?: ReactNode;
+  timestamp?: ReactNode;
+  type?: ActivityFeedItemType;
+};
+
+export type ActivityFeedProps = {
+  ariaLabel?: string;
+  avatarSrc?: string;
+  className?: string;
+  dir?: "ltr" | "rtl";
+  items?: ActivityFeedItemProps[];
+};
+
+function classes(...names: Array<string | false | undefined>) {
+  return names.filter(Boolean).join(" ");
+}
+
+function StatusDot() {
+  return (
+    <span className="ds-activity-feed-item__status" aria-hidden="true" data-node-id="188:64134">
+      <span data-node-id="188:64135" />
+    </span>
+  );
+}
+
+function Indicator({
+  avatarAlt,
+  avatarSrc,
+  rtl,
+  showLine,
+  type,
+}: {
+  avatarAlt: string;
+  avatarSrc: string;
+  rtl: boolean;
+  showLine: boolean;
+  type: ActivityFeedItemType;
+}) {
+  const avatarNodeId = rtl ? (type === "caption" ? "587:18722" : "587:18703") : type === "caption" ? "584:18593" : "584:10955";
+
+  return (
+    <span className="ds-activity-feed-item__indicator" aria-hidden={avatarAlt ? undefined : "true"}>
+      <span className="ds-activity-feed-item__avatar" data-node-id={avatarNodeId}>
+        <img alt={avatarAlt} src={avatarSrc} />
+      </span>
+      {showLine && <span className="ds-activity-feed-item__line" />}
+    </span>
+  );
+}
+
+function ActionButton({ action }: { action: ActivityFeedAction }) {
+  const className = classes("ds-activity-feed-item__button", `ds-activity-feed-item__button--${action.variant ?? "secondary"}`);
+
+  if (action.href) {
+    return (
+      <a aria-label={action.ariaLabel} className={className} href={action.href}>
+        {action.label}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      aria-label={action.ariaLabel}
+      className={className}
+      disabled={action.disabled}
+      onClick={action.onClick}
+      type="button"
+    >
+      {action.label}
+    </button>
+  );
+}
+
+export function ActivityFeedItem({
+  actions,
+  avatarAlt = "",
+  avatarSrc = defaultAvatarSrc,
+  caption,
+  className,
+  hasActionButtons = true,
+  hasCaption = true,
+  hasLink = true,
+  hasStatus = true,
+  hasSupportText = true,
+  hasTimestamp = true,
+  hasTwoActionButtons = true,
+  label,
+  link,
+  dir = "ltr",
+  showLine = true,
+  showPaddingBottom = true,
+  slotContent,
+  supportText,
+  timestamp,
+  type = "caption",
+}: ActivityFeedItemProps) {
+  const actionItems = actions === false || !hasActionButtons ? [] : (actions ?? []).slice(0, hasTwoActionButtons ? 2 : 1);
+  const rtl = dir === "rtl";
+  const nodeId = rtl ? (type === "caption" ? "587:18720" : "587:18701") : type === "caption" ? "584:18591" : "584:10411";
+
+  const textParts = rtl
+    ? [
+        hasLink && link && <span className="ds-activity-feed-item__link" key="link">{link}</span>,
+        hasSupportText && supportText && <span className="ds-activity-feed-item__support" key="support">{supportText}</span>,
+        label && <strong key="label">{label}</strong>,
+      ]
+    : [
+        label && <strong key="label">{label}</strong>,
+        hasSupportText && supportText && <span className="ds-activity-feed-item__support" key="support">{supportText}</span>,
+        hasLink && link && <span className="ds-activity-feed-item__link" key="link">{link}</span>,
+      ];
+
+  return (
+    <article
+      className={classes(
+        "ds-activity-feed-item",
+        `ds-activity-feed-item--${type}`,
+        rtl ? "ds-activity-feed-item--rtl" : "ds-activity-feed-item--ltr",
+        className,
+      )}
+      data-node-id={nodeId}
+      dir={rtl ? "rtl" : "ltr"}
+    >
+      {!rtl && <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} rtl={rtl} showLine={showLine} type={type} />}
+
+      <div className="ds-activity-feed-item__content">
+        <div className="ds-activity-feed-item__container">
+          <div className="ds-activity-feed-item__topline">
+            {rtl && hasStatus && <StatusDot />}
+            <div className="ds-activity-feed-item__text">{textParts}</div>
+            {!rtl && hasStatus && <StatusDot />}
+          </div>
+
+          {type === "slot" ? (
+            slotContent ? <div className="ds-activity-feed-item__slot">{slotContent}</div> : null
+          ) : (
+            hasCaption && caption && (
+              <div className="ds-activity-feed-item__caption">{caption}</div>
+            )
+          )}
+        </div>
+
+        {hasTimestamp && timestamp && (
+          <div className="ds-activity-feed-item__timestamp">{timestamp}</div>
+        )}
+
+        {actionItems.length > 0 && (
+          <div className="ds-activity-feed-item__actions">
+            {actionItems.map((action, index) => (
+              <ActionButton action={action} key={`${action.label}-${index}`} />
+            ))}
+          </div>
+        )}
+
+        {showPaddingBottom && <div className="ds-activity-feed-item__bottom-space" aria-hidden="true" />}
+      </div>
+
+      {rtl && <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} rtl={rtl} showLine={showLine} type={type} />}
+    </article>
+  );
+}
+
+export function ActivityFeed({
+  ariaLabel,
+  avatarSrc = defaultAvatarSrc,
+  className,
+  dir = "ltr",
+  items = [],
+}: ActivityFeedProps) {
+  const rtl = dir === "rtl";
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={classes("ds-activity-feed", rtl ? "ds-activity-feed--rtl" : "ds-activity-feed--ltr", className)}
+      data-node-id={rtl ? "587:19711" : "587:19381"}
+      dir={rtl ? "rtl" : "ltr"}
+    >
+      {items.map((item, index) => (
+        <ActivityFeedItem
+          {...item}
+          avatarSrc={item.avatarSrc ?? avatarSrc}
+          key={index}
+          dir={item.dir ?? dir}
+        />
+      ))}
+    </section>
+  );
+}

package/registry/components/expanded/Banner.tsx

@@ -0,0 +1,145 @@
+import type { ReactNode } from "react";
+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 (
+    <svg aria-hidden="true" className="ds-banner__icon" viewBox="0 0 24 24">
+      <path d="M3 10.5v3a2.5 2.5 0 0 0 2.5 2.5h.63l1.15 3.44A1.5 1.5 0 0 0 8.7 20.5h1.1a1 1 0 0 0 .95-1.32L9.7 16H11l7.24 3.1A1.25 1.25 0 0 0 20 17.95V6.05a1.25 1.25 0 0 0-1.76-1.14L11 8H5.5A2.5 2.5 0 0 0 3 10.5Zm15 6.69-6-2.58V9.39l6-2.58v10.38ZM5 10.5A.5.5 0 0 1 5.5 10H10v4H5.5a.5.5 0 0 1-.5-.5v-3Z" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg aria-hidden="true" className="ds-banner__close-icon" viewBox="0 0 24 24">
+      <path d="m12 10.59 5.3-5.3 1.41 1.42-5.3 5.29 5.3 5.3-1.41 1.41-5.3-5.3-5.29 5.3-1.42-1.41 5.3-5.3-5.3-5.29 1.42-1.42 5.29 5.3Z" />
+    </svg>
+  );
+}
+
+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 = "ltr",
+  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 closeButton = (
+    <button className="ds-banner__close" onClick={onClose} type="button" aria-label={closeLabel}>
+      <CloseIcon />
+    </button>
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cx(
+        "ds-banner",
+        `ds-banner--${type}`,
+        `ds-banner--${size}`,
+        `ds-banner--${color}`,
+        `ds-banner--${content}`,
+        dir === "rtl" && "ds-banner--rtl",
+        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} type="button">
+            {inlineActionLabel}
+          </button>
+        )}
+      </div>
+
+      {type === "single-action" && (
+        <div className="ds-banner__tail">
+          {actionLabel && (
+            <button className="ds-banner__action" onClick={onAction} type="button">
+              {actionLabel}
+            </button>
+          )}
+          {closeButton}
+        </div>
+      )}
+
+      {type === "input" && (
+        <div className="ds-banner__tail ds-banner__tail--input">
+          <input aria-label={inputAriaLabel} className="ds-banner__input" placeholder={inputPlaceholder} type="text" />
+          {actionLabel && (
+            <button className="ds-banner__action" onClick={onAction} type="button">
+              {actionLabel}
+            </button>
+          )}
+          {closeButton}
+        </div>
+      )}
+
+      {isInlineAction && closeButton}
+    </section>
+  );
+}