Merge pull request #29 from ony3000/upgrade-linear-progress

feat(core): Add `component` and `slotProps` properties to the linear progress

apps/website/docs/apis/38-linear-progress.md

@@ -22,7 +22,7 @@ For examples and details on the usage of this React component, visit the compone
 
 ## Import
 
-```jsx
+```tsx
 import { LinearProgress } from 'tailwind-joy/components';
 ```
 
@@ -34,8 +34,11 @@ The `ref` is forwarded to the root element.
 
 :::
 
-By default, props available for HTML `<div>` are also available for LinearProgress component.
-Other props are as follows:
+### `className`
+
+Class name applied to the root element.
+
+- Type: `string`
 
 ### `color`
 
@@ -44,6 +47,15 @@ The color of the component.
 - Type: `'primary' | 'neutral' | 'danger' | 'success' | 'warning'`
 - Default: `'primary'`
 
+### `component`
+
+<AvailableFrom version="0.4.0" />
+
+The component used for the root node.
+
+- Type: `keyof JSX.IntrinsicElements`
+- Default: `'div'`
+
 ### `determinate`
 
 The boolean to select a variant.
@@ -59,6 +71,20 @@ The size of the component.
 - Type: `'sm' | 'md' | 'lg'`
 - Default: `'md'`
 
+### `slotProps`
+
+<AvailableFrom version="0.4.0" />
+
+The props used for each slot inside.
+
+- Type:
+  ```tsx
+  {
+    root?: ComponentProps<'div'>;
+  }
+  ```
+- Default: `{}`
+
 ### `thickness`
 
 The thickness of the bar.

apps/website/docs/components/03-feedback/03-linear-progress.mdx

@@ -3,6 +3,14 @@ sidebar_position: 3
 slug: /components/linear-progress
 ---
 
+import {
+  LinearProgressVariants,
+  LinearProgressSizes,
+  LinearProgressColors,
+  LinearProgressThickness,
+  LinearProgressDeterminate,
+} from '@site/src/demos/linear-progress';
+
 # Linear Progress
 
 <AvailableFrom version="0.2.0" />
@@ -11,7 +19,7 @@ Linear Progress indicators, commonly known as loaders, express an unspecified wa
 
 ## Basics
 
-```jsx
+```tsx
 import { LinearProgress } from 'tailwind-joy/components';
 ```
 
@@ -21,24 +29,9 @@ import { LinearProgress } from 'tailwind-joy/components';
 
 The Linear Progress component supports four variants: `solid`, `soft` (default), `outlined`, and `plain`.
 
-<!-- TODO: Replace Box with Stack. -->
-
-export function LinearProgressVariants() {
-  return (
-    <DisplayStand>
-      <Box className="w-full space-y-4">
-        <LinearProgress variant="solid" />
-        <LinearProgress variant="soft" />
-        <LinearProgress variant="outlined" />
-        <LinearProgress variant="plain" />
-      </Box>
-    </DisplayStand>
-  );
-}
-
 <LinearProgressVariants />
 
