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

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>
This commit is contained in:
github-actions[bot]
2024-10-24 09:38:58 +00:00
committed by GitHub
parent 432af1e2d1
commit e196ad7659
99 changed files with 2962 additions and 2581 deletions
+1 -1
View File
@@ -15,7 +15,7 @@
"dependencies": {
"@mdx-js/loader": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@medusajs/icons": "preview",
"@medusajs/icons": "^2.0.0",
"@medusajs/ui": "^3.0.0",
"@next/mdx": "14.2.14",
"@react-hook/resize-observer": "^2.0.2",
+1 -1
View File
@@ -16,7 +16,7 @@
"dependencies": {
"@mdx-js/loader": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@medusajs/icons": "rc",
"@medusajs/icons": "^2.0.0",
"@next/mdx": "^14.2.14",
"clsx": "^2.1.0",
"docs-ui": "*",
+1 -1
View File
@@ -15,7 +15,7 @@
"dependencies": {
"@mdx-js/loader": "^3.0.1",
"@mdx-js/react": "^3.0.1",
"@medusajs/icons": "preview",
"@medusajs/icons": "^2.0.0",
"@next/mdx": "^14.2.14",
"clsx": "^2.1.0",
"docs-ui": "*",
+2 -2
View File
@@ -14,8 +14,8 @@
},
"dependencies": {
"@faker-js/faker": "^8.0.2",
"@medusajs/icons": "^1.2.0",
"@medusajs/ui": "^3.0.0",
"@medusajs/icons": "^2.0.0",
"@medusajs/ui": "^4.0.0",
"@medusajs/ui-preset": "^1.1.3",
"@radix-ui/react-dialog": "1.0.4",
"@radix-ui/react-scroll-area": "^1.0.4",
+5 -5
View File
@@ -1,9 +1,9 @@
"use client"
import { Copy, clx } from "@medusajs/ui"
import React from "react"
import { useColorMode } from "docs-ui"
import { CopyButton, useColorMode } from "docs-ui"
import { colors as allColors } from "../config/colors"
import { clx } from "@medusajs/ui"
type Color = {
name: string
@@ -154,12 +154,12 @@ const Colors = () => {
<hr className="mb-4" />
<div className="xs:grid-cols-2 mb-8 grid grid-cols-1 gap-4 gap-y-10 sm:grid-cols-3 ">
{colors.map((colour) => (
<Copy
content={cssVarToTailwindClass(colour.name)}
<CopyButton
text={cssVarToTailwindClass(colour.name)}
key={`colours-section-${section}-${colour.name}`}
>
<ColorBlock colour={colour} />
</Copy>
</CopyButton>
))}
</div>
</div>
+5 -8
View File
@@ -1,9 +1,8 @@
import { InformationCircleSolid } from "@medusajs/icons"
import { Tooltip } from "@medusajs/ui"
import { HookData, HookDataMap } from "@/types/hooks"
import { EnumType, FunctionType, ObjectType } from "@/types/props"
import { InlineCode, Table } from "docs-ui"
import { InlineCode, Table, Tooltip } from "docs-ui"
const HookTable = ({ props }: { props: HookDataMap }) => {
return (
@@ -66,9 +65,8 @@ const Row = ({ value, type, description }: HookData) => {
)}
{isObject(type) && (
<Tooltip
content={<pre>{type.shape}</pre>}
className="font-mono"
maxWidth={500}
tooltipChildren={<pre>{type.shape}</pre>}
className="font-mono max-w-[500px]"
>
<div className="flex items-center gap-x-1">
<span>{type.name}</span>
@@ -78,9 +76,8 @@ const Row = ({ value, type, description }: HookData) => {
)}
{isFunction(type) && (
<Tooltip
content={<pre>{type.signature}</pre>}
className="font-mono"
maxWidth={500}
tooltipChildren={<pre>{type.signature}</pre>}
className="font-mono max-w-[500px]"
>
<div className="flex items-center gap-x-1">
<span>function</span>
+3 -4
View File
@@ -1,11 +1,10 @@
"use client"
import { InformationCircleSolid } from "@medusajs/icons"
import { Tooltip } from "@medusajs/ui"
import { PropData, PropDataMap, PropSpecType } from "@/types/props"
import { useCallback, useMemo } from "react"
import { InlineCode, MarkdownContent, Table } from "docs-ui"
import { InlineCode, MarkdownContent, Table, Tooltip } from "docs-ui"
type PropTableProps = {
props: PropDataMap
@@ -133,7 +132,7 @@ const Row = ({
<InlineCode>{propName}</InlineCode>
{description && (
<Tooltip
content={
tooltipChildren={
<MarkdownContent
allowedElements={["a", "code"]}
unwrapDisallowed={true}
@@ -154,7 +153,7 @@ const Row = ({
{index > 0 && <span>|</span>}
{typeNode.tooltipContent && (
<Tooltip
content={<pre>{typeNode.tooltipContent}</pre>}
tooltipChildren={<pre>{typeNode.tooltipContent}</pre>}
className="font-mono !max-w-none"
>
<div className="flex items-center gap-x-1">
-7
View File
@@ -36,13 +36,6 @@ export const docsConfig: DocsConfig = {
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Upgrade Guides",
path: `${process.env.NEXT_PUBLIC_DOCS_URL}/upgrade-guides/medusa-ui`,
isPathHref: true,
loaded: true,
},
],
},
{
@@ -23,21 +23,3 @@ import { Calendar } from "@medusajs/ui"
---
<ComponentReference mainComponent="Calendar" />
## Examples
---
### Single Date
<ComponentExample name="calendar-single" />
### Range
<ComponentExample name="calendar-range" />
### Changing Locale
Changing the locale requires installing the [date-fns library](https://date-fns.org/docs/Getting-Started#npm).
<ComponentExample name="calendar-locale" />
@@ -41,6 +41,29 @@ import { CodeBlock } from "@medusajs/ui"
"CodeBlock.Body"
]} />
## Usage Outside Medusa Admin
---
If you're using the `CodeBlock` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree, as the `CodeBlock.Header` component uses a [Tooltip](/components/tooltip#usage-outside-medusa-admin):
```tsx
<TooltipProvider>
<CodeBlock
snippets={[
{
language: "tsx",
label: "Label",
code: "import { useProduct } from \"medusa-react\"",
},
]}
>
<CodeBlock.Header />
<CodeBlock.Body />
</CodeBlock>
</TooltipProvider>
```
## Examples
---
@@ -24,4 +24,22 @@ import { Command } from "@medusajs/ui"
---
<ComponentReference mainComponent="Command" />
<ComponentReference mainComponent="Command" />
## Usage Outside Medusa Admin
---
If you're using the `Command` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree, as the `Command.Copy` component uses a [Tooltip](/components/tooltip#usage-outside-medusa-admin):
```tsx
<TooltipProvider>
<Command>
<code>yarn add @medusajs/ui</code>
<Command.Copy
content="yarn add @medusajs/ui"
className="ml-auto"
/>
</Command>
</TooltipProvider>
```
@@ -24,6 +24,18 @@ import { Copy } from "@medusajs/ui"
<ComponentReference mainComponent="Copy" />
## Usage Outside Medusa Admin
---
If you're using the `Copy` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree, as the `Copy` component uses a [Tooltip](/components/tooltip#usage-outside-medusa-admin):
```tsx
<TooltipProvider>
<Copy content="yarn add @medusajs/ui" />
</TooltipProvider>
```
## Examples
---
@@ -23,46 +23,3 @@ import { DatePicker } from "@medusajs/ui"
---
<ComponentReference mainComponent="DatePicker" />
## Examples
---
### Single
<ComponentExample name="date-picker-single" />
### Single with time
<ComponentExample name="date-picker-single-time" />
### Single with presets
<ComponentExample name="date-picker-single-presets" />
### Single with presets and time
<ComponentExample name="date-picker-single-presets-time" />
### Range
<ComponentExample name="date-picker-range" />
### Range with time
<ComponentExample name="date-picker-range-time" />
### Range with presets
<ComponentExample name="date-picker-range-presets" />
### Range with presets and time
<ComponentExample name="date-picker-range-presets-time" />
### Changing the Locale
Changing the locale requires installing the [date-fns library](https://date-fns.org/docs/Getting-Started#npm).
<ComponentExample name="date-picker-locale" />
@@ -9,7 +9,7 @@ component: true
## Usage
```tsx
import { Tooltip } from "@medusajs/ui"
import { Tooltip, TooltipProvider } from "@medusajs/ui"
```
@@ -22,4 +22,22 @@ import { Tooltip } from "@medusajs/ui"
---
<ComponentReference mainComponent="Tooltip" />
<ComponentReference mainComponent="Tooltip" />
## Usage Outside Medusa Admin
---
If you're using the `Tooltip` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree:
```tsx
<TooltipProvider>
<Tooltip content="Tooltip content">Trigger</Tooltip>
</TooltipProvider>
```
### TooltipProvider Reference
---
<ComponentReference mainComponent="TooltipProvider" />
@@ -3,13 +3,6 @@ title: "Icons"
description: "React components for Medusa UI icons."
---
## Overview
---
Below is a list of all the icons available in the Medusa UI design system.
<IconSearch />
## Installation
---
@@ -32,6 +25,14 @@ export default function Component() {
<Feedback title={"Icons"} />
## Overview
---
Below is a list of all the icons available in the Medusa UI design system.
<IconSearch />
## Icon Props
---
+2 -2
View File
@@ -2,7 +2,7 @@ import { Calendar } from "@medusajs/ui"
import * as React from "react"
export default function CalendarDemo() {
const [date, setDate] = React.useState<Date | undefined>()
const [date, setDate] = React.useState<Date | null>()
return <Calendar selected={date} onSelect={setDate} />
return <Calendar value={date} onChange={setDate} />
}
@@ -1,9 +0,0 @@
import { Calendar } from "@medusajs/ui"
import * as React from "react"
import { es } from "date-fns/locale"
export default function CalendarDemo() {
const [date, setDate] = React.useState<Date | undefined>()
return <Calendar selected={date} onSelect={setDate} locale={es} />
}
@@ -1,13 +0,0 @@
import { Calendar } from "@medusajs/ui"
import * as React from "react"
import type { DateRange } from "react-day-picker"
export default function CalendarRange() {
const [dates, setDates] = React.useState<DateRange | undefined>()
const setDateRange = (range: DateRange | undefined) => {
setDates(range)
}
return <Calendar selected={dates} onSelect={setDateRange} mode="range" />
}
@@ -1,8 +0,0 @@
import { Calendar } from "@medusajs/ui"
import * as React from "react"
export default function CalendarSingle() {
const [date, setDate] = React.useState<Date | undefined>()
return <Calendar selected={date} onSelect={setDate} />
}
@@ -3,7 +3,7 @@ import { DatePicker } from "@medusajs/ui"
export default function DatePickerDemo() {
return (
<div className="w-[250px]">
<DatePicker placeholder="Pick a date" />
<DatePicker />
</div>
)
}
@@ -1,10 +0,0 @@
import { DatePicker } from "@medusajs/ui"
import { es } from "date-fns/locale"
export default function DatePickerDemo() {
return (
<div className="w-[250px]">
<DatePicker locale={es} placeholder="Elija una fecha" />
</div>
)
}
@@ -1,52 +0,0 @@
import { DatePicker } from "@medusajs/ui"
export default function DatePickerRangePresetsTime() {
return (
<div className="w-[250px]">
<DatePicker
placeholder="Pick a date"
showTimePicker
mode="range"
presets={[
{
dateRange: {
to: new Date(),
from: new Date(),
},
label: "Today",
},
{
label: "Past 7 days",
dateRange: {
to: new Date(),
from: new Date(new Date().setDate(new Date().getDate() - 7)),
},
},
{
label: "Past 30 days",
dateRange: {
to: new Date(),
from: new Date(new Date().setDate(new Date().getDate() - 30)),
},
},
{
label: "Past 90 days",
dateRange: {
to: new Date(),
from: new Date(new Date().setDate(new Date().getDate() - 90)),
},
},
{
label: "Past year",
dateRange: {
to: new Date(),
from: new Date(
new Date().setFullYear(new Date().getFullYear() - 1)
),
},
},
]}
/>
</div>
)
}
@@ -1,51 +0,0 @@
import { DatePicker } from "@medusajs/ui"
export default function DatePickerRangePresets() {
return (
<div className="w-[250px]">
<DatePicker
placeholder="Pick a date"
mode="range"
presets={[
{
dateRange: {
to: new Date(),
from: new Date(),
},
label: "Today",
},
{
label: "Past 7 days",
dateRange: {
to: new Date(),
from: new Date(new Date().setDate(new Date().getDate() - 7)),
},
},
{
label: "Past 30 days",
dateRange: {
to: new Date(),
from: new Date(new Date().setDate(new Date().getDate() - 30)),
},
},
{
label: "Past 90 days",
dateRange: {
to: new Date(),
from: new Date(new Date().setDate(new Date().getDate() - 90)),
},
},
{
label: "Past year",
dateRange: {
to: new Date(),
from: new Date(
new Date().setFullYear(new Date().getFullYear() - 1)
),
},
},
]}
/>
</div>
)
}
@@ -1,9 +0,0 @@
import { DatePicker } from "@medusajs/ui"
export default function DatePickerRangeTime() {
return (
<div className="w-[250px]">
<DatePicker showTimePicker mode="range" placeholder="Pick a date" />
</div>
)
}
@@ -1,9 +0,0 @@
import { DatePicker } from "@medusajs/ui"
export default function DatePickerRange() {
return (
<div className="w-[250px]">
<DatePicker mode="range" placeholder="Pick a date" />
</div>
)
}
@@ -1,36 +0,0 @@
import { DatePicker } from "@medusajs/ui"
export default function DatePickerSinglePresetsTime() {
return (
<div className="w-[250px]">
<DatePicker
placeholder="Pick a date"
showTimePicker
presets={[
{
date: new Date(),
label: "Today",
},
{
label: "Tomorrow",
date: new Date(new Date().setDate(new Date().getDate() + 1)),
},
{
label: "A week from now",
date: new Date(new Date().setDate(new Date().getDate() + 7)),
},
{
label: "A month from now",
date: new Date(new Date().setMonth(new Date().getMonth() + 1)),
},
{
label: "A year from now",
date: new Date(
new Date().setFullYear(new Date().getFullYear() + 1)
),
},
]}
/>
</div>
)
}
@@ -1,35 +0,0 @@
import { DatePicker } from "@medusajs/ui"
export default function DatePickerSinglePresets() {
return (
<div className="w-[250px]">
<DatePicker
placeholder="Pick a date"
presets={[
{
date: new Date(),
label: "Today",
},
{
label: "Tomorrow",
date: new Date(new Date().setDate(new Date().getDate() + 1)),
},
{
label: "A week from now",
date: new Date(new Date().setDate(new Date().getDate() + 7)),
},
{
label: "A month from now",
date: new Date(new Date().setMonth(new Date().getMonth() + 1)),
},
{
label: "A year from now",
date: new Date(
new Date().setFullYear(new Date().getFullYear() + 1)
),
},
]}
/>
</div>
)
}
@@ -1,9 +0,0 @@
import { DatePicker } from "@medusajs/ui"
export default function DatePickerSingleTime() {
return (
<div className="w-[250px]">
<DatePicker showTimePicker placeholder="Pick a date" />
</div>
)
}
@@ -1,9 +0,0 @@
import { DatePicker } from "@medusajs/ui"
export default function DatePickerSingle() {
return (
<div className="w-[250px]">
<DatePicker placeholder="Pick a date" />
</div>
)
}
+4 -1
View File
@@ -9,6 +9,7 @@ import SearchProvider from "./search"
import SidebarProvider from "./sidebar"
import { siteConfig } from "../config/site"
import { MainNavProvider } from "./main-nav"
import { TooltipProvider } from "@medusajs/ui"
type ProvidersProps = {
children: React.ReactNode
@@ -21,7 +22,9 @@ const Providers = ({ children }: ProvidersProps) => {
<ScrollControllerProvider scrollableSelector="#main">
<SidebarProvider>
<MainNavProvider>
<SearchProvider>{children}</SearchProvider>
<SearchProvider>
<TooltipProvider>{children}</TooltipProvider>
</SearchProvider>
</MainNavProvider>
</SidebarProvider>
</ScrollControllerProvider>
@@ -147,11 +147,6 @@ export const ExampleRegistry: Record<string, ExampleType> = {
component: React.lazy(async () => import("@/examples/calendar-demo")),
file: "src/examples/calendar-demo.tsx",
},
"calendar-locale": {
name: "calendar-locale",
component: React.lazy(async () => import("@/examples/calendar-locale")),
file: "src/examples/calendar-locale.tsx",
},
"checkbox-demo": {
name: "checkbox-demo",
component: React.lazy(async () => import("@/examples/checkbox-demo")),
@@ -192,63 +187,6 @@ export const ExampleRegistry: Record<string, ExampleType> = {
component: React.lazy(async () => import("@/examples/date-picker-demo")),
file: "src/examples/date-picker-demo.tsx",
},
"date-picker-single": {
name: "date-picker-single",
component: React.lazy(async () => import("@/examples/date-picker-single")),
file: "src/examples/date-picker-single.tsx",
},
"date-picker-single-time": {
name: "date-picker-single-time",
component: React.lazy(
async () => import("@/examples/date-picker-single-time")
),
file: "src/examples/date-picker-single-time.tsx",
},
"date-picker-single-presets": {
name: "date-picker-single-presets",
component: React.lazy(
async () => import("@/examples/date-picker-single-presets")
),
file: "src/examples/date-picker-single-presets.tsx",
},
"date-picker-single-presets-time": {
name: "date-picker-single-presets-time",
component: React.lazy(
async () => import("@/examples/date-picker-single-presets-time")
),
file: "src/examples/date-picker-single-presets-time.tsx",
},
"date-picker-range": {
name: "date-picker-range",
component: React.lazy(async () => import("@/examples/date-picker-range")),
file: "src/examples/date-picker-range.tsx",
},
"date-picker-range-time": {
name: "date-picker-range-time",
component: React.lazy(
async () => import("@/examples/date-picker-range-time")
),
file: "src/examples/date-picker-range-time.tsx",
},
"date-picker-range-presets": {
name: "date-picker-range-presets",
component: React.lazy(
async () => import("@/examples/date-picker-range-presets")
),
file: "src/examples/date-picker-range-presets.tsx",
},
"date-picker-range-presets-time": {
name: "date-picker-range-presets-time",
component: React.lazy(
async () => import("@/examples/date-picker-range-presets-time")
),
file: "src/examples/date-picker-range-presets-time.tsx",
},
"date-picker-locale": {
name: "date-picker-locale",
component: React.lazy(async () => import("@/examples/date-picker-locale")),
file: "src/examples/date-picker-locale.tsx",
},
"drawer-demo": {
name: "drawer-demo",
component: React.lazy(async () => import("@/examples/drawer-demo")),
@@ -671,16 +609,6 @@ export const ExampleRegistry: Record<string, ExampleType> = {
component: React.lazy(async () => import("@/examples/label-xsmall-plus")),
file: "src/examples/label-xsmall-plus.tsx",
},
"calendar-single": {
name: "calendar-single",
component: React.lazy(async () => import("@/examples/calendar-single")),
file: "src/examples/calendar-single.tsx",
},
"calendar-range": {
name: "calendar-range",
component: React.lazy(async () => import("@/examples/calendar-range")),
file: "src/examples/calendar-range.tsx",
},
"checkbox-default": {
name: "checkbox-default",
component: React.lazy(async () => import("@/examples/checkbox-default")),
-44
View File
@@ -23,20 +23,6 @@
"computed": false
},
"description": "The style of the avatar.",
"tsType": {
"name": "union",
"raw": "\"squared\" \\| \"rounded\"",
"elements": [
{
"name": "literal",
"value": "\"squared\""
},
{
"name": "literal",
"value": "\"rounded\""
}
]
},
"required": false
},
"size": {
@@ -45,36 +31,6 @@
"computed": false
},
"description": "The size of the avatar's border radius.",
"tsType": {
"name": "union",
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"2xsmall\""
},
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
-70
View File
@@ -20,32 +20,6 @@
"computed": false
},
"description": "The badge's size.",
"tsType": {
"name": "union",
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\"",
"elements": [
{
"name": "literal",
"value": "\"2xsmall\""
},
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
}
]
},
"required": false
},
"rounded": {
@@ -54,20 +28,6 @@
"computed": false
},
"description": "The style of the badge's border radius.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"full\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"full\""
}
]
},
"required": false
},
"color": {
@@ -76,36 +36,6 @@
"computed": false
},
"description": "The badge's color.",
"tsType": {
"name": "union",
"raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"",
"elements": [
{
"name": "literal",
"value": "\"green\""
},
{
"name": "literal",
"value": "\"red\""
},
{
"name": "literal",
"value": "\"blue\""
},
{
"name": "literal",
"value": "\"orange\""
},
{
"name": "literal",
"value": "\"grey\""
},
{
"name": "literal",
"value": "\"purple\""
}
]
},
"required": false
}
},
-44
View File
@@ -31,28 +31,6 @@
"computed": false
},
"description": "The button's style.",
"tsType": {
"name": "union",
"raw": "\"primary\" \\| \"transparent\" \\| \"secondary\" \\| \"danger\"",
"elements": [
{
"name": "literal",
"value": "\"primary\""
},
{
"name": "literal",
"value": "\"transparent\""
},
{
"name": "literal",
"value": "\"secondary\""
},
{
"name": "literal",
"value": "\"danger\""
}
]
},
"required": false
},
"size": {
@@ -61,28 +39,6 @@
"computed": false
},
"description": "The button's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
+89 -262
View File
@@ -1,282 +1,109 @@
{
"description": "This component is based on the [react-date-picker](https://www.npmjs.com/package/react-date-picker) package.",
"description": "",
"methods": [],
"displayName": "Calendar",
"props": {
"mode": {
"defaultValue": {
"value": "\"single\"",
"computed": false
},
"description": "The calendar's mode.",
"value": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"single\" \\| \"range\"",
"raw": "Date | null",
"elements": [
{
"name": "literal",
"value": "\"single\""
"name": "Date"
},
{
"name": "literal",
"value": "\"range\""
"name": "null"
}
]
},
"required": false
"description": ""
},
"showOutsideDays": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "Whether to show days of previous and next months.",
"defaultValue": {
"required": false,
"tsType": {
"name": "boolean"
},
"required": false
},
"locale": {
"description": "The locale to use for formatting dates. To change the locale pass a date-fns locale object.",
"tsType": {
"name": "Locale",
"name": "union",
"raw": "Date | null",
"elements": [
{
"name": "signature",
"type": "object",
"raw": "&#123; code?: string ; formatDistance?: (...args: any[]) => any ; formatLong?: &#123; date: (...args: any[]) => any ; dateTime: (...args: any[]) => any ; time: (...args: any[]) => any &#125; ; formatRelative?: (...args: any[]) => any ; localize?: &#123; day: (...args: any[]) => any ; dayPeriod: (...args: any[]) => any ; era: (...args: any[]) => any ; month: (...args: any[]) => any ; ordinalNumber: (...args: any[]) => any ; quarter: (...args: any[]) => any &#125; ; match?: &#123; day: (...args: any[]) => any ; dayPeriod: (...args: any[]) => any ; era: (...args: any[]) => any ; month: (...args: any[]) => any ; ordinalNumber: (...args: any[]) => any ; quarter: (...args: any[]) => any &#125; ; options?: &#123; firstWeekContainsDate?: 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| 7 ; weekStartsOn?: 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 &#125; &#125;",
"signature": {
"properties": [
{
"key": "code",
"value": {
"name": "string"
},
"description": ""
},
{
"key": "formatDistance",
"value": {
"name": "signature",
"type": "function",
"raw": "(...args: any[]) => any",
"signature": {
"arguments": [
{
"name": "args",
"type": {
"name": "any[]"
},
"rest": true
}
],
"return": {
"name": "any"
}
}
},
"description": ""
},
{
"key": "formatLong",
"value": {
"name": "signature",
"type": "object",
"raw": "&#123; date: (...args: any[]) => any ; dateTime: (...args: any[]) => any ; time: (...args: any[]) => any &#125;",
"signature": {
"properties": [
{
"key": "date",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "dateTime",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "time",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
}
]
}
},
"description": ""
},
{
"key": "formatRelative",
"value": {
"name": "signature",
"type": "function",
"raw": "(...args: any[]) => any",
"signature": {
"arguments": [
{
"name": "args",
"type": {
"name": "any[]"
},
"rest": true
}
],
"return": {
"name": "any"
}
}
},
"description": ""
},
{
"key": "localize",
"value": {
"name": "signature",
"type": "object",
"raw": "&#123; day: (...args: any[]) => any ; dayPeriod: (...args: any[]) => any ; era: (...args: any[]) => any ; month: (...args: any[]) => any ; ordinalNumber: (...args: any[]) => any ; quarter: (...args: any[]) => any &#125;",
"signature": {
"properties": [
{
"key": "day",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "dayPeriod",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "era",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "month",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "ordinalNumber",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "quarter",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
}
]
}
},
"description": ""
},
{
"key": "match",
"value": {
"name": "signature",
"type": "object",
"raw": "&#123; day: (...args: any[]) => any ; dayPeriod: (...args: any[]) => any ; era: (...args: any[]) => any ; month: (...args: any[]) => any ; ordinalNumber: (...args: any[]) => any ; quarter: (...args: any[]) => any &#125;",
"signature": {
"properties": [
{
"key": "day",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "dayPeriod",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "era",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "month",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "ordinalNumber",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
},
{
"key": "quarter",
"value": {
"name": "(...args: any[]) => any"
},
"description": ""
}
]
}
},
"description": ""
},
{
"key": "options",
"value": {
"name": "signature",
"type": "object",
"raw": "&#123; firstWeekContainsDate?: 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| 7 ; weekStartsOn?: 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 &#125;",
"signature": {
"properties": [
{
"key": "firstWeekContainsDate",
"value": {
"name": "1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| 7"
},
"description": ""
},
{
"key": "weekStartsOn",
"value": {
"name": "0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6"
},
"description": ""
}
]
}
},
"description": ""
}
]
}
"name": "Date"
},
{
"name": "null"
}
],
"raw": "Locale"
}
]
},
"description": ""
},
"onChange": {
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: Date | null) => void",
"signature": {
"arguments": [
{
"type": {
"name": "union",
"raw": "Date | null",
"elements": [
{
"name": "Date"
},
{
"name": "null"
}
]
},
"name": "value"
}
],
"return": {
"name": "void"
}
}
},
"description": ""
},
"isDateUnavailable": {
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(date: Date) => boolean",
"signature": {
"arguments": [
{
"type": {
"name": "Date"
},
"name": "date"
}
],
"return": {
"name": "boolean"
}
}
},
"description": ""
},
"minValue": {
"required": false,
"tsType": {
"name": "Date"
},
"description": ""
},
"maxValue": {
"required": false,
"tsType": {
"name": "Date"
},
"description": ""
}
}
},
"composes": [
"Omit"
]
}
@@ -1,6 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Trigger",
"displayName": "CalendarButton",
"props": {}
}
@@ -0,0 +1,21 @@
{
"description": "",
"methods": [],
"displayName": "CalendarCell",
"props": {
"date": {
"required": true,
"tsType": {
"name": "CalendarDate"
},
"description": ""
},
"state": {
"required": true,
"tsType": {
"name": "CalendarState"
},
"description": ""
}
}
}
@@ -0,0 +1,17 @@
{
"description": "",
"methods": [],
"displayName": "CalendarGrid",
"props": {
"state": {
"required": true,
"tsType": {
"name": "CalendarState"
},
"description": ""
}
},
"composes": [
"AriaCalendarGridProps"
]
}
@@ -23,20 +23,6 @@
"computed": false
},
"description": "The input's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"required": false
}
},
@@ -1,64 +0,0 @@
{
"description": "",
"methods": [],
"displayName": "DatePicker.PresetContainer",
"props": {
"presets": {
"required": true,
"tsType": {
"name": "union",
"raw": "TPreset[] | TPreset[]",
"elements": [
{
"name": "Array",
"elements": [
{
"name": "TPreset"
}
],
"raw": "TPreset[]"
},
{
"name": "Array",
"elements": [
{
"name": "TPreset"
}
],
"raw": "TPreset[]"
}
]
},
"description": "Selectable preset configurations."
},
"onSelect": {
"required": true,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: TValue) => void",
"signature": {
"arguments": [
{
"type": {
"name": "TValue"
},
"name": "value"
}
],
"return": {
"name": "void"
}
}
},
"description": "A function that handles the event when a preset is selected."
},
"currentValue": {
"required": false,
"tsType": {
"name": "TValue"
},
"description": "The currently selected preset."
}
}
}
+10 -362
View File
@@ -1,375 +1,23 @@
{
"description": "This component is based on the [Calendar](https://docs.medusajs.com/ui/components/calendar)\ncomponent and [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover).",
"description": "",
"methods": [],
"displayName": "DatePicker",
"props": {
"fromYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to start showing the dates from."
},
"toYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to show dates to."
},
"fromMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to start showing dates from."
},
"toMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to show dates to."
},
"fromDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to start showing dates from."
},
"toDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to show dates to."
},
"fromDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates from."
},
"toDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates to."
},
"locale": {
"required": false,
"tsType": {
"name": "Locale"
},
"description": "The locale to use for formatting dates. To change the locale pass a date-fns locale object."
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The class name to apply on the date picker."
},
"disabled": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is disabled."
},
"required": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is required."
},
"placeholder": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The date picker's placeholder."
},
"size": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"small\" | \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"description": "The date picker's size."
},
"showTimePicker": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to show a time picker along with the date picker."
},
"translations": {
"required": false,
"tsType": {
"name": "signature",
"type": "object",
"raw": "{\n cancel?: string\n apply?: string\n start?: string\n end?: string\n range?: string\n}",
"signature": {
"properties": [
{
"key": "cancel",
"value": {
"name": "string",
"required": false
}
},
{
"key": "apply",
"value": {
"name": "string",
"required": false
}
},
{
"key": "start",
"value": {
"name": "string",
"required": false
}
},
{
"key": "end",
"value": {
"name": "string",
"required": false
}
},
{
"key": "range",
"value": {
"name": "string",
"required": false
}
}
]
}
},
"description": "Translation keys for the date picker. Use this to localize the date picker."
},
"mode": {
"defaultValue": {
"value": "\"single\"",
"value": "\"base\"",
"computed": false
},
"description": "The date picker's mode.",
"tsType": {
"name": "union",
"raw": "\"single\" \\| \"range\"",
"elements": [
{
"name": "literal",
"value": "\"single\""
},
{
"name": "literal",
"value": "\"range\""
}
]
},
"description": "",
"required": false
},
"defaultValue": {
"description": "The date selected by default.",
"required": false,
"tsType": {
"name": "union",
"raw": "Date \\| DateRange",
"elements": [
{
"name": "Date",
"elements": [],
"raw": "Date"
},
{
"name": "DateRange",
"elements": [
{
"name": "signature",
"type": "object",
"raw": "&#123; from: Date \\| undefined ; to?: Date &#125;",
"signature": {
"properties": [
{
"key": "from",
"value": {
"name": "Date \\| undefined"
},
"description": "The range's start date."
},
{
"key": "to",
"value": {
"name": "Date"
},
"description": "The range's end date."
}
]
}
}
],
"raw": "DateRange"
}
]
}
},
"onChange": {
"description": "A function to handle the change in the selected date.",
"required": false,
"tsType": {
"name": "union",
"raw": "(date: undefined \\| Date) => void \\| (dateRange: undefined \\| DateRange) => void",
"elements": [
{
"name": "signature",
"type": "function",
"raw": "(date: undefined \\| Date) => void",
"signature": {
"arguments": [
{
"name": "date",
"type": {
"name": "undefined \\| Date"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
},
{
"name": "signature",
"type": "function",
"raw": "(dateRange: undefined \\| DateRange) => void",
"signature": {
"arguments": [
{
"name": "dateRange",
"type": {
"name": "undefined \\| DateRange"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
]
}
},
"presets": {
"description": "Provide selectable preset configurations.",
"required": false,
"tsType": {
"name": "union",
"raw": "DatePreset[] \\| DateRangePreset[]",
"elements": [
{
"name": "Array",
"elements": [
{
"name": "DatePreset",
"elements": [
{
"name": "Date"
},
{
"name": "string"
}
],
"raw": "DatePreset"
}
],
"raw": "DatePreset[]"
},
{
"name": "Array",
"elements": [
{
"name": "DateRangePreset",
"elements": [
{
"name": "DateRange"
},
{
"name": "string"
}
],
"raw": "DateRangePreset"
}
],
"raw": "DateRangePreset[]"
}
]
}
},
"value": {
"description": "The selected date.",
"required": false,
"tsType": {
"name": "union",
"raw": "Date \\| DateRange",
"elements": [
{
"name": "Date",
"elements": [],
"raw": "Date"
},
{
"name": "DateRange",
"elements": [
{
"name": "signature",
"type": "object",
"raw": "&#123; from: Date \\| undefined ; to?: Date &#125;",
"signature": {
"properties": [
{
"key": "from",
"value": {
"name": "Date \\| undefined"
},
"description": "The range's start date."
},
{
"key": "to",
"value": {
"name": "Date"
},
"description": "The range's end date."
}
]
}
}
],
"raw": "DateRange"
}
]
}
"shouldCloseOnSelect": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "",
"required": false
}
}
}
@@ -0,0 +1,15 @@
{
"description": "",
"methods": [],
"displayName": "DatePickerButton",
"props": {
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "",
"required": false
}
}
}
@@ -0,0 +1,15 @@
{
"description": "",
"methods": [],
"displayName": "DatePickerClearButton",
"props": {
"type": {
"defaultValue": {
"value": "\"button\"",
"computed": false
},
"description": "",
"required": false
}
}
}
@@ -1,36 +1,32 @@
{
"description": "",
"methods": [],
"displayName": "DatePicker.Display",
"displayName": "DatePickerField",
"props": {
"placeholder": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Placeholder of the date picker's input."
},
"size": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"small\" | \"base\"",
"raw": "\"base\" | \"small\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
"value": "\"base\""
},
{
"name": "literal",
"value": "\"base\""
"value": "\"small\""
}
]
},
"description": "The size of the date picker's input.",
"description": "",
"defaultValue": {
"value": "\"base\"",
"computed": false
}
}
}
},
"composes": [
"AriaDatePickerProps"
]
}
@@ -1,12 +1,12 @@
{
"description": "",
"methods": [],
"displayName": "TimeSegment",
"displayName": "DateSegment",
"props": {
"segment": {
"required": true,
"tsType": {
"name": "DateSegment"
"name": "Segment"
},
"description": ""
},
@@ -1,6 +1,5 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Portal",
"props": {}
"displayName": "Drawer.Portal"
}
@@ -1,6 +0,0 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Title",
"props": {}
}
+1 -2
View File
@@ -1,6 +1,5 @@
{
"description": "This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.",
"methods": [],
"displayName": "Drawer",
"props": {}
"displayName": "Drawer"
}
@@ -2,5 +2,30 @@
"description": "This component is based on the [Radix UI Dropdown Menu Content](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content) primitive.",
"methods": [],
"displayName": "DropdownMenu.Content",
"props": {}
"props": {
"sideOffset": {
"defaultValue": {
"value": "8",
"computed": false
},
"description": "",
"required": false
},
"collisionPadding": {
"defaultValue": {
"value": "8",
"computed": false
},
"description": "",
"required": false
},
"align": {
"defaultValue": {
"value": "\"center\"",
"computed": false
},
"description": "",
"required": false
}
}
}
@@ -1,6 +0,0 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Group](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#group) primitive.",
"methods": [],
"displayName": "DropdownMenu.Group",
"props": {}
}
@@ -1,6 +0,0 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu RadioGroup](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radiogroup) primitive.",
"methods": [],
"displayName": "DropdownMenu.RadioGroup",
"props": {}
}
@@ -1,6 +0,0 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Sub](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub) primitive.",
"methods": [],
"displayName": "DropdownMenu.SubMenu",
"props": {}
}
@@ -2,5 +2,14 @@
"description": "This component is based on the [Radix UI Dropdown Menu SubContent](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subcontent) primitive.",
"methods": [],
"displayName": "DropdownMenu.SubMenuContent",
"props": {}
"props": {
"collisionPadding": {
"defaultValue": {
"value": "8",
"computed": false
},
"description": "",
"required": false
}
}
}
@@ -1,6 +0,0 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Trigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#trigger) primitive.",
"methods": [],
"displayName": "DropdownMenu.Trigger",
"props": {}
}
@@ -1,6 +0,0 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) primitive.",
"methods": [],
"displayName": "DropdownMenu",
"props": {}
}
@@ -1,6 +0,0 @@
{
"description": "",
"methods": [],
"displayName": "FocusModal.Close",
"props": {}
}
@@ -1,6 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "DatePicker.Flyout",
"displayName": "FocusModal.Footer",
"props": {}
}
@@ -1,6 +1,5 @@
{
"description": "",
"methods": [],
"displayName": "FocusModal.Portal",
"props": {}
"displayName": "FocusModal.Portal"
}
@@ -1,6 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Day",
"displayName": "FocusModal.Title",
"props": {}
}
@@ -1,6 +1,5 @@
{
"description": "",
"methods": [],
"displayName": "FocusModal.Trigger",
"props": {}
"displayName": "FocusModal.Trigger"
}
@@ -1,44 +1,5 @@
{
"description": "This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.",
"methods": [],
"displayName": "FocusModal",
"props": {
"defaultOpen": {
"description": "Whether the modal is opened by default.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"open": {
"description": "Whether the modal is opened.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"onOpenChange": {
"description": "A function to handle when the modal is opened or closed.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(open: boolean) => void",
"signature": {
"arguments": [
{
"name": "open",
"type": {
"name": "boolean"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
}
}
"displayName": "FocusModal"
}
@@ -9,24 +9,6 @@
"computed": false
},
"description": "The heading level which specifies which heading element is used.",
"tsType": {
"name": "union",
"raw": "\"h1\" \\| \"h2\" \\| \"h3\"",
"elements": [
{
"name": "literal",
"value": "\"h1\""
},
{
"name": "literal",
"value": "\"h2\""
},
{
"name": "literal",
"value": "\"h3\""
}
]
},
"required": false
}
},
-14
View File
@@ -9,20 +9,6 @@
"computed": false
},
"description": "The hint's style.",
"tsType": {
"name": "union",
"raw": "\"error\" \\| \"info\"",
"elements": [
{
"name": "literal",
"value": "\"error\""
},
{
"name": "literal",
"value": "\"info\""
}
]
},
"required": false
}
},
@@ -0,0 +1,8 @@
{
"description": "",
"methods": [],
"displayName": "I18nProvider",
"composes": [
"Props"
]
}
@@ -20,36 +20,6 @@
"computed": false
},
"description": "The badge's color.",
"tsType": {
"name": "union",
"raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"",
"elements": [
{
"name": "literal",
"value": "\"green\""
},
{
"name": "literal",
"value": "\"red\""
},
{
"name": "literal",
"value": "\"blue\""
},
{
"name": "literal",
"value": "\"orange\""
},
{
"name": "literal",
"value": "\"grey\""
},
{
"name": "literal",
"value": "\"purple\""
}
]
},
"required": false
},
"size": {
@@ -58,20 +28,6 @@
"computed": false
},
"description": "The badge's size.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"large\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
}
]
},
"required": false
}
},
@@ -31,20 +31,6 @@
"computed": false
},
"description": "The button's style.",
"tsType": {
"name": "union",
"raw": "\"primary\" \\| \"transparent\"",
"elements": [
{
"name": "literal",
"value": "\"primary\""
},
{
"name": "literal",
"value": "\"transparent\""
}
]
},
"required": false
},
"size": {
@@ -53,36 +39,6 @@
"computed": false
},
"description": "The button's size.",
"tsType": {
"name": "union",
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"2xsmall\""
},
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
-14
View File
@@ -9,20 +9,6 @@
"computed": false
},
"description": "The input's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"required": false
}
},
@@ -0,0 +1,5 @@
{
"description": "InternalCalendar is the internal implementation of the Calendar component.\nIt's not for public use, but only used for other components like DatePicker.",
"methods": [],
"displayName": "InternalCalendar"
}
-36
View File
@@ -9,28 +9,6 @@
"computed": false
},
"description": "The label's size.",
"tsType": {
"name": "union",
"raw": "\"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\"",
"elements": [
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
}
]
},
"required": false
},
"weight": {
@@ -39,20 +17,6 @@
"computed": false
},
"description": "The label's font weight.",
"tsType": {
"name": "union",
"raw": "\"regular\" \\| \"plus\"",
"elements": [
{
"name": "literal",
"value": "\"regular\""
},
{
"name": "literal",
"value": "\"plus\""
}
]
},
"required": false
}
},
@@ -1,6 +1,5 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Anchor",
"props": {}
"displayName": "Popover.Anchor"
}
@@ -1,6 +1,5 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Close",
"props": {}
"displayName": "Popover.Close"
}
@@ -9,9 +9,6 @@
"computed": false
},
"description": "The distance in pixels from the anchor.",
"tsType": {
"name": "number"
},
"required": false
},
"side": {
@@ -20,28 +17,6 @@
"computed": false
},
"description": "The preferred side of the anchor to render against when open.\nWill be reversed when collisions occur and `avoidCollisions` is enabled.",
"tsType": {
"name": "union",
"raw": "\"top\" \\| \"right\" \\| \"bottom\" \\| \"left\"",
"elements": [
{
"name": "literal",
"value": "\"top\""
},
{
"name": "literal",
"value": "\"right\""
},
{
"name": "literal",
"value": "\"bottom\""
},
{
"name": "literal",
"value": "\"left\""
}
]
},
"required": false
},
"align": {
@@ -50,24 +25,6 @@
"computed": false
},
"description": "The preferred alignment against the anchor. May change when collisions occur.",
"tsType": {
"name": "union",
"raw": "\"center\" \\| \"start\" \\| \"end\"",
"elements": [
{
"name": "literal",
"value": "\"center\""
},
{
"name": "literal",
"value": "\"start\""
},
{
"name": "literal",
"value": "\"end\""
}
]
},
"required": false
}
}
@@ -1,6 +1,5 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Trigger",
"props": {}
"displayName": "Popover.Trigger"
}
+1 -2
View File
@@ -1,6 +1,5 @@
{
"description": "This component is based on the [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover) primitves.",
"methods": [],
"displayName": "Popover",
"props": {}
"displayName": "Popover"
}
@@ -6,22 +6,7 @@
"status": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"not-started\" \\| \"in-progress\" \\| \"completed\"",
"elements": [
{
"name": "literal",
"value": "\"not-started\""
},
{
"name": "literal",
"value": "\"in-progress\""
},
{
"name": "literal",
"value": "\"completed\""
}
]
"name": "ProgressStatus"
},
"description": "The current status.",
"defaultValue": {
@@ -6,22 +6,7 @@
"status": {
"required": true,
"tsType": {
"name": "union",
"raw": "\"not-started\" \\| \"in-progress\" \\| \"completed\"",
"elements": [
{
"name": "literal",
"value": "\"not-started\""
},
{
"name": "literal",
"value": "\"in-progress\""
},
{
"name": "literal",
"value": "\"completed\""
}
]
"name": "ProgressStatus"
},
"description": "The current status."
}
@@ -1,6 +1,5 @@
{
"description": "This component is based on the [Radix UI Accordion](https://radix-ui.com/primitives/docs/components/accordion) primitves.",
"methods": [],
"displayName": "ProgressAccordion",
"props": {}
"displayName": "ProgressAccordion"
}
@@ -6,22 +6,7 @@
"status": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"not-started\" \\| \"in-progress\" \\| \"completed\"",
"elements": [
{
"name": "literal",
"value": "\"not-started\""
},
{
"name": "literal",
"value": "\"in-progress\""
},
{
"name": "literal",
"value": "\"completed\""
}
]
"name": "ProgressStatus"
},
"description": "The current status."
}
@@ -2,7 +2,19 @@
"description": "",
"methods": [],
"displayName": "ProgressTabs.Trigger",
"props": {},
"props": {
"status": {
"required": false,
"tsType": {
"name": "ProgressStatus"
},
"description": "",
"defaultValue": {
"value": "\"not-started\"",
"computed": false
}
}
},
"composes": [
"Omit"
]
@@ -1,6 +1,5 @@
{
"description": "This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves.",
"methods": [],
"displayName": "ProgressTabs",
"props": {}
"displayName": "ProgressTabs"
}
@@ -1,6 +1,5 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Portal",
"props": {}
"displayName": "Prompt.Portal"
}
@@ -1,334 +0,0 @@
{
"description": "",
"methods": [],
"displayName": "RangeDatePicker",
"props": {
"fromYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to start showing the dates from."
},
"toYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to show dates to."
},
"fromMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to start showing dates from."
},
"toMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to show dates to."
},
"fromDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to start showing dates from."
},
"toDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to show dates to."
},
"fromDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates from."
},
"toDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates to."
},
"locale": {
"required": false,
"tsType": {
"name": "Locale"
},
"description": "The locale to use for formatting dates. To change the locale pass a date-fns locale object."
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The class name to apply on the date picker."
},
"disabled": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is disabled."
},
"required": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is required."
},
"placeholder": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The date picker's placeholder."
},
"size": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"small\" | \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"description": "The date picker's size.",
"defaultValue": {
"value": "\"base\"",
"computed": false
}
},
"showTimePicker": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to show a time picker along with the date picker."
},
"translations": {
"required": false,
"tsType": {
"name": "signature",
"type": "object",
"raw": "{\n cancel?: string\n apply?: string\n start?: string\n end?: string\n range?: string\n}",
"signature": {
"properties": [
{
"key": "cancel",
"value": {
"name": "string",
"required": false
}
},
{
"key": "apply",
"value": {
"name": "string",
"required": false
}
},
{
"key": "start",
"value": {
"name": "string",
"required": false
}
},
{
"key": "end",
"value": {
"name": "string",
"required": false
}
},
{
"key": "range",
"value": {
"name": "string",
"required": false
}
}
]
}
},
"description": "Translation keys for the date picker. Use this to localize the date picker."
},
"id": {
"required": false,
"tsType": {
"name": "string"
},
"description": ""
},
"aria-invalid": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": ""
},
"aria-label": {
"required": false,
"tsType": {
"name": "string"
},
"description": ""
},
"aria-labelledby": {
"required": false,
"tsType": {
"name": "string"
},
"description": ""
},
"aria-required": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": ""
},
"presets": {
"required": false,
"tsType": {
"name": "Array",
"elements": [
{
"name": "DateRangePreset"
}
],
"raw": "DateRangePreset[]"
},
"description": "Provide selectable preset configurations."
},
"defaultValue": {
"required": false,
"tsType": {
"name": "signature",
"type": "object",
"raw": "&#123; from: Date \\| undefined ; to?: Date &#125;",
"signature": {
"properties": [
{
"key": "from",
"value": {
"name": "union",
"raw": "Date \\| undefined",
"elements": [
{
"name": "Date",
"elements": [],
"raw": "Date"
},
{
"name": "undefined"
}
]
},
"description": "The range's start date."
},
{
"key": "to",
"value": {
"name": "Date",
"elements": [],
"raw": "Date"
},
"description": "The range's end date."
}
]
}
},
"description": "The date range selected by default."
},
"value": {
"required": false,
"tsType": {
"name": "signature",
"type": "object",
"raw": "&#123; from: Date \\| undefined ; to?: Date &#125;",
"signature": {
"properties": [
{
"key": "from",
"value": {
"name": "union",
"raw": "Date \\| undefined",
"elements": [
{
"name": "Date",
"elements": [],
"raw": "Date"
},
{
"name": "undefined"
}
]
},
"description": "The range's start date."
},
{
"key": "to",
"value": {
"name": "Date",
"elements": [],
"raw": "Date"
},
"description": "The range's end date."
}
]
}
},
"description": "The selected date range."
},
"onChange": {
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(dateRange: DateRange | undefined) => void",
"signature": {
"arguments": [
{
"type": {
"name": "union",
"raw": "DateRange | undefined",
"elements": [
{
"name": "DateRange"
},
{
"name": "undefined"
}
]
},
"name": "dateRange"
}
],
"return": {
"name": "void"
}
}
},
"description": "A function to handle the change in the selected date range."
}
}
}
@@ -2,5 +2,30 @@
"description": "",
"methods": [],
"displayName": "Select.Content",
"props": {}
"props": {
"position": {
"defaultValue": {
"value": "\"popper\"",
"computed": false
},
"description": "",
"required": false
},
"sideOffset": {
"defaultValue": {
"value": "8",
"computed": false
},
"description": "",
"required": false
},
"collisionPadding": {
"defaultValue": {
"value": "24",
"computed": false
},
"description": "",
"required": false
}
}
}
@@ -1,6 +0,0 @@
{
"description": "Groups multiple items together.",
"methods": [],
"displayName": "Select.Group",
"props": {}
}
@@ -1,6 +0,0 @@
{
"description": "Displays the selected value, or a placeholder if no value is selected.\nIt's based on [Radix UI Select Value](https://www.radix-ui.com/primitives/docs/components/select#value).",
"methods": [],
"displayName": "Select.Value",
"props": {}
}
@@ -1,268 +0,0 @@
{
"description": "",
"methods": [],
"displayName": "SingleDatePicker",
"props": {
"fromYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to start showing the dates from."
},
"toYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to show dates to."
},
"fromMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to start showing dates from."
},
"toMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to show dates to."
},
"fromDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to start showing dates from."
},
"toDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to show dates to."
},
"fromDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates from."
},
"toDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates to."
},
"locale": {
"required": false,
"tsType": {
"name": "Locale"
},
"description": "The locale to use for formatting dates. To change the locale pass a date-fns locale object."
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The class name to apply on the date picker."
},
"disabled": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is disabled."
},
"required": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is required."
},
"placeholder": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The date picker's placeholder."
},
"size": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"small\" | \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"description": "The date picker's size.",
"defaultValue": {
"value": "\"base\"",
"computed": false
}
},
"showTimePicker": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to show a time picker along with the date picker."
},
"translations": {
"required": false,
"tsType": {
"name": "signature",
"type": "object",
"raw": "{\n cancel?: string\n apply?: string\n start?: string\n end?: string\n range?: string\n}",
"signature": {
"properties": [
{
"key": "cancel",
"value": {
"name": "string",
"required": false
}
},
{
"key": "apply",
"value": {
"name": "string",
"required": false
}
},
{
"key": "start",
"value": {
"name": "string",
"required": false
}
},
{
"key": "end",
"value": {
"name": "string",
"required": false
}
},
{
"key": "range",
"value": {
"name": "string",
"required": false
}
}
]
}
},
"description": "Translation keys for the date picker. Use this to localize the date picker."
},
"id": {
"required": false,
"tsType": {
"name": "string"
},
"description": ""
},
"aria-invalid": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": ""
},
"aria-label": {
"required": false,
"tsType": {
"name": "string"
},
"description": ""
},
"aria-labelledby": {
"required": false,
"tsType": {
"name": "string"
},
"description": ""
},
"aria-required": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": ""
},
"presets": {
"required": false,
"tsType": {
"name": "Array",
"elements": [
{
"name": "DatePreset"
}
],
"raw": "DatePreset[]"
},
"description": ""
},
"defaultValue": {
"required": false,
"tsType": {
"name": "Date"
},
"description": ""
},
"value": {
"required": false,
"tsType": {
"name": "Date"
},
"description": ""
},
"onChange": {
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(date: Date | undefined) => void",
"signature": {
"arguments": [
{
"type": {
"name": "union",
"raw": "Date | undefined",
"elements": [
{
"name": "Date"
},
{
"name": "undefined"
}
]
},
"name": "date"
}
],
"return": {
"name": "void"
}
}
},
"description": ""
}
}
}
@@ -9,36 +9,6 @@
"computed": false
},
"description": "The status's color.",
"tsType": {
"name": "union",
"raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"",
"elements": [
{
"name": "literal",
"value": "\"green\""
},
{
"name": "literal",
"value": "\"red\""
},
{
"name": "literal",
"value": "\"blue\""
},
{
"name": "literal",
"value": "\"orange\""
},
{
"name": "literal",
"value": "\"grey\""
},
{
"name": "literal",
"value": "\"purple\""
}
]
},
"required": false
}
},
-14
View File
@@ -9,20 +9,6 @@
"computed": false
},
"description": "The switch's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"required": false
}
},
+1 -2
View File
@@ -1,6 +1,5 @@
{
"description": "This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves",
"methods": [],
"displayName": "Tabs",
"props": {}
"displayName": "Tabs"
}
-68
View File
@@ -46,32 +46,6 @@
"computed": false
},
"description": "The text's size.",
"tsType": {
"name": "union",
"raw": "\"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
},
"weight": {
@@ -80,20 +54,6 @@
"computed": false
},
"description": "The text's font weight.",
"tsType": {
"name": "union",
"raw": "\"regular\" \\| \"plus\"",
"elements": [
{
"name": "literal",
"value": "\"regular\""
},
{
"name": "literal",
"value": "\"plus\""
}
]
},
"required": false
},
"family": {
@@ -102,20 +62,6 @@
"computed": false
},
"description": "The text's font family.",
"tsType": {
"name": "union",
"raw": "\"sans\" \\| \"mono\"",
"elements": [
{
"name": "literal",
"value": "\"sans\""
},
{
"name": "literal",
"value": "\"mono\""
}
]
},
"required": false
},
"leading": {
@@ -124,20 +70,6 @@
"computed": false
},
"description": "The text's line height.",
"tsType": {
"name": "union",
"raw": "\"normal\" \\| \"compact\"",
"elements": [
{
"name": "literal",
"value": "\"normal\""
},
{
"name": "literal",
"value": "\"compact\""
}
]
},
"required": false
}
},
@@ -1,10 +1,5 @@
{
"description": "This component is based on the `div` element and supports all of its props.",
"description": "",
"methods": [],
"displayName": "TimeInput",
"props": {
"hourCycle": {
"description": "The time's format. If no value is specified, the format is\nset based on the user's locale."
}
}
"displayName": "TimeInput"
}
+3 -70
View File
@@ -22,84 +22,17 @@
"description": {
"required": false,
"tsType": {
"name": "string"
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "The toast's text."
},
"action": {
"required": false,
"tsType": {
"name": "signature",
"type": "object",
"raw": "&#123; altText: string ; label: string ; onClick: () => void \\| Promise&#60;void&#62; ; variant?: ToastActionVariant &#125;",
"signature": {
"properties": [
{
"key": "altText",
"value": {
"name": "string"
},
"description": "The button's alt text."
},
{
"key": "label",
"value": {
"name": "string"
},
"description": "The button's text."
},
{
"key": "onClick",
"value": {
"name": "signature",
"type": "function",
"raw": "() => void \\| Promise&#60;void&#62;",
"signature": {
"arguments": [],
"return": {
"name": "void \\| Promise&#60;void&#62;"
}
}
},
"description": "The function to execute when the button is clicked."
},
{
"key": "variant",
"value": {
"name": "ToastActionVariant",
"elements": [
{
"name": "union",
"raw": "\"default\" \\| \"destructive\"",
"elements": [
{
"name": "\"default\""
},
{
"name": "\"destructive\""
}
]
}
],
"raw": "ToastActionVariant"
},
"description": "The button's variant."
}
]
}
"name": "ToastAction"
},
"description": "The toast's action buttons."
},
"dismissLabel": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The label of the dismiss button, if available.",
"defaultValue": {
"value": "\"Close\"",
"computed": false
}
}
}
}
+1 -59
View File
@@ -9,42 +9,6 @@
"computed": false
},
"description": "The position of the created toasts.",
"tsType": {
"name": "Position",
"elements": [
{
"name": "union",
"raw": "\"top-left\" \\| \"top-right\" \\| \"bottom-left\" \\| \"bottom-right\" \\| \"top-center\" \\| \"bottom-center\"",
"elements": [
{
"name": "literal",
"value": "\"top-left\""
},
{
"name": "literal",
"value": "\"top-right\""
},
{
"name": "literal",
"value": "\"bottom-left\""
},
{
"name": "literal",
"value": "\"bottom-right\""
},
{
"name": "literal",
"value": "\"top-center\""
},
{
"name": "literal",
"value": "\"bottom-center\""
}
]
}
],
"raw": "Position"
},
"required": false
},
"gap": {
@@ -53,9 +17,6 @@
"computed": false
},
"description": "The gap between the toast components.",
"tsType": {
"name": "number"
},
"required": false
},
"offset": {
@@ -64,29 +25,10 @@
"computed": false
},
"description": "The space from the edges of the screen.",
"tsType": {
"name": "union",
"raw": "string \\| number",
"elements": [
{
"name": "string"
},
{
"name": "number"
}
]
},
"required": false
},
"duration": {
"description": "The time in milliseconds that a toast is shown before it's\nautomatically dismissed.\n\n",
"tsType": {
"name": "number"
},
"defaultValue": {
"value": "4000",
"computed": false
}
"description": "The time in milliseconds that a toast is shown before it's\nautomatically dismissed.\n\n@defaultValue 4000"
}
},
"composes": [
@@ -3,6 +3,53 @@
"methods": [],
"displayName": "Tooltip",
"props": {
"content": {
"required": true,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": ""
},
"onClick": {
"required": false,
"tsType": {
"name": "ReactMouseEventHandler",
"raw": "React.MouseEventHandler<HTMLButtonElement>",
"elements": [
{
"name": "HTMLButtonElement"
}
]
},
"description": ""
},
"side": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"bottom\" | \"left\" | \"top\" | \"right\"",
"elements": [
{
"name": "literal",
"value": "\"bottom\""
},
{
"name": "literal",
"value": "\"left\""
},
{
"name": "literal",
"value": "\"top\""
},
{
"name": "literal",
"value": "\"right\""
}
]
},
"description": ""
},
"maxWidth": {
"required": false,
"tsType": {
@@ -13,6 +60,14 @@
"value": "220",
"computed": false
}
},
"sideOffset": {
"defaultValue": {
"value": "8",
"computed": false
},
"description": "",
"required": false
}
},
"composes": [
@@ -0,0 +1,23 @@
{
"description": "",
"methods": [],
"displayName": "TooltipProvider",
"props": {
"delayDuration": {
"defaultValue": {
"value": "100",
"computed": false
},
"description": "",
"required": false
},
"skipDelayDuration": {
"defaultValue": {
"value": "300",
"computed": false
},
"description": "",
"required": false
}
}
}
+1 -1
View File
@@ -16,7 +16,7 @@
"dependencies": {
"@mdx-js/loader": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@medusajs/icons": "preview",
"@medusajs/icons": "^2.0.0",
"@next/mdx": "^14.2.14",
"clsx": "^2.1.0",
"docs-ui": "*",
+2 -2
View File
@@ -60,8 +60,8 @@
"react-dom": "^18.2.0"
},
"dependencies": {
"@medusajs/icons": "rc",
"@medusajs/ui": "^3.0.0",
"@medusajs/icons": "^2.0.0",
"@medusajs/ui": "^4.0.0",
"@octokit/request": "^8.1.1",
"@react-hook/resize-observer": "^1.2.6",
"@segment/analytics-next": "^1.55.0",
+1 -1
View File
@@ -41,6 +41,6 @@
"node": ">=18.17.0"
},
"dependencies": {
"@medusajs/icons": "^1.2.2"
"@medusajs/icons": "^2.0.0"
}
}
+2482 -40
View File
File diff suppressed because it is too large Load Diff