@umami/shiso 1.6.0 → 1.8.0

package/src/styles/global.css

@@ -5,6 +5,32 @@
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
+/* tw-animate-css defines these keyframes against Radix-style height variables
+   (--radix-accordion-content-height etc.). Base UI exposes the panel height as
+   --accordion-panel-height instead, so the originals resolve to `auto` and the
+   open/close animation jumps. Redefining them inside @theme replaces the
+   originals in Tailwind's emitted output (a plain top-level @keyframes rule
+   would lose: Tailwind emits theme keyframes at the end of the stylesheet). */
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--accordion-panel-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--accordion-panel-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
 @layer base {
   *,
   *::before,
@@ -73,11 +99,11 @@
     color: color-mix(in srgb, var(--foreground) 25%, var(--muted-foreground));
   }
 
-  .docs-markdown > * + * {
+  .docs-markdown > * + *:not(:where(.not-prose, .not-prose *)) {
     margin-top: 1rem;
   }
 
-  .docs-markdown :where(h2, h3, h4, h5, h6) {
+  .docs-markdown :where(h1, h2, h3, h4, h5, h6):not(:where(.not-prose, .not-prose *)) {
     font-family: var(--font-heading);
     font-weight: var(--font-heading-weight, 600);
     letter-spacing: -0.02em;
@@ -102,57 +128,57 @@
     opacity: 1;
   }
 
-  .docs-markdown h2 {
+  .docs-markdown h2:not(:where(.not-prose, .not-prose *)) {
     margin-top: 2.25rem;
     margin-bottom: 1rem;
     font-size: 1.5rem;
   }
 
-  .docs-markdown h3 {
+  .docs-markdown h3:not(:where(.not-prose, .not-prose *)) {
     margin-top: 1.75rem;
     margin-bottom: 0.75rem;
     font-size: 1.2rem;
   }
 
-  .docs-markdown p {
+  .docs-markdown p:not(:where(.not-prose, .not-prose *)) {
     margin: 0.75rem 0;
   }
 
-  .docs-markdown ul,
-  .docs-markdown ol {
+  .docs-markdown ul:not(:where(.not-prose, .not-prose *)),
+  .docs-markdown ol:not(:where(.not-prose, .not-prose *)) {
     margin: 0.75rem 0;
     padding-left: 1.25rem;
   }
 
-  .docs-markdown ul {
+  .docs-markdown ul:not(:where(.not-prose, .not-prose *)) {
     list-style: disc;
   }
 
-  .docs-markdown ol {
+  .docs-markdown ol:not(:where(.not-prose, .not-prose *)) {
     list-style: decimal;
   }
 
-  .docs-markdown li {
+  .docs-markdown li:not(:where(.not-prose, .not-prose *)) {
     margin: 0.35rem 0;
   }
 
-  .docs-markdown :where(strong, b) {
+  .docs-markdown :where(strong, b):not(:where(.not-prose, .not-prose *)) {
     color: var(--foreground);
     font-weight: 600;
   }
 
-  .docs-markdown a {
+  .docs-markdown a:not(:where(.not-prose, .not-prose *)) {
     color: var(--foreground);
     text-decoration: underline;
     text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
     text-underline-offset: 0.2em;
   }
 
-  .docs-markdown a:hover {
+  .docs-markdown a:hover:not(:where(.not-prose, .not-prose *)) {
     text-decoration-color: currentColor;
   }
 
-  .docs-markdown code:not(pre code) {
+  .docs-markdown code:not(pre code):not(:where(.not-prose, .not-prose *)) {
     color: var(--foreground);
     border-radius: var(--radius-sm);
     background: color-mix(in srgb, currentColor 4%, transparent);
@@ -162,7 +188,7 @@
 
   /* Styled to match the PropertiesTable component: rounded outer border,
      horizontal row separators only, and no header fill. */
-  .docs-markdown table {
+  .docs-markdown table:not(:where(.not-prose, .not-prose *)) {
     width: 100%;
     margin: 1rem 0;
     font-size: 0.875rem;
@@ -172,12 +198,12 @@
     border-radius: var(--radius-lg);
   }
 
-  .docs-markdown th {
+  .docs-markdown th:not(:where(.not-prose, .not-prose *)) {
     color: var(--foreground);
   }
 
-  .docs-markdown th,
-  .docs-markdown td {
+  .docs-markdown th:not(:where(.not-prose, .not-prose *)),
+  .docs-markdown td:not(:where(.not-prose, .not-prose *)) {
     border: none;
     border-bottom: 1px solid var(--border);
     padding: 0.6rem 0.75rem;
@@ -185,36 +211,36 @@
     vertical-align: top;
   }
 
-  .docs-markdown th:first-child,
-  .docs-markdown td:first-child {
+  .docs-markdown th:first-child:not(:where(.not-prose, .not-prose *)),
+  .docs-markdown td:first-child:not(:where(.not-prose, .not-prose *)) {
     padding-left: 1.5rem;
   }
 
-  .docs-markdown th:last-child,
-  .docs-markdown td:last-child {
+  .docs-markdown th:last-child:not(:where(.not-prose, .not-prose *)),
+  .docs-markdown td:last-child:not(:where(.not-prose, .not-prose *)) {
     padding-right: 1.5rem;
   }
 
-  .docs-markdown th {
+  .docs-markdown th:not(:where(.not-prose, .not-prose *)) {
     background: transparent;
     font-weight: 600;
   }
 
-  .docs-markdown tbody tr:last-child td {
+  .docs-markdown tbody tr:last-child td:not(:where(.not-prose, .not-prose *)) {
     border-bottom: none;
   }
 
-  .docs-markdown table code:not(pre code) {
+  .docs-markdown table code:not(pre code):not(:where(.not-prose, .not-prose *)) {
     font-size: 0.75rem;
   }
 
-  .docs-markdown blockquote {
+  .docs-markdown blockquote:not(:where(.not-prose, .not-prose *)) {
     border-left: 3px solid var(--input);
     padding-left: 1rem;
     color: var(--muted-foreground);
   }
 
-  .docs-markdown hr {
+  .docs-markdown hr:not(:where(.not-prose, .not-prose *)) {
     border: none;
     border-top: 1px solid var(--border);
     margin: 2rem 0;

package/types/components.d.ts

@@ -0,0 +1,217 @@
+import type { ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
+
+export interface AccordionProps {
+  title?: ReactNode;
+  icon?: ReactNode | string;
+  defaultOpen?: boolean;
+  children?: ReactNode;
+}
+
+export interface AccordionGroupProps {
+  children?: ReactNode;
+  defaultOpen?: boolean;
+}
+
+export declare function Accordion(props: AccordionProps): ReactElement;
+export declare function AccordionGroup(props: AccordionGroupProps): ReactElement | null;
+
+export type BadgeColor =
+  | 'gray'
+  | 'blue'
+  | 'green'
+  | 'yellow'
+  | 'orange'
+  | 'red'
+  | 'purple'
+  | 'white'
+  | 'surface'
+  | 'white-destructive'
+  | 'surface-destructive';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+export type BadgeShape = 'rounded' | 'pill';
+
+export interface BadgeProps {
+  color?: BadgeColor;
+  size?: BadgeSize;
+  shape?: BadgeShape;
+  icon?: ReactNode;
+  stroke?: boolean;
+  disabled?: boolean;
+  className?: string;
+  /** @deprecated Use `color` instead. */
+  tone?: 'muted' | 'primary';
+  children?: ReactNode;
+}
+
+export declare function Badge(props: BadgeProps): ReactElement;
+
+export interface ButtonProps {
+  href?: string;
+  variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link';
+  size?: 'default' | 'xs' | 'sm' | 'lg';
+  icon?: ReactNode | string;
+  className?: string;
+  children?: ReactNode;
+}
+
+export declare function Button(props: ButtonProps): ReactElement;
+
+export type CalloutVariant = 'note' | 'tip' | 'warning' | 'info' | 'check' | 'danger';
+
+export interface CalloutProps {
+  title?: ReactNode;
+  icon?: ReactNode | string;
+  children?: ReactNode;
+  variant?: CalloutVariant;
+}
+
+export interface ChildrenProps {
+  children?: ReactNode;
+}
+
+export declare function Callout(props: CalloutProps): ReactElement;
+export declare function Note(props: ChildrenProps): ReactElement;
+export declare function Tip(props: ChildrenProps): ReactElement;
+export declare function Warning(props: ChildrenProps): ReactElement;
+export declare function Info(props: ChildrenProps): ReactElement;
+export declare function Check(props: ChildrenProps): ReactElement;
+export declare function Danger(props: ChildrenProps): ReactElement;
+export declare function WarningBanner(props: ChildrenProps): ReactElement;
+
+export type CardType = 'note' | 'info' | 'warning' | 'tip' | 'check' | 'danger';
+
+export interface CardProps {
+  title?: ReactNode;
+  href?: string;
+  icon?: ReactNode | string;
+  color?: string;
+  img?: string;
+  cta?: string;
+  horizontal?: boolean;
+  arrow?: boolean;
+  type?: CardType;
+  children?: ReactNode;
+}
+
+export interface CardGroupProps {
+  children?: ReactNode;
+  cols?: 1 | 2 | 3 | 4;
+}
+
+export declare function Card(props: CardProps): ReactElement;
+export declare function CardGroup(props: CardGroupProps): ReactElement;
+
+export interface CodeGroupProps {
+  children?: ReactNode;
+}
+
+export declare function CodeGroup(props: CodeGroupProps): ReactElement | null;
+
+export interface ColumnsProps {
+  children?: ReactNode;
+  cols?: 1 | 2 | 3 | 4;
+}
+
+export interface ColumnProps {
+  children?: ReactNode;
+}
+
+export declare function Columns(props: ColumnsProps): ReactElement;
+export declare function Column(props: ColumnProps): ReactElement;
+
+export interface ExpandableProps {
+  title: ReactNode;
+  children?: ReactNode;
+  defaultOpen?: boolean;
+}
+
+export declare function Expandable(props: ExpandableProps): ReactElement;
+
+export interface FrameProps {
+  caption?: ReactNode;
+  hint?: ReactNode;
+  children?: ReactNode;
+}
+
+export declare function Frame(props: FrameProps): ReactElement;
+
+export interface IconProps {
+  icon?: string;
+  src?: string;
+  color?: string;
+  size?: number;
+  className?: string;
+}
+
+export declare function Icon(props: IconProps): ReactElement | null;
+
+export interface ParamFieldProps {
+  name?: string;
+  query?: string;
+  path?: string;
+  header?: string;
+  body?: string;
+  type?: string;
+  required?: boolean;
+  children?: ReactNode;
+}
+
+export declare function ParamField(props: ParamFieldProps): ReactElement;
+export declare function Param(props: ChildrenProps): ReactElement;
+
+export interface PropertiesTableProps {
+  children?: ReactNode;
+}
+
+export declare function PropertiesTable(props: PropertiesTableProps): ReactElement | null;
+
+type FieldValue = string | number | boolean | null | undefined;
+
+export interface ResponseFieldProps {
+  name: string;
+  type?: FieldValue;
+  default?: FieldValue;
+  required?: boolean;
+  deprecated?: boolean;
+  children?: ReactNode;
+}
+
+export declare function ResponseField(props: ResponseFieldProps): ReactElement;
+
+export interface StepProps {
+  title?: ReactNode;
+  children?: ReactNode;
+}
+
+export interface StepsProps {
+  children?: ReactNode;
+}
+
+export declare function Step(props: StepProps): ReactElement;
+export declare function Steps(props: StepsProps): ReactElement | null;
+
+export interface TabProps {
+  title?: ReactNode;
+  children?: ReactNode;
+}
+
+export interface TabsProps {
+  children?: ReactNode;
+  group?: string;
+}
+
+export declare function Tab(props: TabProps): ReactElement;
+export declare function Tabs(props: TabsProps): ReactElement | null;
+
+export interface TooltipProps {
+  tip?: ReactNode;
+  children?: ReactNode;
+}
+
+export declare function Tooltip(props: TooltipProps): ReactElement;
+
+export interface ZoomableImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  noZoom?: boolean;
+}
+
+export declare function ZoomableImage(props: ZoomableImageProps): ReactElement;

package/vite.config.ts

@@ -3,7 +3,7 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
-import { defineConfig, type Plugin } from 'vite';
+import { defineConfig, type Plugin, searchForWorkspaceRoot } from 'vite';
 import { shisoMdx } from './mdx.config.ts';
 import { generateIconRegistry } from './scripts/generate-icon-registry.mjs';
 import { shisoLastModified } from './scripts/generate-last-modified.mjs';
@@ -49,7 +49,11 @@ function shisoSearchIndex(
       await generateSearchIndex({ config: getDocsConfig(), shiso: getShisoConfig(), root, output });
     },
     async handleHotUpdate({ file }) {
-      if (/\.(md|mdx)$/.test(file) || file.endsWith('docs.json') || /shiso\.config\.\w+$/.test(file)) {
+      if (
+        /\.(md|mdx)$/.test(file) ||
+        file.endsWith('docs.json') ||
+        /shiso\.config\.\w+$/.test(file)
+      ) {
         await generateSearchIndex({
           config: getDocsConfig(),
           shiso: getShisoConfig(),
@@ -294,9 +298,9 @@ function shisoHtml(getDocsConfig: () => DocsConfig): Plugin {
 
 /**
  * Serves the raw markdown source for `<route>.md` URLs during development,
- * mirroring the `.md` copies the prerenderer publishes next to every page in
- * production builds. The contextual menu's copy/view options and AI links
- * depend on these URLs.
+ * mirroring the `.md` copies the prerenderer publishes next to Markdown and
+ * MDX pages in production builds. TSX standalone pages return 404 because
+ * their source is not a Markdown representation.
  */
 function shisoMarkdownDev(
   getDocsConfig: () => DocsConfig,
@@ -336,7 +340,7 @@ function shisoMarkdownDev(
           const pageSlug = standalone.page
             .trim()
             .replace(/^\/+/, '')
-            .replace(/\.mdx?$/, '');
+            .replace(/\.(?:mdx?|tsx)$/, '');
 
           for (const candidate of [`${pageSlug}.mdx`, `${pageSlug}.md`]) {
             const filePath = path.resolve(pagesRoot, candidate);
@@ -355,6 +359,11 @@ function shisoMarkdownDev(
               // Try the next candidate.
             }
           }
+
+          // Component pages intentionally have no raw Markdown representation.
+          res.statusCode = 404;
+          res.end('Not found');
+          return;
         }
 
         if (docsPrefix && route.startsWith(docsPrefix)) {
@@ -404,7 +413,22 @@ export default defineConfig(async () => {
   const getDocsConfig = configModule.getConfig as () => DocsConfig;
   const getShisoConfig = configModule.getShisoConfig as () => ResolvedShisoConfig;
 
+  // Shiso may be installed via link:/file: from a directory outside the
+  // project's workspace root. Allow the framework's real location (and the
+  // repository root above it, which holds its dependency store) so raw assets
+  // like fonts remain servable in dev instead of returning 403.
+  const shisoRoot = path.dirname(fileURLToPath(import.meta.url));
+
   return {
+    server: {
+      fs: {
+        allow: [
+          searchForWorkspaceRoot(process.cwd()),
+          shisoRoot,
+          path.resolve(shisoRoot, '..', '..'),
+        ],
+      },
+    },
     optimizeDeps: {
       // The published runtime is already bundled ESM and contains project-time
       // virtual imports that are resolved by the plugins below.