-```jsx
+```tsx
 import { Box, LinearProgress } from 'tailwind-joy/components';
 
 export function LinearProgressVariants() {
@@ -57,23 +50,9 @@ export function LinearProgressVariants() {
 
 The Linear Progress component supports three sizes: `sm`, `md` (default), and `lg`.
 
-<!-- TODO: Replace Box with Stack. -->
-
-export function LinearProgressSizes() {
-  return (
-    <DisplayStand>
-      <Box className="w-full space-y-4">
-        <LinearProgress size="sm" />
-        <LinearProgress size="md" />
-        <LinearProgress size="lg" />
-      </Box>
-    </DisplayStand>
-  );
-}
-
 <LinearProgressSizes />
 
-```jsx
+```tsx
 import { Box, LinearProgress } from 'tailwind-joy/components';
 
 export function LinearProgressSizes() {
@@ -91,25 +70,9 @@ export function LinearProgressSizes() {
 
 The Linear Progress component supports five colors: `primary` (default), `neutral`, `danger`, `success`, and `warning`.
 
-<!-- TODO: Replace Box with Stack. -->
-
-export function LinearProgressColors() {
-  return (
-    <DisplayStand>
-      <Box className="w-full space-y-4">
-        <LinearProgress color="primary" />
-        <LinearProgress color="neutral" />
-        <LinearProgress color="danger" />
-        <LinearProgress color="success" />
-        <LinearProgress color="warning" />
-      </Box>
-    </DisplayStand>
-  );
-}
-
 <LinearProgressColors />
 
-```jsx
+```tsx
 import { Box, LinearProgress } from 'tailwind-joy/components';
 
 export function LinearProgressColors() {
@@ -129,17 +92,9 @@ export function LinearProgressColors() {
 
 Provides a number to `thickness` prop to control the bar's stroke width.
 
-export function LinearProgressThickness() {
-  return (
-    <DisplayStand>
-      <LinearProgress thickness={1} />
-    </DisplayStand>
-  );
-}
-
 <LinearProgressThickness />
 
-```jsx
+```tsx
 import { LinearProgress } from 'tailwind-joy/components';
 
 export function LinearProgressThickness() {
@@ -151,24 +106,9 @@ export function LinearProgressThickness() {
 
 You can use the `determinate` prop if you want to indicate a specified wait time.
 
-<!-- TODO: Replace Box with Stack. -->
-
-export function LinearProgressDeterminate() {
-  return (
-    <DisplayStand>
-      <Box className="w-full space-y-4">
-        <LinearProgress determinate value={25} />
-        <LinearProgress determinate value={50} />
-        <LinearProgress determinate value={75} />
-        <LinearProgress determinate value={100} />
-      </Box>
-    </DisplayStand>
-  );
-}
-
 <LinearProgressDeterminate />
 
-```jsx
+```tsx
 import { Box, LinearProgress } from 'tailwind-joy/components';
 
 export function LinearProgressDeterminate() {

apps/website/src/demos/linear-progress/Colors.tsx

@@ -0,0 +1,17 @@
+import { Box, LinearProgress } from 'tailwind-joy/components';
+import { DisplayStand } from '@site/src/components/docs/DisplayStand';
+
+export function LinearProgressColors() {
+  return (
+    <DisplayStand>
+      {/* TODO: Replace Box with Stack. */}
+      <Box className="w-full space-y-4">
+        <LinearProgress color="primary" />
+        <LinearProgress color="neutral" />
+        <LinearProgress color="danger" />
+        <LinearProgress color="success" />
+        <LinearProgress color="warning" />
+      </Box>
+    </DisplayStand>
+  );
+}

apps/website/src/demos/linear-progress/Determinate.tsx

@@ -0,0 +1,16 @@
+import { Box, LinearProgress } from 'tailwind-joy/components';
+import { DisplayStand } from '@site/src/components/docs/DisplayStand';
+
+export function LinearProgressDeterminate() {
+  return (
+    <DisplayStand>
+      {/* TODO: Replace Box with Stack. */}
+      <Box className="w-full space-y-4">
+        <LinearProgress determinate value={25} />
+        <LinearProgress determinate value={50} />
+        <LinearProgress determinate value={75} />
+        <LinearProgress determinate value={100} />
+      </Box>
+    </DisplayStand>
+  );
+}

apps/website/src/demos/linear-progress/Sizes.tsx

@@ -0,0 +1,15 @@
+import { Box, LinearProgress } from 'tailwind-joy/components';
+import { DisplayStand } from '@site/src/components/docs/DisplayStand';
+
+export function LinearProgressSizes() {
+  return (
+    <DisplayStand>
+      {/* TODO: Replace Box with Stack. */}
+      <Box className="w-full space-y-4">
+        <LinearProgress size="sm" />
+        <LinearProgress size="md" />
+        <LinearProgress size="lg" />
+      </Box>
+    </DisplayStand>
+  );
+}

apps/website/src/demos/linear-progress/Thickness.tsx

@@ -0,0 +1,10 @@
+import { LinearProgress } from 'tailwind-joy/components';
+import { DisplayStand } from '@site/src/components/docs/DisplayStand';
+
+export function LinearProgressThickness() {
+  return (
+    <DisplayStand>
+      <LinearProgress thickness={1} />
+    </DisplayStand>
+  );
+}

apps/website/src/demos/linear-progress/Variants.tsx

@@ -0,0 +1,16 @@
+import { Box, LinearProgress } from 'tailwind-joy/components';
+import { DisplayStand } from '@site/src/components/docs/DisplayStand';
+
+export function LinearProgressVariants() {
+  return (
+    <DisplayStand>
+      {/* TODO: Replace Box with Stack. */}
+      <Box className="w-full space-y-4">
+        <LinearProgress variant="solid" />
+        <LinearProgress variant="soft" />
+        <LinearProgress variant="outlined" />
+        <LinearProgress variant="plain" />
+      </Box>
+    </DisplayStand>
+  );
+}

apps/website/src/demos/linear-progress/index.ts

@@ -0,0 +1,5 @@
+export { LinearProgressVariants } from './Variants';
+export { LinearProgressSizes } from './Sizes';
+export { LinearProgressColors } from './Colors';
+export { LinearProgressThickness } from './Thickness';
+export { LinearProgressDeterminate } from './Determinate';