@cleen/ui 0.1.0

package/src/components/groupSelector/index.ts

@@ -0,0 +1,6 @@
+export {
+  GroupSelector,
+  type GroupSelectorProps,
+  type GroupSelectorSaveResult,
+  type GroupSelectorThreeDotOption,
+} from './GroupSelector';

package/src/components/index.ts

@@ -0,0 +1,44 @@
+export * from './advancedProgressBar';
+export * from './audioPlayback';
+export * from './audioRecorder';
+export * from './avatar';
+export * from './avatarRow';
+export * from './breadcrumb';
+export * from './button';
+export * from './card';
+export * from './checkbox';
+export * from './checkboxGroup';
+export * from './cleenIcon';
+export * from './collapsible';
+export * from './creditCardInput';
+export * from './datePicker';
+export * from './divider';
+export * from './drawer';
+export * from './dropdown';
+export * from './filterDrawer';
+export * from './formGroup';
+export * from './groupSelector';
+export * from './infoLabels';
+export * from './input';
+export * from './loader';
+export * from './lookup';
+export * from './menu';
+export * from './modal';
+export * from './notification';
+export * from './pagination';
+export * from './pillBadge';
+export * from './popover';
+export * from './progressBar';
+export * from './progressCircle';
+export * from './radioBoxGroup';
+export * from './radioButtonGroup';
+export * from './rangeSlider';
+export * from './select';
+export * from './sidebar';
+export * from './skeletons';
+export * from './slider';
+export * from './stepper';
+export * from './switch';
+export * from './tabs';
+export * from './textArea';
+export * from './tooltip';

package/src/components/infoLabels/InfoLabels.tsx

