@epicbagel/saas-kit 1.2.3 → 1.4.0

package/README.md

@@ -160,6 +160,121 @@ public in 1.1.0, and these were the decisions about its props then:
   scroller neither anchors it nor tracks it. It has no time marker, files or
   rich `content`, and the turns either side of it keep their time grouping.
 
+## File preview (1.3.0)
+
+`primitives/file-preview` shows a file in a dialog without leaving the page:
+the kit's large preview dialog on desktop and its near-full-height drawer on
+mobile, with the file's name, a download action and a close button in the
+header.
+
+```tsx
+import { FilePreview } from "@epicbagel/saas-kit/primitives/file-preview";
+
+<FilePreview
+  open={open}
+  onOpenChange={setOpen}
+  title={file.name}
+  mediaType={file.mediaType}
+  file={blob} // fetched by the app, with its own authentication
+  loading={!blob && !error}
+  error={error}
+  onDownload={download}
+/>
+```
+
+- **Each type its own way.** A PDF opens in the browser's own viewer (no PDF
+  engine in the bundle), an image as an image, text (plain text, CSV, JSON,
+  code) as it is, Markdown rendered through `LazyMarkdown`, audio and video
+  in the browser's player. Office documents, archives and anything else say
+  "No preview for this file." and offer the download; `fallback` replaces
+  that message. An image, player or text that won't load says so, with the
+  download.
+- **The app fetches.** The dialog is presentation only. Pass the file as a
+  `Blob` (`file`), fetched with whatever authentication the app needs, or a
+  short-lived, safe URL (`src`). Text and Markdown are read from the `Blob`,
+  or fetched from `src`, which must then allow it (the same origin, or
+  CORS). Nothing is read or fetched while the dialog is closed.
+- **Safe by construction.** A `Blob` is shown through an object URL the
+  dialog revokes when it closes or the file changes. A PDF from a `Blob` is
+  always shown as `application/pdf`, whatever type the blob carries, so a
+  file can never render as a page of your origin; text is never
+  interpreted; a Markdown file's raw HTML is ignored and its links open in a
+  new tab. A `src` is framed as it is, so serve it with its real type.
+- **Telling the type.** `filePreviewKind({ name, mediaType })` returns `pdf`,
+  `image`, `text`, `markdown`, `audio`, `video` or `none`, which is what the
+  dialog uses unless you pass `kind`. The media type decides when it says
+  something, and the extension when it is missing or generic
+  (`application/octet-stream`); text named `.md` is Markdown, and a name
+  that says text wins over a type with no preview (Windows reports a `.csv`
+  as `application/vnd.ms-excel`). Call it to choose between opening a
+  preview and downloading straight away.
+- **Long text.** A text file over 500,000 characters shows its start, cut at
+  a line break, under `truncatedLabel`.
+- **Copy.** `downloadLabel` ("Download file"), `loadingLabel` ("Loading
+  preview…"), `unavailableLabel` ("No preview for this file."),
+  `failedLabel` ("This file couldn't be shown here.") and `truncatedLabel`
+  can all be replaced; the close button's name ("Close preview") is fixed
+  for now.
+
+`primitives/document-preview` is the same dialog with every `src` in the
+browser's viewer, as it was in ui-kit; its API is unchanged.
+
+## Theme selector (1.4.0)
+
+`primitives/theme-selector` is a page of appearance settings: light, dark or
+system, then a grid of palettes, each previewing both modes. It owns no
+state: it shows the `palette` and `mode` it is given and reports picks, and
+the app applies and stores them. The palette is a `data-theme` attribute on
+`<html>` and the mode the `.dark` class: two independent axes.
+
+```tsx
+import { ThemeSelector, type ThemeSelectorMode } from "@epicbagel/saas-kit/primitives/theme-selector";
+import { NEUTRAL_PALETTE, type ThemePalette } from "@epicbagel/saas-kit/lib/neutral-theme";
+
+const PALETTES: ThemePalette[] = [NEUTRAL_PALETTE, ...yourPalettes];
+
+export function Appearance() {
+  const [palette, setPalette] = useState(NEUTRAL_PALETTE.id);
+  const [mode, setMode] = useState<ThemeSelectorMode>("system");
+  // Apply them: set `data-theme` on <html> to the palette, and toggle
+  // `.dark` for the mode (next-themes does that part for you).
+  return (
+    <ThemeSelector
+      palettes={PALETTES}
+      palette={palette}
+      onPaletteChange={setPalette}
+      mode={mode}
+      onModeChange={setMode}
+    />
+  );
+}
+```
+
+- **Palettes come in.** The selector knows only the kit's neutral palette,
+  `NEUTRAL_PALETTE` (`lib/neutral-theme`), which it offers alone when given
+  no `palettes`. Its id is `minimal`, the value the stylesheet's default
+  already answers to, so storing it changes nothing on screen.
+- **A `ThemePalette`** is an `id` (its `data-theme` value, and what you
+  store), a `label`, and optionally a `description`, a `radius` and each
+  mode's semantic tokens as hex (`light`, `dark`: the token contract in
+  `lib/neutral-theme`). Given the tokens, a preview paints from them inline
+  (`paletteStyle`), whatever palette the page is in. Without them it carries
+  `data-theme` and `data-mode`, so your palette CSS must select any element
+  (`[data-theme="<id>"]`, not `:root[data-theme="<id>"]`), re-declare the
+  `--color-*` aliases there (`paletteDeclarations` writes them) and answer
+  `[data-mode="light"]` and `[data-mode="dark"]`.
+- **Before the stored pick is known**, pass `null` for `palette` or `mode`:
+  nothing is marked rather than the wrong option. Omitted, they default to
+  the neutral palette and `system`.
+- **Layout.** One column on a phone (below `sm`). Otherwise the grid
+  follows the selector's own width, so the same component fits a dialog and
+  a settings page: one column while it is narrower than 24rem, two from
+  there, three from 42rem.
+- **Words.** `modeLabel` ("Mode"), `paletteLabel` ("Theme"), `lightLabel`,
+  `darkLabel`, `systemLabel`, and optional `modeDescription` and
+  `paletteDescription`. Each palette's card is named by its `label` and
+  described by its `description`.
+
 ## License
 
 MIT. Some components and styles are adapted from shadcn/ui, and the file

