@servicetitan/docs-anvil-uikit-contrib 40.2.0 → 41.0.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/API/create-intl.mdx

@@ -0,0 +1,41 @@
+---
+title: createIntl
+---
+
+`createIntl` creates the imperative internationalization API without requiring React context.
+
+Use this API in plain JavaScript, service classes, workers, or other non-React code where the React [`useIntl`](./use-intl.mdx) hook and providers are not available.
+
+## Import
+
+```ts
+import { createIntl } from '@servicetitan/intl/core';
+```
+
+The `/core` entrypoint does not require `react`, `react-dom`, or `react-intl` to be installed.
+
+## Basic Usage
+
+```ts
+import { createIntl } from '@servicetitan/intl/core';
+
+const intl = createIntl({
+    currency: 'USD',
+    locale: 'en-US',
+    timeZone: 'America/Los_Angeles',
+});
+
+intl.formatNumber(1234.56); // '1,234.56'
+intl.formatCurrency(1234.56); // '$1,234.56'
+intl.formatDate(new Date('2026-01-09T21:00:00.000Z'));
+```
+
+## Available Functions
+
+The returned `intl` object provides the same imperative formatter API used by [`useIntl`](./use-intl.mdx), including standard Format.js formatting functions and ServiceTitan custom formatters.
+
+See [`useIntl`](./use-intl.mdx#available-functions) for the full list of available functions and properties.
+
+## React Usage
+
+Inside React components, prefer [`useIntl`](./use-intl.mdx) or the formatted components from `@servicetitan/intl`. Use `createIntl` when there is no React context or when you are intentionally formatting outside React.

package/docs/intl/index.mdx

@@ -19,6 +19,12 @@ This library has `peerDependencies` for:
 - `"@servicetitan/react-ioc": ">=22.0.0"`
 - `"react-intl": ">=7.1.11"`
 
+:::tip
+
+For non-React JavaScript usage, import [`createIntl`](./API/create-intl.mdx) from `@servicetitan/intl/core`. Consumers that only need imperative formatting can use this entrypoint without installing `react`, `react-dom`, or `react-intl`.
+
+:::
+
 ### Provider
 
 Wrap your application with [`<IntlProvider>`](./API/intl-provider.mdx) or [`<MobxIntlProvider>`](./API/mobx-intl-provider.mdx), providing `locale`, `timeZone`, and `currency` through the `config` prop:

package/package.json

@@ -1,21 +1,41 @@
 {
     "name": "@servicetitan/docs-anvil-uikit-contrib",
-    "version": "40.2.0",
+    "version": "41.0.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": "5e79faf08de0180d848e31be8f0cbecc936a1352"
+    "gitHead": "9bf5eb2634c17330d1251d431ed5b60b28b56c21"
 }

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';