@servicetitan/docs-anvil-uikit-contrib 40.1.0 → 40.3.0

package/dist/code-demo.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ComponentType } from 'react';
+import CodeBlock from '@theme/CodeBlock';
+export interface CodeDemoProps {
+    example: ComponentType;
+    theme?: 'light' | 'dark';
+    srcPath?: string;
+    src?: string;
+}
+export declare const CodeDemo: (props: CodeDemoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DemoExample: (props: CodeDemoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DemoCodeBlock: (props: CodeDemoProps & Omit<ComponentProps<typeof CodeBlock>, "children">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=code-demo.d.ts.map

package/dist/code-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-demo.d.ts","sourceRoot":"","sources":["../src/code-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAIzC,MAAM,WAAW,aAAa;IAC1B,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAiB5C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,aAAa,4CAa/C,CAAC;AAEF,eAAO,MAAM,aAAa,GACtB,OAAO,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,UAAU,CAAC,4CAU5E,CAAC"}

package/dist/code-demo.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useColorMode } from '@docusaurus/theme-common';
+import { dark, light } from '@servicetitan/anvil-themes';
+import { AnvilProvider } from '@servicetitan/design-system';
+import { AnvilProvider as Anvil2Provider } from '@servicetitan/anvil2';
+import CodeBlock from '@theme/CodeBlock';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+export const CodeDemo = (props)=>{
+    return /*#__PURE__*/ _jsxs(Tabs, {
+        defaultValue: "example",
+        values: [
+            {
+                label: 'Example',
+                value: 'example'
+            },
+            {
+                label: 'Source',
+                value: 'source'
+            }
+        ],
+        children: [
+            /*#__PURE__*/ _jsx(TabItem, {
+                value: "example",
+                children: /*#__PURE__*/ _jsx(DemoExample, {
+                    ...props
+                })
+            }),
+            /*#__PURE__*/ _jsx(TabItem, {
+                value: "source",
+                children: /*#__PURE__*/ _jsx(DemoCodeBlock, {
+                    ...props
+                })
+            })
+        ]
+    });
+};
+export const DemoExample = (props)=>{
+    var _props_theme;
+    const { colorMode } = useColorMode();
+    const Example = props.example;
+    const theme = (_props_theme = props.theme) !== null && _props_theme !== void 0 ? _props_theme : colorMode;
+    return /*#__PURE__*/ _jsx(AnvilProvider, {
+        theme: theme === 'dark' ? dark : light,
+        children: /*#__PURE__*/ _jsx(Anvil2Provider, {
+            themeData: {
+                mode: theme === 'dark' ? dark : light
+            },
+            children: /*#__PURE__*/ _jsx(Example, {})
+        })
+    });
+};
+export const DemoCodeBlock = (props)=>{
+    var _ref;
+    var _srcPath_match_groups, _srcPath_match;
+    const { srcPath, src, ...rest } = props;
+    const language = (_ref = srcPath === null || srcPath === void 0 ? void 0 : (_srcPath_match = srcPath.match(/\.(?<ext>[^\.]+)$/)) === null || _srcPath_match === void 0 ? void 0 : (_srcPath_match_groups = _srcPath_match.groups) === null || _srcPath_match_groups === void 0 ? void 0 : _srcPath_match_groups.ext) !== null && _ref !== void 0 ? _ref : 'tsx';
+    return /*#__PURE__*/ _jsx(CodeBlock, {
+        language: language,
+        ...rest,
+        children: src
+    });
+};
+
+//# sourceMappingURL=code-demo.js.map

package/dist/code-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/code-demo.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType } from 'react';\nimport { useColorMode } from '@docusaurus/theme-common';\nimport { dark, light } from '@servicetitan/anvil-themes';\nimport { AnvilProvider } from '@servicetitan/design-system';\nimport { AnvilProvider as Anvil2Provider } from '@servicetitan/anvil2';\n\nimport CodeBlock from '@theme/CodeBlock';\nimport Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';\n\nexport interface CodeDemoProps {\n    example: ComponentType;\n    theme?: 'light' | 'dark';\n    srcPath?: string;\n    src?: string;\n}\n\nexport const CodeDemo = (props: CodeDemoProps) => {\n    return (\n        <Tabs\n            defaultValue=\"example\"\n            values={[\n                { label: 'Example', value: 'example' },\n                { label: 'Source', value: 'source' },\n            ]}\n        >\n            <TabItem value=\"example\">\n                <DemoExample {...props} />\n            </TabItem>\n            <TabItem value=\"source\">\n                <DemoCodeBlock {...props} />\n            </TabItem>\n        </Tabs>\n    );\n};\n\nexport const DemoExample = (props: CodeDemoProps) => {\n    const { colorMode } = useColorMode();\n    const Example = props.example;\n    const theme = props.theme ?? colorMode;\n\n    return (\n        <AnvilProvider theme={theme === 'dark' ? dark : light}>\n            {/* themeData.mode expects 'light' | 'dark', but a theme object is passed here to match current behavior. */}\n            <Anvil2Provider themeData={{ mode: (theme === 'dark' ? dark : light) as never }}>\n                <Example />\n            </Anvil2Provider>\n        </AnvilProvider>\n    );\n};\n\nexport const DemoCodeBlock = (\n    props: CodeDemoProps & Omit<ComponentProps<typeof CodeBlock>, 'children'>\n) => {\n    const { srcPath, src, ...rest } = props;\n    const language = srcPath?.match(/\\.(?<ext>[^\\.]+)$/)?.groups?.ext ?? 'tsx';\n\n    return (\n        <CodeBlock language={language} {...rest}>\n            {src}\n        </CodeBlock>\n    );\n};\n"],"names":["useColorMode","dark","light","AnvilProvider","Anvil2Provider","CodeBlock","Tabs","TabItem","CodeDemo","props","defaultValue","values","label","value","DemoExample","DemoCodeBlock","colorMode","Example","example","theme","themeData","mode","srcPath","src","rest","language","match","groups","ext"],"mappings":";AACA,SAASA,YAAY,QAAQ,2BAA2B;AACxD,SAASC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AACzD,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASA,iBAAiBC,cAAc,QAAQ,uBAAuB;AAEvE,OAAOC,eAAe,mBAAmB;AACzC,OAAOC,UAAU,cAAc;AAC/B,OAAOC,aAAa,iBAAiB;AASrC,OAAO,MAAMC,WAAW,CAACC;IACrB,qBACI,MAACH;QACGI,cAAa;QACbC,QAAQ;YACJ;gBAAEC,OAAO;gBAAWC,OAAO;YAAU;YACrC;gBAAED,OAAO;gBAAUC,OAAO;YAAS;SACtC;;0BAED,KAACN;gBAAQM,OAAM;0BACX,cAAA,KAACC;oBAAa,GAAGL,KAAK;;;0BAE1B,KAACF;gBAAQM,OAAM;0BACX,cAAA,KAACE;oBAAe,GAAGN,KAAK;;;;;AAIxC,EAAE;AAEF,OAAO,MAAMK,cAAc,CAACL;QAGVA;IAFd,MAAM,EAAEO,SAAS,EAAE,GAAGhB;IACtB,MAAMiB,UAAUR,MAAMS,OAAO;IAC7B,MAAMC,SAAQV,eAAAA,MAAMU,KAAK,cAAXV,0BAAAA,eAAeO;IAE7B,qBACI,KAACb;QAAcgB,OAAOA,UAAU,SAASlB,OAAOC;kBAE5C,cAAA,KAACE;YAAegB,WAAW;gBAAEC,MAAOF,UAAU,SAASlB,OAAOC;YAAgB;sBAC1E,cAAA,KAACe;;;AAIjB,EAAE;AAEF,OAAO,MAAMF,gBAAgB,CACzBN;;QAGiBa,uBAAAA;IADjB,MAAM,EAAEA,OAAO,EAAEC,GAAG,EAAE,GAAGC,MAAM,GAAGf;IAClC,MAAMgB,mBAAWH,oBAAAA,+BAAAA,iBAAAA,QAASI,KAAK,CAAC,kCAAfJ,sCAAAA,wBAAAA,eAAqCK,MAAM,cAA3CL,4CAAAA,sBAA6CM,GAAG,uCAAI;IAErE,qBACI,KAACvB;QAAUoB,UAAUA;QAAW,GAAGD,IAAI;kBAClCD;;AAGb,EAAE"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { CodeDemoProps } from './code-demo';
+export { CodeDemo, DemoExample, DemoCodeBlock } from './code-demo';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { CodeDemo, DemoExample, DemoCodeBlock } from './code-demo';
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { CodeDemoProps } from './code-demo';\nexport { CodeDemo, DemoExample, DemoCodeBlock } from './code-demo';\n"],"names":["CodeDemo","DemoExample","DemoCodeBlock"],"mappings":"AACA,SAASA,QAAQ,EAAEC,WAAW,EAAEC,aAAa,QAAQ,cAAc"}

package/docs/intl/date-time-range.mdx

@@ -0,0 +1,120 @@
+---
+title: Date and Time Range
+---
+
+import { FormattedDateTimeRangeMiniDemo } from '@servicetitan/intl/demo';
+import { DemoExample } from '@site/src/components/code-demo';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Use `FormattedDateTimeRange` and `formatDateTimeRange` to format a date range as combined date and time. The browser's `Intl.DateTimeFormat.formatRange()` API intelligently collapses shared parts of the range (e.g., same-day ranges omit the repeated date).
+
+## Available Formats
+
+The following standard ServiceTitan formats are available (examples are in `en-US` locale).
+
+| Format              | Description                                                                 | Example (multi-day)                                                         |
+| :------------------ | :-------------------------------------------------------------------------- | :-------------------------------------------------------------------------- |
+| `short`             | Short date and short time. This is the default when no format is specified. | `01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM`                                |
+| `shortWithTimeZone` | Short date and short time, with timezone                                    | `01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM EST`                            |
+| `long`              | Long date and short time                                                    | `January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM`                 |
+| `longWithTimeZone`  | Long date and short time, with timezone                                     | `January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM EST`             |
+
+Any options passed to `FormattedDateTimeRange` or `formatDateTimeRange` will be merged on top of `{ format: 'short' }` (which expands to `{ day: '2-digit', month: '2-digit', year: 'numeric', hour: 'numeric', minute: 'numeric' }` [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options)). If you want to use your custom options only, you can pass `format: undefined` to disable the default.
+
+## Usage
+
+### FormattedDateTimeRange
+
+```tsx
+import { FormattedDateTimeRange } from '@servicetitan/intl';
+
+function DateTimeRangeExample() {
+    const startDate = new Date('2025-01-09T16:00:00-05:00');
+    const endDate = new Date('2025-01-10T17:00:00-05:00');
+
+    return (
+        <>
+            <FormattedDateTimeRange from={startDate} to={endDate} /> {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM */}
+            <FormattedDateTimeRange from={startDate} to={endDate} format="short" /> {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM */}
+            <FormattedDateTimeRange from={startDate} to={endDate} format="shortWithTimeZone" /> {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM EST */}
+            <FormattedDateTimeRange from={startDate} to={endDate} format="long" /> {/* January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM */}
+            <FormattedDateTimeRange from={startDate} to={endDate} format="longWithTimeZone" /> {/* January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM EST */}
+        </>
+    );
+}
+```
+
+### formatDateTimeRange
+
+<Tabs
+    defaultValue="hook"
+    values={[
+        { label: 'React Hook', value: 'hook' },
+        { label: 'MobX Store', value: 'store'}
+    ]}
+>
+<TabItem value="hook">
+
+```tsx
+import { useIntl } from '@servicetitan/intl';
+
+function DateTimeRangeExample() {
+    const { formatDateTimeRange } = useIntl();
+    const startDate = new Date('2025-01-09T16:00:00-05:00');
+    const endDate = new Date('2025-01-10T17:00:00-05:00');
+
+    return (
+        <>
+            {formatDateTimeRange(startDate, endDate)} {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM */}
+            {formatDateTimeRange(startDate, endDate, { format: 'short' })} {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM */}
+            {formatDateTimeRange(startDate, endDate, { format: 'shortWithTimeZone' })} {/* 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM EST */}
+            {formatDateTimeRange(startDate, endDate, { format: 'long' })} {/* January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM */}
+            {formatDateTimeRange(startDate, endDate, { format: 'longWithTimeZone' })} {/* January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM EST */}
+        </>
+    );
+}
+```
+
+</TabItem>
+<TabItem value="store">
+
+```tsx
+import { inject, injectable } from '@servicetitan/react-ioc';
+import { IntlStore } from '@servicetitan/intl/mobx';
+
+@injectable()
+class MyStore {
+    constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
+
+    formatDateTimeRange() {
+        const startDate = new Date('2025-01-09T16:00:00-05:00');
+        const endDate = new Date('2025-01-10T17:00:00-05:00');
+        const { formatDateTimeRange } = this.intlStore.intl;
+        return [
+            formatDateTimeRange(startDate, endDate), // 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM
+            formatDateTimeRange(startDate, endDate, { format: 'short' }), // 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM
+            formatDateTimeRange(startDate, endDate, { format: 'shortWithTimeZone' }), // 01/09/2025, 4:00 PM – 01/10/2025, 5:00 PM EST
+            formatDateTimeRange(startDate, endDate, { format: 'long' }), // January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM
+            formatDateTimeRange(startDate, endDate, { format: 'longWithTimeZone' }), // January 9, 2025 at 4:00 PM – January 10, 2025 at 5:00 PM EST
+        ];
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### Further customization
+
+To customize the formatting, pass `FormattedDateTimeRange` and `formatDateTimeRange` the same [options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options) as the native `Intl.DateTimeFormat` API. For example,
+
+```ts
+const startDate = new Date('2025-01-09T16:00:00-05:00');
+const endDate = new Date('2025-01-10T17:00:00-05:00');
+formatDateTimeRange(startDate, endDate, { format: 'long', weekday: 'short' }); // Thu, January 9, 2025 at 4:00 PM – Fri, January 10, 2025 at 5:00 PM
+```
+
+## Demo
+
+<DemoExample example={FormattedDateTimeRangeMiniDemo} />

package/docs/intl/utilities.mdx

@@ -0,0 +1,116 @@
+---
+title: Utilities
+---
+
+import { IntlUtilsMiniDemo } from '@servicetitan/intl/demo';
+import { DemoExample } from '@site/src/components/code-demo';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Timezone utility functions are available on the `intl` object. They use the configured locale and timezone automatically.
+
+## getTzAbbreviation
+
+Returns the timezone abbreviation (e.g., "EST", "PDT"). The result is DST-aware — passing a summer date returns the daylight saving abbreviation (e.g., "EDT" instead of "EST"). Defaults to `'short'` format. Pass any [`Intl.DateTimeFormatOptions['timeZoneName']`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timezonename) value to customize.
+
+### Usage
+
+<Tabs
+    defaultValue="hook"
+    values={[
+        { label: 'React Hook', value: 'hook' },
+        { label: 'MobX Store', value: 'store'}
+    ]}
+>
+<TabItem value="hook">
+
+```tsx
+import { useIntl } from '@servicetitan/intl';
+
+function TimezoneExample() {
+    const intl = useIntl();
+
+    return (
+        <>
+            {intl.getTzAbbreviation()} {/* "EST" (or "EDT" in summer) */}
+            {intl.getTzAbbreviation(new Date(), 'shortOffset')} {/* "GMT-5" */}
+        </>
+    );
+}
+```
+
+</TabItem>
+<TabItem value="store">
+
+```tsx
+import { inject, injectable } from '@servicetitan/react-ioc';
+import { IntlStore } from '@servicetitan/intl/mobx';
+
+@injectable()
+class MyStore {
+    constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
+
+    getTimezoneLabel() {
+        const { getTzAbbreviation } = this.intlStore.intl;
+        return getTzAbbreviation(); // "EST"
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+## getTzName
+
+Returns the full timezone name (e.g., "Eastern Time", "Eastern Standard Time"). Like `getTzAbbreviation`, the result is DST-aware. Defaults to `'longGeneric'` format. Pass any [`Intl.DateTimeFormatOptions['timeZoneName']`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timezonename) value to customize.
+
+### Usage
+
+<Tabs
+    defaultValue="hook"
+    values={[
+        { label: 'React Hook', value: 'hook' },
+        { label: 'MobX Store', value: 'store'}
+    ]}
+>
+<TabItem value="hook">
+
+```tsx
+import { useIntl } from '@servicetitan/intl';
+
+function TimezoneExample() {
+    const intl = useIntl();
+
+    return (
+        <>
+            {intl.getTzName()} {/* "Eastern Time" */}
+            {intl.getTzName(new Date(), 'long')} {/* "Eastern Standard Time" */}
+        </>
+    );
+}
+```
+
+</TabItem>
+<TabItem value="store">
+
+```tsx
+import { inject, injectable } from '@servicetitan/react-ioc';
+import { IntlStore } from '@servicetitan/intl/mobx';
+
+@injectable()
+class MyStore {
+    constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
+
+    getTimezoneName() {
+        const { getTzName } = this.intlStore.intl;
+        return getTzName(); // "Eastern Time"
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+## Demo
+
+<DemoExample example={IntlUtilsMiniDemo} />

package/package.json

@@ -1,21 +1,41 @@
 {
     "name": "@servicetitan/docs-anvil-uikit-contrib",
-    "version": "40.1.0",
+    "version": "40.3.0",
     "description": "",
     "repository": {
         "type": "git",
         "url": "https://github.com/servicetitan/anvil-uikit-contrib.git",
         "directory": "docusaurus"
     },
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "sideEffects": false,
     "files": [
+        "dist",
+        "src",
         "docs",
         "remark"
     ],
+    "devDependencies": {
+        "@docusaurus/theme-common": "^3.10.1",
+        "@servicetitan/anvil-themes": "^14.5.3",
+        "@servicetitan/anvil2": "^3.4.2",
+        "@servicetitan/design-system": "~14.5.1",
+        "@types/react": "~18.2.55",
+        "react": "^18.2.0"
+    },
+    "peerDependencies": {
+        "@docusaurus/theme-common": ">=3.0.0",
+        "@servicetitan/anvil-themes": ">=13.2.1",
+        "@servicetitan/anvil2": ">=3.0.0",
+        "@servicetitan/design-system": ">=13.2.1",
+        "react": ">=17.0.2"
+    },
     "publishConfig": {
         "access": "public"
     },
     "cli": {
         "webpack": false
     },
-    "gitHead": "36cdbd54a276e9fc716d3a5564ccfbb12dc7d557"
+    "gitHead": "da17654a172fa74e9168b5b15a81049108158db9"
 }

package/src/code-demo.tsx

@@ -0,0 +1,63 @@
+import type { ComponentProps, ComponentType } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+import { dark, light } from '@servicetitan/anvil-themes';
+import { AnvilProvider } from '@servicetitan/design-system';
+import { AnvilProvider as Anvil2Provider } from '@servicetitan/anvil2';
+
+import CodeBlock from '@theme/CodeBlock';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+export interface CodeDemoProps {
+    example: ComponentType;
+    theme?: 'light' | 'dark';
+    srcPath?: string;
+    src?: string;
+}
+
+export const CodeDemo = (props: CodeDemoProps) => {
+    return (
+        <Tabs
+            defaultValue="example"
+            values={[
+                { label: 'Example', value: 'example' },
+                { label: 'Source', value: 'source' },
+            ]}
+        >
+            <TabItem value="example">
+                <DemoExample {...props} />
+            </TabItem>
+            <TabItem value="source">
+                <DemoCodeBlock {...props} />
+            </TabItem>
+        </Tabs>
+    );
+};
+
+export const DemoExample = (props: CodeDemoProps) => {
+    const { colorMode } = useColorMode();
+    const Example = props.example;
+    const theme = props.theme ?? colorMode;
+
+    return (
+        <AnvilProvider theme={theme === 'dark' ? dark : light}>
+            {/* themeData.mode expects 'light' | 'dark', but a theme object is passed here to match current behavior. */}
+            <Anvil2Provider themeData={{ mode: (theme === 'dark' ? dark : light) as never }}>
+                <Example />
+            </Anvil2Provider>
+        </AnvilProvider>
+    );
+};
+
+export const DemoCodeBlock = (
+    props: CodeDemoProps & Omit<ComponentProps<typeof CodeBlock>, 'children'>
+) => {
+    const { srcPath, src, ...rest } = props;
+    const language = srcPath?.match(/\.(?<ext>[^\.]+)$/)?.groups?.ext ?? 'tsx';
+
+    return (
+        <CodeBlock language={language} {...rest}>
+            {src}
+        </CodeBlock>
+    );
+};

package/src/global.d.ts

@@ -0,0 +1,43 @@
+/*
+ * `@theme/*` resolves via a webpack alias, not a real package, so types are
+ * copied here rather than bloating this project with Docusaurus's themes.
+ * Copied from src/theme-classic.d.ts in @docusaurus/theme-classic@3.10.1
+ */
+/* eslint-disable import/no-default-export */
+declare module '@theme/CodeBlock' {
+    import type { ReactNode } from 'react';
+
+    export interface Props {
+        readonly children: ReactNode;
+        readonly className?: string;
+        readonly metastring?: string;
+        readonly title?: ReactNode;
+        readonly language?: string;
+        readonly showLineNumbers?: boolean | number;
+    }
+
+    export default function CodeBlock(props: Props): ReactNode;
+}
+
+declare module '@theme/Tabs' {
+    import type { ReactNode } from 'react';
+
+    export interface Props {
+        readonly children: ReactNode;
+        readonly defaultValue?: string;
+        readonly values?: readonly { value: string; label?: string }[];
+    }
+
+    export default function Tabs(props: Props): ReactNode;
+}
+
+declare module '@theme/TabItem' {
+    import type { ReactNode } from 'react';
+
+    export interface Props {
+        readonly children: ReactNode;
+        readonly value: string;
+    }
+
+    export default function TabItem(props: Props): ReactNode;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export type { CodeDemoProps } from './code-demo';
+export { CodeDemo, DemoExample, DemoCodeBlock } from './code-demo';