@cleen/ui 0.1.0 → 0.1.1

package/src/components/stepper/Stepper.tsx

@@ -1,185 +0,0 @@
-import { cn } from '@cleen/ui-core';
-import type {
-  ComponentProps,
-  CSSProperties,
-  ForwardedRef,
-  ReactNode,
-} from 'react';
-import { forwardRef } from 'react';
-
-export interface Step {
-  title?: ReactNode;
-  subtitle?: ReactNode;
-}
-
-export interface StepperProps extends ComponentProps<'div'> {
-  steps?: Step[];
-  activeStep?: number;
-  orientation?: 'horizontal' | 'vertical';
-  color?: string;
-  classNames?: {
-    container?: string;
-    step?: string;
-    circle?: string;
-    connector?: string;
-    title?: string;
-    subtitle?: string;
-  };
-  styles?: {
-    container?: CSSProperties;
-    step?: CSSProperties;
-    circle?: CSSProperties;
-    connector?: CSSProperties;
-    title?: CSSProperties;
-    subtitle?: CSSProperties;
-  };
-}
-
-/**
- * Step-progress indicator rendered horizontally or vertically.
- *
- * - Pass `steps` as an array of `{ title?, subtitle? }` objects.
- * - Control the active step with `activeStep` (1-based index).
- * - Toggle layout with `orientation` (`horizontal` | `vertical`).
- * - Override the accent color with `color`.
- * - Accepts `classNames` and `styles` for keys: `container`, `step`, `circle`, `connector`, `title`, `subtitle`.
- */
-export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
-  (
-    {
-      steps,
-      activeStep = 0,
-      orientation = 'horizontal',
-      color = 'rgb(var(--cleen-primary))',
-      className,
-      classNames,
-      style,
-      styles,
-      ...props
-    },
-    ref: ForwardedRef<HTMLDivElement>
-  ) => {
-    const isVertical = orientation === 'vertical';
-
-    return (
-      <div
-        ref={ref}
-        className={cn('cleen', className)}
-        style={{ ...style, width: '100%' }}
-        {...props}
-      >
-        <div
-          className={cn(
-            'cleen-flex cleen-w-full',
-            isVertical
-              ? 'cleen-flex-col cleen-gap-6'
-              : 'cleen-flex-row cleen-items-start cleen-gap-8 cleen-justify-between',
-            classNames?.container
-          )}
-          style={{ width: '100%', ...styles?.container }}
-        >
-          {steps?.map((step, index) => {
-            const isCompleted = index + 1 < activeStep;
-            const isActive = index + 1 === activeStep;
-
-            return (
-              <div
-                key={index}
-                className={cn(
-                  'cleen-relative cleen-flex cleen-flex-1',
-                  isVertical
-                    ? 'cleen-flex-row cleen-items-start'
-                    : 'cleen-flex-col cleen-items-center cleen-text-center',
-                  classNames?.step
-                )}
-                style={styles?.step}
-              >
-                {index < steps?.length - 1 && (
-                  <div
-                    className={cn(
-                      'cleen-absolute cleen-bg-gray/10 cleen-transition-all cleen-duration-300',
-                      isVertical
-                        ? 'cleen-left-3 cleen-top-7 cleen-w-[2px] cleen-h-[calc(100%-4px)]'
-                        : 'cleen-top-3 cleen-left-[calc(50%+14px)] cleen-h-[2px] cleen-w-[calc(100%+4px)]',
-                      isCompleted && 'cleen-bg-primary',
-                      classNames?.connector
-                    )}
-                    style={{
-                      backgroundColor: isCompleted ? color : undefined,
-                      ...styles?.connector,
-                    }}
-                  />
-                )}
-                <div
-                  className={cn(
-                    'cleen-relative cleen-z-10 cleen-flex cleen-items-center cleen-justify-center cleen-rounded-full cleen-border cleen-transition-all cleen-duration-300',
-                    'cleen-size-7',
-                    isCompleted || isActive
-                      ? 'cleen-border-[2px]'
-                      : 'cleen-border-gray/30',
-                    classNames?.circle
-                  )}
-                  style={{
-                    borderColor: isActive || isCompleted ? color : undefined,
-                    backgroundColor: isCompleted ? color : 'transparent',
-                    ...styles?.circle,
-                  }}
-                >
-                  {isCompleted ? (
-                    <span className="cleen-text-white cleen-text-sm">✓</span>
-                  ) : (
-                    <span
-                      className={cn(
-                        'cleen-w-2 cleen-h-2 cleen-rounded-full',
-                        isActive ? 'cleen-bg-white' : 'cleen-bg-gray/30'
-                      )}
-                      style={{ backgroundColor: isActive ? color : undefined }}
-                    />
-                  )}
-                </div>
-                <div
-                  className={cn(
-                    'cleen-flex cleen-flex-col',
-                    isVertical ? 'cleen-ml-3' : 'cleen-mt-3 cleen-items-center'
-                  )}
-                >
-                  {step.title && (
-                    <div
-                      className={cn(
-                        'cleen-font-medium cleen-text-sm',
-                        isActive ? 'cleen-text-primary' : 'cleen-text-gray',
-                        classNames?.title
-                      )}
-                      style={{
-                        color: isActive ? color : undefined,
-                        ...styles?.title,
-                      }}
-                    >
-                      {step.title}
-                    </div>
-                  )}
-                  {step.subtitle && (
-                    <div
-                      className={cn(
-                        'cleen-text-xs cleen-text-gray/70',
-                        classNames?.subtitle
-                      )}
-                      style={{
-                        color: isActive ? color : undefined,
-                        ...styles?.subtitle,
-                      }}
-                    >
-                      {step.subtitle}
-                    </div>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-);
-
-Stepper.displayName = 'Stepper';

package/src/components/stepper/index.ts

@@ -1 +0,0 @@
-export { Stepper, type StepperProps } from './Stepper';

package/src/components/switch/Switch.tsx

@@ -1,152 +0,0 @@
-import {
-  InfoLabels,
-  type InfoLabelsProps,
-} from '@/components/infoLabels/InfoLabels';
-import { cn } from '@cleen/ui-core';
-import {
-  useEffect,
-  useState,
-  type ComponentProps,
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
-
-export type SwitchProps = Omit<
-  ComponentProps<'button'>,
-  'onChange' | 'title'
-> & {
-  checked?: boolean;
-  defaultChecked?: boolean;
-  title?: ReactNode;
-  label?: ReactNode;
-  sublabel?: ReactNode;
-  onChange?: (value: boolean) => void;
-  infoLabels?: InfoLabelsProps;
-  classNames?: {
-    container?: string;
-    title?: string;
-    switch?: string;
-    check?: string;
-  };
-  styles?: {
-    container?: CSSProperties;
-    title?: CSSProperties;
-    switch?: CSSProperties;
-    check?: CSSProperties;
-  };
-};
-
-/**
- * Toggle switch for boolean on/off input with optional title, label, sub-label, and info messages.
- *
- * - Supports controlled mode via `checked` + `onChange`, and uncontrolled via `defaultChecked`.
- * - Pass `title` for a heading row above the switch, `label` for primary text, and `sublabel` for secondary text beside it.
- * - Accepts `classNames` and `styles` for keys: `container`, `title`, `switch`, `check`.
- */
-export const Switch = ({
-  checked,
-  defaultChecked = false,
-  onChange,
-  title,
-  label,
-  sublabel,
-  disabled,
-  classNames,
-  className,
-  style,
-  styles,
-  infoLabels,
-  ...props
-}: SwitchProps) => {
-  const isControlled = typeof checked === 'boolean';
-  const [internalChecked, setInternalChecked] = useState(defaultChecked);
-
-  useEffect(() => {
-    if (!isControlled) {
-      setInternalChecked(defaultChecked);
-    }
-  }, [defaultChecked, isControlled]);
-
-  const currentChecked = isControlled ? checked! : internalChecked;
-
-  const handleClick = () => {
-    if (!disabled) {
-      if (!isControlled) {
-        setInternalChecked(!internalChecked);
-      }
-
-      onChange?.(!currentChecked);
-    }
-  };
-
-  return (
-    <div className={cn('cleen', className)} style={style}>
-      <div
-        className={cn(
-          'cleen-flex cleen-flex-col cleen-gap-2.5',
-          classNames?.container
-        )}
-        style={styles?.container}
-      >
-        {title && (
-          <label
-            className={cn(
-              'cleen-block cleen-mb-1.5 cleen-font-medium cleen-text-gray/90 cleen-text-sm cleen-leading-6',
-              classNames?.title
-            )}
-            style={styles?.title}
-          >
-            {title}
-          </label>
-        )}
-
-        <div className="cleen-flex cleen-items-center cleen-gap-2 cleen-w-full">
-          <button
-            type="button"
-            disabled={disabled}
-            onClick={handleClick}
-            className={cn(
-              'cleen-inline-flex cleen-relative cleen-flex-shrink-0 cleen-my-auto cleen-mb-auto cleen-border-2 cleen-border-transparent cleen-rounded-full cleen-w-11 cleen-h-6 cleen-transition-colors cleen-duration-200 cleen-ease-in-out cleen-cursor-pointer',
-              currentChecked
-                ? 'cleen-bg-primary hover:cleen-bg-primary/90'
-                : 'cleen-bg-gray/20 hover:cleen-bg-gray/30',
-              classNames?.switch
-            )}
-            style={styles?.switch}
-            {...props}
-          >
-            <span
-              aria-hidden="true"
-              className={cn(
-                'cleen-inline-block cleen-bg-white cleen-shadow cleen-rounded-full cleen-ring-0 cleen-w-5 cleen-h-5 cleen-transition cleen-duration-200 cleen-ease-in-out cleen-pointer-events-none cleen-transform',
-                currentChecked ? 'cleen-translate-x-5' : 'cleen-translate-x-0',
-                classNames?.check
-              )}
-              style={styles?.check}
-            />
-          </button>
-
-          {(label || sublabel) && (
-            <div className="cleen-flex cleen-flex-col cleen-text-sm">
-              {label && (
-                <span className="cleen-font-semibold cleen-text-gray/90">
-                  {label}
-                </span>
-              )}
-
-              {sublabel && (
-                <span className="cleen-font-normal cleen-text-gray/80">
-                  {sublabel}
-                </span>
-              )}
-            </div>
-          )}
-        </div>
-
-        {(infoLabels?.errorMessage ||
-          infoLabels?.infoMessage ||
-          infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
-      </div>
-    </div>
-  );
-};

package/src/components/switch/index.ts

@@ -1 +0,0 @@
-export { Switch, type SwitchProps } from './Switch';

package/src/components/tabs/Tabs.tsx

@@ -1,140 +0,0 @@
-import { PillBadge } from '@/components/pillBadge';
-import { cn } from '@cleen/ui-core';
-import { forwardRef, useMemo, useState, type ComponentProps } from 'react';
-import type { Tab, TabsClassNames, TabsStyles } from './types/tab';
-import { directions, variants, type Direction, type Variant } from './variants';
-
-export type TabsProps = ComponentProps<'div'> & {
-  tabs?: Tab[];
-  currentTabIndex?: number;
-  onTabChange?: (index: number, tab?: Tab) => void;
-  variant?: Variant;
-  direction?: Direction;
-  classNames?: TabsClassNames;
-  styles?: TabsStyles;
-};
-
-/**
- * The `Tabs` component displays a set of selectable tabs, allowing users to switch between different views or content sections within an application.
- * It supports controlled and uncontrolled modes, custom styling, and optional tab counts.
- */
-export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  {
-    tabs,
-    variant = 'underlined',
-    direction = 'horizontal',
-    currentTabIndex,
-    onTabChange,
-    className,
-    classNames,
-    style,
-    styles,
-    ...props
-  },
-  ref
-) {
-  const [internalCurrentTabIndex, setInternalCurrentTabIndex] = useState(0);
-  const isControlled = currentTabIndex !== undefined;
-  const finalTabIndex = isControlled
-    ? currentTabIndex
-    : internalCurrentTabIndex;
-
-  const currentTab = useMemo(
-    () => tabs?.[finalTabIndex],
-    [tabs, finalTabIndex]
-  );
-
-  const handleTabClick = (index: number, tab: Tab) => {
-    setInternalCurrentTabIndex(index);
-
-    onTabChange?.(index, tab);
-  };
-
-  const variantClasses = useMemo(() => variants(direction), [direction]);
-
-  return (
-    <div className={cn('cleen', className)} style={style} ref={ref} {...props}>
-      <div
-        className={cn(directions[direction].container, classNames?.container)}
-        style={styles?.container}
-      >
-        <nav
-          className={cn(
-            variantClasses[variant].list,
-            directions[direction].list,
-            classNames?.list
-          )}
-          aria-label="Tabs"
-          style={styles?.list}
-        >
-          {tabs?.map((tab, index) => {
-            const isSelected = finalTabIndex === index;
-            const isDisabled = tab?.isDisabled;
-
-            return (
-              <span
-                key={tab?.id || index}
-                onClick={() => !isDisabled && handleTabClick(index, tab)}
-                className={cn(
-                  'cleen-flex cleen-items-center cleen-gap-2 cleen-whitespace-nowrap',
-                  !isDisabled && 'cleen-cursor-pointer',
-                  variantClasses[variant].tab,
-                  directions[direction].tab,
-                  classNames?.tab,
-                  isDisabled
-                    ? cn(
-                        variantClasses[variant].tabDisabled,
-                        classNames?.tabDisabled
-                      )
-                    : isSelected
-                      ? cn(
-                          variantClasses[variant].tabActive,
-                          classNames?.tabActive
-                        )
-                      : cn(
-                          variantClasses[variant].tabInactive,
-                          classNames?.tabInactive
-                        )
-                )}
-                style={{
-                  ...styles?.tab,
-                  ...(isDisabled
-                    ? styles?.tabDisabled
-                    : isSelected
-                      ? styles?.tabActive
-                      : styles?.tabInactive),
-                }}
-                aria-current={isSelected ? 'page' : undefined}
-                aria-disabled={isDisabled}
-              >
-                {tab?.label}
-                {!!tab?.badge?.label && (
-                  <PillBadge
-                    variant="rounded"
-                    color={isSelected ? 'blue' : 'gray'}
-                    {...classNames?.count}
-                    {...styles?.count}
-                    {...tab.badge}
-                  />
-                )}
-              </span>
-            );
-          })}
-        </nav>
-
-        {!!currentTab?.content && (
-          <div
-            className={cn(
-              'h-full',
-              directions[direction].content,
-              classNames?.content
-            )}
-            style={styles?.content}
-          >
-            {currentTab?.content}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});

package/src/components/tabs/index.ts

@@ -1,2 +0,0 @@
-export { Tabs, type TabsProps } from './Tabs';
-export type { Tab } from './types/tab';

package/src/components/tabs/types/tab.ts

@@ -1,33 +0,0 @@
-import type { PillBadgeProps } from '@/components/pillBadge/PillBadge';
-import type { ComponentClassnames, ComponentStyles } from '@cleen/ui-core';
-import type { CSSProperties, ReactNode } from 'react';
-
-export interface Tab {
-  id?: string;
-  label?: ReactNode;
-  badge?: PillBadgeProps;
-  content?: ReactNode;
-  isDisabled?: boolean;
-}
-
-export interface TabsClassNames {
-  container?: string;
-  list?: string;
-  tab?: string;
-  tabActive?: string;
-  tabInactive?: string;
-  tabDisabled?: string;
-  count?: ComponentClassnames<PillBadgeProps>;
-  content?: string;
-}
-
-export interface TabsStyles {
-  container?: CSSProperties;
-  list?: CSSProperties;
-  tab?: CSSProperties;
-  tabActive?: CSSProperties;
-  tabInactive?: CSSProperties;
-  tabDisabled?: CSSProperties;
-  count?: ComponentStyles<PillBadgeProps>;
-  content?: CSSProperties;
-}

package/src/components/tabs/variants.ts

@@ -1,49 +0,0 @@
-import type { TabsClassNames } from '@/components/tabs/types/tab';
-import { cn } from '@cleen/ui-core';
-
-export type Direction = 'horizontal' | 'vertical';
-export type Variant = 'underlined' | 'padded';
-
-export const directions: Record<Direction, TabsClassNames> = {
-  horizontal: {
-    list: 'cleen-flex cleen-flex-wrap cleen-mb-4',
-  },
-  vertical: {
-    container: 'cleen-flex cleen-gap-4',
-    list: 'cleen-flex cleen-flex-col',
-    content: 'cleen-flex-1',
-  },
-};
-
-export const variants: (
-  direction: keyof typeof directions
-) => Record<Variant, TabsClassNames> = direction => {
-  const isVertical = direction === 'vertical';
-
-  return {
-    underlined: {
-      list: cn(
-        'cleen-gap-2 cleen-border-gray/10',
-        !isVertical && 'cleen-border-b'
-      ),
-      tab: cn(
-        'cleen-px-1 cleen-font-semibold cleen-text-sm cleen-transition-all cleen-duration-200',
-        isVertical
-          ? 'cleen-border-l-2 cleen-pl-3 cleen-py-1.5'
-          : 'cleen-border-b-2 cleen-pb-3'
-      ),
-      tabActive: 'cleen-border-primary cleen-text-primary',
-      tabInactive:
-        'cleen-border-transparent cleen-text-gray/70 hover:cleen-border-gray/10',
-      tabDisabled:
-        'cleen-border-transparent cleen-text-gray/40 cleen-cursor-not-allowed',
-    },
-    padded: {
-      list: 'cleen-gap-1',
-      tab: 'cleen-px-3 cleen-py-2.5 cleen-rounded-md cleen-font-semibold cleen-text-sm cleen-transition-all cleen-duration-200',
-      tabActive: 'cleen-bg-primary/10 cleen-text-primary',
-      tabInactive: 'cleen-text-gray/70 hover:cleen-bg-gray/10',
-      tabDisabled: 'cleen-text-gray/40 cleen-cursor-not-allowed',
-    },
-  };
-};