@cleen/ui 0.1.0 → 0.1.2

package/src/components/radioBoxGroup/RadioBoxGroup.tsx

@@ -1,207 +0,0 @@
-import { CleenIcon, type IconName } from '@/components/cleenIcon';
-import { cn } from '@cleen/ui-core';
-import { useState, type CSSProperties, type ReactNode } from 'react';
-
-export interface RadioBoxData {
-  id: string | number;
-  label?: ReactNode;
-  subLabel?: ReactNode;
-}
-
-export interface RadioBoxGroupProps {
-  horizontal?: boolean;
-  boxes: RadioBoxData[];
-  selectedBox?: RadioBoxData;
-  onBoxClick?: (box: RadioBoxData) => void;
-  leftElement?: (box: RadioBoxData) => ReactNode;
-  rightElement?: (box: RadioBoxData) => ReactNode;
-  leftIcon?: ReactNode;
-  leftIconName?: IconName;
-  rightIconName?: IconName;
-  className?: string;
-  style?: CSSProperties;
-}
-
-/**
- * A group of selectable option boxes, each displaying a label and optional sub-label with an icon.
- *
- * - Pass `boxes` as an array of `{ id, label?, subLabel? }` objects.
- * - Control the selected box via `selectedBox`; fires `onBoxClick` on selection.
- * - Toggle `horizontal` to switch from a vertical stack to a flex-wrap row layout.
- * - Inject leading content per row with `leftElement` / `leftIcon` / `leftIconName`, and trailing content with `rightElement` / `rightIconName`.
- */
-export const RadioBoxGroup = ({
-  horizontal,
-  boxes,
-  selectedBox,
-  onBoxClick,
-  leftElement,
-  rightElement,
-  leftIcon,
-  leftIconName,
-  rightIconName,
-  className,
-  style,
-}: RadioBoxGroupProps) => {
-  const [selected, setSelected] = useState(selectedBox);
-
-  return (
-    <div className={cn('cleen', className)} style={style}>
-      {horizontal ? (
-        // Horizontal layout - use flexbox
-        <div className="cleen-flex cleen-flex-wrap cleen-items-start cleen-justify-start cleen-gap-3 cleen-w-full">
-          {boxes?.map(box => {
-            const isSelected = box?.id === selected?.id;
-            return (
-              <div
-                key={box?.id}
-                className={cn(
-                  'cleen-flex cleen-items-center cleen-gap-3 cleen-p-4 cleen-border cleen-rounded-xl cleen-shadow-lg cleen-cursor-pointer cleen-transition-all cleen-duration-200 hover:cleen-bg-primary/5 cleen-w-max',
-                  isSelected
-                    ? 'cleen-bg-primary/5 cleen-border-primary/50'
-                    : 'cleen-border-gray/20'
-                )}
-                onClick={() => {
-                  setSelected(box);
-                  onBoxClick?.(box);
-                }}
-              >
-                {leftElement && leftElement(box)}
-                {leftIcon ? (
-                  leftIcon
-                ) : leftIconName ? (
-                  <CleenIcon
-                    name={leftIconName}
-                    className={cn(
-                      'cleen-w-5 cleen-h-5',
-                      isSelected ? 'cleen-text-primary' : 'cleen-text-gray/80'
-                    )}
-                  />
-                ) : null}
-                {box?.label && (
-                  <span
-                    className={cn(
-                      'cleen-font-semibold cleen-text-16px',
-                      isSelected ? 'cleen-text-primary' : 'cleen-text-gray/80'
-                    )}
-                  >
-                    {box?.label}
-                  </span>
-                )}
-                {box?.subLabel && (
-                  <span
-                    className={cn(
-                      'cleen-font-semibold cleen-text-16px',
-                      isSelected ? 'cleen-text-primary' : 'cleen-text-gray/80'
-                    )}
-                  >
-                    {box?.subLabel}
-                  </span>
-                )}
-                {rightElement && rightElement(box)}
-                {rightIconName && (
-                  <CleenIcon
-                    name={rightIconName}
-                    className={cn(
-                      'cleen-w-5 cleen-h-5',
-                      isSelected ? 'cleen-text-primary' : 'cleen-text-gray/80'
-                    )}
-                  />
-                )}
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        // Vertical layout - use single grid for alignment
-        // 1fr auto 1fr ensures center label is always truly centered
-        <div
-          className="cleen-grid cleen-gap-3 cleen-w-full"
-          style={{
-            gridTemplateColumns: '1fr auto 1fr',
-          }}
-        >
-          {boxes?.map(box => {
-            const isSelected = box?.id === selected?.id;
-            return (
-              <div
-                key={box?.id}
-                className={cn(
-                  'cleen-grid cleen-col-span-full cleen-items-center cleen-gap-3 cleen-p-4 cleen-border cleen-rounded-xl cleen-shadow-lg cleen-cursor-pointer cleen-transition-all cleen-duration-200 hover:cleen-bg-primary/5',
-                  isSelected
-                    ? 'cleen-bg-primary/5 cleen-border-primary/50'
-                    : 'cleen-border-gray/20'
-                )}
-                style={{
-                  display: 'grid',
-                  gridTemplateColumns: 'subgrid',
-                  gridColumn: '1 / -1',
-                }}
-                onClick={() => {
-                  setSelected(box);
-                  onBoxClick?.(box);
-                }}
-              >
-                {/* Left column - content aligned left, grows to the right */}
-                <div className="cleen-flex cleen-items-center cleen-gap-2 cleen-justify-start">
-                  {leftElement && leftElement(box)}
-                  {leftIcon ? (
-                    leftIcon
-                  ) : leftIconName ? (
-                    <CleenIcon
-                      name={leftIconName}
-                      className={cn(
-                        'cleen-w-5 cleen-h-5',
-                        isSelected ? 'cleen-text-primary' : 'cleen-text-gray/80'
-                      )}
-                    />
-                  ) : null}
-                </div>
-
-                {/* Center column - always truly centered */}
-                <div className="cleen-flex cleen-items-center cleen-justify-center">
-                  {box?.label && (
-                    <span
-                      className={cn(
-                        'cleen-font-semibold cleen-text-16px',
-                        isSelected ? 'cleen-text-primary' : 'cleen-text-gray/80'
-                      )}
-                    >
-                      {box?.label}
-                    </span>
-                  )}
-                </div>
-
-                {/* Right column - content aligned right, grows to the left */}
-                <div className="cleen-flex cleen-items-center cleen-gap-2 cleen-justify-end">
-                  {box?.subLabel && (
-                    <span
-                      className={cn(
-                        'cleen-font-semibold cleen-text-16px',
-                        isSelected ? 'cleen-text-primary' : 'cleen-text-gray/80'
-                      )}
-                    >
-                      {box?.subLabel}
-                    </span>
-                  )}
-                  {rightElement && rightElement(box)}
-                  {rightIconName && (
-                    <CleenIcon
-                      name={rightIconName}
-                      className={cn(
-                        'cleen-w-5 cleen-h-5',
-                        isSelected ? 'cleen-text-primary' : 'cleen-text-gray/80'
-                      )}
-                    />
-                  )}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default RadioBoxGroup;

package/src/components/radioBoxGroup/index.ts

@@ -1 +0,0 @@
-export { RadioBoxGroup, type RadioBoxGroupProps } from './RadioBoxGroup';

package/src/components/radioButtonGroup/RadioButtonGroup.tsx

@@ -1,208 +0,0 @@
-import {
-  InfoLabels,
-  type InfoLabelsProps,
-} from '@/components/infoLabels/InfoLabels';
-import {
-  cn,
-  type ComponentClassnames,
-  type ComponentStyles,
-} from '@cleen/ui-core';
-import { useEffect, useState, type CSSProperties, type ReactNode } from 'react';
-import { RadioButton } from './blocks/RadioButton';
-import type { RadioButtonData } from './types/radioButton';
-
-export interface RadioButtonGroupProps {
-  radios: RadioButtonData[];
-  name?: string;
-  defaultActiveId?: string | number;
-  label?: ReactNode;
-  value?: string | number; // controlled value
-  onChange?: (value: string | number) => void; // controlled change handler
-  radioPosition?: 'left' | 'right';
-  classNames?: {
-    container?: string;
-    label?: string;
-    radios?: string;
-    radioContainer?: string;
-    radioActive?: string;
-    radioOuterCheckBox?: string;
-    radioLabelsContainer?: string;
-    radioTitle?: string;
-    radiotPostTitle?: string;
-    radioSubTitle?: string;
-    infoLabels?: ComponentClassnames<InfoLabelsProps>;
-  };
-  className?: string;
-  styles?: {
-    container?: CSSProperties;
-    label?: CSSProperties;
-    radios?: CSSProperties;
-    radioContainer?: CSSProperties;
-    radioActive?: CSSProperties;
-    radioOuterCheckBox?: CSSProperties;
-    radioLabelsContainer?: CSSProperties;
-    radioTitle?: CSSProperties;
-    radiotPostTitle?: CSSProperties;
-    radioSubTitle?: CSSProperties;
-    infoLabels?: ComponentStyles<InfoLabelsProps>;
-  };
-  style?: CSSProperties;
-  infoMessage?: ReactNode;
-  errorMessage?: ReactNode;
-  subtitle?: ReactNode;
-  infoLabels?: InfoLabelsProps;
-}
-
-/**
- * A group of styled radio buttons for single-option selection.
- *
- * - Supports controlled mode via `value` + `onChange`, and uncontrolled via `defaultActiveId`.
- * - Each radio item (`RadioButtonData`) has an `id`, `title`, optional `postTitle`, and `subTitle`.
- * - Flip radio indicator position with `radioPosition` (`left` | `right`).
- * - Accepts `classNames` and `styles` for keys: `container`, `label`, `radios`, `radioContainer`, `radioActive`, `radioOuterCheckBox`, `radioLabelsContainer`, `radioTitle`, `radiotPostTitle`, `radioSubTitle`, `infoLabels`.
- */
-export const RadioButtonGroup = ({
-  radios,
-  label,
-  className,
-  classNames,
-  style,
-  styles,
-  name = 'cleen-radio-group',
-  radioPosition = 'left',
-  defaultActiveId = 1,
-  value,
-  infoLabels,
-  onChange,
-}: RadioButtonGroupProps) => {
-  // If value is provided, use controlled mode
-  const isControlled = value !== undefined;
-  const [activeIndex, setActiveIndex] = useState(defaultActiveId);
-
-  useEffect(() => {
-    if (!isControlled) {
-      setActiveIndex(defaultActiveId);
-    }
-  }, [defaultActiveId, isControlled]);
-
-  const selectedValue = isControlled ? value : activeIndex;
-
-  const handleRadioChange = (id: string | number) => {
-    if (!isControlled) {
-      setActiveIndex(id);
-    }
-
-    onChange?.(id);
-  };
-
-  return (
-    <div className={cn('cleen', className)} style={style}>
-      <div className={classNames?.container} style={styles?.container}>
-        {label && (
-          <label
-            className={cn(
-              '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}
-          </label>
-        )}
-
-        <div
-          className={cn(
-            'cleen-flex cleen-flex-col cleen-gap-2.5 cleen-w-fit',
-            classNames?.radios
-          )}
-          style={styles?.radios}
-        >
-          {radios?.map(radio => (
-            <div
-              key={radio?.id}
-              className={cn(
-                'cleen-flex cleen-gap-2 cleen-p-5 cleen-border cleen-border-gray/20 cleen-rounded-xl cleen-cursor-pointer cleen-transition-all cleen-duration-200 hover:cleen-bg-gray/5 hover:cleen-border-gray/30',
-                selectedValue == radio?.id &&
-                  'cleen-border-primary hover:cleen-border-primary',
-                selectedValue == radio?.id && classNames?.radioActive,
-                classNames?.radioContainer
-              )}
-              style={styles?.radioContainer}
-              onClick={() => handleRadioChange(radio.id)}
-            >
-              {radio.leftIcon}
-
-              {radioPosition === 'left' && (
-                <RadioButton
-                  name={name}
-                  value={radio.id}
-                  checked={selectedValue == radio.id}
-                  onChange={() => handleRadioChange(radio.id)}
-                  className={classNames?.radioOuterCheckBox}
-                  style={styles?.radioOuterCheckBox}
-                />
-              )}
-
-              <label
-                className={cn(
-                  'cleen-flex-1 cleen-text-gray cleen-cursor-pointer',
-                  classNames?.radioLabelsContainer
-                )}
-                style={styles?.radioLabelsContainer}
-              >
-                <div className="cleen-flex cleen-items-center cleen-gap-1">
-                  <span
-                    className={cn(
-                      'cleen-font-semibold cleen-text-gray/70 cleen-text-sm',
-                      classNames?.radioTitle
-                    )}
-                    style={styles?.radioTitle}
-                  >
-                    {radio.title}
-                  </span>
-
-                  <span
-                    className={cn(
-                      'cleen-font-normal cleen-text-gray/80 cleen-text-xs',
-                      classNames?.radiotPostTitle
-                    )}
-                    style={styles?.radiotPostTitle}
-                  >
-                    {radio.postTitle}
-                  </span>
-                </div>
-
-                <span
-                  className={cn(
-                    'cleen-font-normal cleen-text-gray/80 cleen-text-sm',
-                    classNames?.radioSubTitle
-                  )}
-                  style={styles?.radioSubTitle}
-                >
-                  {radio?.subTitle}
-                </span>
-              </label>
-
-              {radioPosition === 'right' && (
-                <RadioButton
-                  name={name}
-                  value={radio.id}
-                  checked={selectedValue == radio.id}
-                  onChange={() => handleRadioChange(radio.id)}
-                  className={classNames?.radioOuterCheckBox}
-                  style={styles?.radioOuterCheckBox}
-                />
-              )}
-
-              {radio.rightIcon}
-            </div>
-          ))}
-        </div>
-
-        {(infoLabels?.errorMessage ||
-          infoLabels?.infoMessage ||
-          infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
-      </div>
-    </div>
-  );
-};

package/src/components/radioButtonGroup/blocks/RadioButton.tsx

@@ -1,22 +0,0 @@
-import { cn } from '@cleen/ui-core';
-import type { ComponentProps } from 'react';
-
-export const RadioButton = ({
-  checked,
-  className,
-  style,
-  ...props
-}: ComponentProps<'input'>) => (
-  <div
-    className={cn(
-      'group cleen-flex cleen-size-5 cleen-min-h-5 cleen-min-w-5 cleen-items-center cleen-justify-center cleen-rounded-full cleen-border cleen-border-gray/20',
-      checked ? 'cleen-bg-primary' : 'cleen-bg-white',
-      className
-    )}
-    style={style}
-  >
-    <input type="radio" checked={checked} className="cleen-hidden" {...props} />
-
-    <span className="cleen-size-2 cleen-rounded-full cleen-bg-white" />
-  </div>
-);

package/src/components/radioButtonGroup/index.ts

@@ -1,4 +0,0 @@
-export {
-  RadioButtonGroup,
-  type RadioButtonGroupProps,
-} from './RadioButtonGroup';

package/src/components/radioButtonGroup/types/radioButton.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface RadioButtonData {
-  id: string | number;
-  title?: ReactNode;
-  postTitle?: ReactNode;
-  subTitle?: ReactNode;
-  leftIcon?: ReactNode;
-  rightIcon?: ReactNode;
-}