create-react-scaffold-cli 1.0.6 → 1.1.0

package/templates/base-ts/src/shared/types/navigation.ts

@@ -0,0 +1,9 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface AppRoute {
+  path: string;
+  element: ComponentType<any> | ReactNode;
+  protected?: boolean;
+  layout?: string;
+  children?: AppRoute[];
+}

package/templates/base-ts/src/shared/types/ui.ts

@@ -0,0 +1,5 @@
+export type Breakpoint = 'base' | 'md' | 'lg' | 'xl' | '2xl';
+
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+export type Axis = 'x' | 'y';

package/templates/base-ts/src/shared/ui/Box.tsx

@@ -0,0 +1,153 @@
+import { ComponentPropsWithRef, forwardRef, Ref } from 'react';
+import {
+  marginLookup,
+  marginMdLookup,
+  marginLgLookup,
+  marginXLookup,
+  marginXMdLookup,
+  marginYLookup,
+  marginYMdLookup,
+  marginYLgLookup,
+  paddingLgLookup,
+  paddingLookup,
+  paddingMdLookup,
+  paddingXLgLookup,
+  paddingXLookup,
+  paddingXMdLookup,
+  paddingYLgLookup,
+  paddingYLookup,
+  paddingYMdLookup,
+  widthLookup,
+  widthMdLookup,
+  widthLgLookup,
+  marginXlLookup,
+  marginXXlLookup,
+  marginYXlLookup,
+  paddingXlLookup,
+  paddingXXlLookup,
+  paddingYXlLookup,
+  marginXlgLookup,
+  radiusLookup,
+  radiusMdLookup,
+  radiusLgLookup,
+  radiusXlLookup,
+  paddingY2XlLookup,
+  paddingX2XlLookup,
+} from '../theme';
+import { getClassName, memo } from '../utils';
+import { cn } from '../libs';
+import { Breakpoint } from '../types/ui';
+
+
+export type Size = keyof typeof marginLookup;
+export type Width = keyof typeof widthLookup;
+export type Radius = keyof typeof radiusLookup;
+
+type MarginValue = Size; // They share the same keys
+type PaddingValue = Size;
+
+type Axis = 'x' | 'y';
+
+type ResponsiveProp<T> = T | Partial<Record<Breakpoint, T>>;
+
+type AxisProp<T> = {
+  [K in Axis]?: ResponsiveProp<T>;
+};
+
+type SpacingProp<T> = ResponsiveProp<T> | AxisProp<T>;
+
+export interface BoxProps extends ComponentPropsWithRef<'div'> {
+  hide?: boolean | ResponsiveProp<boolean>;
+  grow?: boolean | ResponsiveProp<boolean>;
+  margin?: SpacingProp<MarginValue>;
+  padding?: SpacingProp<PaddingValue>;
+  width?: ResponsiveProp<Width>;
+  radius?: ResponsiveProp<Radius>;
+}
+
+const Component = (
+  { hide, grow, margin, radius, padding, width, className, ...rest }: BoxProps,
+  ref: Ref<HTMLDivElement>
+) => {
+    // Helper to check if a prop is responsive object (not axis)
+
+    
+    // We need to cast props to 'any' sometimes to access properties because TS doesn't know for sure if it's an object
+    const m = margin as any;
+    const p = padding as any;
+    const w = width as any;
+    const r = radius as any;
+    const h = hide as any;
+    const g = grow as any;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        typeof hide !== 'object' && hide === true ? 'hidden' : hide === false && 'block',
+        h?.base === true ? 'hidden' : h?.base === false && 'block',
+        h?.md === true ? 'md:hidden' : h?.md === false && 'md:block',
+        h?.lg === true ? 'lg:hidden' : h?.lg === false && 'lg:block',
+        typeof grow !== 'object' && grow === true ? 'h-full' : grow === false && 'h-auto',
+        g?.base === true ? 'h-full' : g?.base === false && 'h-auto',
+        g?.md === true ? 'md:h-full' : g?.md === false && 'md:h-auto',
+        g?.lg === true ? 'lg:h-full' : g?.lg === false && 'lg:h-auto',
+        
+        typeof margin !== 'object' && getClassName(margin, marginLookup),
+        getClassName(m?.base, marginLookup),
+        getClassName(m?.md, marginMdLookup),
+        getClassName(m?.lg, marginLgLookup),
+        getClassName(m?.xl, marginXlLookup),
+        
+        typeof m?.x !== 'object' && getClassName(m?.x, marginXLookup),
+        getClassName(m?.x?.base, marginXLookup),
+        getClassName(m?.x?.md, marginXMdLookup),
+        getClassName(m?.x?.lg, marginXlgLookup),
+        getClassName(m?.x?.xl, marginXXlLookup),
+        
+        typeof m?.y !== 'object' && getClassName(m?.y, marginYLookup),
+        getClassName(m?.y?.base, marginYLookup),
+        getClassName(m?.y?.md, marginYMdLookup),
+        getClassName(m?.y?.lg, marginYLgLookup),
+        getClassName(m?.y?.xl, marginYXlLookup),
+        
+        typeof padding !== 'object' && getClassName(padding, paddingLookup),
+        getClassName(p?.base, paddingLookup),
+        getClassName(p?.md, paddingMdLookup),
+        getClassName(p?.lg, paddingLgLookup),
+        getClassName(p?.xl, paddingXlLookup),
+        getClassName(p?.['2xl'], paddingXlLookup),
+        
+        typeof p?.x !== 'object' && getClassName(p?.x, paddingXLookup),
+        getClassName(p?.x?.base, paddingXLookup),
+        getClassName(p?.x?.md, paddingXMdLookup),
+        getClassName(p?.x?.lg, paddingXLgLookup),
+        getClassName(p?.x?.xl, paddingXXlLookup),
+        getClassName(p?.x?.['2xl'], paddingX2XlLookup),
+        
+        typeof p?.y !== 'object' && getClassName(p?.y, paddingYLookup),
+        getClassName(p?.y?.base, paddingYLookup),
+        getClassName(p?.y?.md, paddingYMdLookup),
+        getClassName(p?.y?.lg, paddingYLgLookup),
+        getClassName(p?.y?.xl, paddingYXlLookup),
+        getClassName(p?.y?.['2xl'], paddingY2XlLookup),
+        
+        typeof width !== 'object' && getClassName(width, widthLookup),
+        getClassName(w?.base, widthLookup),
+        getClassName(w?.md, widthMdLookup),
+        getClassName(w?.lg, widthLgLookup),
+        
+        typeof radius !== 'object' && getClassName(radius, radiusLookup),
+        getClassName(r?.base, radiusLookup),
+        getClassName(r?.md, radiusMdLookup),
+        getClassName(r?.lg, radiusLgLookup),
+        getClassName(r?.xl, radiusXlLookup),
+        
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const Box = memo(forwardRef(Component));

package/templates/base-ts/src/shared/ui/Button.tsx

@@ -0,0 +1,124 @@
+import { ComponentPropsWithRef, forwardRef, Ref } from 'react';
+import { PiSpinnerBold } from 'react-icons/pi';
+import {
+  colorLookup,
+  fieldSize2XlLookup,
+  fieldSizeLgLookup,
+  fieldSizeLookup,
+  fieldSizeMdLookup,
+  fieldSizeXlLookup,
+  fontFamilyLookup,
+  fontSize2xlLookup,
+  fontSizeLgLookup,
+  fontSizeLookup,
+  fontSizeMdLookup,
+  fontSizeXlLookup,
+  fontWeight2xlLookup,
+  fontWeightLgLookup,
+  fontWeightLookup,
+  fontWeightMdLookup,
+  fontWeightXlLookup,
+  radiusLgLookup,
+  radiusLookup,
+  radiusMdLookup,
+  radiusXlLookup,
+} from '../theme';
+import { getClassName, memo } from '../utils';
+import { cn } from '../libs';
+import { Responsive } from '../types/ui';
+
+const variantLookup = {
+  primary:
+    'text-primary-foreground bg-primary hover:bg-primary/90 disabled:text-primary-foreground/70 disabled:bg-primary/50',
+  outline:
+    'border text-primary bg-primary-foreground hover:bg-neutral-50 disabled:text-primary/70 disabled:bg-neutral-50/50',
+  pill: 'text-primary-foreground bg-primary hover:bg-primary/90 disabled:text-primary-foreground/70 disabled:bg-primary/50',
+};
+
+export type Variant = keyof typeof variantLookup;
+export type ButtonSize = keyof typeof fieldSizeLookup;
+export type Font = keyof typeof fontFamilyLookup;
+export type ButtonColor = keyof typeof colorLookup;
+export type Radius = keyof typeof radiusLookup;
+export type Weight = keyof typeof fontWeightLookup;
+export type FontSize = keyof typeof fontSizeLookup;
+
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+  variant?: Variant;
+  radius?: Radius | Responsive<Radius>;
+  size?: ButtonSize | Responsive<ButtonSize>;
+  font?: Font | Responsive<Font>;
+  fontSize?: FontSize | Responsive<FontSize>;
+  weight?: Weight | Responsive<Weight>;
+  isLoading?: boolean;
+  color?: ButtonColor;
+}
+
+const Component = (
+  {
+    variant = 'primary',
+    radius = 'lg',
+    size = 'lg',
+    font = 'inter',
+    fontSize = 'base',
+    weight = 'semibold',
+    color,
+    isLoading,
+    className,
+    type = 'button',
+    children,
+    ...rest
+  }: ButtonProps,
+  ref: Ref<HTMLButtonElement>
+) => {
+  const fs = fontSize as any;
+  const w = weight as any;
+  const s = size as any;
+  const r = radius as any;
+
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        'h-14 px-8 inline-flex w-full items-center justify-center gap-2 transition-colors disabled:cursor-not-allowed text-primary-foreground cursor-pointer!',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30',
+        typeof fontSize !== 'object' && getClassName(fontSize, fontSizeLookup),
+        getClassName(fs?.base, fontSizeLookup),
+        getClassName(fs?.md, fontSizeMdLookup),
+        getClassName(fs?.lg, fontSizeLgLookup),
+        getClassName(fs?.xl, fontSizeXlLookup),
+        getClassName(fs?.['2xl'], fontSize2xlLookup),
+        typeof weight !== 'object' && getClassName(weight, fontWeightLookup),
+        getClassName(w?.base, fontWeightLookup),
+        getClassName(w?.md, fontWeightMdLookup),
+        getClassName(w?.lg, fontWeightLgLookup),
+        getClassName(w?.xl, fontWeightXlLookup),
+        getClassName(w?.['2xl'], fontWeight2xlLookup),
+        typeof size !== 'object' && getClassName(size, fieldSizeLookup),
+        getClassName(s?.base, fieldSizeLookup),
+        getClassName(s?.md, fieldSizeMdLookup),
+        getClassName(s?.lg, fieldSizeLgLookup),
+        getClassName(s?.xl, fieldSizeXlLookup),
+        getClassName(s?.['2xl'], fieldSize2XlLookup),
+        typeof radius !== 'object' && getClassName(radius, radiusLookup),
+        getClassName(r?.base, radiusLookup),
+        getClassName(r?.md, radiusMdLookup),
+        getClassName(r?.lg, radiusLgLookup),
+        getClassName(r?.xl, radiusXlLookup),
+        variantLookup[variant],
+        fontFamilyLookup[font as Font], // Cast needed if font is responsive, but here it seems simple. Wait, original component had responsive fonts? No, JSDoc says Font is just string. But Box does support responsive.
+        // Checking original: font={...} is passed to getClassName(font, ...) in Text, but here it is passed directly: fontFamilyLookup[font].
+        // So in Button, font is NOT responsive in the original code.
+        color && colorLookup[color],
+        className
+      )}
+      type={type}
+      {...(isLoading && { disabled: true })}
+      {...rest}
+    >
+      {isLoading ? <PiSpinnerBold className="animate-spin size-5 m-auto" /> : children}
+    </button>
+  );
+};
+
+export const Button = memo(forwardRef(Component));

