@hilum/ui 3.2.2 → 3.2.4

package/src/components/url-redirect-prompt.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { ArrowRight } from "lucide-react";
+import { Callout } from "./callout";
+import { Switch } from "./switch";
+import { cn } from "../lib/utils";
+
+function normalizeUrlHandle(value: string): string {
+  return String(value || "")
+    .trim()
+    .replace(/^\/+|\/+$/g, "");
+}
+
+function urlResourcePath(prefix: string, handle: string): string {
+  const cleanPrefix = normalizeUrlHandle(prefix);
+  const cleanHandle = normalizeUrlHandle(handle);
+  if (!cleanPrefix || !cleanHandle) return "";
+  return `/${cleanPrefix}/${cleanHandle}`;
+}
+
+function hasUrlHandleChanged(originalHandle?: string, nextHandle?: string): boolean {
+  const original = normalizeUrlHandle(originalHandle || "");
+  const next = normalizeUrlHandle(nextHandle || "");
+  return Boolean(original && next && original !== next);
+}
+
+interface UrlRedirectPromptProps {
+  originalHandle?: string;
+  nextHandle?: string;
+  pathPrefix: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  switchLabel?: string;
+  className?: string;
+}
+
+function UrlRedirectPrompt({
+  originalHandle,
+  nextHandle,
+  pathPrefix,
+  checked,
+  onCheckedChange,
+  title = "Create URL redirect",
+  description,
+  switchLabel = "Create URL redirect",
+  className,
+}: UrlRedirectPromptProps) {
+  if (!hasUrlHandleChanged(originalHandle, nextHandle)) return null;
+
+  const fromPath = urlResourcePath(pathPrefix, originalHandle || "");
+  const toPath = urlResourcePath(pathPrefix, nextHandle || "");
+  const calloutProps = className ? { className } : {};
+
+  return (
+    <Callout
+      tone="warning"
+      compact
+      icon={<ArrowRight aria-hidden="true" />}
+      title={title}
+      actions={
+        <Switch checked={checked} onCheckedChange={onCheckedChange} aria-label={switchLabel} />
+      }
+      {...calloutProps}
+    >
+      {description || (
+        <p className="body-sm text-pretty text-muted-foreground">
+          Preserve search rankings and old links by redirecting{" "}
+          <span className="font-mono text-foreground">{fromPath}</span> to{" "}
+          <span className="font-mono text-foreground">{toPath}</span>.
+        </p>
+      )}
+    </Callout>
+  );
+}
+
+UrlRedirectPrompt.displayName = "UrlRedirectPrompt";
+
+export {
+  UrlRedirectPrompt,
+  hasUrlHandleChanged,
+  normalizeUrlHandle,
+  urlResourcePath,
+};
+export type { UrlRedirectPromptProps };

package/src/index.ts

@@ -23,6 +23,7 @@ export * from "./components/breadcrumb";
 export * from "./components/button-group";
 export * from "./components/button";
 export * from "./components/calendar";
+export * from "./components/callout";
 export * from "./components/card-heading";
 export * from "./components/card";
 export * from "./components/carousel";
@@ -36,6 +37,7 @@ export * from "./components/command-palette";
 export * from "./components/command";
 export * from "./components/context-menu";
 export * from "./components/data-table";
+export * from "./components/data-transfer-controls";
 export * from "./components/date-picker";
 export * from "./components/description-list";
 export * from "./components/dialog";
@@ -43,7 +45,9 @@ export * from "./components/drawer";
 export * from "./components/dropdown-menu";
 export * from "./components/empty-state";
 export * from "./components/field";
+export * from "./components/file-dropzone";
 export * from "./components/grid-list";
+export * from "./components/help-tooltip";
 export * from "./components/hover-card";
 export * from "./components/input-group";
 export * from "./components/input-number";
@@ -51,6 +55,7 @@ export * from "./components/input-otp";
 export * from "./components/input";
 export * from "./components/kbd";
 export * from "./components/label";
+export * from "./components/media-asset-card";
 export * from "./components/media-object";
 export * from "./components/menubar";
 export * from "./components/native-select";