package/dist/chunk-2TKLS73N.js

@@ -0,0 +1,121 @@
+"use client";
+import {
+  ResponsiveDialog,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle
+} from "./chunk-JTI4244T.js";
+import {
+  Icon
+} from "./chunk-KN4RPX35.js";
+import {
+  Button
+} from "./chunk-HQRWRRZJ.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/file-preview-internals.tsx
+import { Download, Loader2, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PreviewDialog({
+  open,
+  onOpenChange,
+  title,
+  onDownload,
+  downloading,
+  downloadLabel,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResponsiveDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(ResponsiveDialogContent, { presentation: "preview", className: "h-[92dvh] outline-none", children: [
+    /* @__PURE__ */ jsxs(ResponsiveDialogHeader, { className: "shrink-0 border-b border-border", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(ResponsiveDialogTitle, { className: "min-w-0 flex-1 truncate text-left", children: title }),
+        onDownload && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon-compact",
+            variant: "ghost",
+            onClick: onDownload,
+            disabled: downloading,
+            title: downloadLabel,
+            "aria-label": downloadLabel,
+            children: /* @__PURE__ */ jsx(Icon, { icon: downloading ? Loader2 : Download, size: "sm", spin: downloading })
+          }
+        ),
+        /* @__PURE__ */ jsx(ResponsiveDialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon-compact",
+            variant: "ghost",
+            title: "Close preview",
+            "aria-label": "Close preview",
+            children: /* @__PURE__ */ jsx(Icon, { icon: X, size: "sm" })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(ResponsiveDialogDescription, { className: "sr-only", children: [
+        "Preview of ",
+        title
+      ] })
+    ] }),
+    children
+  ] }) });
+}
+function PreviewStage({
+  layout = "center",
+  label,
+  children
+}) {
+  const scrolls = layout === "scroll";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "preview-stage",
+      role: scrolls ? "region" : void 0,
+      "aria-label": scrolls ? label : void 0,
+      tabIndex: scrolls ? 0 : void 0,
+      className: cn(
+        "min-h-0 flex-1",
+        scrolls ? "overflow-y-auto overscroll-contain bg-background p-4 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50 sm:p-6" : "flex items-center justify-center overflow-hidden bg-muted"
+      ),
+      children
+    }
+  );
+}
+function PreviewLoading({ label }) {
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Icon, { icon: Loader2, size: "sm", spin: true }),
+    label
+  ] });
+}
+function PreviewNotice({
+  icon,
+  alert = false,
+  message,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: alert ? "alert" : void 0,
+      className: "flex max-w-sm flex-col items-center gap-3 p-6 text-center text-sm text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon, size: "lg" }),
+        /* @__PURE__ */ jsx("span", { children: message }),
+        children
+      ]
+    }
+  );
+}
+
+export {
+  PreviewDialog,
+  PreviewStage,
+  PreviewLoading,
+  PreviewNotice
+};

