Add the Placeholder component

src/components/Button/Button.tsx

@@ -39,6 +39,10 @@ interface IButtonProps<T> extends ButtonHTMLAttributes<HTMLButtonElement> {
    * As what the component should be rendered
    */
   as?: T;
+  /**
+   * Is the button a placeholder
+   */
+  placeholderWidth?: 0 | 1 | 2 | 3 | 4 | 5 | 25 | 50 | 75 | 100 | 'auto';
   /**
    * Button contents.
    */
@@ -65,10 +69,34 @@ export function Button<T extends ElementType>({
   href,
   className,
   as,
+  placeholderWidth,
   ...props
 }: ButtonProps<T>) {
   const Component = useMemo(() => (as ? as : (href ? 'a' : 'button')) as ElementType, [as, href]);
 
+  if (placeholderWidth) {
+    return (
+      <button
+        type="button"
+        className={clsx(
+          'btn',
+          'placeholder',
+          'disabled',
+          `w-${placeholderWidth}`,
+          `btn-${variant}`,
+          {
+            [`btn-${size}`]: size !== 'md',
+            [`${color}`]: variant === 'color' || variant === 'hover',
+            'btn-block': block,
+          },
+          className
+        )}
+        disabled
+        {...props}
+      />
+    );
+  }
+
   return (
     <Component
       type="button"

src/components/Placeholder/Placeholder.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+
+import { Dialog } from '@headlessui/react';
+
+import clsx from 'clsx';
+
+export interface PlaceholderProps {
+  /**
+   * Custom classes for the placeholder
+   */
+  className?: string;
+  /**
+   * The width of the placeholder
+   */
+  width?: 0 | 1 | 2 | 3 | 4 | 5 | 25 | 50 | 75 | 100 | 'auto';
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Placeholder = ({
+  width,
+  className
+}: PlaceholderProps) => {
+  return (
+    <span
+      className={clsx(
+        'placeholder',
+        'me-1',
+        `w-${width}`,
+        className
+      )}
+    />
+  );
+};
+
+export default Placeholder;

src/components/Placeholder/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Placeholder';
+export type { PlaceholderProps } from './Placeholder';

src/components/index.ts

@@ -148,6 +148,9 @@ export type { PivotPanelProps } from '@components/PivotPanel';
 export { default as PivotPanels } from '@components/PivotPanels';
 export type { PivotPanelsProps } from '@components/PivotPanels';
 
+export { default as Placeholder } from '@components/Placeholder';
+export type { PlaceholderProps } from '@components/Placeholder';
+
 export { default as Progress } from '@components/Progress';
 export type { ProgressProps } from '@components/Progress';
 

src/docs/App.tsx

@@ -28,6 +28,7 @@ import MenuDemo from './pages/Components/MenuDemo';
 import NavDemo from './pages/Components/NavDemo';
 import OffcanvasDemo from './pages/Components/OffcanvasDemo';
 import PivotDemo from './pages/Components/PivotDemo';
+import PlaceholderDemo from './pages/Components/PlaceholderDemo';
 import ProgressDemo from './pages/Components/ProgressDemo';
 import RadioDemo from './pages/Forms/RadioDemo';
 import RangeDemo from './pages/Forms/RangeDemo';
@@ -61,6 +62,7 @@ function App() {
         <Route path="/nav" element={<NavDemo />} />
         <Route path="/offcanvas" element={<OffcanvasDemo />} />
         <Route path="/pivot" element={<PivotDemo />} />
+        <Route path="/placeholder" element={<PlaceholderDemo />} />
         <Route path="/progress" element={<ProgressDemo />} />
         <Route path="/radio" element={<RadioDemo />} />
         <Route path="/range" element={<RangeDemo />} />

src/docs/components/Layout.tsx

@@ -56,6 +56,7 @@ export default function Layout({ children }) {
             <ListItem primary="Nav" onClick={() => navigate('/nav')} />
             <ListItem primary="Offcanvas" onClick={() => navigate('/offcanvas')} />
             <ListItem primary="Pivot" onClick={() => navigate('/pivot')} />
+            <ListItem primary="Placeholder" onClick={() => navigate('/placeholder')} />
             <ListItem primary="Progress" onClick={() => navigate('/progress')} />
             <ListItem primary="Toolbar" onClick={() => navigate('/toolbar')} />
           </List>

src/docs/pages/Components/DialogDemo.tsx

@@ -11,7 +11,7 @@ import {
   DialogHeader,
 } from "@components";
 
-export default function GridDemo() {
+export default function DialogDemo() {
   const [open, setOpen] = useState(false);
 
   return (

src/docs/pages/Components/DropdownDemo.tsx

@@ -1,5 +1,3 @@
-import { useState } from "react";
-
 import DemoBox from "@docs/components/DemoBox";
 
 import {
@@ -8,9 +6,7 @@ import {
   DropdownItem
 } from "@components";
 
-export default function GridDemo() {
-  const [open, setOpen] = useState(false);
-
+export default function DropdownDemo() {
   return (
     <>
       <h2>Dialog</h2>

src/docs/pages/Components/PlaceholderDemo.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+
+import DemoBox from "@docs/components/DemoBox";
+
+import {
+  Button,
+  Card,
+  CardBody,
+  CardTitle,
+  Grid,
+  Placeholder,
+} from "@components";
+
+export default function PlaceholderDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <h2>Placeholder</h2>
+      <DemoBox>
+        <Grid>
+          <Card className="me-2" aria-hidden="true" style={{ width: 240 }}>
+            <CardBody>
+              <CardTitle>
+                Hello card
+              </CardTitle>
+              <p>
+                What an <span className="text-accent">beautiful</span> day for a fully loaded card of content, isn't it?
+              </p>
+              <Button href="#" variant="primary">Get started</Button>
+            </CardBody>
+          </Card>
+          <Card className="me-2" aria-hidden="true" style={{ width: 240 }}>
+            <CardBody>
+              <CardTitle>
+                <Placeholder width={5} />
+              </CardTitle>
+              <p>
+                <Placeholder width={3} />
+                <span className="text-accent"><Placeholder width={4} /></span>
+                <Placeholder width={4} />
+                <Placeholder width={5} />
+                <Placeholder width={2} />
+              </p>
+              <Button href="#" variant="primary" placeholderWidth={5}>Get started</Button>
+            </CardBody>
+          </Card>
+        </Grid>
+      </DemoBox>
+    </>
+  );
+}

src/index.ts

@@ -148,6 +148,9 @@ export type { PivotPanelProps } from '@components/PivotPanel';
 export { default as PivotPanels } from '@components/PivotPanels';
 export type { PivotPanelsProps } from '@components/PivotPanels';
 
+export { default as Placeholder } from '@components/Placeholder';
+export type { PlaceholderProps } from '@components/Placeholder';
+
 export { default as Progress } from '@components/Progress';
 export type { ProgressProps } from '@components/Progress';