@cleen/ui 0.1.0

package/src/components/cleenIcon/types/icon.ts

@@ -0,0 +1,226 @@
+import type { SVGProps } from 'react';
+
+export type IconProps = SVGProps<SVGSVGElement> & {
+  color1?: string;
+  color2?: string;
+};
+
+export enum IconName {
+  AlertCircle = 'AlertCircle',
+  AlertFeatured = 'AlertFeatured',
+  AlertOctagon = 'AlertOctagon',
+  AlertTriangle = 'AlertTriangle',
+  AlignRight = 'AlignRight',
+  ArrowDown = 'ArrowDown',
+  ArrowLeft = 'ArrowLeft',
+  ArrowLeft2 = 'ArrowLeft2',
+  ArrowRight = 'ArrowRight',
+  ArrowToTop = 'ArrowToTop',
+  ArrowUp = 'ArrowUp',
+  ArrowUpRight = 'ArrowUpRight',
+  ArrowUpRightNarrow = 'ArrowUpRightNarrow',
+  ArrowUpRightSquare = 'ArrowUpRightSquare',
+  Attachment = 'Attachment',
+  BarChartSquare = 'BarChartSquare',
+  Bold = 'Bold',
+  BookmarkCheck = 'BookmarkCheck',
+  BookmarkCheckFill = 'BookmarkCheckFill',
+  BookmarkPlus = 'BookmarkPlus',
+  BookmarkX = 'BookmarkX',
+  BoxLines = 'BoxLines',
+  BoxText = 'BoxText',
+  BracketsCheck = 'BracketsCheck',
+  BracketsEllipses = 'BracketsEllipses',
+  Building = 'Building',
+  Calendar = 'Calendar',
+  CertificateHeart = 'CertificateHeart',
+  Check = 'Check',
+  CheckCircle = 'CheckCircle',
+  CheckCircleBroken = 'CheckCircleBroken',
+  CheckFill = 'CheckFill',
+  CheckVerified = 'CheckVerified',
+  ChevronDown = 'ChevronDown',
+  ChevronLeft = 'ChevronLeft',
+  ChevronLeftDouble = 'ChevronLeftDouble',
+  ChevronRight = 'ChevronRight',
+  ChevronRightDouble = 'ChevronRightDouble',
+  ChevronSelectorVertical = 'ChevronSelectorVertical',
+  ChevronUp = 'ChevronUp',
+  CircleSwap = 'CircleSwap',
+  ClockFastForward = 'ClockFastForward',
+  ClockRewind = 'ClockRewind',
+  ClockRewind2 = 'ClockRewind2',
+  CodeBrowser = 'CodeBrowser',
+  CodeCircle = 'CodeCircle',
+  Colors = 'Colors',
+  ColumnEdit = 'ColumnEdit',
+  Copy = 'Copy',
+  Copy2 = 'Copy2',
+  Copy3 = 'Copy3',
+  Copy4 = 'Copy4',
+  Copy5 = 'Copy5',
+  CopyCheck = 'CopyCheck',
+  Cube = 'Cube',
+  CubeOutline = 'CubeOutline',
+  CursorBox = 'CursorBox',
+  Dataflow = 'Dataflow',
+  Dataflow2 = 'Dataflow2',
+  Dataflow3 = 'Dataflow3',
+  Delete = 'Delete',
+  DollarCircle = 'DollarCircle',
+  DotsGrid = 'DotsGrid',
+  DotsHorizontal = 'DotsHorizontal',
+  DotsVertical = 'DotsVertical',
+  Edit = 'Edit',
+  Editable = 'Editable',
+  Expand = 'Expand',
+  Eye = 'Eye',
+  EyeHidden = 'EyeHidden',
+  EyeHidden2 = 'EyeHidden2',
+  FaceSmile = 'FaceSmile',
+  Filter = 'Filter',
+  Filter2 = 'Filter2',
+  Flag = 'Flag',
+  Flag2 = 'Flag2',
+  Flag3 = 'Flag3',
+  HandShield = 'HandShield',
+  Hash = 'Hash',
+  HeadsetMic = 'HeadsetMic',
+  Heart = 'Heart',
+  HouseLine = 'HouseLine',
+  Image = 'Image',
+  Image2 = 'Image2',
+  Image3 = 'Image3',
+  Image4 = 'Image4',
+  ImageCheck = 'ImageCheck',
+  InfoCircle = 'InfoCircle',
+  InfoHexagon = 'InfoHexagon',
+  Italic = 'Italic',
+  LayersMultiple = 'LayersMultiple',
+  LayersSingle = 'LayersSingle',
+  Layout = 'Layout',
+  Layout2 = 'Layout2',
+  LayoutColumns = 'LayoutColumns',
+  LayoutCustom = 'LayoutCustom',
+  LayoutSequential = 'LayoutSequential',
+  LayoutStuffed = 'LayoutStuffed',
+  LayoutTile = 'LayoutTile',
+  LifeBuoy = 'LifeBuoy',
+  Lightbulb = 'Lightbulb',
+  Lightning = 'Lightning',
+  Lightning2 = 'Lightning2',
+  LightningFast = 'LightningFast',
+  LineChartBar = 'LineChartBar',
+  LineChartBreakoutSquare = 'LineChartBreakoutSquare',
+  LineChartUp = 'LineChartUp',
+  LineChartUp2 = 'LineChartUp2',
+  Lines = 'Lines',
+  LinesCheck = 'LinesCheck',
+  LinesPlay = 'LinesPlay',
+  Link = 'Link',
+  Link2 = 'Link2',
+  Link3 = 'Link3',
+  Link4 = 'Link4',
+  Link5 = 'Link5',
+  ListBullet = 'ListBullet',
+  ListOrder = 'ListOrder',
+  ListOrder2 = 'ListOrder2',
+  Lock = 'Lock',
+  Lock2 = 'Lock2',
+  LogIn = 'LogIn',
+  LogOut = 'LogOut',
+  LogOut2 = 'LogOut2',
+  MagicWand = 'MagicWand',
+  MagicWand2 = 'MagicWand2',
+  Mail = 'Mail',
+  MessageSquare = 'MessageSquare',
+  MessageSquare2 = 'MessageSquare2',
+  MessageXSquare = 'MessageXSquare',
+  MinusCircle = 'MinusCircle',
+  Mobile = 'Mobile',
+  Monitor = 'Monitor',
+  Monitor2 = 'Monitor2',
+  Monitor3 = 'Monitor3',
+  MoonCircle = 'MoonCircle',
+  NavigationPointer = 'NavigationPointer',
+  NotificationBox = 'NotificationBox',
+  Palette = 'Palette',
+  PasscodeLock = 'PasscodeLock',
+  PCSetup = 'PCSetup',
+  Pencil = 'Pencil',
+  PercentageCircle = 'PercentageCircle',
+  Perspective = 'Perspective',
+  PhoneCall = 'PhoneCall',
+  Pin = 'Pin',
+  PlayCircle = 'PlayCircle',
+  Plus = 'Plus',
+  PlusCircle = 'PlusCircle',
+  Pulse = 'Pulse',
+  QuestionCircle = 'QuestionCircle',
+  RadioButton = 'RadioButton',
+  RadioButtonActive = 'RadioButtonActive',
+  ReceiptCheck = 'ReceiptCheck',
+  Redo = 'Redo',
+  Refresh = 'Refresh',
+  Refresh2 = 'Refresh2',
+  Refresh3 = 'Refresh3',
+  Repeat = 'Repeat',
+  Repeat2 = 'Repeat2',
+  Retweet = 'Retweet',
+  RoundChart = 'RoundChart',
+  RoundChart2 = 'RoundChart2',
+  Route = 'Route',
+  Save = 'Save',
+  Save2 = 'Save2',
+  ScanDots = 'ScanDots',
+  Search = 'Search',
+  Send = 'Send',
+  Settings = 'Settings',
+  Settings2 = 'Settings2',
+  Settings3 = 'Settings3',
+  ShieldLightning = 'ShieldLightning',
+  ShieldPlus = 'ShieldPlus',
+  ShieldRemove = 'ShieldRemove',
+  Shuffle = 'Shuffle',
+  SlashCircle = 'SlashCircle',
+  SlashOctagon = 'SlashOctagon',
+  SocialGlobe = 'SocialGlobe',
+  SocialLinkedin = 'SocialLinkedin',
+  SocialX = 'SocialX',
+  Speedometer = 'Speedometer',
+  StairsRound = 'StairsRound',
+  Star = 'Star',
+  StarHalf = 'StarHalf',
+  Stars = 'Stars',
+  Stars2 = 'Stars2',
+  Strikethrough = 'Strikethrough',
+  SuccessFeatured = 'SuccessFeatured',
+  Sun = 'Sun',
+  SwitchHorizontal = 'SwitchHorizontal',
+  Tag = 'Tag',
+  Target = 'Target',
+  Target2 = 'Target2',
+  TextFormat = 'TextFormat',
+  TextFormat2 = 'TextFormat2',
+  TextHighlight = 'TextHighlight',
+  Translate = 'Translate',
+  Trash = 'Trash',
+  Trending = 'Trending',
+  Underline = 'Underline',
+  Undo = 'Undo',
+  Undo2 = 'Undo2',
+  UploadCloud = 'UploadCloud',
+  User = 'User',
+  UserEdit = 'UserEdit',
+  UserRight = 'UserRight',
+  UserSquare = 'UserSquare',
+  Users = 'Users',
+  UsersUp = 'UsersUp',
+  Volume = 'Volume',
+  Wrench = 'Wrench',
+  X = 'X',
+  XCircle = 'XCircle',
+  XCircle2 = 'XCircle2',
+  XClose = 'XClose',
+  XSquare = 'XSquare',
+}

