@cleen/ui 0.1.0

package/src/components/formGroup/FormGroup.tsx

@@ -0,0 +1,165 @@
+import { IconQuestionCircle } from '@/components/cleenIcon';
+import { Tooltip, type TooltipProps } from '@/components/tooltip/Tooltip';
+import {
+  cn,
+  type ComponentClassnames,
+  type ComponentStyles,
+} from '@cleen/ui-core';
+import type {
+  CSSProperties,
+  ComponentProps,
+  ForwardedRef,
+  ReactNode,
+} from 'react';
+import { forwardRef } from 'react';
+
+export interface FormGroupProps extends ComponentProps<'div'> {
+  title: string;
+  subtitle?: string;
+  required?: boolean;
+  requiredMark?: ReactNode;
+  tooltipDescription?: string;
+  children?: ReactNode;
+  classNames?: {
+    container?: string;
+    titleColumn?: string;
+    controlsRow?: string;
+    requiredMark?: string;
+    tooltip?: ComponentClassnames<TooltipProps>;
+    questionIcon?: string;
+    title?: string;
+    subtitle?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+    titleColumn?: CSSProperties;
+    controlsRow?: CSSProperties;
+    requiredMark?: CSSProperties;
+    tooltip?: ComponentStyles<TooltipProps>;
+    questionIcon?: CSSProperties;
+    title?: CSSProperties;
+    subtitle?: CSSProperties;
+  };
+}
+
+/**
+ * The `FormGroup` component is a layout row that pairs a labelled title column with a controls column.
+ *
+ * - The `title` is required. Add a `subtitle` for secondary context beneath it.
+ * - Set `required` to show a required mark beside the title (defaults to `"*"`, customisable via `requiredMark`).
+ * - Pass a `tooltipDescription` to show an info tooltip icon next to the title.
+ * - `children` are rendered in the right-hand controls column (inputs, selects, etc.).
+ * - Accepts `classNames` and `styles` to customize: `container`, `titleColumn`, `controlsRow`,
+ *   `title`, `subtitle`, `requiredMark`, `tooltip`, `questionIcon`.
+ */
+export const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(
+  (
+    {
+      title,
+      subtitle,
+      required,
+      requiredMark = '*',
+      tooltipDescription,
+      children,
+      className,
+      classNames,
+      style,
+      styles,
+      ...props
+    },
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('cleen', className)}
+        style={{ ...style, width: '100%' }}
+        {...props}
+      >
+        <div
+          className={cn(
+            'cleen-flex cleen-w-full cleen-items-start cleen-justify-start cleen-gap-8',
+            classNames?.container
+          )}
+          style={styles?.container}
+        >
+          <div
+            className={cn(
+              'cleen-flex cleen-flex-col cleen-w-[300px]',
+              classNames?.titleColumn
+            )}
+            style={styles?.titleColumn}
+          >
+            <div
+              className={cn(
+                'cleen-flex cleen-items-center cleen-gap-1 cleen-font-semibold cleen-text-sm cleen-text-gray/90',
+                classNames?.title
+              )}
+              style={styles?.title}
+            >
+              <span className="cleen-overflow-hidden cleen-whitespace-nowrap cleen-text-ellipsis">
+                {title}
+              </span>
+              {required && (
+                <span
+                  className={cn('cleen-text-error', classNames?.requiredMark)}
+                  style={styles?.requiredMark}
+                >
+                  {requiredMark}
+                </span>
+              )}
+              {tooltipDescription && (
+                <Tooltip
+                  hasArrow
+                  placement="top"
+                  label={tooltipDescription}
+                  color="rgba(var(--cleen-gray), 0.8)"
+                  {...classNames?.tooltip}
+                  style={styles?.tooltip?.style}
+                  styles={{
+                    ...styles?.tooltip?.styles,
+                    labelContainer: {
+                      width: 'max-content',
+                      maxWidth: '250px',
+                      ...styles?.tooltip?.styles?.labelContainer,
+                    },
+                  }}
+                >
+                  <IconQuestionCircle
+                    className={cn(
+                      'cleen-size-3 cleen-text-gray/40',
+                      classNames?.questionIcon
+                    )}
+                    style={styles?.questionIcon}
+                  />
+                </Tooltip>
+              )}
+            </div>
+            {subtitle && (
+              <div
+                className={cn(
+                  'cleen-overflow-hidden cleen-whitespace-nowrap cleen-text-ellipsis cleen-w-full cleen-font-normal cleen-text-gray/70 cleen-text-sm',
+                  classNames?.subtitle
+                )}
+                style={styles?.subtitle}
+              >
+                {subtitle}
+              </div>
+            )}
+          </div>
+          <div
+            className={cn(
+              'cleen-flex cleen-flex-1 cleen-flex-wrap cleen-gap-8',
+              classNames?.controlsRow
+            )}
+            style={styles?.controlsRow}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+FormGroup.displayName = 'FormGroup';

package/src/components/formGroup/index.ts

@@ -0,0 +1 @@
+export { FormGroup, type FormGroupProps } from './FormGroup';