package/dist/chunk-4UUTKR3V.cjs

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/image.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var fitStyles = { cover: "object-cover", contain: "object-contain" };
+var radiusStyles = { none: "", sm: "rounded-sm", md: "rounded-md", xl: "rounded-xl", full: "rounded-full" };
+var Image = _react.forwardRef.call(void 0, function Image2({ fit = "cover", frameHeight, radius = "none", width = "auto", align = "start", border = false, shadow = "none", emphasis = "full", loadingIndicator = "none", className, onLoad, onError, src, ...props }, ref) {
+  const [loaded, setLoaded] = _react.useState.call(void 0, loadingIndicator === "none" || !src);
+  _react.useEffect.call(void 0, () => {
+    setLoaded(loadingIndicator === "none" || !src);
+  }, [loadingIndicator, src]);
+  const loading = loadingIndicator === "pulse" && !loaded;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "img",
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        fitStyles[fit],
+        radiusStyles[radius],
+        frameHeight === "sm" && "h-16",
+        frameHeight === "md" && "h-28",
+        width === "full" && "w-full",
+        width === "preview" && "w-full max-w-[380px]",
+        width === "preview-lg" && "w-full max-w-[440px]",
+        align === "center" && "mx-auto",
+        border && "border",
+        shadow === "subtle" && "shadow-xs",
+        loading && "animate-pulse bg-muted",
+        emphasis === "soft-until-parent-hover" && "transition-opacity duration-200 md:opacity-70 md:group-hover:opacity-100",
+        className
+      ),
+      src,
+      ...props,
+      "aria-busy": loading || void 0,
+      onLoad: (event) => {
+        setLoaded(true);
+        _optionalChain([onLoad, 'optionalCall', _ => _(event)]);
+      },
+      onError: (event) => {
+        setLoaded(true);
+        _optionalChain([onError, 'optionalCall', _2 => _2(event)]);
+      }
+    }
+  );
+});
+
+
+
+exports.Image = Image;

package/dist/chunk-BTHYGHOH.cjs