package/src/components/collapsible/Collapsible.tsx

@@ -0,0 +1,148 @@
+import { IconChevronDown, IconChevronUp } from '@/components/cleenIcon';
+import { cn } from '@cleen/ui-core';
+import type {
+  CSSProperties,
+  ComponentProps,
+  ForwardedRef,
+  ReactNode,
+} from 'react';
+import { forwardRef, useState } from 'react';
+
+export interface CollapsibleItem {
+  content: ReactNode;
+  onClick?: () => void;
+  key?: string | number;
+}
+
+export interface CollapsibleSection {
+  title: ReactNode;
+  items?: CollapsibleItem[];
+  onClick?: () => void;
+  key?: string | number;
+}
+
+export interface CollapsibleProps extends ComponentProps<'div'> {
+  sections: CollapsibleSection[];
+  defaultOpenIndex?: number | null;
+  classNames?: {
+    container?: string;
+    section?: string;
+    sectionHeader?: string;
+    sectionBody?: string;
+    item?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+    section?: CSSProperties;
+    sectionHeader?: CSSProperties;
+    sectionBody?: CSSProperties;
+    item?: CSSProperties;
+  };
+}
+
+/**
+ * The `Collapsible` component renders an accordion-style list of sections, each of which can be
+ * expanded or collapsed to reveal its items.
+ *
+ * - Pass an array of `sections`, each with a `title` and optional `items` array.
+ * - Each `CollapsibleItem` accepts a `content` node and an optional `onClick` callback.
+ * - Use `defaultOpenIndex` to pre-open a specific section on mount; pass `null` (default) to start
+ *   fully collapsed.
+ * - Only one section can be open at a time; clicking an open section closes it.
+ * - Sections without `items` act as plain clickable rows and do not show a chevron.
+ * - Accepts `classNames` and `styles` to customize: `container`, `section`, `sectionHeader`,
+ *   `sectionBody`, `item`.
+ */
+export const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(
+  (
+    {
+      sections,
+      defaultOpenIndex,
+      className,
+      classNames,
+      style,
+      styles,
+      ...props
+    },
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const [openIndex, setOpenIndex] = useState<number | null>(
+      defaultOpenIndex ?? null
+    );
+
+    const handleSectionClick = (index: number, section: CollapsibleSection) => {
+      section.onClick?.();
+
+      if (section.items?.length) {
+        setOpenIndex(openIndex === index ? null : index);
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn('cleen', className)}
+        style={{ ...style, width: '100%' }}
+        {...props}
+      >
+        <div
+          className={cn('cleen-w-full', classNames?.container)}
+          style={styles?.container}
+        >
+          {sections.map((section, i) => (
+            <div
+              key={section?.key ?? i}
+              className={cn('cleen-mb-3', classNames?.section)}
+              style={styles?.section}
+            >
+              <div
+                onClick={() => handleSectionClick(i, section)}
+                className={cn(
+                  'cleen-flex cleen-w-full cleen-items-center cleen-justify-between cleen-font-medium cleen-text-md cleen-text-gray/90 cleen-p-2 cleen-rounded-lg cleen-cursor-pointer hover:cleen-bg-gray/5',
+                  classNames?.sectionHeader
+                )}
+                style={styles?.sectionHeader}
+              >
+                <div className="cleen-flex-1 cleen-overflow-hidden cleen-whitespace-nowrap cleen-text-ellipsis">
+                  {section?.title}
+                </div>
+                {section?.items?.length ? (
+                  openIndex === i ? (
+                    <IconChevronUp className="cleen-shrink-0 cleen-text-gray/50" />
+                  ) : (
+                    <IconChevronDown className="cleen-shrink-0 cleen-text-gray/50" />
+                  )
+                ) : null}
+              </div>
+              {openIndex === i && section?.items && (
+                <div
+                  className={cn(
+                    'cleen-mt-1 cleen-flex cleen-flex-col cleen-w-full',
+                    classNames?.sectionBody
+                  )}
+                  style={styles?.sectionBody}
+                >
+                  {section?.items?.map((item, idx) => (
+                    <div
+                      key={item?.key ?? idx}
+                      className={cn(
+                        'cleen-overflow-hidden cleen-whitespace-nowrap cleen-text-ellipsis cleen-p-2 cleen-w-full cleen-rounded-lg cleen-font-normal cleen-text-md cleen-text-gray/90 cleen-cursor-pointer hover:cleen-bg-gray/5',
+                        classNames?.item
+                      )}
+                      style={styles?.item}
+                      onClick={item?.onClick}
+                    >
+                      {item?.content}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+);
+
+Collapsible.displayName = 'Collapsible';

package/src/components/collapsible/index.ts

@@ -0,0 +1,5 @@
+export {
+  Collapsible,
+  type CollapsibleProps,
+  type CollapsibleSection,
+} from './Collapsible';

package/src/components/creditCardInput/CreditCardInput.tsx

@@ -0,0 +1,236 @@
+import { InfoLabels } from '@/components/infoLabels';
+import { Input } from '@/components/input';
+import { Loader } from '@/components/loader';
+import { cn } from '@cleen/ui-core';
+import {
+  forwardRef,
+  useMemo,
+  useState,
+  type ChangeEvent,
+  type FocusEvent,
+} from 'react';
+import type { CardData } from './types/card';
+import type { CreditCardInputProps } from './types/props';
+import {
+  formatCardNumber,
+  formatCVC,
+  formatExpirationDate,
+  getIssuer,
+} from './util/format';
+
+/**
+ * The `CreditCardInput` component provides a user interface for securely collecting credit card information.
+ * It displays a visual representation of the card and includes input fields for the cardholder's card number, expiration date and CVC. The component handles formatting and validation for each field, displays error messages, and supports loading states for asynchronous operations.
+ */
+export const CreditCardInput = forwardRef<HTMLDivElement, CreditCardInputProps>(
+  function CreditCardInput(
+    {
+      labels,
+      value,
+      isLoading,
+      errors,
+      className,
+      classNames,
+      style,
+      styles,
+      infoLabels,
+      onChange,
+      onFieldFocus,
+      ...props
+    },
+    ref
+  ) {
+    const [internalCardData, setInternalCardData] = useState<CardData>({
+      number: '',
+      expiry: '',
+      cvc: '',
+    });
+    const isControlled = !!value;
+    const cardData = isControlled ? value : internalCardData;
+
+    const issuer = useMemo(() => getIssuer(cardData.number), [cardData.number]);
+
+    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const { name } = e.target;
+      let { value: newValue } = e.target;
+
+      switch (name) {
+        case 'number':
+          newValue = formatCardNumber(newValue, issuer);
+          break;
+
+        case 'expiry':
+          newValue = formatExpirationDate(newValue);
+          break;
+
+        case 'cvc':
+          newValue = formatCVC(newValue);
+          break;
+
+        default:
+          return;
+      }
+
+      if (!isControlled) {
+        setInternalCardData(prev => ({ ...prev, [name]: newValue }));
+      }
+
+      onChange?.({
+        ...value,
+        [name]: newValue,
+      } as CardData);
+    };
+
+    const handleInputFocus = (e: FocusEvent<HTMLInputElement>) => {
+      onFieldFocus?.(e.target.name as keyof CardData);
+    };
+
+    return (
+      <div
+        className={cn('cleen', className)}
+        style={style}
+        ref={ref}
+        {...props}
+      >
+        <div
+          className={cn(
+            'cleen-flex cleen-flex-wrap cleen-justify-center cleen-items-start cleen-gap-8 cleen-bg-background cleen-min-w-80 cleen-w-min cleen-border cleen-border-primary/20 cleen-rounded-[10px] cleen-shadow-lg',
+            classNames?.container
+          )}
+          style={styles?.container}
+        >
+          {isLoading ? (
+            <div
+              className={cn('cleen-py-4', classNames?.loader?.container)}
+              style={styles?.loader?.container}
+            >
+              <Loader
+                {...classNames?.loader?.component}
+                {...styles?.loader?.component}
+              />
+            </div>
+          ) : (
+            <form
+              className={cn(
+                'cleen-flex cleen-flex-col cleen-items-start cleen-gap-3 cleen-p-4',
+                classNames?.form?.container
+              )}
+              style={styles?.form?.container}
+              onSubmit={e => e.preventDefault()}
+            >
+              <Input
+                label={labels?.number}
+                name="number"
+                type="tel"
+                autoComplete="cc-number"
+                className={cn(
+                  'cleen-w-full',
+                  classNames?.form?.cardNumber?.className
+                )}
+                classNames={{
+                  ...classNames?.form?.cardNumber?.classNames,
+                  inputContainer: cn(
+                    {
+                      'cleen-border-error': errors?.number,
+                    },
+                    classNames?.form?.cardNumber?.classNames?.inputContainer
+                  ),
+                  input: cn(
+                    {
+                      'cleen-text-error': errors?.number,
+                    },
+                    classNames?.form?.cardNumber?.classNames?.input
+                  ),
+                }}
+                {...styles?.form?.cardNumber}
+                placeholder="1111 1111 1111 1111"
+                value={cardData.number}
+                onChange={handleInputChange}
+                onFocus={handleInputFocus}
+                infoLabels={{
+                  errorMessage: errors?.number,
+                }}
+              />
+
+              <div
+                className={cn(
+                  'cleen-flex cleen-justify-between cleen-items-start cleen-gap-3 cleen-w-full',
+                  classNames?.form?.cvcExpiryContainer
+                )}
+                style={styles?.form?.cvcExpiryContainer}
+              >
+                <Input
+                  label={labels?.expiry}
+                  name="expiry"
+                  type="tel"
+                  autoComplete="cc-exp"
+                  className={classNames?.form?.expiry?.className}
+                  classNames={{
+                    ...classNames?.form?.expiry?.classNames,
+                    inputContainer: cn(
+                      {
+                        'cleen-border-error': errors?.expiry,
+                      },
+                      classNames?.form?.expiry?.classNames?.inputContainer
+                    ),
+                    input: cn(
+                      {
+                        'cleen-text-error': errors?.expiry,
+                      },
+                      classNames?.form?.expiry?.classNames?.input
+                    ),
+                  }}
+                  {...styles?.form?.expiry}
+                  placeholder="00/00"
+                  value={cardData.expiry}
+                  onChange={handleInputChange}
+                  onFocus={handleInputFocus}
+                  infoLabels={{
+                    errorMessage: errors?.expiry,
+                  }}
+                />
+
+                <Input
+                  label={labels?.cvc}
+                  name="cvc"
+                  type="tel"
+                  inputMode="numeric"
+                  autoComplete="cc-csc"
+                  maxLength={issuer === 'amex' ? 4 : 3}
+                  className={classNames?.form?.cvc?.className}
+                  classNames={{
+                    ...classNames?.form?.cvc?.classNames,
+                    inputContainer: cn(
+                      {
+                        'cleen-border-error': errors?.cvc,
+                      },
+                      classNames?.form?.cvc?.classNames?.inputContainer
+                    ),
+                    input: cn(
+                      {
+                        'cleen-text-error': errors?.cvc,
+                      },
+                      classNames?.form?.cvc?.classNames?.input
+                    ),
+                  }}
+                  {...styles?.form?.cvc}
+                  placeholder="***"
+                  value={cardData.cvc}
+                  onChange={handleInputChange}
+                  onFocus={handleInputFocus}
+                  infoLabels={{
+                    errorMessage: errors?.cvc,
+                  }}
+                />
+              </div>
+
+              {(infoLabels?.infoMessage ||
+                infoLabels?.errorMessage ||
+                infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
+            </form>
+          )}
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/creditCardInput/index.ts

@@ -0,0 +1,2 @@
+export { CreditCardInput } from './CreditCardInput';
+export type { CreditCardInputProps } from './types/props';

package/src/components/creditCardInput/types/card.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export interface CardData {
+  number: string;
+  expiry: string;
+  cvc: string;
+}
+
+export type CardLabels = {
+  [key in keyof CardData]?: ReactNode;
+};
+
+export type CardErrors = CardLabels;

package/src/components/creditCardInput/types/props.ts

@@ -0,0 +1,44 @@
+import type { InfoLabelsProps } from '@/components/infoLabels/InfoLabels';
+import type { InputProps } from '@/components/input/Input';
+import type { LoaderProps } from '@/components/loader/Loader';
+import type { ComponentClassnames, ComponentStyles } from '@cleen/ui-core';
+import type { ComponentProps, CSSProperties } from 'react';
+import type { CardData, CardErrors, CardLabels } from './card';
+
+export type CreditCardInputProps = Omit<ComponentProps<'div'>, 'onChange'> & {
+  isLoading?: boolean;
+  value?: CardData;
+  labels?: CardLabels;
+  errors?: CardErrors;
+  classNames?: {
+    container?: string;
+    loader?: {
+      container?: string;
+      component?: ComponentClassnames<LoaderProps>;
+    };
+    form?: {
+      container?: string;
+      cvcExpiryContainer?: string;
+      cardNumber?: ComponentClassnames<InputProps>;
+      expiry?: ComponentClassnames<InputProps>;
+      cvc?: ComponentClassnames<InputProps>;
+    };
+  };
+  styles?: {
+    container?: CSSProperties;
+    loader?: {
+      container?: CSSProperties;
+      component?: ComponentStyles<LoaderProps>;
+    };
+    form?: {
+      container?: CSSProperties;
+      cvcExpiryContainer?: CSSProperties;
+      cardNumber?: ComponentStyles<InputProps>;
+      expiry?: ComponentStyles<InputProps>;
+      cvc?: ComponentStyles<InputProps>;
+    };
+  };
+  infoLabels?: InfoLabelsProps;
+  onChange?: (value: CardData) => void;
+  onFieldFocus?: (fieldName: keyof CardData) => void;
+};