package/templates/base-ts/src/shared/ui/Checkbox.tsx

@@ -0,0 +1,87 @@
+import { ComponentPropsWithRef, ReactNode, useId } from 'react';
+import {
+  sizeLookup,
+  sizeMdLookup,
+  sizeLgLookup,
+  fontSizeLookup,
+  fontSizeMdLookup,
+  fontSizeLgLookup,
+  fontWeightLookup,
+  fontWeightMdLookup,
+  fontWeightLgLookup,
+} from '../theme';
+import { getClassName, memo } from '../utils';
+import { cn } from '../libs';
+import { Responsive } from '../types/ui';
+
+export type CheckboxSize = keyof typeof sizeLookup;
+export type LabelFontSize = keyof typeof fontSizeLookup;
+export type LabelFontWeight = keyof typeof fontWeightLookup;
+
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+  label?: ReactNode;
+  labelClass?: string;
+  checkClass?: string;
+  size?: CheckboxSize | Responsive<CheckboxSize>;
+  labelFontSize?: LabelFontSize | Responsive<LabelFontSize>;
+  labelFontWeight?: LabelFontWeight | Responsive<LabelFontWeight>;
+}
+
+const Component = ({
+  label,
+  disabled = false,
+  className = '',
+  labelClass,
+  checkClass,
+  onChange,
+  size = { base: 4, md: 5 } as any, // Default value type casting
+  labelFontSize = { base: 'xs', md: 'sm', lg: 'base' } as any,
+  labelFontWeight,
+  ...rest
+}: CheckboxProps) => {
+  const id = useId();
+  const s = size as any;
+  const lfs = labelFontSize as any;
+  const lfw = labelFontWeight as any;
+
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <input
+        type="checkbox"
+        disabled={disabled}
+        onChange={onChange}
+        className={cn(
+          ' border border-tertiary checked:bg-primary accent-primary transition-colors duration-200',
+          typeof size !== 'object' && getClassName(size, sizeLookup),
+          disabled && 'cursor-not-allowed bg-opacity-60',
+          getClassName(s?.base, sizeLookup),
+          getClassName(s?.md, sizeMdLookup),
+          getClassName(s?.lg, sizeLgLookup),
+          checkClass
+        )}
+        id={id}
+        {...rest}
+      />
+      <label
+        htmlFor={id}
+        className={cn(
+          'text-secondary font-inter',
+          disabled && 'opacity-50 cursor-not-allowed',
+          typeof labelFontSize !== 'object' && getClassName(labelFontSize, fontSizeLookup),
+          getClassName(lfs?.base, fontSizeLookup),
+          getClassName(lfs?.md, fontSizeMdLookup),
+          getClassName(lfs?.lg, fontSizeLgLookup),
+          typeof labelFontWeight !== 'object' && getClassName(labelFontWeight, fontWeightLookup),
+          getClassName(lfw?.base, fontWeightLookup),
+          getClassName(lfw?.md, fontWeightMdLookup),
+          getClassName(lfw?.lg, fontWeightLgLookup),
+          labelClass
+        )}
+      >
+        {label}
+      </label>
+    </div>
+  );
+};
+
+export const Checkbox = memo(Component);

