@cleen/ui 0.1.0

package/src/components/stepper/Stepper.tsx

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

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

package/src/components/switch/Switch.tsx

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

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

package/src/components/tabs/Tabs.tsx

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

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

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

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

@@ -0,0 +1,49 @@
+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',
+    },
+  };
+};