@cleen/ui 0.1.0

package/src/components/radioBoxGroup/RadioBoxGroup.tsx

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

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

package/src/components/radioButtonGroup/RadioButtonGroup.tsx

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

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

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

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

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