package/templates/base-ts/src/shared/ui/DropdownMenu.tsx

@@ -0,0 +1,134 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef, ReactNode } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { FaChevronRight } from 'react-icons/fa';
+import { memo } from '../utils';
+import { cn } from '../libs';
+
+const DropdownMenuRoot = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuSubTrigger = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <FaChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    contentClassName?: string;
+  }
+>(({ className, sideOffset = 4, contentClassName, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+        contentClassName
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex select-none items-center gap-2 font-inter  cursor-pointer rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuLabel = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold font-inter', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+export interface DropdownMenuProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  content: ReactNode;
+  contentClassName?: string;
+  children?: ReactNode;
+}
+
+const Component = ({ open, onOpenChange, content, children, contentClassName }: DropdownMenuProps) => {
+  return (
+    <DropdownMenuRoot modal={false} open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger className="w-full">{children}</DropdownMenuTrigger>
+      <DropdownMenuContent align="end" contentClassName={contentClassName}>
+        {content}
+      </DropdownMenuContent>
+    </DropdownMenuRoot>
+  );
+};
+
+const DropdownMenu = memo(Component);
+
+export { DropdownMenu, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem };

package/templates/base-ts/src/shared/ui/Flex.tsx

@@ -0,0 +1,96 @@
+import { ComponentPropsWithRef, forwardRef, Ref } from 'react';
+import {
+  gapLookup,
+  gapMdLookup,
+  gapLgLookup,
+  directionLookup,
+  directionMdLookup,
+  directionLgLookup,
+  justifyLookup,
+  justifyMdLookup,
+  justifyLgLookup,
+  alignLookup,
+  alignMdLookup,
+  alignLgLookup,
+  widthLookup,
+  widthMdLookup,
+  widthLgLookup,
+  gapXlLookup,
+  directionXlLookup,
+  justifyXlLookup,
+  alignXlLookup,
+  widthXlLookup,
+  gap2XlLookup,
+  width2XlLookup,
+} from '../theme';
+import { cn } from '../libs';
+import { getClassName, memo } from '../utils';
+import { Responsive } from '../types/ui';
+
+export type Gap = keyof typeof gapLookup;
+export type Direction = keyof typeof directionLookup;
+export type Justify = keyof typeof justifyLookup;
+export type Align = keyof typeof alignLookup;
+export type Width = keyof typeof widthLookup;
+
+export interface FlexProps extends ComponentPropsWithRef<'div'> {
+  grow?: boolean | Responsive<boolean>;
+  gap?: Gap | Responsive<Gap>;
+  direction?: Direction | Responsive<Direction>;
+  justify?: Justify | Responsive<Justify>;
+  align?: Align | Responsive<Align>;
+  width?: Width | Responsive<Width>;
+}
+
+const Component = ({ grow, gap, direction, justify, align, width, className, ...rest }: FlexProps, ref: Ref<HTMLDivElement>) => {
+  const g = grow as any;
+  const gp = gap as any;
+  const d = direction as any;
+  const j = justify as any;
+  const a = align as any;
+  const w = width as any;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex',
+        typeof grow !== 'object' && grow === true ? 'h-full' : grow === false && 'h-auto',
+        g?.base === true ? 'h-full' : g?.base === false && 'h-auto',
+        g?.md === true ? 'md:h-full' : g?.md === false && 'md:h-auto',
+        g?.lg === true ? 'lg:h-full' : g?.lg === false && 'lg:h-auto',
+        typeof gap !== 'object' && getClassName(gap, gapLookup),
+        getClassName(gp?.base, gapLookup),
+        getClassName(gp?.md, gapMdLookup),
+        getClassName(gp?.lg, gapLgLookup),
+        getClassName(gp?.xl, gapXlLookup),
+        getClassName(gp?.['2xl'], gap2XlLookup),
+        typeof direction !== 'object' && getClassName(direction, directionLookup),
+        getClassName(d?.base, directionLookup),
+        getClassName(d?.md, directionMdLookup),
+        getClassName(d?.lg, directionLgLookup),
+        getClassName(d?.xl, directionXlLookup),
+        typeof justify !== 'object' && getClassName(justify, justifyLookup),
+        getClassName(j?.base, justifyLookup),
+        getClassName(j?.md, justifyMdLookup),
+        getClassName(j?.lg, justifyLgLookup),
+        getClassName(j?.xl, justifyXlLookup),
+        typeof align !== 'object' && getClassName(align, alignLookup),
+        getClassName(a?.base, alignLookup),
+        getClassName(a?.md, alignMdLookup),
+        getClassName(a?.lg, alignLgLookup),
+        getClassName(a?.xl, alignXlLookup),
+        typeof width !== 'object' && getClassName(width, widthLookup),
+        getClassName(w?.base, widthLookup),
+        getClassName(w?.md, widthMdLookup),
+        getClassName(w?.lg, widthLgLookup),
+        getClassName(w?.xl, widthXlLookup),
+        getClassName(w?.['2xl'], width2XlLookup),
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const Flex = memo(forwardRef(Component));

package/templates/base-ts/src/shared/ui/FlexItem.tsx

@@ -0,0 +1,67 @@
+import { ComponentPropsWithRef, forwardRef, Ref } from 'react';
+import {
+  growLookup,
+  growMdLookup,
+  growLgLookup,
+  alignSelfLookup,
+  alignSelfMdLookup,
+  alignSelfLgLookup,
+  widthLookup,
+  widthMdLookup,
+  widthLgLookup,
+  growXlLookup,
+  alignSelfXlLookup,
+  widthXlLookup,
+} from '../theme';
+import { getClassName, memo } from '../utils';
+import { cn } from '../libs';
+import { Responsive } from '../types/ui';
+
+export type Grow = keyof typeof growLookup;
+export type AlignSelf = keyof typeof alignSelfLookup;
+export type Width = keyof typeof widthLookup;
+
+export interface FlexItemProps extends ComponentPropsWithRef<'div'> {
+  hide?: boolean | Responsive<boolean>;
+  grow?: Grow | Responsive<Grow>;
+  width?: Width | Responsive<Width>;
+  alignSelf?: AlignSelf | Responsive<AlignSelf>;
+}
+
+const Component = ({ hide, grow, alignSelf, width, className, ...rest }: FlexItemProps, ref: Ref<HTMLDivElement>) => {
+  const h = hide as any;
+  const g = grow as any;
+  const as = alignSelf as any;
+  const w = width as any;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        typeof hide !== 'object' && hide === true ? 'hidden' : hide === false && 'block',
+        h?.base === true ? 'hidden' : h?.base === false && 'block',
+        h?.md === true ? 'md:hidden' : h?.md === false && 'md:block',
+        h?.lg === true ? 'lg:hidden' : h?.lg === false && 'lg:block',
+        typeof grow !== 'object' && getClassName(grow, growLookup),
+        getClassName(g?.base, growLookup),
+        getClassName(g?.md, growMdLookup),
+        getClassName(g?.lg, growLgLookup),
+        getClassName(g?.xl, growXlLookup),
+        typeof alignSelf !== 'object' && getClassName(alignSelf, alignSelfLookup),
+        getClassName(as?.base, alignSelfLookup),
+        getClassName(as?.md, alignSelfMdLookup),
+        getClassName(as?.lg, alignSelfLgLookup),
+        getClassName(as?.xl, alignSelfXlLookup),
+        typeof width !== 'object' && getClassName(width, widthLookup),
+        getClassName(w?.base, widthLookup),
+        getClassName(w?.md, widthMdLookup),
+        getClassName(w?.lg, widthLgLookup),
+        getClassName(w?.xl, widthXlLookup),
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const FlexItem = memo(forwardRef(Component));