banhaten 0.3.0 → 0.5.0

package/registry/components/expanded/ActivityFeed.tsx

@@ -1,227 +1,227 @@
-import type { ReactNode } from "react";
-import { Button } from "@/components/ui/button";
-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">
-      <span />
-    </span>
-  );
-}
-
-function Indicator({
-  avatarAlt,
-  avatarSrc,
-  showLine,
-}: {
-  avatarAlt: string;
-  avatarSrc: string;
-  showLine: boolean;
-}) {
-  return (
-    <span className="ds-activity-feed-item__indicator" aria-hidden={avatarAlt ? undefined : "true"}>
-      <span className="ds-activity-feed-item__avatar">
-        <img alt={avatarAlt} src={avatarSrc} />
-      </span>
-      {showLine && <span className="ds-activity-feed-item__line" />}
-    </span>
-  );
-}
-
-function ActionButton({ action }: { action: ActivityFeedAction }) {
-  const variant = action.variant === "primary" ? "default" : "outline";
-
-  if (action.href) {
-    return (
-      <Button
-        aria-label={action.ariaLabel}
-        asChild
-        className="ds-activity-feed-item__button"
-        size="sm"
-        variant={variant}
-      >
-        <a
-          aria-disabled={action.disabled || undefined}
-          href={action.disabled ? undefined : action.href}
-          onClick={(event) => {
-            if (action.disabled) {
-              event.preventDefault();
-              return;
-            }
-
-            action.onClick?.();
-          }}
-          tabIndex={action.disabled ? -1 : undefined}
-        >
-          {action.label}
-        </a>
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      aria-label={action.ariaLabel}
-      className="ds-activity-feed-item__button"
-      disabled={action.disabled}
-      onClick={action.onClick}
-      size="sm"
-      type="button"
-      variant={variant}
-    >
-      {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,
-  showLine = true,
-  showPaddingBottom = true,
-  slotContent,
-  supportText,
-  timestamp,
-  type = "caption",
-}: ActivityFeedItemProps) {
-  const actionItems = actions === false || !hasActionButtons ? [] : (actions ?? []).slice(0, hasTwoActionButtons ? 2 : 1);
-
-  const textParts = [
-    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}`,
-        className,
-      )}
-      dir={dir}
-    >
-      <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} showLine={showLine} />
-
-      <div className="ds-activity-feed-item__content">
-        <div className="ds-activity-feed-item__container">
-          <div className="ds-activity-feed-item__topline">
-            <div className="ds-activity-feed-item__text">{textParts}</div>
-            {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>
-    </article>
-  );
-}
-
-export function ActivityFeed({
-  ariaLabel,
-  avatarSrc = defaultAvatarSrc,
-  className,
-  dir,
-  items = [],
-}: ActivityFeedProps) {
-  return (
-    <section
-      aria-label={ariaLabel}
-      className={classes("ds-activity-feed", className)}
-      dir={dir}
-    >
-      {items.map((item, index) => (
-        <ActivityFeedItem
-          {...item}
-          avatarSrc={item.avatarSrc ?? avatarSrc}
-          key={index}
-          dir={item.dir ?? dir}
-        />
-      ))}
-    </section>
-  );
-}
+import type { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+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">
+      <span />
+    </span>
+  );
+}
+
+function Indicator({
+  avatarAlt,
+  avatarSrc,
+  showLine,
+}: {
+  avatarAlt: string;
+  avatarSrc: string;
+  showLine: boolean;
+}) {
+  return (
+    <span className="ds-activity-feed-item__indicator" aria-hidden={avatarAlt ? undefined : "true"}>
+      <span className="ds-activity-feed-item__avatar">
+        <img alt={avatarAlt} src={avatarSrc} />
+      </span>
+      {showLine && <span className="ds-activity-feed-item__line" />}
+    </span>
+  );
+}
+
+function ActionButton({ action }: { action: ActivityFeedAction }) {
+  const variant = action.variant === "primary" ? "default" : "outline";
+
+  if (action.href) {
+    return (
+      <Button
+        aria-label={action.ariaLabel}
+        asChild
+        className="ds-activity-feed-item__button"
+        size="sm"
+        variant={variant}
+      >
+        <a
+          aria-disabled={action.disabled || undefined}
+          href={action.disabled ? undefined : action.href}
+          onClick={(event) => {
+            if (action.disabled) {
+              event.preventDefault();
+              return;
+            }
+
+            action.onClick?.();
+          }}
+          tabIndex={action.disabled ? -1 : undefined}
+        >
+          {action.label}
+        </a>
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      aria-label={action.ariaLabel}
+      className="ds-activity-feed-item__button"
+      disabled={action.disabled}
+      onClick={action.onClick}
+      size="sm"
+      type="button"
+      variant={variant}
+    >
+      {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,
+  showLine = true,
+  showPaddingBottom = true,
+  slotContent,
+  supportText,
+  timestamp,
+  type = "caption",
+}: ActivityFeedItemProps) {
+  const actionItems = actions === false || !hasActionButtons ? [] : (actions ?? []).slice(0, hasTwoActionButtons ? 2 : 1);
+
+  const textParts = [
+    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}`,
+        className,
+      )}
+      dir={dir}
+    >
+      <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} showLine={showLine} />
+
+      <div className="ds-activity-feed-item__content">
+        <div className="ds-activity-feed-item__container">
+          <div className="ds-activity-feed-item__topline">
+            <div className="ds-activity-feed-item__text">{textParts}</div>
+            {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>
+    </article>
+  );
+}
+
+export function ActivityFeed({
+  ariaLabel,
+  avatarSrc = defaultAvatarSrc,
+  className,
+  dir,
+  items = [],
+}: ActivityFeedProps) {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={classes("ds-activity-feed", className)}
+      dir={dir}
+    >
+      {items.map((item, index) => (
+        <ActivityFeedItem
+          {...item}
+          avatarSrc={item.avatarSrc ?? avatarSrc}
+          key={index}
+          dir={item.dir ?? dir}
+        />
+      ))}
+    </section>
+  );
+}

