Initial commit

src/components/ui/feedback/alert.tsx

@@ -0,0 +1,27 @@
+import { Alert as ChakraAlert } from '@chakra-ui/react';
+import * as React from 'react';
+
+export interface AlertProps extends Omit<ChakraAlert.RootProps, 'title'> {
+  startElement?: React.ReactNode;
+  endElement?: React.ReactNode;
+  title?: React.ReactNode;
+  icon?: React.ReactElement;
+}
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
+  const { title, children, icon, startElement, endElement, ...rest } = props;
+  return (
+    <ChakraAlert.Root ref={ref} {...rest}>
+      {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
+      {children ? (
+        <ChakraAlert.Content>
+          <ChakraAlert.Title>{title}</ChakraAlert.Title>
+          <ChakraAlert.Description>{children}</ChakraAlert.Description>
+        </ChakraAlert.Content>
+      ) : (
+        <ChakraAlert.Title flex='1'>{title}</ChakraAlert.Title>
+      )}
+      {endElement}
+    </ChakraAlert.Root>
+  );
+});

src/components/ui/feedback/empty-state.tsx

@@ -0,0 +1,28 @@
+import { EmptyState as ChakraEmptyState, VStack } from '@chakra-ui/react';
+import * as React from 'react';
+
+export interface EmptyStateProps extends ChakraEmptyState.RootProps {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+
+export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(props, ref) {
+  const { title, description, icon, children, ...rest } = props;
+  return (
+    <ChakraEmptyState.Root ref={ref} {...rest}>
+      <ChakraEmptyState.Content>
+        {icon && <ChakraEmptyState.Indicator>{icon}</ChakraEmptyState.Indicator>}
+        {description ? (
+          <VStack textAlign='center'>
+            <ChakraEmptyState.Title>{title}</ChakraEmptyState.Title>
+            <ChakraEmptyState.Description>{description}</ChakraEmptyState.Description>
+          </VStack>
+        ) : (
+          <ChakraEmptyState.Title>{title}</ChakraEmptyState.Title>
+        )}
+        {children}
+      </ChakraEmptyState.Content>
+    </ChakraEmptyState.Root>
+  );
+});

src/components/ui/feedback/progress-circle.tsx

@@ -0,0 +1,32 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+import { AbsoluteCenter, ProgressCircle as ChakraProgressCircle } from '@chakra-ui/react';
+import * as React from 'react';
+
+interface ProgressCircleRingProps extends ChakraProgressCircle.CircleProps {
+  trackColor?: SystemStyleObject['stroke'];
+  cap?: SystemStyleObject['strokeLinecap'];
+}
+
+export const ProgressCircleRing = React.forwardRef<SVGSVGElement, ProgressCircleRingProps>(
+  function ProgressCircleRing(props, ref) {
+    const { trackColor, cap, color, ...rest } = props;
+    return (
+      <ChakraProgressCircle.Circle {...rest} ref={ref}>
+        <ChakraProgressCircle.Track stroke={trackColor} />
+        <ChakraProgressCircle.Range stroke={color} strokeLinecap={cap} />
+      </ChakraProgressCircle.Circle>
+    );
+  },
+);
+
+export const ProgressCircleValueText = React.forwardRef<HTMLDivElement, ChakraProgressCircle.ValueTextProps>(
+  function ProgressCircleValueText(props, ref) {
+    return (
+      <AbsoluteCenter>
+        <ChakraProgressCircle.ValueText {...props} ref={ref} />
+      </AbsoluteCenter>
+    );
+  },
+);
+
+export const ProgressCircleRoot = ChakraProgressCircle.Root;

src/components/ui/feedback/progress.tsx

