fix(website): resolve missing examples

packages/react/src/components/pin-input/pin-input.stories.tsx

@@ -10,5 +10,5 @@ export { Basic } from './examples/basic'
 export { InitialValue } from './examples/initial-value'
 export { Customized } from './examples/customized'
 export { Blurred } from './examples/blurred'
-export { OTPMode } from './examples/o-tp-mode'
+export { OTPMode } from './examples/otp-mode'
 export { WithMask } from './examples/with-mask'

packages/solid/src/components/pin-input/pin-input.stories.tsx

@@ -10,5 +10,5 @@ export { Basic } from './examples/basic'
 export { InitialValue } from './examples/initial-value'
 export { Customized } from './examples/customized'
 export { Blurred } from './examples/blurred'
-export { OTPMode } from './examples/o-tp-mode'
+export { OTPMode } from './examples/otp-mode'
 export { WithMask } from './examples/with-mask'

packages/vue/src/components/pin-input/pin-input.stories.vue

@@ -3,7 +3,7 @@ import Basic from './examples/basic.vue'
 import Blurred from './examples/blurred.vue'
 import Customized from './examples/customized.vue'
 import InitialValue from './examples/initial-value.vue'
-import OTPMode from './examples/o-tp-mode.vue'
+import OTPMode from './examples/otp-mode.vue'
 import WithMask from './examples/with-mask.vue'
 </script>
 <template>

website/src/components/code-tabs.tsx