@@ -64,8 +69,10 @@ export * from "./components/property-row";
 export * from "./components/radio-card";
 export * from "./components/radio-group";
 export * from "./components/resizable";
+export * from "./components/rich-text-editor";
 export * from "./components/scroll-area";
 export * from "./components/section-heading";
+export * from "./components/searchable-table";
 export * from "./components/select";
 export * from "./components/separator";
 export * from "./components/sheet";
@@ -76,11 +83,14 @@ export * from "./components/sonner";
 export * from "./components/spinner";
 export * from "./components/stacked-list";
 export * from "./components/stat-card";
+export * from "./components/status-badge";
 export * from "./components/steps";
 export * from "./components/switch";
 export * from "./components/table";
 export * from "./components/tabs";
 export * from "./components/textarea";
+export * from "./components/titled-card";
 export * from "./components/toggle-group";
 export * from "./components/toggle";
 export * from "./components/tooltip";
+export * from "./components/url-redirect-prompt";

package/src/lib/mobile-popper-sheet.ts

@@ -0,0 +1,78 @@
+export const mobileDialogSheetContentClassName = [
+  "fixed inset-x-0 bottom-0 z-50 max-h-[calc(100dvh-1rem)] w-full overflow-y-auto",
+  "rounded-t-2xl border border-border bg-card p-6 shadow-elevated",
+  "max-sm:pb-[calc(1.5rem+env(safe-area-inset-bottom))] max-sm:pt-8",
+  "max-sm:before:absolute max-sm:before:left-1/2 max-sm:before:top-3 max-sm:before:h-1 max-sm:before:w-9",
+  "max-sm:before:-translate-x-1/2 max-sm:before:rounded-full max-sm:before:bg-muted-foreground/35",
+].join(" ");
+
+export const desktopDialogContentClassName =
+  "sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:max-h-[calc(100dvh-2rem)] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-2xl";
+
+export const dialogSheetMotionClassName = [
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+  "sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:zoom-in-95",
+].join(" ");
+
+export const mobilePopperSheetPositionClassName = [
+  "max-sm:!fixed max-sm:!inset-x-3 max-sm:!bottom-3 max-sm:!top-auto max-sm:!left-3 max-sm:!right-3",
+  "max-sm:!w-auto max-sm:!min-w-0 max-sm:!max-w-none max-sm:!transform-none",
+].join(" ");
+
+export const mobilePopperSheetSurfaceClassName =
+  "max-sm:max-h-[min(70dvh,28rem)] max-sm:rounded-2xl max-sm:border max-sm:border-border max-sm:shadow-elevated";
+
+export const mobilePopperSheetMotionClassName = [
+  "max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=open]:slide-in-from-bottom",
+].join(" ");
+
+export const mobilePopperSheetStyle = `
+@media (max-width: 639px) {
+  [data-radix-popper-content-wrapper]:has([data-hilum-mobile-sheet="true"]) {
+    position: fixed !important;
+    inset: 0 !important;
+    min-width: 0 !important;
+    transform: none !important;
+    pointer-events: none;
+    z-index: 50 !important;
+  }
+
+  [data-radix-popper-content-wrapper]:has([data-hilum-mobile-sheet="true"][data-state="open"])::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background: rgb(0 0 0 / 0.3);
+    backdrop-filter: blur(4px);
+    pointer-events: auto;
+  }
+
+  [data-hilum-mobile-sheet="true"] {
+    position: fixed !important;
+    left: 0.75rem !important;
+    right: 0.75rem !important;
+    bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
+    top: auto !important;
+    width: calc(100dvw - 1.5rem) !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    transform: none !important;
+    pointer-events: auto;
+    transform-origin: bottom center !important;
+    overscroll-behavior: contain;
+  }
+
+  [data-hilum-mobile-sheet="true"]::before {
+    content: "";
+    position: absolute;
+    top: 0.5rem;
+    left: 50%;
+    width: 2.25rem;
+    height: 0.25rem;
+    border-radius: 999px;
+    background: hsl(var(--muted-foreground) / 0.35);
+    transform: translateX(-50%);
+  }
+}
+`;