@@ -0,0 +1,30 @@
+import { Progress as ChakraProgress } from '@chakra-ui/react';
+import { InfoTip } from '../overlays/toggle-tip';
+import * as React from 'react';
+
+export const ProgressBar = React.forwardRef<HTMLDivElement, ChakraProgress.TrackProps>(
+  function ProgressBar(props, ref) {
+    return (
+      <ChakraProgress.Track {...props} ref={ref}>
+        <ChakraProgress.Range />
+      </ChakraProgress.Track>
+    );
+  },
+);
+
+export interface ProgressLabelProps extends ChakraProgress.LabelProps {
+  info?: React.ReactNode;
+}
+
+export const ProgressLabel = React.forwardRef<HTMLDivElement, ProgressLabelProps>(function ProgressLabel(props, ref) {
+  const { children, info, ...rest } = props;
+  return (
+    <ChakraProgress.Label {...rest} ref={ref}>
+      {children}
+      {info && <InfoTip>{info}</InfoTip>}
+    </ChakraProgress.Label>
+  );
+});
+
+export const ProgressRoot = ChakraProgress.Root;
+export const ProgressValueText = ChakraProgress.ValueText;

src/components/ui/feedback/skeleton.tsx

@@ -0,0 +1,35 @@
+import type { SkeletonProps as ChakraSkeletonProps, CircleProps } from '@chakra-ui/react';
+import { Skeleton as ChakraSkeleton, Circle, Stack } from '@chakra-ui/react';
+import * as React from 'react';
+
+export interface SkeletonCircleProps extends ChakraSkeletonProps {
+  size?: CircleProps['size'];
+}
+
+export const SkeletonCircle = React.forwardRef<HTMLDivElement, SkeletonCircleProps>(
+  function SkeletonCircle(props, ref) {
+    const { size, ...rest } = props;
+    return (
+      <Circle size={size} asChild ref={ref}>
+        <ChakraSkeleton {...rest} />
+      </Circle>
+    );
+  },
+);
+
+export interface SkeletonTextProps extends ChakraSkeletonProps {
+  noOfLines?: number;
+}
+
+export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(function SkeletonText(props, ref) {
+  const { noOfLines = 3, gap, ...rest } = props;
+  return (
+    <Stack gap={gap} width='full' ref={ref}>
+      {Array.from({ length: noOfLines }).map((_, index) => (
+        <ChakraSkeleton height='4' key={index} {...props} _last={{ maxW: '80%' }} {...rest} />
+      ))}
+    </Stack>
+  );
+});
+
+export const Skeleton = ChakraSkeleton;

src/components/ui/feedback/status.tsx

@@ -0,0 +1,27 @@
+import type { ColorPalette } from '@chakra-ui/react';
+import { Status as ChakraStatus } from '@chakra-ui/react';
+import * as React from 'react';
+
+type StatusValue = 'success' | 'error' | 'warning' | 'info';
+
+export interface StatusProps extends ChakraStatus.RootProps {
+  value?: StatusValue;
+}
+
+const statusMap: Record<StatusValue, ColorPalette> = {
+  success: 'green',
+  error: 'red',
+  warning: 'orange',
+  info: 'blue',
+};
+
+export const Status = React.forwardRef<HTMLDivElement, StatusProps>(function Status(props, ref) {
+  const { children, value = 'info', ...rest } = props;
+  const colorPalette = rest.colorPalette ?? statusMap[value];
+  return (
+    <ChakraStatus.Root ref={ref} {...rest} colorPalette={colorPalette}>
+      <ChakraStatus.Indicator />
+      {children}
+    </ChakraStatus.Root>
+  );
+});

src/components/ui/feedback/toaster.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Toaster as ChakraToaster, Portal, Spinner, Stack, Toast, createToaster } from '@chakra-ui/react';
+
+export const toaster = createToaster({
+  placement: 'bottom-end',
+  pauseOnPageIdle: true,
+});
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
+        {(toast) => (
+          <Toast.Root width={{ md: 'sm' }}>
+            {toast.type === 'loading' ? <Spinner size='sm' color='blue.solid' /> : <Toast.Indicator />}
+            <Stack gap='1' flex='1' maxWidth='100%'>
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+            </Stack>
+            {toast.action && <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>}
+            {toast.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  );
+};