fix: update demos system

Author: mehdibha

apps/web/content/components/buttons/button.mdx

@@ -16,7 +16,7 @@ links:
 ---
 
 <ComponentPreview
-  name="button-default"
+  name="core/button-default"
   preview={`<Button>button</Button>`}
 />
 
@@ -47,7 +47,7 @@ Use the `variant` prop to control the visual style of the button.<br/>
 The default variant is `"default"`.
 
 <ComponentPreview
-  name="demos/components/core/button/variants"
+  name="core/button-variants"
   preview={`<Button variant="default">default</Button>
 <Button variant="primary">primary</Button>
 <Button variant="outline">outline</Button>
@@ -64,7 +64,7 @@ Use the `size` prop to control the size of the button.<br/>
 The default size is `"md"`.
 
 <ComponentPreview
-  name="demos/components/core/button/sizes"
+  name="core/button-sizes"
   preview={`<Button size="sm">Button</Button>
 <Button size="md">Button</Button>
 <Button size="lg">Button</Button>`}
@@ -76,7 +76,7 @@ Use the `shape` prop to control the shape of the button. The default variant is
 Icon-only buttons should include an `aria-label`.
 
 <ComponentPreview
-  name="demos/components/core/button/shapes"
+  name="core/button-shapes"
   preview={`<Button shape="square"><UplaodIcon /></UplaodIcon>
 <Button shape="circular"><UplaodIcon /></Button>`}
 />
@@ -86,7 +86,7 @@ Icon-only buttons should include an `aria-label`.
 To add additional context for a button label, such as a search icon next to the label for a search field submit, use the `prefix` and `suffix` props. Leading visuals always appear locked to the button label, even if the button is full width.
 
 <ComponentPreview
-  name="demos/components/core/button/prefix-and-suffix"
+  name="core/button-prefix-and-suffix"
   preview={`<Button prefix={<UplaodIcon />}>Upload</Button>
 <Button suffix={<UplaodIcon />}>Upload</Button>`}
 />
@@ -96,7 +96,7 @@ To add additional context for a button label, such as a search icon next to the
 Use the `isLoading` prop to control the loading state of the button, if you need to wait for a button's action to be completed.
 
 <ComponentPreview
-  name="demos/components/core/button/loading"
+  name="core/button-loading"
   preview={`<Button isLoading>Button</Button>`}
 />
 
@@ -105,7 +105,7 @@ Use the `isLoading` prop to control the loading state of the button, if you need
 Use the `isDisabled` prop to disable the button.
 
 <ComponentPreview
-  name="demos/components/core/button/disabled"
+  name="core/button-disabled"
   preview={`<Button isDisabled>Button</Button>`}
 />
 
@@ -114,7 +114,7 @@ Use the `isDisabled` prop to disable the button.
 To use a button as a link, use the `href` prop the button will automatically render a link that visually looks like a button.
 
 <ComponentPreview
-  name="demos/components/core/button/link-button"
+  name="core/button-link-button"
   preview={`<Button href="/login">Login</Button>`}
 />
 

apps/web/content/components/buttons/file-trigger.mdx

@@ -15,7 +15,7 @@ links:
 ---
 
 <ComponentPreview
-  name="demos/components/core/file-trigger/default"
+  name="core/file-trigger-default"
   preview={`<FileTrigger>
   <Button prefix={<UploadIcon />}>Upload</Button>
 </FileTrigger>`}
@@ -46,7 +46,7 @@ A `FileTrigger` wraps around a pressable child such as a button, and includes a
 By default, the file trigger will accept any file type. To support only certain file types, pass an array of the [mime type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) of files via the `acceptedFileTypes` prop.
 
 <ComponentPreview
-  name="demos/components/core/file-trigger/file-types"
+  name="core/file-trigger-file-types"
   preview={`<FileTrigger acceptedFileTypes={["image/*"]}>
   <Button prefix={<UploadIcon />}>Upload</Button>
 </FileTrigger>`}
@@ -57,7 +57,7 @@ By default, the file trigger will accept any file type. To support only certain
 A file trigger can accept multiple files by passsing the `allowsMultiple` prop.
 
 <ComponentPreview
-  name="demos/components/core/file-trigger/multiple-files"
+  name="core/file-trigger-multiple-files"
   preview={`<FileTrigger allowMultiple>
   <Button prefix={<UploadIcon />}>Upload</Button>
 </FileTrigger>`}
@@ -69,7 +69,7 @@ To enable selecting directories instead of files, use the `acceptDirectory` prop
 This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) HTML attribute and allows users to select directories and their contents. Please note that support for this feature varies from browser to browser.
 
 <ComponentPreview
-  name="demos/components/core/file-trigger/directory-selection"
+  name="core/file-trigger-directory-selection"
   preview={`<FileTrigger acceptDirectory>
   <Button prefix={<UploadIcon />}>Upload</Button>
 </FileTrigger>`}
@@ -81,7 +81,7 @@ To specify the media capture mechanism to capture media on the spot, pass user f
 This behavior only works on mobile devices. On desktop devices, it will open the file system like normal. [Read more about capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture).
 
 <ComponentPreview
-  name="demos/components/core/file-trigger/media-capture"
+  name="core/file-trigger-media-capture"
   preview={`<FileTrigger defaultCamera="environment">
   <Button prefix={<UploadIcon />}>Upload</Button>
 </FileTrigger>`}

apps/web/content/components/buttons/index.mdx

@@ -16,7 +16,7 @@ links:
 ---
 
 <ComponentPreview
-  name="demos/components/core/toggle-button/default"
+  name="core/toggle-button-default"
   preview={`<ToggleButton><PinIcon /></ToggleButton>`}
 />
 
@@ -47,7 +47,7 @@ Use the `variant` prop to control the visual style of the toggle button.
 The default size is `"quiet"`.
 
 <ComponentPreview
-  name="demos/components/core/toggle-button/variants"
+  name="core/toggle-button-variants"
   preview={`<ToggleButton variant="quiet"><PinIcon /></ToggleButton>
 <ToggleButton variant="outline"><PinIcon /></ToggleButton>
 <ToggleButton variant="accent"><PinIcon /></ToggleButton>`}
@@ -59,7 +59,7 @@ Use the `size` prop to control the size of the toggle button.<br/>
 The default size is `"md"`.
 
 <ComponentPreview
-  name="demos/components/core/toggle-button/sizes"
+  name="core/toggle-button-sizes"
   preview={`<ToggleButton size="sm"><PinIcon /></ToggleButton>
 <ToggleButton size="md"><PinIcon /></ToggleButton>
 <ToggleButton size="lg"><PinIcon /></ToggleButton>`}
@@ -71,7 +71,7 @@ Use the `shape` prop to control the shape of the toggle button. The default shap
 Icon-only toggle buttons should include an `aria-label`.
 
 <ComponentPreview
-  name="demos/components/core/toggle-button/shapes"
+  name="core/toggle-button-shapes"
   preview={`<ToggleButton shape="square"><PinIcon /></ToggleButton>
 <ToggleButton shape="circular"><PinIcon /></ToggleButton>
 <ToggleButton prefix={<PinIcon />} shape="rectangle">Pin</ToggleButton>`}
@@ -82,7 +82,7 @@ Icon-only toggle buttons should include an `aria-label`.
 Use the `isDisabled` prop to disable the toggle button.
 
 <ComponentPreview
-  name="demos/components/core/toggle-button/disabled"
+  name="core/toggle-button-disabled"
   preview={`<ToggleButton isDisabled><PinIcon /></ToggleButton>`}
 />
 
@@ -91,7 +91,7 @@ Use the `isDisabled` prop to disable the toggle button.
 Use the `defaultSelected` to set the initial state of the toggle button.
 
 <ComponentPreview
-  name="demos/components/core/toggle-button/uncontrolled"
+  name="core/toggle-button-uncontrolled"
   preview={`<ToggleButton defaultSelected><PinIcon /></ToggleButton>`}
 />
 
@@ -100,7 +100,7 @@ Use the `defaultSelected` to set the initial state of the toggle button.
 Use the `isSelected` and `onChange` props to control the state of the toggle button.
 
 <ComponentPreview
-  name="demos/components/core/toggle-button/controlled"
+  name="core/toggle-button-controlled"
   preview={`const [isSelected, setSelected] = React.useState(true);
 return (
   <ToggleButton isSelected={isSelected} onChange={setSelected}>

apps/web/content/components/buttons/toggle-button.mdx

@@ -16,7 +16,7 @@ links:
 ---
 
 <ComponentPreview
-  name="demos/components/core/color-area/default"
+  name="core/color-area-default"
   preview={`<ColorArea />`}
 />
 
@@ -46,7 +46,7 @@ Use `ColorArea` to allow users to adjust two channels of an RGB, HSL or HSB colo
 `xChannel` and `yChannel` props may be provided to specify which color channels the color area should display
 
 <ComponentPreview
-  name="demos/components/core/color-area/channels"
+  name="core/color-area-channels"
   preview={`<ColorArea xChannel="red" yChannel="blue" />`}
 />
 
@@ -55,7 +55,7 @@ Use `ColorArea` to allow users to adjust two channels of an RGB, HSL or HSB colo
 Use the `isDisabled` prop to disable the color area.
 
 <ComponentPreview
-  name="demos/components/core/color-area/disabled"
+  name="core/color-area-disabled"
   preview={`<ColorArea isDisabled />`}
 />
 
@@ -64,7 +64,7 @@ Use the `isDisabled` prop to disable the color area.
 An initial, uncontrolled value can be provided to the `ColorArea` using the `defaultValue` prop.
 
 <ComponentPreview
-  name="demos/components/core/color-area/uncontrolled"
+  name="core/color-area-uncontrolled"
   preview={`<ColorArea defaultValue="hsl(30, 100%, 50%)" />`}
 />
 
@@ -73,7 +73,7 @@ An initial, uncontrolled value can be provided to the `ColorArea` using the `def
 Use the `value` and `onChange` props to control the value of the slider.
 
 <ComponentPreview
-  name="demos/components/core/color-area/controlled"
+  name="core/color-area-controlled"
   preview={`const [value, setValue] = React.useState(parseColor("hsl(0, 100%, 50%)"))
 return <ColorArea value={value} onChange={setValue} xChannel="saturation" yChannel="lightness" />`}
 />
@@ -83,7 +83,7 @@ return <ColorArea value={value} onChange={setValue} xChannel="saturation" yChann
 If you need to customize things further, you can drop down to the composition level.
 
 <ComponentPreview
-  name="demos/components/core/color-area/composition"
+  name="core/color-area-composition"
   preview={`<ColorAreaRoot>
   <ColorThumb />
 </ColorAreaRoot>`}

apps/web/content/components/colors/color-area.mdx

@@ -16,7 +16,7 @@ links:
 ---
 
 <ComponentPreview
-  name="demos/components/core/color-field/default"
+  name="core/color-field-default"
   preview={`<ColorField label="Color" />`}
 />
 
@@ -46,7 +46,7 @@ Use a `ColorField` to allow users to edit a hex color or individual color channe
 A visual label can be provided for the `ColorField` using the `label` prop or a hidden label using `aria-label` prop.
 
 <ComponentPreview
-  name="demos/components/core/color-field/label"
+  name="core/color-field-label"
   preview={`<ColorField label="Background" placeholder="Visible label" />
 <ColorField aria-label="Background" placeholder="Hidden label" />`}
 />
@@ -57,7 +57,7 @@ Use the `size` prop to control the size of the `ColorField`.<br/>
 The default variant is `"md"`.
 
 <ComponentPreview
-  name="demos/components/core/color-field/sizes"
+  name="core/color-field-sizes"
   preview={`<ColorField label="small" size="sm" />
 <ColorField label="medium" size="md" />
 <ColorField label="large" size="lg" />`}
@@ -68,7 +68,7 @@ The default variant is `"md"`.
 To add additional context for the `ColorField`, use the `prefix` and `suffix` props.
 
 <ComponentPreview
-  name="demos/components/core/color-field/prefix-and-suffix"
+  name="core/color-field-prefix-and-suffix"
   preview={`<ColorField prefix={<PaletteIcon />} />
 <ColorField suffix={<PaletteIcon />} />`}
 />
@@ -78,7 +78,7 @@ To add additional context for the `ColorField`, use the `prefix` and `suffix` pr
 A description can be supplied to `ColorField` via the `description` prop. The description is always visible unless the `isInvalid` prop is `true` and an error message is provided.
 
 <ComponentPreview
-  name="demos/components/core/color-field/description"
+  name="core/color-field-description"
   preview={`<ColorField label="Color" description="Enter a background color." />`}
 />
 
@@ -87,7 +87,7 @@ A description can be supplied to `ColorField` via the `description` prop. The de
 A ContextualHelp element may be placed next to the label to provide additional information or help about a ColorField.
 
 <ComponentPreview
-  name="demos/components/core/color-field/contextual-help"
+  name="core/color-field-contextual-help"
   preview={`<ColorField label="Color" contextualHelp={<ContextualHelp />} />`}
 />
 
@@ -96,7 +96,7 @@ A ContextualHelp element may be placed next to the label to provide additional i
 An `errorMessage` can be supplied to `ColorField`, which will be displayed when the `isInvalid` prop is set to `true`.
 
 <ComponentPreview
-  name="demos/components/core/color-field/error-message"
+  name="core/color-field-error-message"
   preview={`<ColorField label="Color" isInvalid errorMessage="Please fill out this field." />`}
 />
 
@@ -106,7 +106,7 @@ Use the `isLoading` prop to control the loading state of the ColorField.
 Use the `loaderPosition` prop to control the position of the loader.
 
 <ComponentPreview
-  name="demos/components/core/color-field/loading"
+  name="core/color-field-loading"
   preview={`<ColorField isLoading loaderPosition="prefix" />
 <ColorField isLoading loaderPosition="suffix" />`}
 />
@@ -116,7 +116,7 @@ Use the `loaderPosition` prop to control the position of the loader.
 Use the `isDisabled` prop to disable the `ColorField`.
 
 <ComponentPreview
-  name="demos/components/core/color-field/disabled"
+  name="core/color-field-disabled"
   preview={`<ColorField value={parseColor("rgb(222,70,58)")} isDisabled />`}
 />
 
@@ -125,7 +125,7 @@ Use the `isDisabled` prop to disable the `ColorField`.
 The `isReadOnly` boolean prop makes the `ColorField`'s text content immutable. Unlike `isDisabled`, the `ColorField` remains focusable and the contents can still be copied.
 
 <ComponentPreview
-  name="demos/components/core/color-field/read-only"
+  name="core/color-field-read-only"
   preview={`<ColorField label="Color" isReadOnly value="#121212" />`}
 />
 
@@ -135,7 +135,7 @@ Use the `isRequired` prop to mark the `ColorField` as required.
 Use the `necessityIndicator` prop to control the visual style of the required state.
 
 <ComponentPreview
-  name="demos/components/core/color-field/required"
+  name="core/color-field-required"
   preview={`<ColorField label="Color" isRequired />
 <ColorField label="Color" isRequired necessityIndicator="icon" />
 <ColorField label="Color" isRequired necessityIndicator="label" />
@@ -147,7 +147,7 @@ Use the `necessityIndicator` prop to control the visual style of the required st
 Use the `value` and `onChange` props to control the value of the input.
 
 <ComponentPreview
-  name="demos/components/core/color-field/uncontrolled"
+  name="core/color-field-uncontrolled"
   preview={`<ColorField defaultValue="#7f007f" />`}
 />
 
@@ -156,7 +156,7 @@ Use the `value` and `onChange` props to control the value of the input.
 Use the `value` and `onChange` props to control the value of the input.
 
 <ComponentPreview
-  name="demos/components/core/color-field/controlled"
+  name="core/color-field-controlled"
   preview={`const [color, setColor] = React.useState<Color | null>(parseColor("#7f007f"));
 return <ColorField value={color} onChange={setColor} />`}
 />
@@ -166,7 +166,7 @@ return <ColorField value={color} onChange={setColor} />`}
 If you need to customize things further, you can drop down to the composition level.
 
 <ComponentPreview
-  name="demos/components/core/color-field/composition"
+  name="core/color-field-composition"
   preview={`<ColorFieldRoot>
   <Label>Background</Label>
   <InputRoot>