docs(ui,docs): Add documentation for Medusa UI 2.0.0 (#5227)
* add docs for medusa ui 2.0.0 * fix: copy as child example * fix: dropdown menu example * add accordion examples * fix lint issues * fix apos in progress tabs demo * resolve comments * add icon * bump z-index on modals to prevent clashing with navbar * add sidebar item and card * undo modal z index changes * add links to updated and new components * update version * rm inline code formatting on links --------- Co-authored-by: Shahed Nasser <shahednasser@gmail.com>
This commit is contained in:
Kasper Fabricius Kristensen
committed by
GitHub
GitHub
parent
f5a698ad6f
commit
4e3f3b54cb
@@ -26,4 +26,10 @@ Find in this page the upgrade guides that require necessary steps when upgrading
|
||||
|
||||
<DocCard
|
||||
item={getFirstCategoryItem('Medusa React')}
|
||||
/>
|
||||
/>
|
||||
|
||||
## Medusa UI
|
||||
|
||||
<DocCard
|
||||
item={getFirstCategoryItem('Medusa UI')}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
description: "Actions Required for v.2.0.0"
|
||||
sidebar_custom_props:
|
||||
iconName: "component-solid"
|
||||
---
|
||||
|
||||
# v2.0.0
|
||||
|
||||
Version 2.0.0 of Medusa UI introduces a set of new components, and breaking changes to some of the existing components.
|
||||
|
||||
## How to Update
|
||||
|
||||
Run the following command in your project:
|
||||
|
||||
```bash npm2yarn
|
||||
npm install @medusajs/ui@2.0.0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Breaking Changes
|
||||
|
||||
### `Button` Component
|
||||
|
||||
The [Button](https://docs.medusajs.com/ui/components/button) component has been split into two components: `Button` and `IconButton`.
|
||||
|
||||
The `Button` no longer supports the `format` property that was periously used to specify if a button should be styled as a icon button.
|
||||
|
||||
Instead, use the `IconButton` component for this purpose.
|
||||
|
||||
### `Badge` Component
|
||||
|
||||
The [Badge](https://docs.medusajs.com/ui/components/badge) component has been split into two components: `Badge` and `IconBadge`.
|
||||
|
||||
The `Badge` component no longer supports the `format` property that was previously used to specify if a badge should be styled as a tag. Also, the border-radius of the `Badge` component is now controlled by the `rounded` property.
|
||||
|
||||
Instead, use the `IconBadge` component for this purpose.
|
||||
|
||||
### `CodeBlock` Component
|
||||
|
||||
The [CodeBlock](https://docs.medusajs.com/ui/components/code-block) component no longer accepts the `hideLineNumbers` property. Instead, the property should be passed directly to the `snippets` property.
|
||||
|
||||
This change was made to make the component more flexible, allowing users to specify whether to show line numbers for each snippet individually.
|
||||
|
||||
---
|
||||
|
||||
## New Components
|
||||
|
||||
### `IconBadge` Component
|
||||
|
||||
The [IconBadge](https://docs.medusajs.com/ui/components/icon-badge) component is a new component that can be used to render a badge with an icon. It is a replacement for the `Badge` component with the `format` property set to `icon`.
|
||||
|
||||
### `StatusBadge` Component
|
||||
|
||||
The [StatusBadge](https://docs.medusajs.com/ui/components/status-badge) component is a new component that can be used to render a badge with a status.
|
||||
|
||||
### `IconButton` Component
|
||||
|
||||
The [IconButton](https://docs.medusajs.com/ui/components/icon-button) component is a new component that can be used to render a button with an icon. It is a replacement for the `Button` component with the `format` property set to `icon`.
|
||||
|
||||
### `Tabs` Component
|
||||
|
||||
The [Tabs](https://docs.medusajs.com/ui/components/tabs) component allows you to render a set of tab panels, which are displayed one at a time.
|
||||
|
||||
### `ProgressTabs` Component
|
||||
|
||||
The [ProgressTabs](https://docs.medusajs.com/ui/components/progress-tabs) component is a new component that can be used to render a set of tab panels with a progress indicator. It is specifically designed to be used for implementing multi-step tasks.
|
||||
|
||||
### `CurrencyInpput` Component
|
||||
|
||||
The [CurrencyInput](https://docs.medusajs.com/ui/components/currency-input) component is a new component that can be used to render a currency input field. It is specifically designed to be used for implementing currency inputs, such as money amounts.
|
||||
|
||||
### `CommandBar` Component
|
||||
|
||||
The [CommandBar](https://docs.medusajs.com/ui/components/command-bar) component is a new component that can be used to render a list of keyboard commands or shortcuts.
|
||||
|
||||
### `ProgressAccordion` Component
|
||||
|
||||
The [ProgressAccordion](https://docs.medusajs.com/ui/components/progress-accordion) component is a new component that can be used to render a list of accordion panels with a progress indicator. It is specifically designed to be used for implementing multi-step tasks.
|
||||
|
||||
The `ProgressAccordion` component requires animations that have been introduced in the latest version of `@medusajs/ui-preset`, so make sure to update this package as well:
|
||||
|
||||
```bash npm2yarn
|
||||
npm install @medusajs/ui-preset@1.0.1
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Other Changes
|
||||
|
||||
### Cleanup of `z-index`'s across all components
|
||||
|
||||
The `z-index`'s of all components have been cleaned up to ensure that components are layered correctly, out of the box. Components now have a maximum `z-index` of `1`, with the exception of the `Toaster` component.
|
||||
|
||||
This prevents issues such as the `Select.Content` component being layered behind the `FocusModal` component.
|
||||
|
||||
While this is meant to make it easier to use the components, be aware that if your application uses custom `z-index`'s, you may need to update them, or override the `z-index` of the components from Medusa UI.
|
||||
|
||||
### `Table.Pagination` Component
|
||||
|
||||
The [Table.Pagination](https://docs.medusajs.com/ui/components/table) component now displays the correct number of pages (`0`) when `count` is `0`.
|
||||
|
||||
### `Calendar` Component
|
||||
|
||||
The [Calendar](https://docs.medusajs.com/ui/components/calendar) component's day buttons are now of type `button`, which prevents them from submitting the form when clicked.
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"position": 5,
|
||||
"collapsed": true,
|
||||
"link": null,
|
||||
"label": "Medusa UI"
|
||||
}
|
||||
@@ -1944,6 +1944,23 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Medusa UI",
|
||||
collapsible: false,
|
||||
customProps: {
|
||||
sidebar_is_group_headline: true,
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: "autogenerated",
|
||||
dirName: "upgrade-guides/medusa-ui",
|
||||
customProps: {
|
||||
reverse: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Modules",
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
"use client"
|
||||
|
||||
import { Spinner } from "@medusajs/icons"
|
||||
import * as React from "react"
|
||||
import { ExampleRegistry } from "../registries/example-registry"
|
||||
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"
|
||||
import { Feedback } from "./feedback"
|
||||
import clsx from "clsx"
|
||||
import { Tabs, clx } from "@medusajs/ui"
|
||||
import { CodeBlock } from "docs-ui"
|
||||
import * as React from "react"
|
||||
|
||||
import { Feedback } from "@/components/feedback"
|
||||
import { ExampleRegistry } from "@/registries/example-registry"
|
||||
|
||||
interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
name: string
|
||||
@@ -34,14 +33,17 @@ export function ComponentExample({
|
||||
return (
|
||||
<div className="relative my-4 flex flex-col space-y-2" {...props}>
|
||||
<Tabs defaultValue="preview" className="relative mr-auto w-full">
|
||||
<div className="flex flex-col items-center justify-between pb-3">
|
||||
<TabsList className="">
|
||||
<TabsTrigger value="preview">Preview</TabsTrigger>
|
||||
<TabsTrigger value="code">Code</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="preview" className="relative">
|
||||
<div className="flex flex-col pb-3">
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="preview">Preview</Tabs.Trigger>
|
||||
<Tabs.Trigger value="code">Code</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content
|
||||
value="preview"
|
||||
className="relative data-[state=active]:mt-4"
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
className={clx(
|
||||
"bg-docs-bg border-medusa-border-base flex max-h-[400px] min-h-[400px]",
|
||||
"w-full items-center justify-center overflow-auto rounded-md border px-10 py-5"
|
||||
)}
|
||||
@@ -56,10 +58,13 @@ export function ComponentExample({
|
||||
{Preview}
|
||||
</React.Suspense>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="code" className="relative ">
|
||||
</Tabs.Content>
|
||||
<Tabs.Content
|
||||
value="code"
|
||||
className="relative data-[state=active]:mt-4"
|
||||
>
|
||||
<CodeBlock source={Code} lang="tsx" />
|
||||
</TabsContent>
|
||||
</Tabs.Content>
|
||||
</div>
|
||||
</Tabs>
|
||||
<Feedback
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client"
|
||||
|
||||
import { docsConfig } from "@/config/docs"
|
||||
import { Navbar as UiNavbar, useSidebar } from "docs-ui"
|
||||
import { basePathUrl } from "@/lib/base-path-url"
|
||||
import { Navbar as UiNavbar, useSidebar } from "docs-ui"
|
||||
|
||||
const Navbar = () => {
|
||||
const { mobileSidebarOpen, setMobileSidebarOpen } = useSidebar()
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { clx } from "@medusajs/ui"
|
||||
import * as Primitives from "@radix-ui/react-tabs"
|
||||
import * as React from "react"
|
||||
import { Key } from "@/types/props"
|
||||
|
||||
const Tabs = Primitives.Root
|
||||
|
||||
const TabsList = React.forwardRef<
|
||||
React.ElementRef<typeof Primitives.List>,
|
||||
React.ComponentPropsWithoutRef<typeof Primitives.List>
|
||||
// eslint-disable-next-line react/prop-types
|
||||
>(({ className, key, ...props }, ref) => (
|
||||
<Primitives.List
|
||||
ref={ref}
|
||||
className={clx(
|
||||
"inline-flex h-10 w-full items-end justify-start rounded-none bg-transparent p-0",
|
||||
className
|
||||
)}
|
||||
key={key as Key}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsList.displayName = "TabsList"
|
||||
|
||||
const TabsTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof Primitives.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof Primitives.Trigger>
|
||||
// eslint-disable-next-line react/prop-types
|
||||
>(({ className, key, ...props }, ref) => (
|
||||
<Primitives.Trigger
|
||||
ref={ref}
|
||||
className={clx(
|
||||
"text-medusa-fg-subtle txt-compact-small-plus rounded-full px-3 py-1.5 transition-all",
|
||||
"data-[state=active]:shadow-card-rest dark:data-[state=active]:shadow-card-rest-dark data-[state=active]:text-medusa-fg-base",
|
||||
className
|
||||
)}
|
||||
key={key as Key}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsTrigger.displayName = "TabsTrigger"
|
||||
|
||||
const TabsContent = React.forwardRef<
|
||||
React.ElementRef<typeof Primitives.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof Primitives.Content>
|
||||
// eslint-disable-next-line react/prop-types
|
||||
>(({ className, key, ...props }, ref) => (
|
||||
<Primitives.Content
|
||||
ref={ref}
|
||||
className={clx(
|
||||
"w-full rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[state=active]:mt-4",
|
||||
className
|
||||
)}
|
||||
key={key as Key}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsContent.displayName = "TabsContent"
|
||||
|
||||
export { Tabs, TabsContent, TabsList, TabsTrigger }
|
||||
@@ -1,5 +1,31 @@
|
||||
export const colors = {
|
||||
dark: {
|
||||
"--code-text-subtle": "rgba(105, 110, 119, 1)",
|
||||
"--button-transparent-pressed": "rgba(46, 48, 53, 1)",
|
||||
"--border-base": "rgba(46, 48, 53, 1)",
|
||||
"--code-text-base": "rgba(237, 238, 240, 1)",
|
||||
"--tag-neutral-icon": "rgba(125, 130, 138, 1)",
|
||||
"--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
|
||||
"--fg-on-color": "rgba(255, 255, 255, 1)",
|
||||
"--button-neutral-hover": "rgba(53, 55, 60, 1)",
|
||||
"--bg-switch-off": "rgba(53, 55, 60, 1)",
|
||||
"--border-strong": "rgba(53, 55, 60, 1)",
|
||||
"--fg-subtle": "rgba(173, 177, 184, 1)",
|
||||
"--fg-base": "rgba(237, 238, 240, 1)",
|
||||
"--bg-base-hover": "rgba(39, 40, 45, 1)",
|
||||
"--bg-subtle-hover": "rgba(27, 27, 31, 1)",
|
||||
"--fg-disabled": "rgba(60, 63, 68, 1)",
|
||||
"--bg-subtle": "rgba(24, 24, 26, 1)",
|
||||
"--tag-neutral-border": "rgba(60, 63, 68, 1)",
|
||||
"--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
|
||||
"--tag-neutral-text": "rgba(173, 177, 184, 1)",
|
||||
"--fg-muted": "rgba(105, 110, 119, 1)",
|
||||
"--button-danger-pressed": "rgba(225, 29, 72, 1)",
|
||||
"--code-bg-header": "rgba(24, 24, 26, 1)",
|
||||
"--border-loud": "rgba(237, 238, 240, 1)",
|
||||
"--bg-base-pressed": "rgba(46, 48, 53, 1)",
|
||||
"--bg-disabled": "rgba(39, 40, 45, 1)",
|
||||
"--code-icon": "rgba(70, 75, 80, 1)",
|
||||
"--bg-highlight-hover": "rgba(30, 58, 138, 1)",
|
||||
"--border-danger": "rgba(190, 18, 60, 1)",
|
||||
"--border-interactive": "rgba(96, 165, 250, 1)",
|
||||
@@ -11,95 +37,61 @@ export const colors = {
|
||||
"--button-danger": "rgba(159, 18, 57, 1)",
|
||||
"--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
|
||||
"--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
|
||||
"--bg-overlay": "rgba(10, 10, 10, 0.7)",
|
||||
"--fg-interactive": "rgba(96, 165, 250, 1)",
|
||||
"--fg-on-inverted": "rgba(10, 10, 10, 1)",
|
||||
"--button-danger-pressed": "rgba(159, 18, 57, 1)",
|
||||
"--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
|
||||
"--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
|
||||
"--button-neutral-pressed": "rgba(38, 38, 38, 1)",
|
||||
"--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 0)",
|
||||
"--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 1)",
|
||||
"--bg-overlay": "rgba(24, 24, 26, 0.7)",
|
||||
"--fg-on-inverted": "rgba(24, 24, 26, 1)",
|
||||
"--button-neutral-pressed": "rgba(60, 63, 68, 1)",
|
||||
"--tag-red-border": "rgba(136, 19, 55, 1)",
|
||||
"--tag-red-bg": "rgba(76, 5, 25, 1)",
|
||||
"--button-transparent-hover": "rgba(38, 38, 38, 1)",
|
||||
"--button-transparent-hover": "rgba(39, 40, 45, 1)",
|
||||
"--tag-blue-text": "rgba(96, 165, 250, 1)",
|
||||
"--button-inverted": "rgba(238, 238, 238, 1)",
|
||||
"--button-inverted-gradient-from": "rgba(0, 0, 0, 0)",
|
||||
"--button-inverted-gradient-to": "rgba(0, 0, 0, 1)",
|
||||
"--tag-orange-text": "rgba(251, 191, 36, 1)",
|
||||
"--tag-green-text": "rgba(52, 211, 153, 1)",
|
||||
"--button-transparent": "rgba(0, 0, 0, 0)",
|
||||
"--button-transparent-pressed": "rgba(48, 48, 48, 1)",
|
||||
"--tag-neutral-bg": "rgba(48, 48, 48, 1)",
|
||||
"--code-text-subtle": "rgba(110, 110, 110, 1)",
|
||||
"--code-bg-base": "rgba(30, 30, 30, 1)",
|
||||
"--tag-neutral-bg": "rgba(46, 48, 53, 1)",
|
||||
"--tag-orange-border": "rgba(120, 53, 15, 1)",
|
||||
"--border-base": "rgba(48, 48, 48, 1)",
|
||||
"--bg-component": "rgba(38, 38, 38, 1)",
|
||||
"--code-text-base": "rgba(238, 238, 238, 1)",
|
||||
"--tag-green-border": "rgba(6, 78, 59, 1)",
|
||||
"--bg-base": "rgba(23, 23, 23, 1)",
|
||||
"--fg-on-color": "rgba(238, 238, 238, 1)",
|
||||
"--bg-base": "rgba(27, 27, 31, 1)",
|
||||
"--tag-red-text": "rgba(251, 113, 133, 1)",
|
||||
"--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
|
||||
"--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
|
||||
"--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
|
||||
"--border-strong": "rgba(55, 55, 55, 1)",
|
||||
"--fg-subtle": "rgba(163, 163, 163, 1)",
|
||||
"--fg-base": "rgba(238, 238, 238, 1)",
|
||||
"--code-border": "rgba(48, 48, 48, 1)",
|
||||
"--border-transparent": "rgba(238, 238, 238, 0)",
|
||||
"--border-transparent": "rgba(255, 255, 255, 0)",
|
||||
"--code-border": "rgba(46, 48, 53, 1)",
|
||||
"--tag-orange-icon": "rgba(245, 158, 11, 1)",
|
||||
"--tag-purple-bg": "rgba(46, 16, 100, 1)",
|
||||
"--bg-base-hover": "rgba(38, 38, 38, 1)",
|
||||
"--bg-subtle-hover": "rgba(23, 23, 23, 1)",
|
||||
"--tag-blue-bg": "rgba(23, 37, 84, 1)",
|
||||
"--fg-disabled": "rgba(63, 63, 63, 1)",
|
||||
"--bg-subtle": "rgba(10, 10, 10, 1)",
|
||||
"--tag-green-bg": "rgba(2, 44, 34, 1)",
|
||||
"--bg-subtle-pressed": "rgba(38, 38, 38, 1)",
|
||||
"--tag-blue-border": "rgba(30, 58, 138, 1)",
|
||||
"--fg-muted": "rgba(110, 110, 110, 1)",
|
||||
"--tag-purple-border": "rgba(76, 29, 149, 1)",
|
||||
"--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
|
||||
"--code-bg-header": "rgba(23, 23, 23, 1)",
|
||||
"--border-loud": "rgba(238, 238, 238, 1)",
|
||||
"--bg-base-pressed": "rgba(48, 48, 48, 1)",
|
||||
"--tag-orange-bg": "rgba(69, 26, 3, 1)",
|
||||
"--bg-disabled": "rgba(38, 38, 38, 1)",
|
||||
"--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
|
||||
"--code-icon": "rgba(74, 74, 74, 1)",
|
||||
"--bg-field-hover": "rgba(48, 48, 48, 1)",
|
||||
"--bg-field": "rgba(38, 38, 38, 1)",
|
||||
"--button-neutral": "rgba(38, 38, 38, 1)",
|
||||
"--code-bg-base": "rgba(27, 27, 31, 1)",
|
||||
"--button-transparent": "rgba(255, 255, 255, 0)",
|
||||
"--button-neutral": "rgba(39, 40, 45, 1)",
|
||||
"--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
|
||||
"--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
|
||||
"--button-inverted-pressed": "rgba(238, 238, 238, 1)",
|
||||
"--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 1)",
|
||||
"--button-inverted-pressed-gradient-to": "rgba(0, 0, 0, 0)",
|
||||
"--button-neutral-hover": "rgba(38, 38, 38, 1)",
|
||||
"--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
|
||||
"--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
|
||||
"--button-inverted-hover": "rgba(238, 238, 238, 1)",
|
||||
"--button-inverted-hover-gradient-from": "rgba(0, 0, 0, 0)",
|
||||
"--button-inverted-hover-gradient-to": "rgba(0, 0, 0, 1)",
|
||||
"--button-danger-hover": "rgba(159, 18, 57, 1)",
|
||||
"--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
|
||||
"--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
|
||||
"--bg-switch-off-hover": "rgba(74, 74, 74, 1)",
|
||||
"--bg-switch-off": "rgba(55, 55, 55, 1)",
|
||||
"--tag-neutral-bg-hover": "rgba(63, 63, 63, 1)",
|
||||
"--tag-neutral-border": "rgba(63, 63, 63, 1)",
|
||||
"--button-inverted-pressed": "rgba(237, 238, 240, 1)",
|
||||
"--button-inverted-hover": "rgba(255, 255, 255, 1)",
|
||||
"--button-danger-hover": "rgba(190, 18, 60, 1)",
|
||||
"--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
|
||||
"--tag-blue-icon": "rgba(59, 130, 246, 1)",
|
||||
"--tag-red-icon": "rgba(244, 63, 94, 1)",
|
||||
"--tag-neutral-icon": "rgba(129, 129, 129, 1)",
|
||||
"--tag-purple-icon": "rgba(139, 92, 246, 1)",
|
||||
"--tag-purple-text": "rgba(167, 139, 250, 1)",
|
||||
"--tag-neutral-text": "rgba(163, 163, 163, 1)",
|
||||
"--tag-green-icon": "rgba(16, 185, 129, 1)",
|
||||
"--button-inverted": "rgba(237, 238, 240, 1)",
|
||||
"--button-inverted-gradient-from": "rgba(24, 24, 26, 0)",
|
||||
"--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
|
||||
"--bg-component": "rgba(39, 40, 45, 1)",
|
||||
"--bg-field": "rgba(39, 40, 45, 1)",
|
||||
"--bg-field-hover": "rgba(46, 48, 53, 1)",
|
||||
},
|
||||
light: {
|
||||
"--button-inverted": "rgba(3, 7, 18, 1)",
|
||||
"--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
|
||||
"--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
|
||||
"--button-inverted-hover": "rgba(31, 41, 55, 1)",
|
||||
"--code-text-base": "rgba(249, 250, 251, 1)",
|
||||
"--tag-green-bg": "rgba(209, 250, 229, 1)",
|
||||
"--border-strong": "rgba(209, 213, 219, 1)",
|
||||
@@ -120,24 +112,17 @@ export const colors = {
|
||||
"--tag-purple-text": "rgba(109, 40, 217, 1)",
|
||||
"--tag-blue-bg": "rgba(219, 234, 254, 1)",
|
||||
"--tag-blue-icon": "rgba(37, 99, 235, 1)",
|
||||
"--bg-component": "rgba(241, 243, 245, 1)",
|
||||
"--border-error": "rgba(225, 29, 72, 1)",
|
||||
"--bg-field-hover": "rgba(243, 244, 246, 1)",
|
||||
"--bg-field": "rgba(249, 250, 251, 1)",
|
||||
"--border-loud": "rgba(3, 7, 18, 1)",
|
||||
"--fg-on-inverted": "rgba(255, 255, 255, 1)",
|
||||
"--fg-on-color": "rgba(255, 255, 255, 1)",
|
||||
"--button-danger-pressed": "rgba(225, 29, 72, 1)",
|
||||
"--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
|
||||
"--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
|
||||
"--button-transparent": "rgba(255, 255, 255, 0)",
|
||||
"--bg-interactive": "rgba(59, 130, 246, 1)",
|
||||
"--button-danger-pressed": "rgba(190, 18, 60, 1)",
|
||||
"--fg-interactive-hover": "rgba(37, 99, 235, 1)",
|
||||
"--fg-interactive": "rgba(59, 130, 246, 1)",
|
||||
"--fg-error": "rgba(225, 29, 72, 1)",
|
||||
"--border-danger": "rgba(190, 18, 60, 1)",
|
||||
"--border-transparent": "rgba(3, 7, 18, 0)",
|
||||
"--bg-overlay": "rgba(3, 7, 18, 0.4)",
|
||||
"--fg-base": "rgba(3, 7, 18, 1)",
|
||||
"--fg-disabled": "rgba(209, 213, 219, 1)",
|
||||
"--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
|
||||
@@ -163,42 +148,31 @@ export const colors = {
|
||||
"--tag-red-border": "rgba(254, 205, 211, 1)",
|
||||
"--tag-green-border": "rgba(167, 243, 208, 1)",
|
||||
"--tag-green-text": "rgba(4, 120, 87, 1)",
|
||||
"--bg-disabled": "rgba(243, 244, 246, 1)",
|
||||
"--button-transparent-hover": "rgba(249, 250, 251, 1)",
|
||||
"--button-transparent-pressed": "rgba(243, 244, 246, 1)",
|
||||
"--bg-switch-off-hover": "rgba(229, 231, 235, 1)",
|
||||
"--bg-switch-off-hover-gradient-from": "rgba(3, 7, 18, 0)",
|
||||
"--bg-switch-off-hover-gradient-to": "rgba(3, 7, 18, 1)",
|
||||
"--bg-highlight-hover": "rgba(219, 234, 254, 1)",
|
||||
"--code-bg-base": "rgba(17, 24, 39, 1)",
|
||||
"--code-bg-header": "rgba(31, 41, 55, 1)",
|
||||
"--code-text-subtle": "rgba(156, 163, 175, 1)",
|
||||
"--code-border": "rgba(55, 65, 81, 1)",
|
||||
"--code-icon": "rgba(107, 114, 128, 1)",
|
||||
"--button-inverted": "rgba(10, 10, 10, 1)",
|
||||
"--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
|
||||
"--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
|
||||
"--button-neutral-pressed": "rgba(255, 255, 255, 1)",
|
||||
"--button-neutral-pressed-gradient-from": "rgba(10, 10, 10, 1)",
|
||||
"--button-neutral-pressed-gradient-to": "rgba(10, 10, 10, 0)",
|
||||
"--button-inverted-pressed": "rgba(10, 10, 10, 1)",
|
||||
"--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 0)",
|
||||
"--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 1)",
|
||||
"--button-inverted-hover": "rgba(10, 10, 10, 1)",
|
||||
"--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
|
||||
"--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
|
||||
"--button-neutral-pressed": "rgba(243, 244, 246, 1)",
|
||||
"--button-inverted-pressed": "rgba(55, 65, 81, 1)",
|
||||
"--button-neutral": "rgba(255, 255, 255, 1)",
|
||||
"--button-neutral-gradient-from": "rgba(10, 10, 10, 0)",
|
||||
"--button-neutral-gradient-to": "rgba(10, 10, 10, 1)",
|
||||
"--button-neutral-hover": "rgba(255, 255, 255, 1)",
|
||||
"--button-neutral-hover-gradient-from": "rgba(10, 10, 10, 0)",
|
||||
"--button-neutral-hover-gradient-to": "rgba(10, 10, 10, 1)",
|
||||
"--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
|
||||
"--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
|
||||
"--button-danger": "rgba(225, 29, 72, 1)",
|
||||
"--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
|
||||
"--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
|
||||
"--button-neutral-hover": "rgba(249, 250, 251, 1)",
|
||||
"--button-danger-hover": "rgba(225, 29, 72, 1)",
|
||||
"--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
|
||||
"--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
|
||||
"--bg-component": "rgba(241, 243, 245, 1)",
|
||||
"--bg-overlay": "rgba(3, 7, 18, 0.4)",
|
||||
"--bg-switch-off": "rgba(229, 231, 235, 1)",
|
||||
"--bg-field-hover": "rgba(243, 244, 246, 1)",
|
||||
"--bg-field": "rgba(249, 250, 251, 1)",
|
||||
"--bg-interactive": "rgba(59, 130, 246, 1)",
|
||||
"--bg-highlight-hover": "rgba(219, 234, 254, 1)",
|
||||
"--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
|
||||
"--bg-disabled": "rgba(243, 244, 246, 1)",
|
||||
},
|
||||
}
|
||||
|
||||
@@ -127,6 +127,11 @@ export const docsConfig: DocsConfig = {
|
||||
path: "/components/command",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Command Bar",
|
||||
path: "/components/command-bar",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Container",
|
||||
path: "/components/container",
|
||||
@@ -137,6 +142,11 @@ export const docsConfig: DocsConfig = {
|
||||
path: "/components/copy",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Currency Input",
|
||||
path: "/components/currency-input",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Date Picker",
|
||||
path: "/components/date-picker",
|
||||
@@ -162,6 +172,16 @@ export const docsConfig: DocsConfig = {
|
||||
path: "/components/heading",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Icon Badge",
|
||||
path: "/components/icon-badge",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Icon Button",
|
||||
path: "/components/icon-button",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Input",
|
||||
path: "/components/input",
|
||||
@@ -177,6 +197,16 @@ export const docsConfig: DocsConfig = {
|
||||
path: "/components/label",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Progress Accordion",
|
||||
path: "/components/progress-accordion",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Progress Tabs",
|
||||
path: "/components/progress-tabs",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Prompt",
|
||||
path: "/components/prompt",
|
||||
@@ -192,6 +222,11 @@ export const docsConfig: DocsConfig = {
|
||||
path: "/components/select",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Status Badge",
|
||||
path: "/components/status-badge",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Switch",
|
||||
path: "/components/switch",
|
||||
@@ -202,6 +237,11 @@ export const docsConfig: DocsConfig = {
|
||||
path: "/components/table",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Tabs",
|
||||
path: "/components/tabs",
|
||||
isPathHref: true,
|
||||
},
|
||||
{
|
||||
title: "Text",
|
||||
path: "/components/text",
|
||||
|
||||
@@ -62,10 +62,10 @@ This component is based on the `div` element and supports all props of this elem
|
||||
|
||||
<ComponentExample name="badge-large" />
|
||||
|
||||
### Rounded
|
||||
### Rounded Full
|
||||
|
||||
<ComponentExample name="badge-rounded" />
|
||||
<ComponentExample name="badge-rounded-full" />
|
||||
|
||||
### Icon
|
||||
### Rounded Base
|
||||
|
||||
<ComponentExample name="badge-icon" />
|
||||
<ComponentExample name="badge-rounded-base" />
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Button"
|
||||
description: "Displays a button component"
|
||||
description: "Displays a button"
|
||||
component: true
|
||||
---
|
||||
|
||||
@@ -54,10 +54,6 @@ This component is based on the `button` element and supports all props of this e
|
||||
|
||||
<ComponentExample name="button-with-icon" />
|
||||
|
||||
### Icon Only
|
||||
|
||||
<ComponentExample name="button-icon-only" />
|
||||
|
||||
### Loading
|
||||
|
||||
<ComponentExample name="button-loading" />
|
||||
|
||||
@@ -54,8 +54,6 @@ This component is based on the `div` element and supports all props of this elem
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="code-block-body" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: "Command Bar"
|
||||
description: "Display a command bar with a list of commands"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="command-bar-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { CommandBar } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<CommandBar open={open}>
|
||||
<CommandBar.Bar>
|
||||
<CommandBar.Value>{count} selected</CommandBar.Value>
|
||||
<CommandBar.Seperator />
|
||||
<CommandBar.Command
|
||||
action={onDelete}
|
||||
label="Delete"
|
||||
shortcut="d"
|
||||
/>
|
||||
<CommandBar.Seperator />
|
||||
<CommandBar.Command
|
||||
action={onEdit}
|
||||
label="Edit"
|
||||
shortcut="e"
|
||||
/>
|
||||
</CommandBar.Bar>
|
||||
</CommandBar>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
### CommandBar
|
||||
|
||||
The root component of the command bar. This component manages the state of the command bar.
|
||||
|
||||
<ComponentProps component="command-bar" />
|
||||
|
||||
### CommandBar.Bar
|
||||
|
||||
The bar component of the command bar. This component is used to display the commands.
|
||||
|
||||
### CommandBar.Value
|
||||
|
||||
The value component of the command bar. This component is used to display a value, such as the number of selected items which the commands will act on.
|
||||
|
||||
### CommandBar.Seperator
|
||||
|
||||
The seperator component of the command bar. This component is used to display a seperator between commands.
|
||||
|
||||
### CommandBar.Command
|
||||
|
||||
The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.
|
||||
|
||||
<ComponentProps component="command-bar-command" />
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: "Currency Input"
|
||||
description: "Input component for currency values"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="currency-input-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { CurrencyInput } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<CurrencyInput symbol="$" code="usd" />
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `input` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="currency-input" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Base
|
||||
|
||||
<ComponentExample name="currency-input-base" />
|
||||
|
||||
### Small
|
||||
|
||||
<ComponentExample name="currency-input-small" />
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
title: "Icon Badge"
|
||||
description: "Displays an icon badge"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="icon-badge-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<IconBadge>
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `span` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="icon-badge" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Grey
|
||||
|
||||
<ComponentExample name="icon-badge-grey" />
|
||||
|
||||
### Red
|
||||
|
||||
<ComponentExample name="icon-badge-red" />
|
||||
|
||||
### Green
|
||||
|
||||
<ComponentExample name="icon-badge-green" />
|
||||
|
||||
### Blue
|
||||
|
||||
<ComponentExample name="icon-badge-blue" />
|
||||
|
||||
### Orange
|
||||
|
||||
<ComponentExample name="icon-badge-orange" />
|
||||
|
||||
### Purple
|
||||
|
||||
<ComponentExample name="icon-badge-purple" />
|
||||
|
||||
### Base
|
||||
|
||||
<ComponentExample name="icon-badge-base" />
|
||||
|
||||
### Large
|
||||
|
||||
<ComponentExample name="icon-badge-large" />
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: "Icon Button"
|
||||
description: "Displays an icon button"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="icon-button-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
import { Plus } from "@medusajs/icons"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<IconBadge>
|
||||
<Plus />
|
||||
</IconBadge>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `button` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="icon-button" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Primary
|
||||
|
||||
<ComponentExample name="icon-button-primary" />
|
||||
|
||||
### Transparent
|
||||
|
||||
<ComponentExample name="icon-button-transparent" />
|
||||
|
||||
### Base
|
||||
|
||||
<ComponentExample name="icon-button-base" />
|
||||
|
||||
### Large
|
||||
|
||||
<ComponentExample name="icon-button-large" />
|
||||
|
||||
### X-Large
|
||||
|
||||
<ComponentExample name="icon-button-xlarge" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentExample name="icon-button-disabled" />
|
||||
|
||||
### Loading
|
||||
|
||||
<ComponentExample name="icon-button-loading" />
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: "Progress Accordion"
|
||||
description: "A set of expandable content panels, specifically designed for implementing multi-step tasks"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="progress-accordion-demo"/>
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { ProgressAccordion } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<ProgressAccordion type="single">
|
||||
<ProgressAccordion.Item value="general">
|
||||
<ProgressAccordion.Header>
|
||||
General
|
||||
</ProgressAccordion.Header>
|
||||
<ProgressAccordion.Content>
|
||||
{/* Content */}
|
||||
</ProgressAccordion.Content>
|
||||
</ProgressAccordion.Item>
|
||||
<ProgressAccordion.Item value="shipping">
|
||||
<ProgressAccordion.Header>
|
||||
Shipping
|
||||
</ProgressAccordion.Header>
|
||||
<ProgressAccordion.Content>
|
||||
{/* Content */}
|
||||
</ProgressAccordion.Content>
|
||||
</ProgressAccordion.Item>
|
||||
</ProgressAccordion>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Accordion](https://radix-ui.com/primitives/docs/components/accordion) primitves.
|
||||
|
||||
### ProgressAccordion.Header
|
||||
|
||||
---
|
||||
|
||||
<ComponentProps component="progress-accordion-header" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Single
|
||||
|
||||
<ComponentExample name="progress-accordion-single" />
|
||||
|
||||
### Multiple
|
||||
|
||||
<ComponentExample name="progress-accordion-multiple" />
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: "Progress Tabs"
|
||||
description: "A set of layered content panels, known as tabs, specifically designed for implementing multi-step tasks"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="progress-tabs-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { ProgressTabs } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<ProgressTabs defaultValue="general">
|
||||
<ProgressTabs.List>
|
||||
<ProgressTabs.Trigger value="general">
|
||||
General
|
||||
</ProgressTabs.Trigger>
|
||||
<ProgressTabs.Trigger value="shipping">
|
||||
Shipping
|
||||
</ProgressTabs.Trigger>
|
||||
<ProgressTabs.Trigger value="payment">
|
||||
Payment
|
||||
</ProgressTabs.Trigger>
|
||||
</ProgressTabs.List>
|
||||
<ProgressTabs.Content value="general">
|
||||
{/* Content */}
|
||||
</ProgressTabs.Content>
|
||||
<ProgressTabs.Content value="shipping">
|
||||
{/* Content */}
|
||||
</ProgressTabs.Content>
|
||||
<ProgressTabs.Content value="payment">
|
||||
{/* Content */}
|
||||
</ProgressTabs.Content>
|
||||
</ProgressTabs>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves.
|
||||
|
||||
### ProgressAccordion.Header
|
||||
|
||||
<ComponentProps component="progress-tabs-trigger" />
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
title: "Status Badge"
|
||||
description: "Displays a status badge"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="status-badge-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { StatusBadge } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<StatusBadge color="green">Active</StatusBadge>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `span` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="status-badge" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Grey
|
||||
|
||||
<ComponentExample name="status-badge-grey" />
|
||||
|
||||
### Red
|
||||
|
||||
<ComponentExample name="status-badge-red" />
|
||||
|
||||
### Green
|
||||
|
||||
<ComponentExample name="status-badge-green" />
|
||||
|
||||
### Blue
|
||||
|
||||
<ComponentExample name="status-badge-blue" />
|
||||
|
||||
### Orange
|
||||
|
||||
<ComponentExample name="status-badge-orange" />
|
||||
|
||||
### Purple
|
||||
|
||||
<ComponentExample name="status-badge-purple" />
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: "Tabs"
|
||||
description: "A set of layered content panels, known as tabs, that display content one panel at a time"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="tabs-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Tabs } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Tabs>
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="1">Tab 1</Tabs.Trigger>
|
||||
<Tabs.Trigger value="2">Tab 2</Tabs.Trigger>
|
||||
<Tabs.Trigger value="3">Tab 3</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="1">Panel 1</Tabs.Content>
|
||||
<Tabs.Content value="2">Panel 2</Tabs.Content>
|
||||
<Tabs.Content value="3">Panel 3</Tabs.Content>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves
|
||||
@@ -1,10 +0,0 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeIcon() {
|
||||
return (
|
||||
<Badge type="icon">
|
||||
<BuildingTax />
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeRoundedBase() {
|
||||
return <Badge rounded="base">Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeRoundedFull() {
|
||||
return <Badge rounded="full">Badge</Badge>
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeRounded() {
|
||||
return <Badge type="rounded">Badge</Badge>
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { Button } from "@medusajs/ui"
|
||||
|
||||
export default function ButtonIconOnly() {
|
||||
return (
|
||||
<Button format="icon">
|
||||
<PlusMini />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
@@ -5,6 +5,7 @@ const snippets = [
|
||||
label: "cURL",
|
||||
language: "markdown",
|
||||
code: `curl -H 'x-publishable-key: YOUR_API_KEY' 'http://localhost:9000/store/products/PRODUCT_ID'`,
|
||||
hideLineNumbers: true,
|
||||
},
|
||||
{
|
||||
label: "Medusa JS Client",
|
||||
|
||||
@@ -5,6 +5,7 @@ const snippets = [
|
||||
label: "Medusa React",
|
||||
language: "tsx",
|
||||
code: `import { useProduct } from "medusa-react"\n\nconst { product } = useProduct("PRODUCT_ID")\nconsole.log(product.id)`,
|
||||
hideLineNumbers: true,
|
||||
},
|
||||
]
|
||||
|
||||
@@ -17,7 +18,7 @@ export default function CodeBlockNoLines() {
|
||||
<Label weight={"plus"}>/product-detail.js</Label>
|
||||
</CodeBlock.Header.Meta>
|
||||
</CodeBlock.Header>
|
||||
<CodeBlock.Body hideLineNumbers={true} />
|
||||
<CodeBlock.Body />
|
||||
</CodeBlock>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { Checkbox, CommandBar, Label } from "@medusajs/ui"
|
||||
import * as React from "react"
|
||||
|
||||
export default function CommandBarDemo() {
|
||||
const [selected, setSelected] = React.useState<boolean>(false)
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Checkbox
|
||||
checked={selected}
|
||||
onCheckedChange={(checked) =>
|
||||
setSelected(checked === true ? true : false)
|
||||
}
|
||||
/>
|
||||
<Label>Item One</Label>
|
||||
</div>
|
||||
<CommandBar open={selected}>
|
||||
<CommandBar.Bar>
|
||||
<CommandBar.Value>1 selected</CommandBar.Value>
|
||||
<CommandBar.Seperator />
|
||||
<CommandBar.Command
|
||||
action={() => {
|
||||
alert("Delete")
|
||||
}}
|
||||
label="Delete"
|
||||
shortcut="d"
|
||||
/>
|
||||
<CommandBar.Seperator />
|
||||
<CommandBar.Command
|
||||
action={() => {
|
||||
alert("Edit")
|
||||
}}
|
||||
label="Edit"
|
||||
shortcut="e"
|
||||
/>
|
||||
</CommandBar.Bar>
|
||||
</CommandBar>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,14 +1,14 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { Button, Copy, Text } from "@medusajs/ui"
|
||||
import { Copy, IconButton, Text } from "@medusajs/ui"
|
||||
|
||||
export default function CopyAsChild() {
|
||||
return (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Text>Copy command</Text>
|
||||
<Copy content="yarn add @medusajs/ui" asChild>
|
||||
<Button format="icon" size="small" className="text-ui-fg-on-inverted">
|
||||
<IconButton>
|
||||
<PlusMini />
|
||||
</Button>
|
||||
</IconButton>
|
||||
</Copy>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import { CurrencyInput } from "@medusajs/ui"
|
||||
|
||||
export default function CurrencyInputBase() {
|
||||
return (
|
||||
<div className="max-w-[250px]">
|
||||
<CurrencyInput size="base" symbol="$" code="usd" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { CurrencyInput } from "@medusajs/ui"
|
||||
|
||||
export default function CurrencyInputDemo() {
|
||||
return (
|
||||
<div className="max-w-[250px]">
|
||||
<CurrencyInput symbol="$" code="usd" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { CurrencyInput } from "@medusajs/ui"
|
||||
|
||||
export default function CurrencyInputSmall() {
|
||||
return (
|
||||
<div className="max-w-[250px]">
|
||||
<CurrencyInput size="small" symbol="$" code="usd" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
import { EllipsisHorizontal, PencilSquare, Plus, Trash } from "@medusajs/icons"
|
||||
import { Button, DropdownMenu } from "@medusajs/ui"
|
||||
import { DropdownMenu, IconButton } from "@medusajs/ui"
|
||||
|
||||
export default function DropdownMenuDemo() {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<Button variant="secondary" format={"icon"}>
|
||||
<IconButton>
|
||||
<EllipsisHorizontal />
|
||||
</Button>
|
||||
</IconButton>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Item className="gap-x-2">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { EllipsisHorizontal } from "@medusajs/icons"
|
||||
import { Button, DropdownMenu } from "@medusajs/ui"
|
||||
import { DropdownMenu, IconButton } from "@medusajs/ui"
|
||||
import React from "react"
|
||||
|
||||
type SortingState = "asc" | "desc" | "alpha" | "alpha-reverse" | "none"
|
||||
@@ -11,9 +11,9 @@ export default function DropdownMenuSorting() {
|
||||
<div className="flex flex-col items-center gap-y-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<Button variant="secondary" format={"icon"}>
|
||||
<IconButton>
|
||||
<EllipsisHorizontal />
|
||||
</Button>
|
||||
</IconButton>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content className="w-[300px]">
|
||||
<DropdownMenu.RadioGroup
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
|
||||
export default function IconBadgeBase() {
|
||||
return (
|
||||
<IconBadge size="base">
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
|
||||
export default function IconBadgeBlue() {
|
||||
return (
|
||||
<IconBadge color="blue">
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
|
||||
export default function IconBadgeDemo() {
|
||||
return (
|
||||
<IconBadge>
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
|
||||
export default function IconBadgeGreen() {
|
||||
return (
|
||||
<IconBadge color="green">
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
|
||||
export default function IconBadgeGrey() {
|
||||
return (
|
||||
<IconBadge color="grey">
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
|
||||
export default function IconBadgeLarge() {
|
||||
return (
|
||||
<IconBadge size="large">
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
|
||||
export default function IconBadgeOrange() {
|
||||
return (
|
||||
<IconBadge color="orange">
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
|
||||
export default function IconBadgePurple() {
|
||||
return (
|
||||
<IconBadge color="purple">
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { IconBadge } from "@medusajs/ui"
|
||||
|
||||
export default function IconBadgeRed() {
|
||||
return (
|
||||
<IconBadge color="red">
|
||||
<BuildingTax />
|
||||
</IconBadge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { IconButton } from "@medusajs/ui"
|
||||
|
||||
export default function IconButtonBase() {
|
||||
return (
|
||||
<IconButton size="base">
|
||||
<PlusMini />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { IconButton } from "@medusajs/ui"
|
||||
|
||||
export default function IconButtonDemo() {
|
||||
return (
|
||||
<IconButton>
|
||||
<PlusMini />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { IconButton } from "@medusajs/ui"
|
||||
|
||||
export default function IconButtonDisabled() {
|
||||
return (
|
||||
<IconButton disabled>
|
||||
<PlusMini />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { IconButton } from "@medusajs/ui"
|
||||
|
||||
export default function IconButtonLarge() {
|
||||
return (
|
||||
<IconButton size="large">
|
||||
<PlusMini />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { IconButton } from "@medusajs/ui"
|
||||
|
||||
export default function IconButtonLoading() {
|
||||
return (
|
||||
<IconButton isLoading>
|
||||
<PlusMini />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { IconButton } from "@medusajs/ui"
|
||||
|
||||
export default function IconButtonPrimary() {
|
||||
return (
|
||||
<IconButton variant="primary">
|
||||
<PlusMini />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { IconButton } from "@medusajs/ui"
|
||||
|
||||
export default function IconButtonTransparent() {
|
||||
return (
|
||||
<IconButton variant="transparent">
|
||||
<PlusMini />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { IconButton } from "@medusajs/ui"
|
||||
|
||||
export default function IconButtonXLarge() {
|
||||
return (
|
||||
<IconButton size="xlarge">
|
||||
<PlusMini />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { ProgressAccordion, Text } from "@medusajs/ui"
|
||||
|
||||
export default function ProgressAccordionDemo() {
|
||||
return (
|
||||
<div className="w-full px-4">
|
||||
<ProgressAccordion type="single">
|
||||
<ProgressAccordion.Item value="general">
|
||||
<ProgressAccordion.Header>General</ProgressAccordion.Header>
|
||||
<ProgressAccordion.Content>
|
||||
<div className="pb-6">
|
||||
<Text size="small">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
|
||||
ornare, tortor nec commodo ultrices, diam leo porttitor eros,
|
||||
eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
|
||||
lacinia ipsum id, varius velit.
|
||||
</Text>
|
||||
</div>
|
||||
</ProgressAccordion.Content>
|
||||
</ProgressAccordion.Item>
|
||||
<ProgressAccordion.Item value="shipping">
|
||||
<ProgressAccordion.Header>Shipping</ProgressAccordion.Header>
|
||||
<ProgressAccordion.Content>
|
||||
<div className="pb-6">
|
||||
<Text size="small">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
|
||||
ornare, tortor nec commodo ultrices, diam leo porttitor eros,
|
||||
eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
|
||||
lacinia ipsum id, varius velit.
|
||||
</Text>
|
||||
</div>
|
||||
</ProgressAccordion.Content>
|
||||
</ProgressAccordion.Item>
|
||||
</ProgressAccordion>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { ProgressAccordion, Text } from "@medusajs/ui"
|
||||
|
||||
export default function ProgressAccordionSingle() {
|
||||
return (
|
||||
<div className="w-full px-4">
|
||||
<ProgressAccordion type="multiple">
|
||||
<ProgressAccordion.Item value="general">
|
||||
<ProgressAccordion.Header>General</ProgressAccordion.Header>
|
||||
<ProgressAccordion.Content>
|
||||
<div className="pb-6">
|
||||
<Text size="small">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
|
||||
ornare, tortor nec commodo ultrices, diam leo porttitor eros,
|
||||
eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
|
||||
lacinia ipsum id, varius velit.
|
||||
</Text>
|
||||
</div>
|
||||
</ProgressAccordion.Content>
|
||||
</ProgressAccordion.Item>
|
||||
<ProgressAccordion.Item value="shipping">
|
||||
<ProgressAccordion.Header>Shipping</ProgressAccordion.Header>
|
||||
<ProgressAccordion.Content>
|
||||
<div className="pb-6">
|
||||
<Text size="small">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
|
||||
ornare, tortor nec commodo ultrices, diam leo porttitor eros,
|
||||
eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
|
||||
lacinia ipsum id, varius velit.
|
||||
</Text>
|
||||
</div>
|
||||
</ProgressAccordion.Content>
|
||||
</ProgressAccordion.Item>
|
||||
</ProgressAccordion>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { ProgressAccordion, Text } from "@medusajs/ui"
|
||||
|
||||
export default function ProgressAccordionSingle() {
|
||||
return (
|
||||
<div className="w-full px-4">
|
||||
<ProgressAccordion type="single">
|
||||
<ProgressAccordion.Item value="general">
|
||||
<ProgressAccordion.Header>General</ProgressAccordion.Header>
|
||||
<ProgressAccordion.Content>
|
||||
<div className="pb-6">
|
||||
<Text size="small">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
|
||||
ornare, tortor nec commodo ultrices, diam leo porttitor eros,
|
||||
eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
|
||||
lacinia ipsum id, varius velit.
|
||||
</Text>
|
||||
</div>
|
||||
</ProgressAccordion.Content>
|
||||
</ProgressAccordion.Item>
|
||||
<ProgressAccordion.Item value="shipping">
|
||||
<ProgressAccordion.Header>Shipping</ProgressAccordion.Header>
|
||||
<ProgressAccordion.Content>
|
||||
<div className="pb-6">
|
||||
<Text size="small">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
|
||||
ornare, tortor nec commodo ultrices, diam leo porttitor eros,
|
||||
eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
|
||||
lacinia ipsum id, varius velit.
|
||||
</Text>
|
||||
</div>
|
||||
</ProgressAccordion.Content>
|
||||
</ProgressAccordion.Item>
|
||||
</ProgressAccordion>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { ProgressTabs, Text } from "@medusajs/ui"
|
||||
|
||||
export default function ProgressTabsDemo() {
|
||||
return (
|
||||
<div className="w-full px-4">
|
||||
<ProgressTabs defaultValue="general">
|
||||
<div className="border-b border-ui-border-base">
|
||||
<ProgressTabs.List>
|
||||
<ProgressTabs.Trigger value="general">General</ProgressTabs.Trigger>
|
||||
<ProgressTabs.Trigger value="shipping">
|
||||
Shipping
|
||||
</ProgressTabs.Trigger>
|
||||
<ProgressTabs.Trigger value="payment">Payment</ProgressTabs.Trigger>
|
||||
</ProgressTabs.List>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<ProgressTabs.Content value="general">
|
||||
<Text size="small">
|
||||
At ACME, we're dedicated to providing you with an exceptional
|
||||
shopping experience. Our wide selection of products caters to your
|
||||
every need, from fashion to electronics and beyond. We take pride
|
||||
in our commitment to quality, customer satisfaction, and timely
|
||||
delivery. Our friendly customer support team is here to assist you
|
||||
with any inquiries or concerns you may have. Thank you for
|
||||
choosing ACME as your trusted online shopping destination.
|
||||
</Text>
|
||||
</ProgressTabs.Content>
|
||||
<ProgressTabs.Content value="shipping">
|
||||
<Text size="small">
|
||||
Shipping is a crucial part of our service, designed to ensure your
|
||||
products reach you quickly and securely. Our dedicated team works
|
||||
tirelessly to process orders, carefully package items, and
|
||||
coordinate with reliable carriers to deliver your purchases to
|
||||
your doorstep. We take pride in our efficient shipping process,
|
||||
guaranteeing your satisfaction with every delivery.
|
||||
</Text>
|
||||
</ProgressTabs.Content>
|
||||
<ProgressTabs.Content value="payment">
|
||||
<Text size="small">
|
||||
Our payment process is designed to make your shopping experience
|
||||
smooth and secure. We offer a variety of payment options to
|
||||
accommodate your preferences, from credit and debit cards to
|
||||
online payment gateways. Rest assured that your financial
|
||||
information is protected through advanced encryption methods.
|
||||
Shopping with us means you can shop with confidence, knowing your
|
||||
payments are safe and hassle-free.
|
||||
</Text>
|
||||
</ProgressTabs.Content>
|
||||
</div>
|
||||
</ProgressTabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { StatusBadge } from "@medusajs/ui"
|
||||
|
||||
export default function StatusBadgeBlue() {
|
||||
return <StatusBadge color="blue">Status</StatusBadge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { StatusBadge } from "@medusajs/ui"
|
||||
|
||||
export default function StatusBadgeDemo() {
|
||||
return <StatusBadge>Status</StatusBadge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { StatusBadge } from "@medusajs/ui"
|
||||
|
||||
export default function StatusBadgeGreen() {
|
||||
return <StatusBadge color="green">Status</StatusBadge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { StatusBadge } from "@medusajs/ui"
|
||||
|
||||
export default function StatusBadgeGrey() {
|
||||
return <StatusBadge color="grey">Status</StatusBadge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { StatusBadge } from "@medusajs/ui"
|
||||
|
||||
export default function StatusBadgeOrange() {
|
||||
return <StatusBadge color="orange">Status</StatusBadge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { StatusBadge } from "@medusajs/ui"
|
||||
|
||||
export default function StatusBadgePurple() {
|
||||
return <StatusBadge color="purple">Status</StatusBadge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { StatusBadge } from "@medusajs/ui"
|
||||
|
||||
export default function StatusBadgeRed() {
|
||||
return <StatusBadge color="red">Status</StatusBadge>
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Tabs, Text } from "@medusajs/ui"
|
||||
|
||||
export default function TabsDemo() {
|
||||
return (
|
||||
<div className="w-full px-4">
|
||||
<Tabs defaultValue="general">
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="general">General</Tabs.Trigger>
|
||||
<Tabs.Trigger value="shipping">Shipping</Tabs.Trigger>
|
||||
<Tabs.Trigger value="payment">Payment</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<div className="mt-2">
|
||||
<Tabs.Content value="general">
|
||||
<Text size="small">
|
||||
At ACME, we're dedicated to providing you with an exceptional
|
||||
shopping experience. Our wide selection of products caters to your
|
||||
every need, from fashion to electronics and beyond. We take pride
|
||||
in our commitment to quality, customer satisfaction, and timely
|
||||
delivery. Our friendly customer support team is here to assist you
|
||||
with any inquiries or concerns you may have. Thank you for
|
||||
choosing ACME as your trusted online shopping destination.
|
||||
</Text>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="shipping">
|
||||
<Text size="small">
|
||||
Shipping is a crucial part of our service, designed to ensure your
|
||||
products reach you quickly and securely. Our dedicated team works
|
||||
tirelessly to process orders, carefully package items, and
|
||||
coordinate with reliable carriers to deliver your purchases to
|
||||
your doorstep. We take pride in our efficient shipping process,
|
||||
guaranteeing your satisfaction with every delivery.
|
||||
</Text>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="payment">
|
||||
<Text size="small">
|
||||
Our payment process is designed to make your shopping experience
|
||||
smooth and secure. We offer a variety of payment options to
|
||||
accommodate your preferences, from credit and debit cards to
|
||||
online payment gateways. Rest assured that your financial
|
||||
information is protected through advanced encryption methods.
|
||||
Shopping with us means you can shop with confidence, knowing your
|
||||
payments are safe and hassle-free.
|
||||
</Text>
|
||||
</Tabs.Content>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { PropTable } from "@/components/props-table"
|
||||
import { PropDataMap } from "@/types/props"
|
||||
|
||||
const badgeProps: PropDataMap = [
|
||||
const iconBadgeProps: PropDataMap = [
|
||||
{
|
||||
prop: "color",
|
||||
type: {
|
||||
@@ -19,17 +19,17 @@ const badgeProps: PropDataMap = [
|
||||
defaultValue: "base",
|
||||
},
|
||||
{
|
||||
prop: "type",
|
||||
prop: "rounded",
|
||||
type: {
|
||||
type: "enum",
|
||||
values: ["default", "rounded", "icon"],
|
||||
values: ["base", "rounded"],
|
||||
},
|
||||
defaultValue: "default",
|
||||
defaultValue: "base",
|
||||
},
|
||||
]
|
||||
|
||||
const Props = () => {
|
||||
return <PropTable props={badgeProps} />
|
||||
return <PropTable props={iconBadgeProps} />
|
||||
}
|
||||
|
||||
export default Props
|
||||
|
||||
@@ -18,14 +18,6 @@ const buttonProps: PropDataMap = [
|
||||
},
|
||||
defaultValue: "base",
|
||||
},
|
||||
{
|
||||
prop: "format",
|
||||
type: {
|
||||
type: "enum",
|
||||
values: ["default", "icon"],
|
||||
},
|
||||
defaultValue: "default",
|
||||
},
|
||||
{
|
||||
prop: "isLoading",
|
||||
type: "boolean",
|
||||
|
||||
@@ -7,7 +7,8 @@ const codeBlockProps: PropDataMap = [
|
||||
type: {
|
||||
type: "object",
|
||||
name: "CodeSnippet[]",
|
||||
shape: "{\n label: string\n language: string\n code: string\n}[]",
|
||||
shape:
|
||||
"{\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n}[]",
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import { PropTable } from "@/components/props-table"
|
||||
import { PropDataMap } from "@/types/props"
|
||||
|
||||
const commandBarCommandProps: PropDataMap = [
|
||||
{
|
||||
prop: "action",
|
||||
type: "function",
|
||||
},
|
||||
{
|
||||
prop: "label",
|
||||
type: "string",
|
||||
},
|
||||
{
|
||||
prop: "shortcut",
|
||||
type: "string",
|
||||
},
|
||||
]
|
||||
|
||||
const Props = () => {
|
||||
return <PropTable props={commandBarCommandProps} />
|
||||
}
|
||||
|
||||
export default Props
|
||||
@@ -1,16 +1,16 @@
|
||||
import { PropTable } from "@/components/props-table"
|
||||
import { PropDataMap } from "@/types/props"
|
||||
|
||||
const codeBlockBodyProps: PropDataMap = [
|
||||
const commandBarProps: PropDataMap = [
|
||||
{
|
||||
prop: "hideLineNumbers",
|
||||
prop: "open",
|
||||
type: "boolean",
|
||||
defaultValue: false,
|
||||
},
|
||||
]
|
||||
|
||||
const Props = () => {
|
||||
return <PropTable props={codeBlockBodyProps} />
|
||||
return <PropTable props={commandBarProps} />
|
||||
}
|
||||
|
||||
export default Props
|
||||
@@ -0,0 +1,19 @@
|
||||
import { PropTable } from "@/components/props-table"
|
||||
import { PropDataMap } from "@/types/props"
|
||||
|
||||
const currencyInputProps: PropDataMap = [
|
||||
{
|
||||
prop: "symbol",
|
||||
type: "string",
|
||||
},
|
||||
{
|
||||
prop: "code",
|
||||
type: "string",
|
||||
},
|
||||
]
|
||||
|
||||
const Props = () => {
|
||||
return <PropTable props={currencyInputProps} />
|
||||
}
|
||||
|
||||
export default Props
|
||||
@@ -0,0 +1,27 @@
|
||||
import { PropTable } from "@/components/props-table"
|
||||
import { PropDataMap } from "@/types/props"
|
||||
|
||||
const badgeProps: PropDataMap = [
|
||||
{
|
||||
prop: "color",
|
||||
type: {
|
||||
type: "enum",
|
||||
values: ["green", "red", "blue", "orange", "grey", "purple"],
|
||||
},
|
||||
defaultValue: "grey",
|
||||
},
|
||||
{
|
||||
prop: "size",
|
||||
type: {
|
||||
type: "enum",
|
||||
values: ["base", "large"],
|
||||
},
|
||||
defaultValue: "base",
|
||||
},
|
||||
]
|
||||
|
||||
const Props = () => {
|
||||
return <PropTable props={badgeProps} />
|
||||
}
|
||||
|
||||
export default Props
|
||||
@@ -0,0 +1,32 @@
|
||||
import { PropTable } from "@/components/props-table"
|
||||
import { PropDataMap } from "@/types/props"
|
||||
|
||||
const iconButtonProps: PropDataMap = [
|
||||
{
|
||||
prop: "variant",
|
||||
type: {
|
||||
type: "enum",
|
||||
values: ["primary", "transparent"],
|
||||
},
|
||||
defaultValue: "primary",
|
||||
},
|
||||
{
|
||||
prop: "size",
|
||||
type: {
|
||||
type: "enum",
|
||||
values: ["base", "large", "xlarge"],
|
||||
},
|
||||
defaultValue: "base",
|
||||
},
|
||||
{
|
||||
prop: "isLoading",
|
||||
type: "boolean",
|
||||
defaultValue: false,
|
||||
},
|
||||
]
|
||||
|
||||
const Props = () => {
|
||||
return <PropTable props={iconButtonProps} />
|
||||
}
|
||||
|
||||
export default Props
|
||||
@@ -0,0 +1,19 @@
|
||||
import { PropTable } from "@/components/props-table"
|
||||
import { PropDataMap } from "@/types/props"
|
||||
|
||||
const progressAccordionHeaderProps: PropDataMap = [
|
||||
{
|
||||
prop: "status",
|
||||
type: {
|
||||
type: "enum",
|
||||
values: ["not-started", "in-progress", "completed"],
|
||||
},
|
||||
defaultValue: "not-started",
|
||||
},
|
||||
]
|
||||
|
||||
const Props = () => {
|
||||
return <PropTable props={progressAccordionHeaderProps} />
|
||||
}
|
||||
|
||||
export default Props
|
||||
@@ -0,0 +1,19 @@
|
||||
import { PropTable } from "@/components/props-table"
|
||||
import { PropDataMap } from "@/types/props"
|
||||
|
||||
const progressTabsTriggerProps: PropDataMap = [
|
||||
{
|
||||
prop: "status",
|
||||
type: {
|
||||
type: "enum",
|
||||
values: ["not-started", "in-progress", "completed"],
|
||||
},
|
||||
defaultValue: "not-started",
|
||||
},
|
||||
]
|
||||
|
||||
const Props = () => {
|
||||
return <PropTable props={progressTabsTriggerProps} />
|
||||
}
|
||||
|
||||
export default Props
|
||||
@@ -0,0 +1,19 @@
|
||||
import { PropTable } from "@/components/props-table"
|
||||
import { PropDataMap } from "@/types/props"
|
||||
|
||||
const statusBadgeProps: PropDataMap = [
|
||||
{
|
||||
prop: "color",
|
||||
type: {
|
||||
type: "enum",
|
||||
values: ["green", "red", "blue", "orange", "grey", "purple"],
|
||||
},
|
||||
defaultValue: "grey",
|
||||
},
|
||||
]
|
||||
|
||||
const Props = () => {
|
||||
return <PropTable props={statusBadgeProps} />
|
||||
}
|
||||
|
||||
export default Props
|
||||
@@ -57,15 +57,60 @@ export const ExampleRegistry: Record<string, ExampleType> = {
|
||||
component: React.lazy(async () => import("@/examples/badge-large")),
|
||||
file: "src/examples/badge-large.tsx",
|
||||
},
|
||||
"badge-rounded": {
|
||||
"badge-rounded-full": {
|
||||
name: "badge-rounded",
|
||||
component: React.lazy(async () => import("@/examples/badge-rounded")),
|
||||
file: "src/examples/badge-rounded.tsx",
|
||||
component: React.lazy(async () => import("@/examples/badge-rounded-full")),
|
||||
file: "src/examples/badge-rounded-full.tsx",
|
||||
},
|
||||
"badge-icon": {
|
||||
name: "badge-icon",
|
||||
component: React.lazy(async () => import("@/examples/badge-icon")),
|
||||
file: "src/examples/badge-icon.tsx",
|
||||
"badge-rounded-base": {
|
||||
name: "badge-rounded",
|
||||
component: React.lazy(async () => import("@/examples/badge-rounded-base")),
|
||||
file: "src/examples/badge-rounded-base.tsx",
|
||||
},
|
||||
"icon-badge-demo": {
|
||||
name: "icon-badge-demo",
|
||||
component: React.lazy(async () => import("@/examples/icon-badge-demo")),
|
||||
file: "src/examples/icon-badge-demo.tsx",
|
||||
},
|
||||
"icon-badge-blue": {
|
||||
name: "icon-badge-blue",
|
||||
component: React.lazy(async () => import("@/examples/icon-badge-blue")),
|
||||
file: "src/examples/icon-badge-blue.tsx",
|
||||
},
|
||||
"icon-badge-green": {
|
||||
name: "icon-badge-green",
|
||||
component: React.lazy(async () => import("@/examples/icon-badge-green")),
|
||||
file: "src/examples/icon-badge-green.tsx",
|
||||
},
|
||||
"icon-badge-red": {
|
||||
name: "icon-badge-red",
|
||||
component: React.lazy(async () => import("@/examples/icon-badge-red")),
|
||||
file: "src/examples/icon-badge-red.tsx",
|
||||
},
|
||||
"icon-badge-orange": {
|
||||
name: "icon-badge-orange",
|
||||
component: React.lazy(async () => import("@/examples/icon-badge-orange")),
|
||||
file: "src/examples/icon-badge-orange.tsx",
|
||||
},
|
||||
"icon-badge-purple": {
|
||||
name: "icon-badge-purple",
|
||||
component: React.lazy(async () => import("@/examples/icon-badge-purple")),
|
||||
file: "src/examples/icon-badge-purple.tsx",
|
||||
},
|
||||
"icon-badge-grey": {
|
||||
name: "icon-badge-grey",
|
||||
component: React.lazy(async () => import("@/examples/icon-badge-grey")),
|
||||
file: "src/examples/icon-badge-grey.tsx",
|
||||
},
|
||||
"icon-badge-base": {
|
||||
name: "icon-badge-base",
|
||||
component: React.lazy(async () => import("@/examples/icon-badge-base")),
|
||||
file: "src/examples/icon-badge-base.tsx",
|
||||
},
|
||||
"icon-badge-large": {
|
||||
name: "icon-badge-small",
|
||||
component: React.lazy(async () => import("@/examples/icon-badge-large")),
|
||||
file: "src/examples/icon-badge-large.tsx",
|
||||
},
|
||||
"button-demo": {
|
||||
name: "button-demo",
|
||||
@@ -370,10 +415,137 @@ export const ExampleRegistry: Record<string, ExampleType> = {
|
||||
component: React.lazy(async () => import("@/examples/button-with-icon")),
|
||||
file: "src/examples/button-with-icon.tsx",
|
||||
},
|
||||
"button-icon-only": {
|
||||
name: "button-icon-only",
|
||||
component: React.lazy(async () => import("@/examples/button-icon-only")),
|
||||
file: "src/examples/button-icon-only.tsx",
|
||||
"icon-button-demo": {
|
||||
name: "icon-button-demo",
|
||||
component: React.lazy(async () => import("@/examples/icon-button-demo")),
|
||||
file: "src/examples/icon-button-demo.tsx",
|
||||
},
|
||||
"icon-button-primary": {
|
||||
name: "icon-button-primary",
|
||||
component: React.lazy(async () => import("@/examples/icon-button-primary")),
|
||||
file: "src/examples/icon-button-primary.tsx",
|
||||
},
|
||||
"icon-button-transparent": {
|
||||
name: "icon-button-transparent",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/icon-button-transparent")
|
||||
),
|
||||
file: "src/examples/icon-button-transparent.tsx",
|
||||
},
|
||||
"icon-button-disabled": {
|
||||
name: "icon-button-disabled",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/icon-button-disabled")
|
||||
),
|
||||
file: "src/examples/icon-button-disabled.tsx",
|
||||
},
|
||||
"icon-button-loading": {
|
||||
name: "icon-button-with-text",
|
||||
component: React.lazy(async () => import("@/examples/icon-button-loading")),
|
||||
file: "src/examples/icon-button-loading.tsx",
|
||||
},
|
||||
"icon-button-base": {
|
||||
name: "icon-button-base",
|
||||
component: React.lazy(async () => import("@/examples/icon-button-base")),
|
||||
file: "src/examples/icon-button-base.tsx",
|
||||
},
|
||||
"icon-button-large": {
|
||||
name: "icon-button-large",
|
||||
component: React.lazy(async () => import("@/examples/icon-button-large")),
|
||||
file: "src/examples/icon-button-large.tsx",
|
||||
},
|
||||
"icon-button-xlarge": {
|
||||
name: "icon-button-xlarge",
|
||||
component: React.lazy(async () => import("@/examples/icon-button-xlarge")),
|
||||
file: "src/examples/icon-button-xlarge.tsx",
|
||||
},
|
||||
"currency-input-demo": {
|
||||
name: "currency-input-demo",
|
||||
component: React.lazy(async () => import("@/examples/currency-input-demo")),
|
||||
file: "src/examples/currency-input-demo.tsx",
|
||||
},
|
||||
"currency-input-small": {
|
||||
name: "currency-input-small",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/currency-input-small")
|
||||
),
|
||||
file: "src/examples/currency-input-small.tsx",
|
||||
},
|
||||
"status-badge-demo": {
|
||||
name: "status-badge-demo",
|
||||
component: React.lazy(async () => import("@/examples/status-badge-demo")),
|
||||
file: "src/examples/status-badge-demo.tsx",
|
||||
},
|
||||
"status-badge-blue": {
|
||||
name: "status-badge-blue",
|
||||
component: React.lazy(async () => import("@/examples/status-badge-blue")),
|
||||
file: "src/examples/status-badge-blue.tsx",
|
||||
},
|
||||
"status-badge-green": {
|
||||
name: "status-badge-green",
|
||||
component: React.lazy(async () => import("@/examples/status-badge-green")),
|
||||
file: "src/examples/status-badge-green.tsx",
|
||||
},
|
||||
"status-badge-red": {
|
||||
name: "status-badge-red",
|
||||
component: React.lazy(async () => import("@/examples/status-badge-red")),
|
||||
file: "src/examples/status-badge-red.tsx",
|
||||
},
|
||||
"status-badge-orange": {
|
||||
name: "status-badge-orange",
|
||||
component: React.lazy(async () => import("@/examples/status-badge-orange")),
|
||||
file: "src/examples/status-badge-orange.tsx",
|
||||
},
|
||||
"status-badge-purple": {
|
||||
name: "status-badge-purple",
|
||||
component: React.lazy(async () => import("@/examples/status-badge-purple")),
|
||||
file: "src/examples/status-badge-purple.tsx",
|
||||
},
|
||||
"status-badge-grey": {
|
||||
name: "status-badge-grey",
|
||||
component: React.lazy(async () => import("@/examples/status-badge-grey")),
|
||||
file: "src/examples/status-badge-grey.tsx",
|
||||
},
|
||||
"command-bar-demo": {
|
||||
name: "command-bar-demo",
|
||||
component: React.lazy(async () => import("@/examples/command-bar-demo")),
|
||||
file: "src/examples/command-bar-demo.tsx",
|
||||
},
|
||||
"progress-accordion-demo": {
|
||||
name: "progress-accordion-demo",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/progress-accordion-demo")
|
||||
),
|
||||
file: "src/examples/progress-accordion-demo.tsx",
|
||||
},
|
||||
"progress-accordion-single": {
|
||||
name: "progress-accordion-single",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/progress-accordion-single")
|
||||
),
|
||||
file: "src/examples/progress-accordion-single.tsx",
|
||||
},
|
||||
"progress-accordion-multiple": {
|
||||
name: "progress-accordion-multiple",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/progress-accordion-multiple")
|
||||
),
|
||||
file: "src/examples/progress-accordion-multiple.tsx",
|
||||
},
|
||||
"progress-tabs-demo": {
|
||||
name: "progress-tabs-demo",
|
||||
component: React.lazy(async () => import("@/examples/progress-tabs-demo")),
|
||||
file: "src/examples/progress-tabs-demo.tsx",
|
||||
},
|
||||
"tabs-demo": {
|
||||
name: "tabs-demo",
|
||||
component: React.lazy(async () => import("@/examples/tabs-demo")),
|
||||
file: "src/examples/tabs-demo.tsx",
|
||||
},
|
||||
"currency-input-base": {
|
||||
name: "currency-input-base",
|
||||
component: React.lazy(async () => import("@/examples/currency-input-base")),
|
||||
file: "src/examples/currency-input-base.tsx",
|
||||
},
|
||||
"button-loading": {
|
||||
name: "button-loading",
|
||||
|
||||
@@ -20,15 +20,30 @@ export const PropRegistry: Record<string, PropRegistryItem> = {
|
||||
"code-block-header": {
|
||||
table: React.lazy(async () => import("../props/code-block-header")),
|
||||
},
|
||||
"code-block-body": {
|
||||
table: React.lazy(async () => import("../props/code-block-body")),
|
||||
"currency-input": {
|
||||
table: React.lazy(async () => import("../props/currency-input")),
|
||||
},
|
||||
copy: {
|
||||
table: React.lazy(async () => import("../props/copy")),
|
||||
},
|
||||
"command-bar": {
|
||||
table: React.lazy(async () => import("../props/command-bar")),
|
||||
},
|
||||
"command-bar-command": {
|
||||
table: React.lazy(async () => import("../props/command-bar-command")),
|
||||
},
|
||||
"date-picker": {
|
||||
table: React.lazy(async () => import("../props/date-picker")),
|
||||
},
|
||||
"icon-badge": {
|
||||
table: React.lazy(async () => import("../props/icon-badge")),
|
||||
},
|
||||
"icon-button": {
|
||||
table: React.lazy(async () => import("../props/icon-button")),
|
||||
},
|
||||
"status-badge": {
|
||||
table: React.lazy(async () => import("../props/status-badge")),
|
||||
},
|
||||
"focus-modal": {
|
||||
table: React.lazy(async () => import("../props/focus-modal")),
|
||||
},
|
||||
@@ -68,4 +83,10 @@ export const PropRegistry: Record<string, PropRegistryItem> = {
|
||||
tooltip: {
|
||||
table: React.lazy(async () => import("../props/tooltip")),
|
||||
},
|
||||
"progress-accordion-header": {
|
||||
table: React.lazy(async () => import("../props/progress-accordion-header")),
|
||||
},
|
||||
"progress-tabs-trigger": {
|
||||
table: React.lazy(async () => import("../props/progress-tabs-trigger")),
|
||||
},
|
||||
}
|
||||
|
||||
@@ -56,8 +56,8 @@
|
||||
"react-dom": ">=17"
|
||||
},
|
||||
"dependencies": {
|
||||
"@medusajs/icons": "^1.0.0",
|
||||
"@medusajs/ui": "^1.0.0",
|
||||
"@medusajs/icons": "latest",
|
||||
"@medusajs/ui": "latest",
|
||||
"@octokit/request": "^8.1.1",
|
||||
"@segment/analytics-next": "^1.55.0",
|
||||
"algoliasearch": "^4.20.0",
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
"postcss.config.js"
|
||||
],
|
||||
"dependencies": {
|
||||
"@medusajs/ui-preset": "^1.0.0",
|
||||
"@medusajs/ui-preset": "latest",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
+111
-45
@@ -1733,7 +1733,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
|
||||
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
|
||||
version: 7.22.15
|
||||
resolution: "@babel/runtime@npm:7.22.15"
|
||||
dependencies:
|
||||
@@ -3266,7 +3266,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@medusajs/icons@npm:*, @medusajs/icons@npm:^1.0.0, @medusajs/icons@npm:latest":
|
||||
"@medusajs/icons@npm:*, @medusajs/icons@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "@medusajs/icons@npm:1.0.0"
|
||||
peerDependencies:
|
||||
@@ -3275,23 +3275,33 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@medusajs/ui-preset@npm:^1.0.0, @medusajs/ui-preset@npm:latest":
|
||||
version: 1.0.0
|
||||
resolution: "@medusajs/ui-preset@npm:1.0.0"
|
||||
"@medusajs/icons@npm:latest":
|
||||
version: 1.0.1
|
||||
resolution: "@medusajs/icons@npm:1.0.1"
|
||||
peerDependencies:
|
||||
react: ^16.x || ^17.x || ^18.x
|
||||
checksum: 7b800035c4553a336f03c0e2ba454c83fc1701badef0629b9b9a5745a26b0ac75ad0bcbd2b674fb294fe3fca47ee8f74760a26ffe84a094409703eca25f24b12
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@medusajs/ui-preset@npm:latest":
|
||||
version: 1.0.1
|
||||
resolution: "@medusajs/ui-preset@npm:1.0.1"
|
||||
dependencies:
|
||||
"@tailwindcss/forms": ^0.5.3
|
||||
tailwindcss-animate: ^1.0.6
|
||||
peerDependencies:
|
||||
tailwindcss: ">=3.0.0"
|
||||
checksum: 4365d5e4a726250aa5299df8ce9e1ffdc9f864586b506d8552ad1561ac2a2d66d8692dd761702728904d7af884aae9d85de9dcfe94413161264821a8c7648223
|
||||
checksum: 80c4cb6ba5b3bd70c95cf0dad16f05a33636b7640b95aca96871bb4e1fcb9957c9254fe69ca16e19109a83da5cd2eb29afa6cc5798209117e6970934a20ce96a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@medusajs/ui@npm:^1.0.0, @medusajs/ui@npm:latest":
|
||||
version: 1.0.0
|
||||
resolution: "@medusajs/ui@npm:1.0.0"
|
||||
"@medusajs/ui@npm:latest":
|
||||
version: 2.0.0
|
||||
resolution: "@medusajs/ui@npm:2.0.0"
|
||||
dependencies:
|
||||
"@medusajs/icons": "*"
|
||||
"@radix-ui/react-accordion": ^1.1.2
|
||||
"@radix-ui/react-alert-dialog": ^1.0.4
|
||||
"@radix-ui/react-avatar": ^1.0.3
|
||||
"@radix-ui/react-checkbox": ^1.0.4
|
||||
@@ -3299,11 +3309,13 @@ __metadata:
|
||||
"@radix-ui/react-dropdown-menu": ^2.0.5
|
||||
"@radix-ui/react-label": ^2.0.2
|
||||
"@radix-ui/react-popover": ^1.0.6
|
||||
"@radix-ui/react-portal": ^1.0.3
|
||||
"@radix-ui/react-radio-group": ^1.1.3
|
||||
"@radix-ui/react-scroll-area": ^1.0.4
|
||||
"@radix-ui/react-select": ^1.2.2
|
||||
"@radix-ui/react-slot": ^1.0.2
|
||||
"@radix-ui/react-switch": ^1.0.3
|
||||
"@radix-ui/react-tabs": ^1.0.4
|
||||
"@radix-ui/react-toast": ^1.1.4
|
||||
"@radix-ui/react-tooltip": ^1.0.6
|
||||
"@react-aria/datepicker": ^3.5.0
|
||||
@@ -3312,15 +3324,14 @@ __metadata:
|
||||
clsx: ^1.2.1
|
||||
copy-to-clipboard: ^3.3.3
|
||||
date-fns: ^2.30.0
|
||||
downshift: ^8.1.0
|
||||
lodash: ^4.17.21
|
||||
prism-react-renderer: ^2.0.6
|
||||
react-currency-input-field: ^3.6.11
|
||||
react-day-picker: ^8.8.0
|
||||
tailwind-merge: ^1.13.2
|
||||
peerDependencies:
|
||||
react: ^18.0.0
|
||||
react-dom: ^18.0.0
|
||||
checksum: 6b957037cda3cc10ed7dad3491440c4fda38289f4b64b7cc275aea8c96e9ede80ee78417d597fd93a1f0db9abdc7ac0e1f1f2e820c4b71538fa4640b78891171
|
||||
checksum: 1243cb33cc12fe4aaa840a89be06d5db4f01d95f9ba0de44ea7bdd1621835f080a2e67fd572e55bce5751941ba3fcdb287139df6427560efc2c5b3f4d5ec9d57
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -4002,6 +4013,34 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-accordion@npm:^1.1.2":
|
||||
version: 1.1.2
|
||||
resolution: "@radix-ui/react-accordion@npm:1.1.2"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@radix-ui/primitive": 1.0.1
|
||||
"@radix-ui/react-collapsible": 1.0.3
|
||||
"@radix-ui/react-collection": 1.0.3
|
||||
"@radix-ui/react-compose-refs": 1.0.1
|
||||
"@radix-ui/react-context": 1.0.1
|
||||
"@radix-ui/react-direction": 1.0.1
|
||||
"@radix-ui/react-id": 1.0.1
|
||||
"@radix-ui/react-primitive": 1.0.3
|
||||
"@radix-ui/react-use-controllable-state": 1.0.1
|
||||
peerDependencies:
|
||||
"@types/react": "*"
|
||||
"@types/react-dom": "*"
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||
peerDependenciesMeta:
|
||||
"@types/react":
|
||||
optional: true
|
||||
"@types/react-dom":
|
||||
optional: true
|
||||
checksum: 54fe3642306d62f68ac4d534c6bec1998d00d441663b16119fe267cb085e48761acf3c02b9466245d42b8ab419632a573d35d79d3a5d328906bde121dd1816db
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-alert-dialog@npm:^1.0.4":
|
||||
version: 1.0.4
|
||||
resolution: "@radix-ui/react-alert-dialog@npm:1.0.4"
|
||||
@@ -4097,6 +4136,33 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-collapsible@npm:1.0.3":
|
||||
version: 1.0.3
|
||||
resolution: "@radix-ui/react-collapsible@npm:1.0.3"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@radix-ui/primitive": 1.0.1
|
||||
"@radix-ui/react-compose-refs": 1.0.1
|
||||
"@radix-ui/react-context": 1.0.1
|
||||
"@radix-ui/react-id": 1.0.1
|
||||
"@radix-ui/react-presence": 1.0.1
|
||||
"@radix-ui/react-primitive": 1.0.3
|
||||
"@radix-ui/react-use-controllable-state": 1.0.1
|
||||
"@radix-ui/react-use-layout-effect": 1.0.1
|
||||
peerDependencies:
|
||||
"@types/react": "*"
|
||||
"@types/react-dom": "*"
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||
peerDependenciesMeta:
|
||||
"@types/react":
|
||||
optional: true
|
||||
"@types/react-dom":
|
||||
optional: true
|
||||
checksum: 7bc3e601e3fa84991bdf46ea1bdb725760942f8facadf42f05808abc7a1399c6ab90a00c70699367026afbd8afba0254ff9634f9d1e05b24ae452d9e0524d328
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-collection@npm:1.0.3":
|
||||
version: 1.0.3
|
||||
resolution: "@radix-ui/react-collection@npm:1.0.3"
|
||||
@@ -4441,6 +4507,26 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-portal@npm:^1.0.3":
|
||||
version: 1.0.4
|
||||
resolution: "@radix-ui/react-portal@npm:1.0.4"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@radix-ui/react-primitive": 1.0.3
|
||||
peerDependencies:
|
||||
"@types/react": "*"
|
||||
"@types/react-dom": "*"
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||
peerDependenciesMeta:
|
||||
"@types/react":
|
||||
optional: true
|
||||
"@types/react-dom":
|
||||
optional: true
|
||||
checksum: fed32f8148b833fe852fb5e2f859979ffdf2fb9a9ef46583b9b52915d764ad36ba5c958a64e61d23395628ccc09d678229ee94cd112941e8fe2575021f820c29
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@radix-ui/react-presence@npm:1.0.1":
|
||||
version: 1.0.1
|
||||
resolution: "@radix-ui/react-presence@npm:1.0.1"
|
||||
@@ -9262,13 +9348,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"compute-scroll-into-view@npm:^3.0.3":
|
||||
version: 3.0.3
|
||||
resolution: "compute-scroll-into-view@npm:3.0.3"
|
||||
checksum: 43feebe676552ea061308a17d25b7dea498255b6777368bf950adf6cb504b7b4f6eca3a8c989564527b8bcdaafab93f346760d15f73a6536cd0467286873355c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"concat-map@npm:0.0.1":
|
||||
version: 0.0.1
|
||||
resolution: "concat-map@npm:0.0.1"
|
||||
@@ -10099,8 +10178,8 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "docs-ui@workspace:packages/docs-ui"
|
||||
dependencies:
|
||||
"@medusajs/icons": ^1.0.0
|
||||
"@medusajs/ui": ^1.0.0
|
||||
"@medusajs/icons": latest
|
||||
"@medusajs/ui": latest
|
||||
"@octokit/request": ^8.1.1
|
||||
"@segment/analytics-next": ^1.55.0
|
||||
"@types/react": ^17.0.1
|
||||
@@ -10328,21 +10407,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"downshift@npm:^8.1.0":
|
||||
version: 8.2.0
|
||||
resolution: "downshift@npm:8.2.0"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.22.15
|
||||
compute-scroll-into-view: ^3.0.3
|
||||
prop-types: ^15.8.1
|
||||
react-is: ^18.2.0
|
||||
tslib: ^2.6.2
|
||||
peerDependencies:
|
||||
react: ">=16.12.0"
|
||||
checksum: 61abd17c68908b3ee5dcf889141776d806fd056f3cccbdd9f261acced9b010550acf1b10572facf58ffc1750e61e0164a7e7f1b2a081bd160b0bff58ea450a7c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"dset@npm:^3.1.1, dset@npm:^3.1.2":
|
||||
version: 3.1.2
|
||||
resolution: "dset@npm:3.1.2"
|
||||
@@ -17239,6 +17303,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-currency-input-field@npm:^3.6.11":
|
||||
version: 3.6.11
|
||||
resolution: "react-currency-input-field@npm:3.6.11"
|
||||
peerDependencies:
|
||||
react: ^16.9.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: d1a15dc14f572806917e452c77a2b69d00647676be578304624c98fe66e557a9f397a3ece72b997b2a8db827db236a5801f26b86605ef334398175c856e46d50
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-day-picker@npm:^8.8.0":
|
||||
version: 8.8.2
|
||||
resolution: "react-day-picker@npm:8.8.2"
|
||||
@@ -17382,13 +17455,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-is@npm:^18.2.0":
|
||||
version: 18.2.0
|
||||
resolution: "react-is@npm:18.2.0"
|
||||
checksum: 6eb5e4b28028c23e2bfcf73371e72cd4162e4ac7ab445ddae2afe24e347a37d6dc22fae6e1748632cd43c6d4f9b8f86dcf26bf9275e1874f436d129952528ae0
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-json-view@npm:^1.21.3":
|
||||
version: 1.21.3
|
||||
resolution: "react-json-view@npm:1.21.3"
|
||||
@@ -19149,7 +19215,7 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "tailwind@workspace:packages/tailwind"
|
||||
dependencies:
|
||||
"@medusajs/ui-preset": ^1.0.0
|
||||
"@medusajs/ui-preset": latest
|
||||
eslint-config-docs: "*"
|
||||
tailwindcss-animate: ^1.0.7
|
||||
peerDependencies:
|
||||
@@ -19559,7 +19625,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1, tslib@npm:^2.6.2":
|
||||
"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1":
|
||||
version: 2.6.2
|
||||
resolution: "tslib@npm:2.6.2"
|
||||
checksum: e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb
|
||||
|
||||
Reference in New Issue
Block a user