chore(docs): Updated UI Reference (automated) (#11578)

Automated changes by [create-pull-request](https://github.com/peter-evans/create-pull-request) GitHub action

Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
Co-authored-by: Shahed Nasser <27354907+shahednasser@users.noreply.github.com>

www/apps/api-reference/package.json

@@ -15,8 +15,8 @@
   "dependencies": {
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@medusajs/icons": "~2.4.0",
+    "@medusajs/icons": "~2.5.1",
-    "@medusajs/ui": "~4.0.4",
+    "@medusajs/ui": "~4.0.6",
     "@next/mdx": "15.0.4",
     "@react-hook/resize-observer": "^2.0.2",
     "@readme/openapi-parser": "^2.5.0",

www/apps/book/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@medusajs/icons": "~2.4.0",
+    "@medusajs/icons": "~2.5.1",
     "@next/mdx": "15.0.4",
     "clsx": "^2.1.0",
     "docs-ui": "*",

www/apps/resources/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@medusajs/icons": "~2.4.0",
+    "@medusajs/icons": "~2.5.1",
     "@next/mdx": "15.0.4",
     "clsx": "^2.1.0",
     "docs-ui": "*",

www/apps/ui/package.json

@@ -16,9 +16,9 @@
   "dependencies": {
     "@faker-js/faker": "^8.0.2",
     "@mdx-js/react": "^3.1.0",
-    "@medusajs/icons": "~2.4.0",
+    "@medusajs/icons": "~2.5.1",
-    "@medusajs/ui": "~4.0.4",
+    "@medusajs/ui": "~4.0.6",
-    "@medusajs/ui-preset": "~2.4.0",
+    "@medusajs/ui-preset": "~2.5.1",
     "autoprefixer": "10.4.14",
     "clsx": "^2.0.0",
     "contentlayer": "^0.3.4",

www/apps/ui/src/config/docs.tsx

@@ -207,6 +207,13 @@ export const docsConfig: DocsConfig = {
             isPathHref: true,
             loaded: true,
           },
+          {
+            type: "link",
+            title: "Inline Tip",
+            path: "/components/inline-tip",
+            isPathHref: true,
+            loaded: true,
+          },
           {
             type: "link",
             title: "Input",

www/apps/ui/src/content/docs/components/inline-tip.mdx

@@ -0,0 +1,45 @@
+---
+title: "Inline Tip"
+description: "A component for displaying a note or tip inline."
+component: true
+---
+
+<ComponentExample name="inline-tip-demo" />
+
+## Usage
+
+---
+
+```tsx
+import { InlineTip } from "@medusajs/ui"
+```
+
+```tsx
+<InlineTip
+  label="This is a tip"
+>
+  <button>Hover me</button>
+</InlineTip>
+```
+
+## API Reference
+
+---
+
+<ComponentReference mainComponent="InlineTip" />
+
+## Examples
+
+---
+
+### Success Inline Tip
+
+<ComponentExample name="inline-tip-success" />
+
+### Warning Inline Tip
+
+<ComponentExample name="inline-tip-warning" />
+
+### Error Inline Tip
+
+<ComponentExample name="inline-tip-error" />

www/apps/ui/src/examples/inline-tip-demo.tsx

@@ -0,0 +1,11 @@
+import { InlineTip } from "@medusajs/ui"
+
+export default function InlineTipDemo() {
+  return (
+    <InlineTip
+      label="Tip"
+    >
+      Medusa UI is a package of React components to be used in Medusa Admin customizations.
+    </InlineTip>
+  )
+}

www/apps/ui/src/examples/inline-tip-error.tsx

@@ -0,0 +1,12 @@
+import { InlineTip } from "@medusajs/ui"
+
+export default function InlineTipError() {
+  return (
+    <InlineTip
+      label="Error"
+      variant="error"
+    >
+      An error occurred. Please try again.
+    </InlineTip>
+  )
+}

www/apps/ui/src/examples/inline-tip-success.tsx

@@ -0,0 +1,12 @@
+import { InlineTip } from "@medusajs/ui"
+
+export default function InlineTipSuccess() {
+  return (
+    <InlineTip
+      label="Success"
+      variant="success"
+    >
+      Product created successfully!
+    </InlineTip>
+  )
+}

www/apps/ui/src/examples/inline-tip-warning.tsx

@@ -0,0 +1,12 @@
+import { InlineTip } from "@medusajs/ui"
+
+export default function InlineTipWarning() {
+  return (
+    <InlineTip
+      label="Warning"
+      variant="warning"
+    >
+      This action cannot be undone.
+    </InlineTip>
+  )
+}

www/apps/ui/src/registries/example-registry.tsx

@@ -188,10 +188,30 @@ export const ExampleRegistry: ExampleRegistryType = {
     file: "src/examples/icon-badge-base.tsx",
   },
   "icon-badge-large": {
-    name: "icon-badge-small",
+    name: "icon-badge-large",
     component: React.lazy(async () => import("@/examples/icon-badge-large")),
     file: "src/examples/icon-badge-large.tsx",
   },
+  "inline-tip-demo": {
+    name: "inline-tip-demo",
+    component: React.lazy(async () => import("@/examples/inline-tip-demo")),
+    file: "src/examples/inline-tip-demo.tsx",
+  },
+  "inline-tip-warning": {
+    name: "inline-tip-warning",
+    component: React.lazy(async () => import("@/examples/inline-tip-warning")),
+    file: "src/examples/inline-tip-warning.tsx",
+  },
+  "inline-tip-error": {
+    name: "inline-tip-error",
+    component: React.lazy(async () => import("@/examples/inline-tip-error")),
+    file: "src/examples/inline-tip-error.tsx",
+  },
+  "inline-tip-success": {
+    name: "inline-tip-success",
+    component: React.lazy(async () => import("@/examples/inline-tip-success")),
+    file: "src/examples/inline-tip-success.tsx",
+  },
   "button-demo": {
     name: "button-demo",
     component: React.lazy(async () => import("@/examples/button-demo")),

www/apps/ui/src/specs/InlineTip/InlineTip.json

@@ -0,0 +1,44 @@
+{
+  "description": "This component is based on the `div` element and supports all of its props.",
+  "methods": [],
+  "displayName": "InlineTip",
+  "props": {
+    "label": {
+      "required": true,
+      "tsType": {
+        "name": "string"
+      },
+      "description": "The label to display in the tip."
+    },
+    "variant": {
+      "required": false,
+      "tsType": {
+        "name": "union",
+        "raw": "\"info\" | \"warning\" | \"error\" | \"success\"",
+        "elements": [
+          {
+            "name": "literal",
+            "value": "\"info\""
+          },
+          {
+            "name": "literal",
+            "value": "\"warning\""
+          },
+          {
+            "name": "literal",
+            "value": "\"error\""
+          },
+          {
+            "name": "literal",
+            "value": "\"success\""
+          }
+        ]
+      },
+      "description": "The variant of the tip.",
+      "defaultValue": {
+        "value": "\"info\"",
+        "computed": false
+      }
+    }
+  }
+}

www/apps/user-guide/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@medusajs/icons": "~2.4.0",
+    "@medusajs/icons": "~2.5.1",
     "@next/mdx": "15.0.4",
     "clsx": "^2.1.0",
     "docs-ui": "*",

www/packages/docs-ui/package.json

@@ -57,8 +57,8 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
-    "@medusajs/icons": "~2.4.0",
+    "@medusajs/icons": "~2.5.1",
-    "@medusajs/ui": "~4.0.4",
+    "@medusajs/ui": "~4.0.6",
     "@next/third-parties": "15.0.4",
     "@octokit/request": "^8.1.1",
     "@react-hook/resize-observer": "^1.2.6",

www/packages/tailwind/package.json

@@ -12,7 +12,7 @@
     "postcss.config.js"
   ],
   "dependencies": {
-    "@medusajs/ui-preset": "~2.4.0",
+    "@medusajs/ui-preset": "~2.5.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "peerDependencies": {

www/packages/types/package.json

@@ -32,7 +32,7 @@
     "watch": "tsc --watch"
   },
   "devDependencies": {
-    "@medusajs/icons": "~2.4.0",
+    "@medusajs/icons": "~2.5.1",
     "@types/node": "^20.11.20",
     "rimraf": "^5.0.5",
     "tsconfig": "*",