package/registry/components/expanded/ActivityHeatmap.tsx

@@ -1,64 +1,64 @@
-import type { ComponentPropsWithoutRef } from "react";
-import "./activityHeatmap.css";
-
-export type ActivityHeatmapLevel = 0 | 1 | 2 | 3 | 4;
-
-export type ActivityHeatmapItem = {
-  id?: string;
-  label?: string;
-  level: ActivityHeatmapLevel;
-};
-
-export type ActivityHeatmapProps = Omit<
-  ComponentPropsWithoutRef<"div">,
-  "children" | "dir"
-> & {
-  ariaLabel?: string;
-  dir?: "ltr" | "rtl";
-  items?: readonly ActivityHeatmapItem[];
-};
-
-function classes(...names: Array<string | false | undefined>) {
-  return names.filter(Boolean).join(" ");
-}
-
-function normalizeLevel(level: ActivityHeatmapLevel): ActivityHeatmapLevel {
-  return Math.max(0, Math.min(4, Math.round(level))) as ActivityHeatmapLevel;
-}
-
-export function ActivityHeatmap({
-  ariaLabel = "Activity heatmap",
-  className,
-  dir,
-  items = [],
-  tabIndex = 0,
-  ...props
-}: ActivityHeatmapProps) {
-  return (
-    <div
-      {...props}
-      aria-label={ariaLabel}
-      className={classes("ds-activity-heatmap", className)}
-      data-slot="activity-heatmap"
-      dir={dir}
-      role="img"
-      tabIndex={tabIndex}
-    >
-      <span
-        aria-hidden="true"
-        className="ds-activity-heatmap__grid"
-        data-slot="activity-heatmap-grid"
-      >
-        {items.map((item, index) => (
-          <span
-            className="ds-activity-heatmap__cell"
-            data-level={normalizeLevel(item.level)}
-            data-slot="activity-heatmap-cell"
-            key={item.id ?? index}
-            title={item.label}
-          />
-        ))}
-      </span>
-    </div>
-  );
-}
+import type { ComponentPropsWithoutRef } from "react";
+import "./activityHeatmap.css";
+
+export type ActivityHeatmapLevel = 0 | 1 | 2 | 3 | 4;
+
+export type ActivityHeatmapItem = {
+  id?: string;
+  label?: string;
+  level: ActivityHeatmapLevel;
+};
+
+export type ActivityHeatmapProps = Omit<
+  ComponentPropsWithoutRef<"div">,
+  "children" | "dir"
+> & {
+  ariaLabel?: string;
+  dir?: "ltr" | "rtl";
+  items?: readonly ActivityHeatmapItem[];
+};
+
+function classes(...names: Array<string | false | undefined>) {
+  return names.filter(Boolean).join(" ");
+}
+
+function normalizeLevel(level: ActivityHeatmapLevel): ActivityHeatmapLevel {
+  return Math.max(0, Math.min(4, Math.round(level))) as ActivityHeatmapLevel;
+}
+
+export function ActivityHeatmap({
+  ariaLabel = "Activity heatmap",
+  className,
+  dir,
+  items = [],
+  tabIndex = 0,
+  ...props
+}: ActivityHeatmapProps) {
+  return (
+    <div
+      {...props}
+      aria-label={ariaLabel}
+      className={classes("ds-activity-heatmap", className)}
+      data-slot="activity-heatmap"
+      dir={dir}
+      role="img"
+      tabIndex={tabIndex}
+    >
+      <span
+        aria-hidden="true"
+        className="ds-activity-heatmap__grid"
+        data-slot="activity-heatmap-grid"
+      >
+        {items.map((item, index) => (
+          <span
+            className="ds-activity-heatmap__cell"
+            data-level={normalizeLevel(item.level)}
+            data-slot="activity-heatmap-cell"
+            key={item.id ?? index}
+            title={item.label}
+          />
+        ))}
+      </span>
+    </div>
+  );
+}