@cleen/ui 0.1.0 → 0.1.2

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

@@ -1,114 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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>
-    );
-  }
-);