@@ -10,16 +10,16 @@ interface CodeExample {
 }
 
 interface Props {
-  defalutValue: string
+  defaultValue: string
   examples: CodeExample[]
 }
 
 export const CodeTabs = (props: Props) => {
-  const { examples, defalutValue } = props
+  const { examples, defaultValue } = props
 
   return (
     <Tabs.Root
-      defaultValue={defalutValue}
+      defaultValue={defaultValue}
       variant="line"
       borderWidth="1px"
       borderRadius="lg"

website/src/components/example.tsx

@@ -14,7 +14,7 @@ export const Example = async (props: Props) => {
   const framework = getServerContext().framework ?? 'react'
   const examples = await findExamples(props)
 
-  return <CodeTabs examples={examples} defalutValue={framework} />
+  return <CodeTabs examples={examples} defaultValue={framework} />
 }
 
 const findExamples = async (props: Props) => {
@@ -25,10 +25,16 @@ const findExamples = async (props: Props) => {
   return Promise.all(
     ['react', 'solid', 'vue'].map(async (framework) => {
       const lang = framework === 'vue' ? 'vue' : 'tsx'
-      const filename = `${id}.${lang}`
+
+      const filename = component?.startsWith('progress')
+        ? `${component.split('-')[1]}/${id}.${lang}`
+        : `${id}.${lang}`
+
       const path = join(
         process.cwd(),
-        `../packages/${framework}/src/components/${component}/examples/${filename}`,
+        `../packages/${framework}/src/components/${
+          component?.startsWith('progress') ? 'progress' : component
+        }/examples/${filename}`,
       )
       const content = await readFile(path, 'utf-8').catch(() => 'Example not found')
 

website/src/components/install-cmd.tsx

@@ -5,7 +5,7 @@ import { CodeTabs } from './code-tabs'
 export const InstallCmd = async () => {
   const examples = await getInstallCmds()
 
-  return <CodeTabs examples={examples} defalutValue="npm" />
+  return <CodeTabs examples={examples} defaultValue="npm" />
 }
 
 type PackageManger = 'npm' | 'pnpm' | 'yarn' | 'bun'

website/src/content/pages/components/checkbox.mdx

@@ -54,7 +54,7 @@ For cases where you need more flexibility in rendering, the Checkbox component
 offers the use of a render prop. The render prop function gives you access to
 the checkbox's API, allowing you to customize the checkbox control's rendering:
 
-<Example id="renderProp" />
+<Example id="render-prop" />
 
 ## API Reference
 

website/src/content/pages/components/collapsible.mdx

@@ -42,27 +42,27 @@ the most basic example:
 
 You can listen for the `onExitComplete` event to know when the `Collapsible.Content` is no longer visible:
 
-<Example id="onExitComplete" />
+<Example id="on-exit-complete" />
 
 ### Lazy Mount
 
 To delay the mounting of the `Collapsible.Content`, use the `lazyMount` prop:
 
-<Example id="lazyMount" />
+<Example id="lazy-mount" />
 
 ### Unmount on Exit
 
 To remove the `Collapsible.Content` from the DOM when it is not visible, use the
 `unmountOnExit` prop:
 
-<Example id="unmountOnExit" />
+<Example id="unmount-on-exit" />
 
 ### Combining Lazy Mount and Unmount on Exit
 
 Both `lazyMount` and `unmountOnExit` can be combined to ensure that the component is
 mounted only when the `Collapsible` is expanded and unmounted when it is collapsed:
 
-<Example id="lazyMountAndUnmountOnExit" />
+<Example id="lazy-mount-and-unmount-on-exit" />
 
 ## API Reference
 

website/src/content/pages/components/dialog.mdx

@@ -41,14 +41,14 @@ In addition, the `unmountOnExit` prop can be used in conjunction with
 resources. The next time the dialog is activated, its content will be
 re-rendered.
 
-<Example id="lazyMount" />
+<Example id="lazy-mount" />
 
 ### Using Render Function
 
 The Dialog component supports the use of a render function as a child for more
 control. This allows access to dialog states like `isOpen`:
 
-<Example id="renderFn" />
+<Example id="render-fn" />
 
 ## API Reference
 

website/src/content/pages/components/editable.mdx

@@ -28,7 +28,7 @@ In some cases, you might need to use custom controls to toggle the edit and read
 mode. We use the render prop pattern to provide access to the internal state of
 the component.
 
-<Example id="customControls" />
+<Example id="custom-controls" />
 
 ### Auto-resizing the editable
 

website/src/content/pages/components/hover-card.mdx

@@ -42,7 +42,7 @@ The `HoverCard` component can also accept a render prop, giving the user more
 control over rendering behavior. This is useful for dynamically updating the
 trigger based on the state of the `HoverCard`:
 
-<Example id="renderProp" />
+<Example id="render-prop" />
 
 ## API Reference
 

website/src/content/pages/components/menu.mdx

@@ -71,7 +71,7 @@ To add a checkbox to a menu item, use the `Menu.Checkbox` component.
 
 To group radio option items, use the `Menu.RadioGroup` component.
 
-<Example id="radioGroup" />
+<Example id="radio-group" />
 
 ## API Reference
 

website/src/content/pages/components/number-input.mdx

@@ -28,15 +28,14 @@ Pass the `min` prop or `max` prop to set an upper and lower limit for the input.
 By default, the input will restrict the value to stay within the specified
 range.
 
-<Example id="minMax" />
-
+<Example id="min-max" />
 ### Adjusting the precision of the value
 
 In some cases, you might need the value to be rounded to specific decimal
 points. Set the `formatOptions` and provide `Intl.NumberFormatOptions` such as
 `maximumFractionDigits` or `minimumFractionDigits`.
 
-<Example id="fractionDigits" />
+<Example id="fraction-digits" />
 
 ### Scrubbing the input value
 
@@ -52,7 +51,7 @@ real cursor's pointer.
 The NumberInput exposes a way to increment/decrement the value using the mouse
 wheel event. To activate this, set the `allowMouseWheel` prop to `true`.
 
-<Example id="mouseWheel" />
+<Example id="mouse-wheel" />
 
 ### Clamp value when user blurs the input
 
@@ -62,13 +61,13 @@ of the input.
 
 To disable this behavior, pass `clampValueOnBlur` and set to `false`.
 
-<Example id="noClamp" />
+<Example id="no-clamp" />
 
 ### Usage within forms
 
 To use the number input within forms, set the `name` prop.
 
-<Example id="formUsage" />
+<Example id="form-usage" />
 
 ### Format and parse value
 

website/src/content/pages/components/pin-input.mdx

@@ -26,7 +26,7 @@ the most basic example:
 
 To set the initial value of the pin input, set the `defaultValue` prop.
 
-<Example id="initialValue" />
+<Example id="initial-value" />
 
 ### Changing the placeholder
 
@@ -49,15 +49,15 @@ To trigger smartphone OTP auto-suggestion, it is recommended to set the
 `autocomplete` attribute to "one-time-code". The pin input component provides
 support for this automatically when you set the `otp` prop to true.
 
-<Example id="oTPMode" />
+<Example id="otp-mode" />
 
 ### Securing the text input
 
 When collecting private or sensitive information using the pin input, you might
 need to mask the value entered, similar to `<input type="password"/>`. Pass the
 `mask` prop to `true`.
 
-<Example id="withMask" />
+<Example id="with-mask" />
 
 ### Listening for changes
 

website/src/content/pages/components/popover.mdx

@@ -43,7 +43,7 @@ To render an arrow within the popover, render the component `Popover.Arrow` and
 
 When the popover is opened or closed, we invoke the `onOpenChange` callback.
 
-<Example id="onOpenChange" />
+<Example id="on-open-change" />
 
 ### Control the open state
 
@@ -62,7 +62,7 @@ To prevent it from closing on blur (clicking or focusing outside), pass the
 To prevent it from closing when the <kbd>esc</kbd> key is pressed, pass the
 `closeOnEsc` prop and set it to `false`.
 
-<Example id="closeBehavior" />
+<Example id="close-behavior" />
 
 ### Changing the placement
 

website/src/content/pages/components/presence.mdx

@@ -19,21 +19,21 @@ no longer required.
 To delay the mounting of a child component until the `present` prop is set to
 true, use the `lazyMount` prop:
 
-<Example id="lazyMount" />
+<Example id="lazy-mount" />
 
 ### Unmount on Exit
 
 To remove the child component from the DOM when it's not present, use the
 `unmountOnExit` prop:
 
-<Example id="unmountOnExit" />
+<Example id="unmount-on-exit" />
 
 ### Combining Lazy Mount and Unmount on Exit
 
 Both `lazyMount` and `unmountOnExit` can be combined for a component to be
 mounted only when it's present and to be unmounted when it's no longer present:
 
-<Example id="lazyMountAndUnmountOnExit" />
+<Example id="lazy-mount-and-unmount-on-exit" />
 
 ## API Reference
 

website/src/content/pages/components/progress-circular.mdx

@@ -26,7 +26,7 @@ the most basic example:
 
 To set the progress's initial value, set the `defaultValue` prop to a number.
 
-<Example id="initialValue" />
+<Example id="initial-value" />
 
 ### Specifying the maximum
 
@@ -36,7 +36,7 @@ the same with the minimum value by setting the `min` prop.
 
 For example, to show the user a progress from `10` to `30`, you can use:
 
-<Example id="minMax" />
+<Example id="min-max" />
 
 ### Using the indeterminate state
 
@@ -53,7 +53,7 @@ Progress bars can only be interpreted by sighted users. To include a text
 description to support assistive technologies like screen readers, use the
 `value` part in `translations`.
 
-<Example id="valueText" />
+<Example id="value-text" />
 
 ## API Reference
 

website/src/content/pages/components/progress-linear.mdx

@@ -26,7 +26,7 @@ the most basic example:
 
 To set the progress's initial value, set the `defaultValue` prop to a number.
 
-<Example id="initialValue" />
+<Example id="initial-value" />
 
 ### Specifying the minimum and maximum
 
@@ -36,7 +36,7 @@ the same with the minimum value by setting the `min` prop.
 
 For example, to show the user a progress from `10` to `30`, you can use:
 
-<Example id="minMax" />
+<Example id="min-max" />
 
 ### Using the indeterminate state
 
@@ -53,7 +53,7 @@ Progress bars can only be interpreted by sighted users. To include a text
 description to support assistive technologies like screen readers, use the
 `value` part in `translations`.
 
-<Example id="valueText" />
+<Example id="value-text" />
 
 ### Changing the orientation
 

website/src/content/pages/components/radio-group.mdx

@@ -43,13 +43,13 @@ To make a radio group disabled, set the `disabled` prop to `true`.
 To set the radio group's initial value, set the `defaultValue` prop to the value
 of the radio item to be selected by default.
 
-<Example id="initialValue" />
+<Example id="initial-value" />
 
 ### Listening for changes
 
 When the radio group value changes, the `onValueChange` callback is invoked.
 
-<Example id="onEvent" />
+<Example id="on-event" />
 
 ## API Reference
 

website/src/content/pages/components/rating-group.mdx

@@ -28,11 +28,11 @@ Allow `0.5` value steps by setting the `allowHalf` prop to `true`. Ensure to
 render the correct icon if the `isHalf` value is set in the Rating components
 render callback.
 
-<Example id="halfRatings" />
+<Example id="half-ratings" />
 
 ### Using a default value
 
-<Example id="initialValue" />
+<Example id="initial-value" />
 
 ### Controlled
 
@@ -51,14 +51,14 @@ To make the rating group disabled, set the `disabled` prop to `true`.
 
 To make the rating group readonly, set the `readOnly` prop to `true`.
 
-<Example id="readOnly" />
+<Example id="read-only" />
 
 ### Usage within forms
 
 To use the rating group within forms, pass the prop `name`. It will render a
 hidden input and ensure the value changes get propagated to the form correctly.
 
-<Example id="formUsage" />
+<Example id="form-usage" />
 
 ## API Reference
 

website/src/content/pages/components/segment-group.mdx

@@ -26,7 +26,7 @@ at the most basic example:
 
 To set a default segment on initial render, use the `defaultValue` prop:
 
-<Example id="initialValue" />
+<Example id="initial-value" />
 
 ### Controlled Segment Group
 

website/src/content/pages/components/select.mdx

@@ -44,7 +44,7 @@ For scenarios where you want to control the Select component's state:
 
 See how to use the Select component with popular form libraries:
 
-<Example id="formLibrary" />
+<Example id="form-library" />
 
 ## TypeScript Caveats in Vue