@cleen/ui 0.1.0

package/src/components/skeletons/blocks/SkeletonChart.tsx

@@ -0,0 +1,114 @@
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+// Chart scaffold: axes + a row of bars of natural-looking heights
+const barHeights = [
+  'cleen-h-16',
+  'cleen-h-24',
+  'cleen-h-14',
+  'cleen-h-28',
+  'cleen-h-20',
+  'cleen-h-10',
+  'cleen-h-24',
+];
+
+export const SkeletonChart = forwardRef<HTMLDivElement, SkeletonComponentProps>(
+  function SkeletonChart({ className, style, variant = 'default' }, ref) {
+    const pulseClass = getPulseAnimationClass(variant);
+
+    return (
+      <div ref={ref} className={cn('cleen', className)} style={style}>
+        <div className="cleen-flex cleen-flex-col cleen-gap-3 cleen-bg-white cleen-border cleen-border-gray/15 cleen-rounded-xl cleen-px-4 cleen-pt-4 cleen-pb-3 cleen-w-full">
+          {/* Chart title + legend line */}
+          <div className="cleen-flex cleen-justify-between cleen-items-center">
+            <div
+              className={cn(
+                'cleen-bg-gray/10 cleen-rounded cleen-w-32 cleen-h-5',
+                pulseClass
+              )}
+            />
+            <div className="cleen-flex cleen-items-center cleen-gap-3">
+              {[28, 20].map((w, i) => (
+                <div
+                  key={i}
+                  className="cleen-flex cleen-items-center cleen-gap-1.5"
+                >
+                  <div
+                    className={cn(
+                      'cleen-bg-gray/10 cleen-rounded-full cleen-size-2.5',
+                      pulseClass
+                    )}
+                  />
+                  <div
+                    className={cn(
+                      'cleen-bg-gray/10 cleen-rounded cleen-h-3',
+                      pulseClass
+                    )}
+                    style={{ width: w }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Y-axis labels + bars area */}
+          <div className="cleen-flex cleen-gap-3">
+            {/* Y-axis ticks */}
+            <div
+              className="cleen-flex cleen-flex-col cleen-justify-between cleen-items-end cleen-py-1"
+              style={{ height: 120 }}
+            >
+              {[0, 1, 2, 3].map(i => (
+                <div
+                  key={i}
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-w-6 cleen-h-2',
+                    pulseClass
+                  )}
+                />
+              ))}
+            </div>
+
+            {/* Bars + x-axis labels */}
+            <div className="cleen-flex cleen-flex-col cleen-flex-1 cleen-gap-1">
+              {/* Bar area */}
+              <div
+                className="cleen-flex cleen-items-end cleen-justify-around cleen-gap-2"
+                style={{ height: 112 }}
+              >
+                {barHeights.map((h, i) => (
+                  <div
+                    key={i}
+                    className={cn(
+                      'cleen-bg-gray/10 cleen-rounded-t cleen-flex-1',
+                      h,
+                      pulseClass
+                    )}
+                  />
+                ))}
+              </div>
+
+              {/* X-axis baseline */}
+              <div className="cleen-w-full cleen-h-px cleen-bg-gray/15" />
+
+              {/* X-axis labels */}
+              <div className="cleen-flex cleen-justify-around cleen-gap-2 cleen-pt-1">
+                {barHeights.map((_, i) => (
+                  <div
+                    key={i}
+                    className={cn(
+                      'cleen-bg-gray/10 cleen-rounded cleen-flex-1 cleen-h-2',
+                      pulseClass
+                    )}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/skeletons/blocks/SkeletonContentCard.tsx

@@ -0,0 +1,75 @@
+import { Card } from '@/components/card';
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+export const SkeletonContentCard = forwardRef<
+  HTMLDivElement,
+  SkeletonComponentProps
+>(({ variant = 'default', itemCount = 3, className, style }, ref) => {
+  const pulseClass = getPulseAnimationClass(variant);
+
+  return (
+    <div ref={ref} className={cn('cleen', className)} style={style}>
+      <Card className="cleen-max-h-fit">
+        <div className="cleen-flex cleen-flex-col cleen-gap-4">
+          {/* Step Title */}
+          <div className="cleen-flex cleen-flex-col cleen-gap-2">
+            <div
+              className={cn(
+                'cleen-bg-gray/10 cleen-rounded cleen-w-3/4 cleen-h-6',
+                pulseClass
+              )}
+            />
+            <div
+              className={cn(
+                'cleen-bg-gray/10 cleen-rounded cleen-w-full cleen-h-4',
+                pulseClass
+              )}
+            />
+          </div>
+
+          {/* Questions */}
+          <div className="cleen-space-y-6">
+            {Array.from({ length: itemCount }).map((_, index) => (
+              <div key={index} className="cleen-space-y-3">
+                {/* Question Label */}
+                <div
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-w-2/3 cleen-h-4',
+                    pulseClass
+                  )}
+                />
+
+                {/* Input Field */}
+                <div
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-w-full cleen-h-10',
+                    pulseClass
+                  )}
+                />
+              </div>
+            ))}
+          </div>
+
+          {/* Pagination */}
+          <div className="cleen-flex cleen-justify-between cleen-items-center cleen-pt-4">
+            <div
+              className={cn(
+                'cleen-bg-gray/10 cleen-rounded cleen-w-24 cleen-h-10',
+                pulseClass
+              )}
+            />
+            <div
+              className={cn(
+                'cleen-bg-gray/10 cleen-rounded cleen-w-24 cleen-h-10',
+                pulseClass
+              )}
+            />
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+});

package/src/components/skeletons/blocks/SkeletonDataGrid.tsx

@@ -0,0 +1,73 @@
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+// Tabular data grid with a header row + itemCount body rows
+export const SkeletonDataGrid = forwardRef<
+  HTMLDivElement,
+  SkeletonComponentProps
+>(function SkeletonDataGrid(
+  { className, style, variant = 'default', itemCount = 5 },
+  ref
+) {
+  const pulseClass = getPulseAnimationClass(variant);
+
+  // Column widths to give the grid some visual personality
+  const colWidths = [
+    'cleen-w-1/12',
+    'cleen-w-3/12',
+    'cleen-w-2/12',
+    'cleen-w-3/12',
+    'cleen-w-2/12',
+    'cleen-w-1/12',
+  ];
+
+  return (
+    <div ref={ref} className={cn('cleen', className)} style={style}>
+      <div className="cleen-flex cleen-flex-col cleen-w-full cleen-border cleen-border-gray/15 cleen-rounded-xl cleen-overflow-hidden">
+        {/* Header row */}
+        <div className="cleen-flex cleen-items-center cleen-gap-3 cleen-px-4 cleen-py-3 cleen-bg-gray/5 cleen-border-b cleen-border-gray/15">
+          {colWidths.map((w, i) => (
+            <div
+              key={i}
+              className={cn(
+                'cleen-bg-gray/15 cleen-rounded cleen-h-4 cleen-flex-shrink-0',
+                w,
+                pulseClass
+              )}
+            />
+          ))}
+        </div>
+
+        {/* Body rows */}
+        {Array.from({ length: itemCount }).map((_, rowIndex) => (
+          <div
+            key={rowIndex}
+            className={cn(
+              'cleen-flex cleen-items-center cleen-gap-3 cleen-px-4 cleen-py-3',
+              rowIndex < itemCount - 1
+                ? 'cleen-border-b cleen-border-gray/10'
+                : ''
+            )}
+          >
+            {colWidths.map((w, colIndex) => (
+              <div
+                key={colIndex}
+                className={cn(
+                  'cleen-bg-gray/10 cleen-rounded cleen-h-4 cleen-flex-shrink-0',
+                  // last column is typically an action - give it a rounder shape
+                  colIndex === colWidths.length - 1
+                    ? 'cleen-rounded-full'
+                    : 'cleen-rounded',
+                  w,
+                  pulseClass
+                )}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

package/src/components/skeletons/blocks/SkeletonForm.tsx

@@ -0,0 +1,50 @@
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+// Form with label + input pairs + a submit button at the bottom
+export const SkeletonForm = forwardRef<HTMLDivElement, SkeletonComponentProps>(
+  function SkeletonForm(
+    { className, style, variant = 'default', itemCount = 4 },
+    ref
+  ) {
+    const pulseClass = getPulseAnimationClass(variant);
+
+    return (
+      <div ref={ref} className={cn('cleen', className)} style={style}>
+        <div className="cleen-flex cleen-flex-col cleen-gap-5 cleen-w-full cleen-bg-white cleen-border cleen-border-gray/15 cleen-rounded-xl cleen-px-6 cleen-py-6">
+          {/* Form fields */}
+          {Array.from({ length: itemCount }).map((_, index) => (
+            <div key={index} className="cleen-flex cleen-flex-col cleen-gap-2">
+              {/* Label */}
+              <div
+                className={cn(
+                  'cleen-bg-gray/10 cleen-rounded cleen-w-1/4 cleen-h-3',
+                  pulseClass
+                )}
+              />
+              {/* Input */}
+              <div
+                className={cn(
+                  'cleen-bg-gray/10 cleen-rounded-lg cleen-w-full cleen-h-10',
+                  pulseClass
+                )}
+              />
+            </div>
+          ))}
+
+          {/* Submit button */}
+          <div className="cleen-flex cleen-justify-end cleen-pt-1">
+            <div
+              className={cn(
+                'cleen-bg-gray/10 cleen-rounded-lg cleen-w-28 cleen-h-10',
+                pulseClass
+              )}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/skeletons/blocks/SkeletonImage.tsx

@@ -0,0 +1,45 @@
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+// Plain image placeholder with optional caption; defaults to 16:9 vibe
+export const SkeletonImage = forwardRef<HTMLDivElement, SkeletonComponentProps>(
+  function SkeletonImage({ className, style, variant = 'default' }, ref) {
+    const pulseClass = getPulseAnimationClass(variant);
+
+    return (
+      <div ref={ref} className={cn('cleen', className)} style={style}>
+        <div className="cleen-flex cleen-flex-col cleen-gap-2 cleen-w-full">
+          {/* Image box ~16:9 */}
+          <div
+            className={cn(
+              'cleen-relative cleen-bg-gray/10 cleen-rounded-xl cleen-w-full cleen-aspect-video cleen-overflow-hidden',
+              pulseClass
+            )}
+          >
+            {/* Subtle landscape icon hint */}
+            <div className="cleen-absolute cleen-inset-0 cleen-flex cleen-items-center cleen-justify-center">
+              <div
+                className={cn(
+                  'cleen-flex cleen-flex-col cleen-items-center cleen-gap-1 cleen-opacity-30'
+                )}
+              >
+                <div className="cleen-bg-gray/30 cleen-rounded-full cleen-size-8" />
+                <div className="cleen-bg-gray/30 cleen-rounded cleen-w-16 cleen-h-2" />
+              </div>
+            </div>
+          </div>
+
+          {/* Caption line */}
+          <div
+            className={cn(
+              'cleen-bg-gray/10 cleen-rounded cleen-w-1/2 cleen-h-3 cleen-mx-auto',
+              pulseClass
+            )}
+          />
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/skeletons/blocks/SkeletonInfoCard.tsx

@@ -0,0 +1,130 @@
+import { Card } from '@/components/card';
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+export const SkeletonInfoCard = forwardRef<
+  HTMLDivElement,
+  SkeletonComponentProps
+>(function SkeletonInfoCard({ className, style, variant = 'default' }, ref) {
+  const pulseClass = getPulseAnimationClass(variant);
+
+  return (
+    <div ref={ref} className={cn('cleen', className)} style={style}>
+      <div
+        className={cn(
+          'cleen-flex cleen-flex-col cleen-items-start cleen-gap-4 cleen-bg-white cleen-px-4 cleen-py-4 cleen-border cleen-border-gray/15 cleen-rounded-xl cleen-h-fit',
+          className
+        )}
+        style={style}
+      >
+        {/* Tag Section */}
+        <div className="cleen-flex cleen-items-center cleen-gap-2">
+          <div
+            className={cn(
+              'cleen-flex cleen-justify-center cleen-items-center cleen-bg-gray/10 cleen-p-2 cleen-rounded-full cleen-size-8',
+              pulseClass
+            )}
+          />
+          <div
+            className={cn(
+              'cleen-bg-gray/10 cleen-rounded cleen-w-24 cleen-h-3',
+              pulseClass
+            )}
+          />
+        </div>
+
+        <div className="cleen-space-y-3 cleen-w-full">
+          {/* Guidance Section */}
+          <div>
+            <div
+              className={cn(
+                'cleen-bg-gray/10 cleen-mb-1 cleen-rounded cleen-w-20 cleen-h-3',
+                pulseClass
+              )}
+            />
+            <Card
+              isGlass
+              classNames={{
+                container: '!cleen-py-3',
+                childrenContainer: '!cleen-px-3',
+              }}
+            >
+              <div className="cleen-space-y-2">
+                <div
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-w-full cleen-h-3',
+                    pulseClass
+                  )}
+                />
+                <div
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-w-5/6 cleen-h-3',
+                    pulseClass
+                  )}
+                />
+              </div>
+            </Card>
+          </div>
+
+          {/* Resources Section */}
+          <div>
+            <div
+              className={cn(
+                'cleen-bg-gray/10 cleen-mb-1 cleen-rounded cleen-w-20 cleen-h-3',
+                pulseClass
+              )}
+            />
+            <div className="cleen-space-y-2">
+              <div
+                className={cn(
+                  'cleen-bg-gray/10 cleen-rounded cleen-w-3/4 cleen-h-3',
+                  pulseClass
+                )}
+              />
+              <div
+                className={cn(
+                  'cleen-bg-gray/10 cleen-rounded cleen-w-2/3 cleen-h-3',
+                  pulseClass
+                )}
+              />
+            </div>
+          </div>
+
+          {/* Stuck Section */}
+          <div>
+            <div
+              className={cn(
+                'cleen-bg-gray/10 cleen-mb-1 cleen-rounded cleen-w-20 cleen-h-3',
+                pulseClass
+              )}
+            />
+            <Card
+              isGlass
+              classNames={{
+                container: '!cleen-py-3',
+                childrenContainer: '!cleen-px-3',
+              }}
+            >
+              <div className="cleen-space-y-2">
+                <div
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-w-full cleen-h-3',
+                    pulseClass
+                  )}
+                />
+                <div
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-w-4/5 cleen-h-3',
+                    pulseClass
+                  )}
+                />
+              </div>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/components/skeletons/blocks/SkeletonInput.tsx

@@ -0,0 +1,32 @@
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+// Text input placeholder with optional label above
+export const SkeletonInput = forwardRef<HTMLDivElement, SkeletonComponentProps>(
+  function SkeletonInput({ className, style, variant = 'default' }, ref) {
+    const pulseClass = getPulseAnimationClass(variant);
+
+    return (
+      <div ref={ref} className={cn('cleen', className)} style={style}>
+        <div className="cleen-flex cleen-flex-col cleen-gap-2 cleen-w-full">
+          {/* Label */}
+          <div
+            className={cn(
+              'cleen-bg-gray/10 cleen-rounded cleen-w-1/4 cleen-h-3',
+              pulseClass
+            )}
+          />
+          {/* Input field */}
+          <div
+            className={cn(
+              'cleen-bg-gray/10 cleen-rounded-lg cleen-w-full cleen-h-10 cleen-border cleen-border-gray/10',
+              pulseClass
+            )}
+          />
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/skeletons/blocks/SkeletonList.tsx

@@ -0,0 +1,67 @@
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+// List of icon + text rows
+export const SkeletonList = forwardRef<HTMLDivElement, SkeletonComponentProps>(
+  function SkeletonList(
+    { className, style, variant = 'default', itemCount = 5 },
+    ref
+  ) {
+    const pulseClass = getPulseAnimationClass(variant);
+
+    // Alternate text widths so it doesn't look like a brick wall
+    const textWidths = [
+      'cleen-w-3/4',
+      'cleen-w-2/3',
+      'cleen-w-4/5',
+      'cleen-w-1/2',
+      'cleen-w-3/5',
+    ];
+
+    return (
+      <div ref={ref} className={cn('cleen', className)} style={style}>
+        <div className="cleen-flex cleen-flex-col cleen-divide-y cleen-divide-gray/10">
+          {Array.from({ length: itemCount }).map((_, index) => (
+            <div
+              key={index}
+              className="cleen-flex cleen-items-center cleen-gap-3 cleen-py-3"
+            >
+              {/* Icon circle */}
+              <div
+                className={cn(
+                  'cleen-bg-gray/10 cleen-rounded-full cleen-size-8 cleen-shrink-0 cleen-border cleen-border-gray/15',
+                  pulseClass
+                )}
+              />
+              {/* Text content */}
+              <div className="cleen-flex cleen-flex-col cleen-flex-1 cleen-gap-1.5">
+                <div
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-h-4',
+                    textWidths[index % textWidths.length],
+                    pulseClass
+                  )}
+                />
+                <div
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-h-3 cleen-w-2/5',
+                    pulseClass
+                  )}
+                />
+              </div>
+              {/* Trailing badge/action */}
+              <div
+                className={cn(
+                  'cleen-bg-gray/10 cleen-rounded-full cleen-w-14 cleen-h-5 cleen-shrink-0',
+                  pulseClass
+                )}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/skeletons/blocks/SkeletonParagraph.tsx

@@ -0,0 +1,52 @@
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+// Classic paragraph - staggered lines, last one is shorter because that's life
+const lineWidths = [
+  'cleen-w-full',
+  'cleen-w-full',
+  'cleen-w-11/12',
+  'cleen-w-full',
+  'cleen-w-4/5',
+];
+
+export const SkeletonParagraph = forwardRef<
+  HTMLDivElement,
+  SkeletonComponentProps
+>(function SkeletonParagraph(
+  { className, style, variant = 'default', itemCount },
+  ref
+) {
+  const pulseClass = getPulseAnimationClass(variant);
+  // itemCount overrides the default 5 lines
+  const count = itemCount ?? lineWidths.length;
+
+  return (
+    <div ref={ref} className={cn('cleen', className)} style={style}>
+      <div className="cleen-flex cleen-flex-col cleen-gap-2 cleen-w-full">
+        {Array.from({ length: count }).map((_, index) => {
+          // recycle pattern when itemCount > preset widths, narrow the last line
+          const w =
+            index < lineWidths.length
+              ? lineWidths[index]
+              : index === count - 1
+                ? 'cleen-w-3/5'
+                : 'cleen-w-full';
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                'cleen-bg-gray/10 cleen-rounded cleen-h-3',
+                w,
+                pulseClass
+              )}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+});

package/src/components/skeletons/blocks/SkeletonText.tsx

@@ -0,0 +1,22 @@
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+// Single text line placeholder - the lego brick of skeleton building
+export const SkeletonText = forwardRef<HTMLDivElement, SkeletonComponentProps>(
+  function SkeletonText({ className, style, variant = 'default' }, ref) {
+    const pulseClass = getPulseAnimationClass(variant);
+
+    return (
+      <div ref={ref} className={cn('cleen', className)} style={style}>
+        <div
+          className={cn(
+            'cleen-bg-gray/10 cleen-rounded cleen-w-3/4 cleen-h-4',
+            pulseClass
+          )}
+        />
+      </div>
+    );
+  }
+);