@medusajs/ui 2.4.0 → 2.4.1-next-20240209091952

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/components/code-block/code-block.js +7 -7
  2. package/dist/cjs/components/code-block/code-block.js.map +1 -1
  3. package/dist/cjs/components/command/command.d.ts +2 -2
  4. package/dist/cjs/components/command/command.js +6 -2
  5. package/dist/cjs/components/command/command.js.map +1 -1
  6. package/dist/esm/components/code-block/code-block.js +7 -7
  7. package/dist/esm/components/code-block/code-block.js.map +1 -1
  8. package/dist/esm/components/command/command.d.ts +2 -2
  9. package/dist/esm/components/command/command.js +6 -2
  10. package/dist/esm/components/command/command.js.map +1 -1
  11. package/package.json +2 -2
package/dist/cjs/components/code-block/code-block.js CHANGED
@@ -36,10 +36,10 @@ const HeaderComponent = ({ children, className,
36
36
  */
37
37
  hideLabels = false, ...props }) => {
38
38
  const { snippets, active, setActive } = useCodeBlockContext();
39
- return (React.createElement("div", { className: (0, clx_1.clx)("border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3", className), ...props },
39
+ return (React.createElement("div", { className: (0, clx_1.clx)("border-b-ui-code-border bg-ui-code-bg-subtle flex items-center gap-2 border-b px-4 py-3", className), ...props },
40
40
  !hideLabels &&
41
- snippets.map((snippet) => (React.createElement("div", { className: (0, clx_1.clx)("text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all", {
42
- "text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default": active.label === snippet.label,
41
+ snippets.map((snippet) => (React.createElement("div", { className: (0, clx_1.clx)("text-ui-code-fg-subtle txt-compact-small-plus transition-fg cursor-pointer rounded-full border border-transparent px-3 py-2", {
42
+ "text-ui-code-fg-base border-ui-code-border bg-ui-code-bg-base cursor-default": active.label === snippet.label,
43
43
  }), key: snippet.label, onClick: () => setActive(snippet) }, snippet.label))),
44
44
  children));
45
45
  };
@@ -48,7 +48,7 @@ HeaderComponent.displayName = "CodeBlock.Header";
48
48
  * This component is based on the `div` element and supports all of its props
49
49
  */
50
50
  const Meta = ({ className, ...props }) => {
51
- return (React.createElement("div", { className: (0, clx_1.clx)("text-ui-code-text-subtle ml-auto", className), ...props }));
51
+ return (React.createElement("div", { className: (0, clx_1.clx)("txt-compact-small text-ui-code-fg-subtle ml-auto", className), ...props }));
52
52
  };
53
53
  Meta.displayName = "CodeBlock.Header.Meta";
54
54
  const Header = Object.assign(HeaderComponent, { Meta });
@@ -58,7 +58,7 @@ const Header = Object.assign(HeaderComponent, { Meta });
58
58
  const Body = ({ className, ...props }) => {
59
59
  const { active } = useCodeBlockContext();
60
60
  return (React.createElement("div", { className: (0, clx_1.clx)("bg-ui-code-bg-base relative h-full overflow-y-auto p-4", className), ...props },
61
- !active.hideCopy && (React.createElement(copy_1.Copy, { content: active.code, className: "text-ui-code-icon absolute right-4 top-4" })),
61
+ !active.hideCopy && (React.createElement(copy_1.Copy, { content: active.code, className: "text-ui-code-fg-muted absolute right-4 top-4" })),
62
62
  React.createElement("div", { className: "max-w-[90%]" },
63
63
  React.createElement(prism_react_renderer_1.Highlight, { theme: {
64
64
  ...prism_react_renderer_1.themes.palenight,
@@ -121,13 +121,13 @@ const Body = ({ className, ...props }) => {
121
121
  },
122
122
  },
123
123
  ],
124
- }, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: (0, clx_1.clx)("txt-compact-small whitespace-pre-wrap bg-transparent font-mono", {
124
+ }, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: (0, clx_1.clx)("code-body whitespace-pre-wrap bg-transparent", {
125
125
  "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
126
126
  }), style: {
127
127
  ...style,
128
128
  background: "transparent",
129
129
  } },
130
- !active.hideLineNumbers && (React.createElement("div", { role: "presentation", className: "flex flex-col text-right" }, tokens.map((_, i) => (React.createElement("span", { key: i, className: "text-ui-code-text-subtle tabular-nums" }, i + 1))))),
130
+ !active.hideLineNumbers && (React.createElement("div", { role: "presentation", className: "flex flex-col text-right" }, tokens.map((_, i) => (React.createElement("span", { key: i, className: "text-ui-code-fg-subtle tabular-nums" }, i + 1))))),
131
131
  React.createElement("div", null, tokens.map((line, i) => (React.createElement("div", { key: i, ...getLineProps({ line }) }, line.map((token, key) => (React.createElement("span", { key: key, ...getTokenProps({ token }) })))))))))))));
132
132
  };
133
133
  Body.displayName = "CodeBlock.Body";
package/dist/cjs/components/code-block/code-block.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n /**\n * The label of the code snippet's tab.\n */\n label: string\n /**\n * The language of the code snippet. For example, `tsx`.\n */\n language: string\n /**\n * The code snippet.\n */\n code: string\n /**\n * Whether to hide the line numbers shown as the side of the code snippet.\n */\n hideLineNumbers?: boolean\n /**\n * Whether to hide the copy button.\n */\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Root = ({\n /**\n * The code snippets.\n */\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\nRoot.displayName = \"CodeBlock\"\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst HeaderComponent = ({\n children,\n className,\n /**\n * Whether to hide the code snippets' labels.\n */\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\nHeaderComponent.displayName = \"CodeBlock.Header\"\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\nMeta.displayName = \"CodeBlock.Header.Meta\"\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"rgb(17,24,39)\",\n },\n styles: [\n ...themes.palenight.styles,\n {\n types: [\"keyword\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,160,255)\",\n },\n },\n {\n types: [\"punctuation\", \"operator\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(255,255,255)\",\n },\n },\n {\n types: [\"constant\", \"boolean\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,77,96)\",\n },\n },\n {\n types: [\"function\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(27,198,242)\",\n },\n },\n {\n types: [\"number\"],\n style: {\n color: \"rgb(247,208,25)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255,203,107)\",\n },\n },\n {\n types: [\"string\"],\n style: {\n color: \"rgb(73,209,110)\",\n },\n },\n {\n types: [\"comment\"],\n style: {\n color: \"rgb(52,211,153)\",\n },\n },\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\nBody.displayName = \"CodeBlock.Body\"\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
1
+ {"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n /**\n * The label of the code snippet's tab.\n */\n label: string\n /**\n * The language of the code snippet. For example, `tsx`.\n */\n language: string\n /**\n * The code snippet.\n */\n code: string\n /**\n * Whether to hide the line numbers shown as the side of the code snippet.\n */\n hideLineNumbers?: boolean\n /**\n * Whether to hide the copy button.\n */\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Root = ({\n /**\n * The code snippets.\n */\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\nRoot.displayName = \"CodeBlock\"\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst HeaderComponent = ({\n children,\n className,\n /**\n * Whether to hide the code snippets' labels.\n */\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-subtle flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-fg-subtle txt-compact-small-plus transition-fg cursor-pointer rounded-full border border-transparent px-3 py-2\",\n {\n \"text-ui-code-fg-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\nHeaderComponent.displayName = \"CodeBlock.Header\"\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\n \"txt-compact-small text-ui-code-fg-subtle ml-auto\",\n className\n )}\n {...props}\n />\n )\n}\nMeta.displayName = \"CodeBlock.Header.Meta\"\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-fg-muted absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"rgb(17,24,39)\",\n },\n styles: [\n ...themes.palenight.styles,\n {\n types: [\"keyword\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,160,255)\",\n },\n },\n {\n types: [\"punctuation\", \"operator\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(255,255,255)\",\n },\n },\n {\n types: [\"constant\", \"boolean\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,77,96)\",\n },\n },\n {\n types: [\"function\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(27,198,242)\",\n },\n },\n {\n types: [\"number\"],\n style: {\n color: \"rgb(247,208,25)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255,203,107)\",\n },\n },\n {\n types: [\"string\"],\n style: {\n color: \"rgb(73,209,110)\",\n },\n },\n {\n types: [\"comment\"],\n style: {\n color: \"rgb(52,211,153)\",\n },\n },\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\"code-body whitespace-pre-wrap bg-transparent\", {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n })}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-fg-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\nBody.displayName = \"CodeBlock.Body\"\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
package/dist/cjs/components/command/command.d.ts CHANGED
@@ -3,10 +3,10 @@ declare const Command: {
3
3
  ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
4
4
  displayName: string;
5
5
  } & {
6
- Copy: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & {
6
+ Copy: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement> & {
7
7
  content: string;
8
8
  variant?: "default" | "mini" | null | undefined;
9
9
  asChild?: boolean | undefined;
10
- } & React.RefAttributes<HTMLButtonElement>>;
10
+ } & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
11
11
  };
12
12
  export { Command };
package/dist/cjs/components/command/command.js CHANGED
@@ -10,9 +10,13 @@ const react_1 = tslib_1.__importDefault(require("react"));
10
10
  * This component is based on the div element and supports all of its props
11
11
  */
12
12
  const CommandComponent = ({ className, ...props }) => {
13
- return (react_1.default.createElement("div", { className: (0, clx_1.clx)("bg-ui-code-bg-header border-ui-code-border flex items-center rounded-lg border px-3 py-2", "[&>code]:text-ui-code-text-base [&>code]:txt-compact-small [&>code]:mx-3 [&>code]:font-mono [&>code]:leading-6", className), ...props }));
13
+ return (react_1.default.createElement("div", { className: (0, clx_1.clx)("bg-ui-code-bg-base border-ui-code-border flex items-center rounded-lg border px-3 py-2", "[&>code]:text-ui-code-fg-base [&>code]:code-body [&>code]:mx-3", className), ...props }));
14
14
  };
15
15
  CommandComponent.displayName = "Command";
16
- const Command = Object.assign(CommandComponent, { Copy: copy_1.Copy });
16
+ const CommandCopy = react_1.default.forwardRef(({ className, ...props }, ref) => {
17
+ return (react_1.default.createElement(copy_1.Copy, { ...props, ref: ref, className: (0, clx_1.clx)("!text-ui-code-fg-muted ml-auto", className) }));
18
+ });
19
+ CommandCopy.displayName = "Command.Copy";
20
+ const Command = Object.assign(CommandComponent, { Copy: CommandCopy });
17
21
  exports.Command = Command;
18
22
  //# sourceMappingURL=command.js.map
package/dist/cjs/components/command/command.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"command.js","sourceRoot":"","sources":["../../../../src/components/command/command.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,4CAAwC;AACxC,qCAAiC;AACjC,0DAAyB;AAEzB;;GAEG;AACH,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EAC6B,EAAE,EAAE;IACzC,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,SAAG,EACZ,0FAA0F,EAC1F,gHAAgH,EAChH,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA;AACD,gBAAgB,CAAC,WAAW,GAAG,SAAS,CAAA;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAJ,WAAI,EAAE,CAAC,CAAA;AAEhD,0BAAO","sourcesContent":["\"use client\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\nimport React from \"react\"\n\n/**\n * This component is based on the div element and supports all of its props\n */\nconst CommandComponent = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-header border-ui-code-border flex items-center rounded-lg border px-3 py-2\",\n \"[&>code]:text-ui-code-text-base [&>code]:txt-compact-small [&>code]:mx-3 [&>code]:font-mono [&>code]:leading-6\",\n className\n )}\n {...props}\n />\n )\n}\nCommandComponent.displayName = \"Command\"\n\nconst Command = Object.assign(CommandComponent, { Copy })\n\nexport { Command }\n"]}
1
+ {"version":3,"file":"command.js","sourceRoot":"","sources":["../../../../src/components/command/command.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,4CAAwC;AACxC,qCAAiC;AACjC,0DAAyB;AAEzB;;GAEG;AACH,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EAC6B,EAAE,EAAE;IACzC,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,SAAG,EACZ,wFAAwF,EACxF,gEAAgE,EAChE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA;AACD,gBAAgB,CAAC,WAAW,GAAG,SAAS,CAAA;AAExC,MAAM,WAAW,GAAG,eAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,8BAAC,WAAI,OACC,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EAAC,gCAAgC,EAAE,SAAS,CAAC,GAC3D,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,WAAW,CAAC,WAAW,GAAG,cAAc,CAAA;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAA;AAE7D,0BAAO","sourcesContent":["\"use client\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\nimport React from \"react\"\n\n/**\n * This component is based on the div element and supports all of its props\n */\nconst CommandComponent = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base border-ui-code-border flex items-center rounded-lg border px-3 py-2\",\n \"[&>code]:text-ui-code-fg-base [&>code]:code-body [&>code]:mx-3\",\n className\n )}\n {...props}\n />\n )\n}\nCommandComponent.displayName = \"Command\"\n\nconst CommandCopy = React.forwardRef<\n React.ElementRef<typeof Copy>,\n React.ComponentPropsWithoutRef<typeof Copy>\n>(({ className, ...props }, ref) => {\n return (\n <Copy\n {...props}\n ref={ref}\n className={clx(\"!text-ui-code-fg-muted ml-auto\", className)}\n />\n )\n})\nCommandCopy.displayName = \"Command.Copy\"\n\nconst Command = Object.assign(CommandComponent, { Copy: CommandCopy })\n\nexport { Command }\n"]}
package/dist/esm/components/code-block/code-block.js CHANGED
@@ -32,10 +32,10 @@ const HeaderComponent = ({ children, className,
32
32
  */
33
33
  hideLabels = false, ...props }) => {
34
34
  const { snippets, active, setActive } = useCodeBlockContext();
35
- return (React.createElement("div", { className: clx("border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3", className), ...props },
35
+ return (React.createElement("div", { className: clx("border-b-ui-code-border bg-ui-code-bg-subtle flex items-center gap-2 border-b px-4 py-3", className), ...props },
36
36
  !hideLabels &&
37
- snippets.map((snippet) => (React.createElement("div", { className: clx("text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all", {
38
- "text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default": active.label === snippet.label,
37
+ snippets.map((snippet) => (React.createElement("div", { className: clx("text-ui-code-fg-subtle txt-compact-small-plus transition-fg cursor-pointer rounded-full border border-transparent px-3 py-2", {
38
+ "text-ui-code-fg-base border-ui-code-border bg-ui-code-bg-base cursor-default": active.label === snippet.label,
39
39
  }), key: snippet.label, onClick: () => setActive(snippet) }, snippet.label))),
40
40
  children));
41
41
  };
@@ -44,7 +44,7 @@ HeaderComponent.displayName = "CodeBlock.Header";
44
44
  * This component is based on the `div` element and supports all of its props
45
45
  */
46
46
  const Meta = ({ className, ...props }) => {
47
- return (React.createElement("div", { className: clx("text-ui-code-text-subtle ml-auto", className), ...props }));
47
+ return (React.createElement("div", { className: clx("txt-compact-small text-ui-code-fg-subtle ml-auto", className), ...props }));
48
48
  };
49
49
  Meta.displayName = "CodeBlock.Header.Meta";
50
50
  const Header = Object.assign(HeaderComponent, { Meta });
@@ -54,7 +54,7 @@ const Header = Object.assign(HeaderComponent, { Meta });
54
54
  const Body = ({ className, ...props }) => {
55
55
  const { active } = useCodeBlockContext();
56
56
  return (React.createElement("div", { className: clx("bg-ui-code-bg-base relative h-full overflow-y-auto p-4", className), ...props },
57
- !active.hideCopy && (React.createElement(Copy, { content: active.code, className: "text-ui-code-icon absolute right-4 top-4" })),
57
+ !active.hideCopy && (React.createElement(Copy, { content: active.code, className: "text-ui-code-fg-muted absolute right-4 top-4" })),
58
58
  React.createElement("div", { className: "max-w-[90%]" },
59
59
  React.createElement(Highlight, { theme: {
60
60
  ...themes.palenight,
@@ -117,13 +117,13 @@ const Body = ({ className, ...props }) => {
117
117
  },
118
118
  },
119
119
  ],
120
- }, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: clx("txt-compact-small whitespace-pre-wrap bg-transparent font-mono", {
120
+ }, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: clx("code-body whitespace-pre-wrap bg-transparent", {
121
121
  "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
122
122
  }), style: {
123
123
  ...style,
124
124
  background: "transparent",
125
125
  } },
126
- !active.hideLineNumbers && (React.createElement("div", { role: "presentation", className: "flex flex-col text-right" }, tokens.map((_, i) => (React.createElement("span", { key: i, className: "text-ui-code-text-subtle tabular-nums" }, i + 1))))),
126
+ !active.hideLineNumbers && (React.createElement("div", { role: "presentation", className: "flex flex-col text-right" }, tokens.map((_, i) => (React.createElement("span", { key: i, className: "text-ui-code-fg-subtle tabular-nums" }, i + 1))))),
127
127
  React.createElement("div", null, tokens.map((line, i) => (React.createElement("div", { key: i, ...getLineProps({ line }) }, line.map((token, key) => (React.createElement("span", { key: key, ...getTokenProps({ token }) })))))))))))));
128
128
  };
129
129
  Body.displayName = "CodeBlock.Body";
package/dist/esm/components/code-block/code-block.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n /**\n * The label of the code snippet's tab.\n */\n label: string\n /**\n * The language of the code snippet. For example, `tsx`.\n */\n language: string\n /**\n * The code snippet.\n */\n code: string\n /**\n * Whether to hide the line numbers shown as the side of the code snippet.\n */\n hideLineNumbers?: boolean\n /**\n * Whether to hide the copy button.\n */\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Root = ({\n /**\n * The code snippets.\n */\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\nRoot.displayName = \"CodeBlock\"\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst HeaderComponent = ({\n children,\n className,\n /**\n * Whether to hide the code snippets' labels.\n */\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\nHeaderComponent.displayName = \"CodeBlock.Header\"\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\nMeta.displayName = \"CodeBlock.Header.Meta\"\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"rgb(17,24,39)\",\n },\n styles: [\n ...themes.palenight.styles,\n {\n types: [\"keyword\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,160,255)\",\n },\n },\n {\n types: [\"punctuation\", \"operator\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(255,255,255)\",\n },\n },\n {\n types: [\"constant\", \"boolean\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,77,96)\",\n },\n },\n {\n types: [\"function\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(27,198,242)\",\n },\n },\n {\n types: [\"number\"],\n style: {\n color: \"rgb(247,208,25)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255,203,107)\",\n },\n },\n {\n types: [\"string\"],\n style: {\n color: \"rgb(73,209,110)\",\n },\n },\n {\n types: [\"comment\"],\n style: {\n color: \"rgb(52,211,153)\",\n },\n },\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\nBody.displayName = \"CodeBlock.Body\"\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
1
+ {"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n /**\n * The label of the code snippet's tab.\n */\n label: string\n /**\n * The language of the code snippet. For example, `tsx`.\n */\n language: string\n /**\n * The code snippet.\n */\n code: string\n /**\n * Whether to hide the line numbers shown as the side of the code snippet.\n */\n hideLineNumbers?: boolean\n /**\n * Whether to hide the copy button.\n */\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Root = ({\n /**\n * The code snippets.\n */\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\nRoot.displayName = \"CodeBlock\"\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst HeaderComponent = ({\n children,\n className,\n /**\n * Whether to hide the code snippets' labels.\n */\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-subtle flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-fg-subtle txt-compact-small-plus transition-fg cursor-pointer rounded-full border border-transparent px-3 py-2\",\n {\n \"text-ui-code-fg-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\nHeaderComponent.displayName = \"CodeBlock.Header\"\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\n \"txt-compact-small text-ui-code-fg-subtle ml-auto\",\n className\n )}\n {...props}\n />\n )\n}\nMeta.displayName = \"CodeBlock.Header.Meta\"\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-fg-muted absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"rgb(17,24,39)\",\n },\n styles: [\n ...themes.palenight.styles,\n {\n types: [\"keyword\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,160,255)\",\n },\n },\n {\n types: [\"punctuation\", \"operator\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(255,255,255)\",\n },\n },\n {\n types: [\"constant\", \"boolean\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,77,96)\",\n },\n },\n {\n types: [\"function\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(27,198,242)\",\n },\n },\n {\n types: [\"number\"],\n style: {\n color: \"rgb(247,208,25)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255,203,107)\",\n },\n },\n {\n types: [\"string\"],\n style: {\n color: \"rgb(73,209,110)\",\n },\n },\n {\n types: [\"comment\"],\n style: {\n color: \"rgb(52,211,153)\",\n },\n },\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\"code-body whitespace-pre-wrap bg-transparent\", {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n })}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-fg-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\nBody.displayName = \"CodeBlock.Body\"\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
package/dist/esm/components/command/command.d.ts CHANGED
@@ -3,10 +3,10 @@ declare const Command: {
3
3
  ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
4
4
  displayName: string;
5
5
  } & {
6
- Copy: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & {
6
+ Copy: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement> & {
7
7
  content: string;
8
8
  variant?: "default" | "mini" | null | undefined;
9
9
  asChild?: boolean | undefined;
10
- } & React.RefAttributes<HTMLButtonElement>>;
10
+ } & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
11
11
  };
12
12
  export { Command };
package/dist/esm/components/command/command.js CHANGED
@@ -6,9 +6,13 @@ import React from "react";
6
6
  * This component is based on the div element and supports all of its props
7
7
  */
8
8
  const CommandComponent = ({ className, ...props }) => {
9
- return (React.createElement("div", { className: clx("bg-ui-code-bg-header border-ui-code-border flex items-center rounded-lg border px-3 py-2", "[&>code]:text-ui-code-text-base [&>code]:txt-compact-small [&>code]:mx-3 [&>code]:font-mono [&>code]:leading-6", className), ...props }));
9
+ return (React.createElement("div", { className: clx("bg-ui-code-bg-base border-ui-code-border flex items-center rounded-lg border px-3 py-2", "[&>code]:text-ui-code-fg-base [&>code]:code-body [&>code]:mx-3", className), ...props }));
10
10
  };
11
11
  CommandComponent.displayName = "Command";
12
- const Command = Object.assign(CommandComponent, { Copy });
12
+ const CommandCopy = React.forwardRef(({ className, ...props }, ref) => {
13
+ return (React.createElement(Copy, { ...props, ref: ref, className: clx("!text-ui-code-fg-muted ml-auto", className) }));
14
+ });
15
+ CommandCopy.displayName = "Command.Copy";
16
+ const Command = Object.assign(CommandComponent, { Copy: CommandCopy });
13
17
  export { Command };
14
18
  //# sourceMappingURL=command.js.map
package/dist/esm/components/command/command.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"command.js","sourceRoot":"","sources":["../../../../src/components/command/command.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;GAEG;AACH,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EAC6B,EAAE,EAAE;IACzC,OAAO,CACL,6BACE,SAAS,EAAE,GAAG,CACZ,0FAA0F,EAC1F,gHAAgH,EAChH,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA;AACD,gBAAgB,CAAC,WAAW,GAAG,SAAS,CAAA;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAA;AAEzD,OAAO,EAAE,OAAO,EAAE,CAAA","sourcesContent":["\"use client\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\nimport React from \"react\"\n\n/**\n * This component is based on the div element and supports all of its props\n */\nconst CommandComponent = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-header border-ui-code-border flex items-center rounded-lg border px-3 py-2\",\n \"[&>code]:text-ui-code-text-base [&>code]:txt-compact-small [&>code]:mx-3 [&>code]:font-mono [&>code]:leading-6\",\n className\n )}\n {...props}\n />\n )\n}\nCommandComponent.displayName = \"Command\"\n\nconst Command = Object.assign(CommandComponent, { Copy })\n\nexport { Command }\n"]}
1
+ {"version":3,"file":"command.js","sourceRoot":"","sources":["../../../../src/components/command/command.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;GAEG;AACH,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EAC6B,EAAE,EAAE;IACzC,OAAO,CACL,6BACE,SAAS,EAAE,GAAG,CACZ,wFAAwF,EACxF,gEAAgE,EAChE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA;AACD,gBAAgB,CAAC,WAAW,GAAG,SAAS,CAAA;AAExC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,oBAAC,IAAI,OACC,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CAAC,gCAAgC,EAAE,SAAS,CAAC,GAC3D,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,WAAW,CAAC,WAAW,GAAG,cAAc,CAAA;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAA;AAEtE,OAAO,EAAE,OAAO,EAAE,CAAA","sourcesContent":["\"use client\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\nimport React from \"react\"\n\n/**\n * This component is based on the div element and supports all of its props\n */\nconst CommandComponent = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base border-ui-code-border flex items-center rounded-lg border px-3 py-2\",\n \"[&>code]:text-ui-code-fg-base [&>code]:code-body [&>code]:mx-3\",\n className\n )}\n {...props}\n />\n )\n}\nCommandComponent.displayName = \"Command\"\n\nconst CommandCopy = React.forwardRef<\n React.ElementRef<typeof Copy>,\n React.ComponentPropsWithoutRef<typeof Copy>\n>(({ className, ...props }, ref) => {\n return (\n <Copy\n {...props}\n ref={ref}\n className={clx(\"!text-ui-code-fg-muted ml-auto\", className)}\n />\n )\n})\nCommandCopy.displayName = \"Command.Copy\"\n\nconst Command = Object.assign(CommandComponent, { Copy: CommandCopy })\n\nexport { Command }\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@medusajs/ui",
3
- "version": "2.4.0",
3
+ "version": "2.4.1-next-20240209091952",
4
4
  "author": "Kasper Kristensen <kasper@medusajs.com>",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -42,7 +42,7 @@
42
42
  "typecheck": "tsc --noEmit"
43
43
  },
44
44
  "devDependencies": {
45
- "@medusajs/ui-preset": "^1.1.1",
45
+ "@medusajs/ui-preset": "1.1.2-next-20240209091952",
46
46
  "@storybook/addon-essentials": "^7.0.23",
47
47
  "@storybook/addon-interactions": "^7.0.23",
48
48
  "@storybook/addon-links": "^7.0.23",