@@ -0,0 +1,88 @@
+import { cn } from '@cleen/ui-core';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
+
+export interface InfoLabelsProps extends ComponentProps<'div'> {
+  infoMessage?: ReactNode;
+  errorMessage?: ReactNode;
+  subtitle?: ReactNode;
+  classNames?: {
+    container?: string;
+    infoMessage?: string;
+    errorMessage?: string;
+    subtitle?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+    infoMessage?: CSSProperties;
+    errorMessage?: CSSProperties;
+    subtitle?: CSSProperties;
+  };
+}
+
+/**
+ * The `InfoLabels` component renders up to three contextual text messages beneath a form field.
+ *
+ * - `infoMessage` is displayed in primary color as an informational hint.
+ * - `errorMessage` is displayed in error color with `role="alert"` for accessibility.
+ * - `subtitle` is displayed in muted gray as a secondary description.
+ * - All three are optional; only the ones with content are rendered.
+ * - Accepts `classNames` and `styles` to customize: `container`, `infoMessage`, `errorMessage`, `subtitle`.
+ */
+export const InfoLabels = ({
+  className,
+  classNames,
+  style,
+  styles,
+  infoMessage,
+  errorMessage,
+  subtitle,
+  ...props
+}: InfoLabelsProps) => {
+  return (
+    <div className={cn('cleen', className)} style={style}>
+      <div
+        className={cn(classNames?.container)}
+        style={styles?.container}
+        {...props}
+      >
+        {infoMessage && (
+          <div
+            className={cn(
+              'cleen-mt-1 cleen-font-normal cleen-text-sm cleen-text-primary',
+              classNames?.infoMessage
+            )}
+            style={styles?.infoMessage}
+            role="note"
+          >
+            {infoMessage}
+          </div>
+        )}
+
+        {errorMessage && (
+          <div
+            className={cn(
+              'cleen-mt-1 cleen-font-medium cleen-text-sm cleen-text-error',
+              classNames?.errorMessage
+            )}
+            style={styles?.errorMessage}
+            role="alert"
+          >
+            {errorMessage}
+          </div>
+        )}
+
+        {subtitle && (
+          <div
+            className={cn(
+              'cleen-mt-2 cleen-font-normal cleen-text-sm cleen-leading-[20px] cleen-text-gray/70',
+              classNames?.subtitle
+            )}
+            style={styles?.subtitle}
+          >
+            {subtitle}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/infoLabels/index.ts

@@ -0,0 +1 @@
+export { InfoLabels, type InfoLabelsProps } from './InfoLabels';

package/src/components/input/Input.tsx

@@ -0,0 +1,269 @@
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+  type ChangeEvent,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { cn } from '@cleen/ui-core';
+import {
+  InfoLabels,
+  type InfoLabelsProps,
+} from '@/components/infoLabels/InfoLabels';
+
+export interface InputProps extends ComponentProps<'input'> {
+  label?: ReactNode;
+  uploadLabel?: ReactNode;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  topRightIcon?: ReactNode;
+  inputOverlay?: ReactNode;
+  isFocusedBorder?: boolean;
+  maxLengthLabelThreshold?: number;
+  maxLengthLabel?: (remaining: number) => ReactNode;
+  infoLabels?: InfoLabelsProps;
+  classNames?: {
+    container?: string;
+    label?: string;
+    inputContainer?: string;
+    input?: string;
+    leftIconContainer?: string;
+    rightIconContainer?: string;
+    maxLengthLabel?: string;
+    inputOverlay?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+    label?: CSSProperties;
+    inputContainer?: CSSProperties;
+    input?: CSSProperties;
+    leftIconContainer?: CSSProperties;
+    rightIconContainer?: CSSProperties;
+    maxLengthLabel?: CSSProperties;
+    inputOverlay?: CSSProperties;
+  };
+}
+
+/**
+ * The `Input` component is a controlled or uncontrolled text input with rich labelling and icon support.
+ *
+ * - Pass `value` for controlled usage; use `defaultValue` (or neither) for uncontrolled.
+ * - Use `label` to show a label above the input and `uploadLabel` for the file-input trigger text.
+ * - `leftIcon` and `rightIcon` accept any ReactNode and are rendered inside the input border.
+ * - Set `isFocusedBorder` to visually highlight the border when the input is focused.
+ * - Use `maxLength` together with `maxLengthLabel` (callback) to show a character-countdown message.
+ *   `maxLengthLabelThreshold` (0–1) controls when the countdown replaces the `infoLabels.subtitle`.
+ * - Use `infoLabels` to show error, info, or subtitle messages below the input.
+ * - Accepts `classNames` and `styles` to customize: `container`, `label`, `inputContainer`, `input`,
+ *   `leftIconContainer`, `rightIconContainer`, `maxLengthLabel`.
+ */
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    name,
+    id,
+    type,
+    label,
+    defaultValue,
+    value,
+    disabled,
+    required,
+    className,
+    classNames,
+    style,
+    styles,
+    autoComplete = 'off',
+    isFocusedBorder,
+    maxLength,
+    maxLengthLabelThreshold = 0.5,
+    uploadLabel,
+    leftIcon,
+    rightIcon,
+    topRightIcon,
+    inputOverlay,
+    infoLabels,
+    maxLengthLabel,
+    onChange,
+    ...props
+  },
+  ref
+) {
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+
+  const currentValue = isControlled ? value : internalValue;
+
+  useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(value ?? defaultValue ?? '');
+    }
+  }, [value, defaultValue, isControlled]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+
+    if (!maxLength || newValue.length <= maxLength) {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+
+      onChange?.(e);
+    }
+  };
+
+  const subtitle = useMemo(() => {
+    if (
+      !maxLength ||
+      !maxLengthLabel ||
+      (currentValue?.toString()?.length ?? 0) / maxLength <
+        maxLengthLabelThreshold
+    ) {
+      return infoLabels?.subtitle;
+    }
+
+    return maxLengthLabel?.(
+      maxLength - (currentValue?.toString()?.length ?? 0)
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentValue, maxLength, maxLengthLabelThreshold, infoLabels?.subtitle]);
+
+  return (
+    <div className={cn('cleen', className)} style={style}>
+      <div
+        className={cn(
+          'cleen-flex cleen-flex-col cleen-rounded-md cleen-w-full cleen-overflow-visible cleen-font-medium cleen-text-gray',
+          classNames?.container
+        )}
+        style={styles?.container}
+      >
+        {(label || topRightIcon) && (
+          <div className="cleen-flex cleen-justify-between cleen-items-center cleen-gap-2">
+            <label
+              htmlFor={id || name}
+              className={cn(
+                'cleen-flex-1 cleen-block cleen-mb-1.5 cleen-font-medium cleen-text-gray/90 cleen-text-sm cleen-leading-6',
+                classNames?.label
+              )}
+              style={styles?.label}
+            >
+              {label}
+              {required && (
+                <span className="cleen-ml-1 cleen-text-error/60">*</span>
+              )}
+            </label>
+
+            {topRightIcon}
+          </div>
+        )}
+
+        <div
+          className={cn(
+            'cleen-relative cleen-flex cleen-items-stretch cleen-bg-background cleen-shadow-sm cleen-border cleen-rounded-md cleen-transition-colors cleen-duration-200',
+            {
+              'has-[:focus]:cleen-border has-[:focus]:cleen-border-primary/30 has-[:focus]:cleen-shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05),0px_0px_0px_4px_rgba(0,149,235,0.24)]':
+                isFocusedBorder,
+            },
+            infoLabels?.errorMessage
+              ? 'cleen-border-error/50 hover:cleen-border-error/70'
+              : 'cleen-border-gray/10 hover:cleen-border-gray/20',
+            classNames?.inputContainer
+          )}
+          style={styles?.inputContainer}
+        >
+          {leftIcon && (
+            <div
+              className={cn(
+                'cleen-flex cleen-justify-center cleen-items-center cleen-gap-1.5 cleen-bg-background cleen-p-2 cleen-rounded-md focus:cleen-outline-none focus:cleen-ring-4 cleen-font-normal cleen-text-gray/70 cleen-text-base',
+                disabled
+                  ? 'cleen-bg-gray/5 cleen-text-gray/50'
+                  : 'cleen-text-gray cleen-font-normal',
+                classNames?.leftIconContainer
+              )}
+              style={styles?.leftIconContainer}
+            >
+              {leftIcon}
+            </div>
+          )}
+
+          <div className="cleen-relative cleen-flex cleen-flex-1 cleen-items-stretch">
+            <input
+              id={id || name}
+              name={name}
+              type={type}
+              disabled={disabled}
+              maxLength={maxLength}
+              autoComplete={autoComplete}
+              value={currentValue}
+              className={cn(
+                'cleen-block cleen-bg-background cleen-border-0 cleen-border-gray/30 cleen-rounded-md cleen-w-full cleen-text-base',
+                'cleen-py-2 cleen-pr-2 placeholder:cleen-text-gray/50 placeholder:cleen-font-normal sm:cleen-text-sm sm:cleen-leading-6 focus:cleen-ring-transparent focus:cleen-outline-none cleen-my-auto',
+                leftIcon ? 'cleen-pl-0' : 'cleen-px-3.5',
+                {
+                  'cleen-rounded-l-none': leftIcon,
+                  'cleen-rounded-r-none': rightIcon,
+                  'cleen-cursor-pointer cleen-text-gray/90 cleen-text-base cleen-font-normal cleen-py-2.5 cleen-pl-3.5 cleen-pr-0 cleen-w-4/5 after:cleen-hidden file:cleen-hidden focus:cleen-outline-none placeholder:cleen-hidden':
+                    type === 'file',
+                  'cleen-text-transparent': type === 'file' && !value,
+                },
+                disabled
+                  ? 'cleen-bg-gray/5 cleen-text-gray/50'
+                  : 'cleen-text-gray cleen-font-normal',
+                classNames?.input
+              )}
+              style={styles?.input}
+              title={' '}
+              onChange={handleChange}
+              required={required}
+              ref={ref}
+              {...props}
+            />
+
+            {inputOverlay && (
+              <div
+                className={cn(
+                  'cleen-absolute cleen-inset-0 cleen-flex cleen-items-center cleen-bg-background cleen-rounded-md cleen-overflow-hidden cleen-text-sm cleen-pointer-events-auto',
+                  leftIcon ? 'cleen-pl-0 cleen-pr-2' : 'cleen-px-3.5',
+                  disabled ? 'cleen-bg-gray/5' : 'cleen-bg-background',
+                  classNames?.inputOverlay
+                )}
+                style={styles?.inputOverlay}
+              >
+                {inputOverlay}
+              </div>
+            )}
+          </div>
+
+          {type === 'file' && !value && uploadLabel && (
+            <label
+              htmlFor={id}
+              className="cleen-left-0 cleen-absolute cleen-flex cleen-justify-center cleen-items-center cleen-py-2.5 cleen-pl-3.5 cleen-font-normal cleen-text-gray/90 cleen-text-sm cleen-text-nowrap cleen-cursor-pointer"
+            >
+              {uploadLabel}
+            </label>
+          )}
+
+          {rightIcon && (
+            <div
+              className={cn(
+                'cleen-flex cleen-justify-center cleen-items-center cleen-gap-1.5 cleen-bg-background cleen-p-2 cleen-rounded-r-md focus:cleen-outline-none focus:cleen-ring-4 cleen-font-normal cleen-text-gray/70 cleen-text-base',
+                disabled
+                  ? 'cleen-bg-gray/5 cleen-text-gray/50'
+                  : 'cleen-text-gray cleen-font-normal',
+                classNames?.rightIconContainer
+              )}
+              style={styles?.rightIconContainer}
+            >
+              {rightIcon}
+            </div>
+          )}
+        </div>
+
+        {(infoLabels?.errorMessage || infoLabels?.infoMessage || subtitle) && (
+          <InfoLabels {...infoLabels} subtitle={subtitle} />
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/input/index.ts

@@ -0,0 +1 @@
+export { Input, type InputProps } from './Input';

package/src/components/loader/Loader.tsx

@@ -0,0 +1,91 @@
+import { cn } from '@cleen/ui-core';
+import type { ComponentProps, CSSProperties } from 'react';
+
+const SIZES = {
+  xs: 'cleen-size-4',
+  sm: 'cleen-size-5',
+  md: 'cleen-size-[30px] cleen-border-2',
+  lg: 'cleen-size-10 cleen-border-2',
+  xl: 'cleen-size-[50px] cleen-border-4',
+};
+
+const SPEEDS = {
+  slow: 1.3,
+  normal: 0.65,
+  fast: 0.4,
+};
+
+export interface LoaderProps extends ComponentProps<'div'> {
+  isFullscreen?: boolean;
+  size?: keyof typeof SIZES | number;
+  stroke?: number;
+  speed?: keyof typeof SPEEDS | number;
+  classNames?: {
+    container?: string;
+    loader?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+    loader?: CSSProperties;
+  };
+}
+
+/**
+ * Spinning loader indicator with configurable size, speed, stroke, and color.
+ *
+ * - Controlled via `size` (preset `xs`–`xl` or pixel number), `speed` (preset or seconds), and `stroke` (border width in px).
+ * - Pass `isFullscreen` to fill the entire viewport with a background overlay.
+ * - Pass `color` to override the default primary color of the spinner.
+ * - Accepts `classNames` and `styles` for keys: `container`, `loader`.
+ */
+export const Loader = ({
+  isFullscreen,
+  size = 'xs',
+  stroke,
+  speed = 'normal',
+  className,
+  classNames,
+  style,
+  styles,
+  color,
+  ...props
+}: LoaderProps) => {
+  return (
+    <div className={cn('cleen', className)} style={style}>
+      <div
+        className={cn(
+          'cleen-flex cleen-justify-center cleen-items-center cleen-w-full cleen-h-full',
+          { 'cleen-h-screen cleen-w-screen cleen-bg-background': isFullscreen },
+          classNames?.container
+        )}
+        style={styles?.container}
+        {...props}
+      >
+        <span
+          className={cn(
+            `cleen-border cleen-rounded-full cleen-border-primary cleen-border-b-transparent cleen-animate-[spin_0.65s_linear_infinite]`,
+            typeof size === 'string' && SIZES[size],
+            classNames?.loader
+          )}
+          style={{
+            ...(color && {
+              borderInlineColor: color,
+              borderTopColor: color,
+            }),
+            ...(typeof size === 'number' && {
+              width: size,
+              height: size,
+            }),
+            ...(typeof stroke === 'number' && {
+              borderWidth: stroke,
+            }),
+            animationDuration: `${
+              typeof speed === 'number' ? speed : SPEEDS[speed]
+            }s`,
+            ...styles?.loader,
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/loader/index.ts

@@ -0,0 +1 @@
+export { Loader, type LoaderProps } from './Loader';