@@ -0,0 +1,143 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+
+
+
+
+
+
+
+
+
+var _chunk2BHI5ZWJcjs = require('./chunk-2BHI5ZWJ.cjs');
+
+
+
+
+
+
+
+
+
+var _chunkWDXEJDMOcjs = require('./chunk-WDXEJDMO.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/responsive-dialog.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var _reactresponsive = require('react-responsive');
+var _jsxruntime = require('react/jsx-runtime');
+var DesktopContext = React.createContext(false);
+var useIsDesktop = () => React.useContext(DesktopContext);
+var DESKTOP_QUERY = { minWidth: 1024 };
+var ResponsiveDialog = ({ children, ...props }) => {
+  const isDesktop = _reactresponsive.useMediaQuery.call(void 0, DESKTOP_QUERY);
+  const Root = isDesktop ? _chunkWDXEJDMOcjs.Dialog : _chunk2BHI5ZWJcjs.Drawer;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DesktopContext.Provider, { value: isDesktop, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ...props, children }) });
+};
+ResponsiveDialog.displayName = "ResponsiveDialog";
+var ResponsiveDialogTrigger = ({
+  children,
+  ...props
+}) => {
+  const Trigger = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogTrigger : _chunk2BHI5ZWJcjs.DrawerTrigger;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Trigger, { ...props, children });
+};
+ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
+var ResponsiveDialogClose = ({
+  children,
+  ...props
+}) => {
+  const Close = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogClose : _chunk2BHI5ZWJcjs.DrawerClose;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Close, { ...props, children });
+};
+ResponsiveDialogClose.displayName = "ResponsiveDialogClose";
+var ResponsiveDialogContent = React.forwardRef(({ className, children, presentation = "default", ...props }, ref) => {
+  if (useIsDesktop()) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkWDXEJDMOcjs.DialogContent,
+      {
+        ref,
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          "flex max-h-[85vh] max-w-md flex-col gap-0 overflow-hidden p-0",
+          presentation === "preview" && "max-w-2xl sm:h-[85vh] [&>button:last-child]:hidden",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk2BHI5ZWJcjs.DrawerContent,
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "max-h-[92vh]", className),
+      ...props,
+      children
+    }
+  );
+});
+ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
+var ResponsiveDialogHeader = ({
+  className,
+  visibility = "visible",
+  ...props
+}) => {
+  const Header = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogHeader : _chunk2BHI5ZWJcjs.DrawerHeader;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Header,
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, useIsDesktop() && "p-4", visibility === "screen-reader" && "sr-only", className),
+      ...props
+    }
+  );
+};
+ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
+var ResponsiveDialogBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0 flex-1 overflow-y-auto px-4 pb-6", className), ...props });
+ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
+var ResponsiveDialogFooter = ({
+  className,
+  layout = "auto",
+  ...props
+}) => {
+  const isDesktop = useIsDesktop();
+  const Footer = isDesktop ? _chunkWDXEJDMOcjs.DialogFooter : _chunk2BHI5ZWJcjs.DrawerFooter;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Footer,
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "mt-0 shrink-0 gap-2 border-t bg-background p-4",
+        layout === "fill" ? "flex-row space-x-0 [&>*]:min-w-0 [&>*]:flex-1" : isDesktop ? "flex-row justify-end space-x-0 [&>*]:flex-none" : "grid grid-cols-2 [&>*]:w-full",
+        className
+      ),
+      ...props
+    }
+  );
+};
+ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
+var ResponsiveDialogTitle = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Title = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogTitle : _chunk2BHI5ZWJcjs.DrawerTitle;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Title, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
+var ResponsiveDialogDescription = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Description = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogDescription : _chunk2BHI5ZWJcjs.DrawerDescription;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
+
+
+
+
+
+
+
+
+
+
+
+exports.ResponsiveDialog = ResponsiveDialog; exports.ResponsiveDialogTrigger = ResponsiveDialogTrigger; exports.ResponsiveDialogClose = ResponsiveDialogClose; exports.ResponsiveDialogContent = ResponsiveDialogContent; exports.ResponsiveDialogHeader = ResponsiveDialogHeader; exports.ResponsiveDialogBody = ResponsiveDialogBody; exports.ResponsiveDialogFooter = ResponsiveDialogFooter; exports.ResponsiveDialogTitle = ResponsiveDialogTitle; exports.ResponsiveDialogDescription = ResponsiveDialogDescription;

package/dist/chunk-D5EHW3O2.cjs

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+
+
+var _chunkGXHGMI3Zcjs = require('./chunk-GXHGMI3Z.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/toggle-group.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var _reacttogglegroup = require('@radix-ui/react-toggle-group'); var ToggleGroupPrimitive = _interopRequireWildcard(_reacttogglegroup);
+var _jsxruntime = require('react/jsx-runtime');
+var ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex items-center justify-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+var ToggleGroupItem = React.forwardRef(({ className, children, variant, size, grow = false, textSize = "inherit", ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        _chunkGXHGMI3Zcjs.toggleVariants.call(void 0, {
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        grow && "flex-1",
+        textSize === "xs" && "text-xs",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+
+
+
+exports.ToggleGroup = ToggleGroup; exports.ToggleGroupItem = ToggleGroupItem;