@cleen/ui 0.1.0 → 0.1.2

package/src/components/groupSelector/index.ts

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

package/src/components/index.ts

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

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

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

package/src/components/input/Input.tsx

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

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

package/src/components/loader/Loader.tsx

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

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