banhaten 0.3.0 → 0.5.0

package/registry/components/expanded/Slideout.tsx

@@ -1,108 +1,108 @@
-import { useId, type ReactNode } from "react";
-import { XIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import "./slideout.css";
-
-export type SlideoutSize = "small" | "medium" | "large";
-export type SlideoutBreakpoint = "desktop" | "mobile";
-
-export type SlideoutProps = {
-  actionLabel?: string;
-  breakpoint?: SlideoutBreakpoint;
-  children?: ReactNode;
-  className?: string;
-  closeLabel?: string;
-  dir?: "ltr" | "rtl";
-  footer?: boolean;
-  headerAction?: boolean;
-  onAction?: () => void;
-  onClose?: () => void;
-  onPrimaryAction?: () => void;
-  onSecondaryAction?: () => void;
-  primaryActionLabel?: string;
-  secondaryAction?: boolean;
-  secondaryActionLabel?: string;
-  size?: SlideoutSize;
-  title?: string;
-};
-
-function cx(...classes: Array<string | false | null | undefined>) {
-  return classes.filter(Boolean).join(" ");
-}
-
-export function Slideout({
-  actionLabel,
-  breakpoint = "desktop",
-  children,
-  className = "",
-  closeLabel,
-  dir,
-  footer = true,
-  headerAction = true,
-  onAction,
-  onClose,
-  onPrimaryAction,
-  onSecondaryAction,
-  primaryActionLabel,
-  secondaryAction = true,
-  secondaryActionLabel,
-  size = "small",
-  title,
-}: SlideoutProps) {
-  const titleId = useId();
-  const hasFooterActions = Boolean(primaryActionLabel || (secondaryAction && secondaryActionLabel));
-
-  return (
-    <aside
-      className={cx(
-        "ds-slideout",
-        `ds-slideout--${size}`,
-        `ds-slideout--${breakpoint}`,
-        className,
-      )}
-      dir={dir}
-    >
-      <section
-        aria-labelledby={title ? titleId : undefined}
-        className="ds-slideout__panel"
-        data-slot="slideout-panel"
-        role={title ? "region" : undefined}
-      >
-        <header className="ds-slideout__header">
-          <div className="ds-slideout__heading-wrap">
-            {title ? <h2 className="ds-slideout__title" id={titleId}>{title}</h2> : null}
-            {headerAction && actionLabel && (
-              <Button className="ds-slideout__text-button" size="sm" type="button" variant="link" onClick={onAction}>
-                {actionLabel}
-              </Button>
-            )}
-          </div>
-          {closeLabel && (
-            <Button aria-label={closeLabel} className="ds-slideout__close" size="icon-sm" type="button" variant="ghost" onClick={onClose}>
-              <CloseIcon />
-            </Button>
-          )}
-        </header>
-        <div className="ds-slideout__body">{children}</div>
-        {footer && hasFooterActions && (
-          <footer className="ds-slideout__footer">
-            {primaryActionLabel && (
-              <Button className="ds-slideout__button ds-slideout__button--primary" size="sm" type="button" onClick={onPrimaryAction}>
-                {primaryActionLabel}
-              </Button>
-            )}
-            {secondaryAction && secondaryActionLabel && (
-              <Button className="ds-slideout__button ds-slideout__button--secondary" size="sm" type="button" variant="secondary" onClick={onSecondaryAction}>
-                {secondaryActionLabel}
-              </Button>
-            )}
-          </footer>
-        )}
-      </section>
-    </aside>
-  );
-}
-
-function CloseIcon() {
-  return <XIcon aria-hidden="true" className="ds-slideout__close-icon" />;
-}
+import { useId, type ReactNode } from "react";
+import { XIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import "./slideout.css";
+
+export type SlideoutSize = "small" | "medium" | "large";
+export type SlideoutBreakpoint = "desktop" | "mobile";
+
+export type SlideoutProps = {
+  actionLabel?: string;
+  breakpoint?: SlideoutBreakpoint;
+  children?: ReactNode;
+  className?: string;
+  closeLabel?: string;
+  dir?: "ltr" | "rtl";
+  footer?: boolean;
+  headerAction?: boolean;
+  onAction?: () => void;
+  onClose?: () => void;
+  onPrimaryAction?: () => void;
+  onSecondaryAction?: () => void;
+  primaryActionLabel?: string;
+  secondaryAction?: boolean;
+  secondaryActionLabel?: string;
+  size?: SlideoutSize;
+  title?: string;
+};
+
+function cx(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function Slideout({
+  actionLabel,
+  breakpoint = "desktop",
+  children,
+  className = "",
+  closeLabel,
+  dir,
+  footer = true,
+  headerAction = true,
+  onAction,
+  onClose,
+  onPrimaryAction,
+  onSecondaryAction,
+  primaryActionLabel,
+  secondaryAction = true,
+  secondaryActionLabel,
+  size = "small",
+  title,
+}: SlideoutProps) {
+  const titleId = useId();
+  const hasFooterActions = Boolean(primaryActionLabel || (secondaryAction && secondaryActionLabel));
+
+  return (
+    <aside
+      className={cx(
+        "ds-slideout",
+        `ds-slideout--${size}`,
+        `ds-slideout--${breakpoint}`,
+        className,
+      )}
+      dir={dir}
+    >
+      <section
+        aria-labelledby={title ? titleId : undefined}
+        className="ds-slideout__panel"
+        data-slot="slideout-panel"
+        role={title ? "region" : undefined}
+      >
+        <header className="ds-slideout__header">
+          <div className="ds-slideout__heading-wrap">
+            {title ? <h2 className="ds-slideout__title" id={titleId}>{title}</h2> : null}
+            {headerAction && actionLabel && (
+              <Button className="ds-slideout__text-button" size="sm" type="button" variant="link" onClick={onAction}>
+                {actionLabel}
+              </Button>
+            )}
+          </div>
+          {closeLabel && (
+            <Button aria-label={closeLabel} className="ds-slideout__close" size="icon-sm" type="button" variant="ghost" onClick={onClose}>
+              <CloseIcon />
+            </Button>
+          )}
+        </header>
+        <div className="ds-slideout__body">{children}</div>
+        {footer && hasFooterActions && (
+          <footer className="ds-slideout__footer">
+            {primaryActionLabel && (
+              <Button className="ds-slideout__button ds-slideout__button--primary" size="sm" type="button" onClick={onPrimaryAction}>
+                {primaryActionLabel}
+              </Button>
+            )}
+            {secondaryAction && secondaryActionLabel && (
+              <Button className="ds-slideout__button ds-slideout__button--secondary" size="sm" type="button" variant="secondary" onClick={onSecondaryAction}>
+                {secondaryActionLabel}
+              </Button>
+            )}
+          </footer>
+        )}
+      </section>
+    </aside>
+  );
+}
+
+function CloseIcon() {
+  return <XIcon aria-hidden="true" className="ds-slideout__close-icon" />;
+}