@mbao01/common 0.0.43 → 0.0.45

package/dist/types/components/Form/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,46 @@
+import { Item, MultiSelectContentProps, MultiSelectInputProps, MultiSelectProps, MultiSelectTriggerProps } from './types';
+declare const MultiSelect: {
+    ({ values, onValuesChange, loop, className, children, dir, ...props }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: {
+        ({ className, children, size, wide, outline, variant, disabled, ...props }: MultiSelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Input: {
+        ({ className, ...props }: MultiSelectInputProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: import('react').ForwardRefExoticComponent<MultiSelectContentProps & import('react').RefAttributes<HTMLDivElement>>;
+    List: import('react').ForwardRefExoticComponent<Omit<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+        label?: string;
+    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<Item & Omit<Omit<{
+        children?: React.ReactNode;
+    } & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof import('react').HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+        disabled?: boolean;
+        onSelect?: (value: string) => void;
+        value?: string;
+        keywords?: string[];
+        forceMount?: boolean;
+    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+        disabled?: boolean | undefined;
+        included?: boolean | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+};
+export declare const MultiSelectTrigger: {
+    ({ className, children, size, wide, outline, variant, disabled, ...props }: MultiSelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { MultiSelect };

package/dist/types/components/Form/MultiSelect/MultiSelectContext.d.ts

@@ -0,0 +1,2 @@
+import { MultiSelectContextProps } from './types';
+export declare const MultiSelectContext: import('react').Context<MultiSelectContextProps | null>;

package/dist/types/components/Form/MultiSelect/constants.d.ts

@@ -0,0 +1,19 @@
+export declare const getMultiSelectClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getMultiSelectTriggerClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
+    outline?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    wide?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getMultiSelectItemClasses: (props?: ({
+    included?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getMultiSelectListClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getMultiSelectTagClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/Form/MultiSelect/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useMultiSelect } from './useMultiSelect';

package/dist/types/components/Form/MultiSelect/hooks/useMultiSelect/index.d.ts

@@ -0,0 +1 @@
+export { useMultiSelect } from './useMultiSelect';

package/dist/types/components/Form/MultiSelect/hooks/useMultiSelect/useMultiSelect.d.ts

@@ -0,0 +1 @@
+export declare const useMultiSelect: () => import('../../types').MultiSelectContextProps;

package/dist/types/components/Form/MultiSelect/index.d.ts

@@ -0,0 +1 @@
+export { MultiSelect } from './MultiSelect';

package/dist/types/components/Form/MultiSelect/types.d.ts

@@ -0,0 +1,31 @@
+import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import { VariantProps } from '../../../libs';
+import { Command } from '../../Command';
+import { getMultiSelectItemClasses, getMultiSelectListClasses, getMultiSelectTriggerClasses } from './constants';
+export type Item = {
+    value: string;
+    label?: string;
+};
+export type MultiSelectProps = React.ComponentPropsWithoutRef<typeof Command> & {
+    loop?: boolean;
+    values: Item["value"][];
+    onValuesChange: (value: string[]) => void;
+};
+export type MultiSelectContextProps = {
+    values: Item["value"][];
+    onValueChange: (value: Item["value"], label?: Item["label"]) => void;
+    items: Item[];
+    open: boolean;
+    setOpen: (value: boolean) => void;
+    inputValue: string;
+    setInputValue: React.Dispatch<React.SetStateAction<string>>;
+    activeIndex: number;
+    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+    ref: React.RefObject<HTMLInputElement>;
+    handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+};
+export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof getMultiSelectTriggerClasses>;
+export type MultiSelectInputProps = ComponentPropsWithoutRef<typeof Command.Input>;
+export type MultiSelectContentProps = HTMLAttributes<HTMLDivElement>;
+export type MultiSelectListProps = ComponentPropsWithoutRef<typeof Command.List> & VariantProps<typeof getMultiSelectListClasses>;
+export type MultiSelectItemProps = Item & ComponentPropsWithoutRef<typeof Command.Item> & VariantProps<typeof getMultiSelectItemClasses>;

package/dist/types/components/Form/TagsInput/TagsInput.d.ts

@@ -0,0 +1,13 @@
+export declare const TagsInput: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+    defaultTags?: string[];
+    onChange?: (value: string[], inputValue: string) => void;
+    placeholder?: string;
+    maxItems?: number;
+    minItems?: number;
+} & {
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    outline?: boolean | undefined;
+    wide?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Form/TagsInput/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const SPLITTER_REGEX: RegExp;
+export declare const FORMATTING_REGEX: RegExp;
+export declare const getTagsClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
+    outline?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    wide?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getTagClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getTagsInputClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getTagDeleteClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/types/components/Form/TagsInput/index.d.ts

@@ -0,0 +1 @@
+export { TagsInput } from './TagsInput';

package/dist/types/components/Form/TagsInput/types.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from '../../../libs';
+import { getTagsClasses } from './constants';
+export type TagsInputProps = React.HTMLAttributes<HTMLDivElement> & {
+    defaultTags?: string[];
+    onChange?: (value: string[], inputValue: string) => void;
+    placeholder?: string;
+    maxItems?: number;
+    minItems?: number;
+} & VariantProps<typeof getTagsClasses>;

package/dist/types/components/Form/index.d.ts

@@ -1,3 +1,4 @@
+export { DatetimeInput } from './DatetimeInput';
 export { Input } from './Input';
 export { OtpInput } from './OtpInput';
 export { Phone } from './Phone';
@@ -7,6 +8,7 @@ export { Select } from './Select';
 export { Slider } from './Slider';
 export { Switch } from './Switch';
 export { Checkbox } from './Checkbox';
+export { TagsInput } from './TagsInput';
 export { Textarea } from './Textarea';
 export { TextField } from './TextField';
 export { Label } from './components/Label';

package/dist/types/index.d.ts

@@ -24,6 +24,7 @@ export * from './components/Table';
 export * from './components/Tabs';
 export * from './components/Text';
 /** data input */
+export * from './components/DatetimePicker';
 export * from './components/FileUploader';
 export * from './components/Form';
 export * from './components/Combobox';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.43",
+  "version": "0.0.45",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "dev": "storybook dev -p 6006",
     "build": "tsc && vite build",
     "build-storybook": "storybook build -o ../../docs/storybook/common",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 30",
     "prettier": "prettier --check \"**/*.{ts,tsx}\"",
     "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
     "preview": "vite preview",
@@ -93,6 +93,7 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tailwindcss/typography": "^0.5.15",
+    "chrono-node": "^2.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -101,6 +102,7 @@
     "react-dropzone": "^14.2.3",
     "react-international-phone": "^4.3.0",
     "react-otp-input": "^3.1.1",
+    "recharts": "^2.12.7",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
@@ -115,6 +117,7 @@
     "@storybook/addon-interactions": "^8.3.4",
     "@storybook/addon-links": "^8.3.4",
     "@storybook/addon-onboarding": "^8.3.4",
+    "@storybook/addon-storysource": "^8.3.4",
     "@storybook/addon-themes": "^8.3.4",
     "@storybook/addon-viewport": "^8.3.4",
     "@storybook/blocks": "^8.3.4",
@@ -153,6 +156,7 @@
     "react-router-dom": "^6.26.2",
     "storybook": "^8.3.4",
     "tailwindcss": "^3.4.13",
+    "timescape": "^0.5.2",
     "typescript": "^5.6.2",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.2.2",
@@ -163,5 +167,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "a1d0e5c38ce829a3fcf38487bee6bfffba27e2b8"
+  "gitHead": "097691180db90aaf22c9557d1f2f919246b167c1"
 }

package/src/components/Chart/Chart.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { forwardRef, useId } from "react";
+import { ResponsiveContainer } from "recharts";
+import { cn } from "../../utilities";
+import { ChartContext } from "./ChartContext";
+import { ChartStyle } from "./components";
+import { getChartClasses } from "./constants";
+import { type ChartProps } from "./types";
+
+export const Chart = forwardRef<HTMLDivElement, ChartProps>(
+  ({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+    return (
+      <ChartContext.Provider value={{ config }}>
+        <div ref={ref} data-chart={chartId} className={cn(getChartClasses(), className)} {...props}>
+          <ChartStyle id={chartId} config={config} />
+          <ResponsiveContainer>{children}</ResponsiveContainer>
+        </div>
+      </ChartContext.Provider>
+    );
+  }
+);
+Chart.displayName = "Chart";

package/src/components/Chart/ChartContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { type ChartContextProps } from "./types";
+
+export const ChartContext = createContext<ChartContextProps | null>(null);

package/src/components/Chart/components/ChartLegend.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { forwardRef } from "react";
+import { Legend } from "recharts";
+import type { ChartLegendContentProps } from "../types";
+import { cn } from "../../../utilities";
+import {
+  getChartLegendContainerClasses,
+  getChartLegendItemClasses,
+  getChartLegendMarkerClasses,
+} from "../constants";
+import { getPayloadConfigFromPayload } from "../helpers";
+import { useChart } from "../hooks";
+
+export const ChartLegend = Legend;
+ChartLegend.displayName = "ChartLegend";
+
+export const ChartLegendContent = forwardRef<HTMLDivElement, ChartLegendContentProps>(
+  ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div ref={ref} className={cn(getChartLegendContainerClasses({ verticalAlign }), className)}>
+        {payload.map((item) => {
+          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            <div key={item.value} className={getChartLegendItemClasses()}>
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  style={{ backgroundColor: item.color }}
+                  className={getChartLegendMarkerClasses()}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+ChartLegendContent.displayName = "ChartLegendContent";

package/src/components/Chart/components/ChartStyle.tsx

@@ -0,0 +1,32 @@
+import { type Theme } from "../../../utilities";
+import { THEMES } from "../constants";
+import { type ChartStyleProps } from "../types";
+
+export const ChartStyle = ({ id, config }: ChartStyleProps) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as Theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};

package/src/components/Chart/components/ChartTooltip.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { forwardRef, useMemo } from "react";
+import { Tooltip } from "recharts";
+import type { ChartTooltipContentProps } from "../types";
+import { cn } from "../../../utilities";
+import {
+  getChartTooltipContainerClasses,
+  getChartTooltipItemClasses,
+  getChartTooltipItemIndicatorClasses,
+  getChartTooltipItemLabelClasses,
+  getChartTooltipItemValueClasses,
+} from "../constants";
+import { getPayloadConfigFromPayload } from "../helpers";
+import { useChart } from "../hooks";
+
+export const ChartTooltip = Tooltip;
+ChartTooltip.displayName = "ChartTooltip";
+
+export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipContentProps>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div ref={ref} className={cn(getChartTooltipContainerClasses(), className)}>
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor =
+              color ||
+              (item.payload as { fill: string }).fill ||
+              item.color ||
+              (item as { fill: string }).fill;
+
+            return (
+              <div key={item.dataKey} className={getChartTooltipItemClasses({ indicator })}>
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={getChartTooltipItemIndicatorClasses({ indicator, nestLabel })}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div className={getChartTooltipItemLabelClasses({ nestLabel })}>
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span>{itemConfig?.label || item.name}</span>
+                      </div>
+                      {item.value && (
+                        <span className={getChartTooltipItemValueClasses()}>
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltipContent";

package/src/components/Chart/components/index.ts

@@ -0,0 +1,3 @@
+export { ChartLegend, ChartLegendContent } from "./ChartLegend";
+export { ChartStyle } from "./ChartStyle";
+export { ChartTooltip, ChartTooltipContent } from "./ChartTooltip";

package/src/components/Chart/constants.ts

@@ -0,0 +1,78 @@
+import type { Theme } from "../../utilities";
+import { cva } from "../../libs";
+
+export const THEMES = {
+  light: "",
+  dark: ".dark",
+} satisfies Record<Theme, string>;
+
+export const getChartClasses = cva(
+  "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-base-content [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-base-content/20 [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-radial-bar-background-sector]:fill-base-200 [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-base-200 [&_.recharts-reference-line_[stroke='#ccc']]:stroke-base-content/20 [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none"
+);
+
+export const getChartLegendContainerClasses = cva("flex items-center justify-center gap-4", {
+  variants: {
+    verticalAlign: {
+      top: "pb-3",
+      bottom: "pt-3",
+      middle: "",
+    },
+  },
+});
+
+export const getChartLegendItemClasses = cva("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3");
+
+export const getChartLegendMarkerClasses = cva("h-2 w-2 shrink-0 rounded-[2px]");
+
+export const getChartTooltipContainerClasses = cva(
+  "grid min-w-[8rem] items-start gap-1.5 rounded-md border border-border/50 bg-base-100 px-2.5 py-1.5 text-xs shadow-xl"
+);
+
+export const getChartTooltipItemClasses = cva(
+  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-base-content",
+  {
+    variants: {
+      indicator: {
+        dot: "items-center",
+        line: "",
+        dashed: "",
+      },
+    },
+  }
+);
+
+export const getChartTooltipItemLabelClasses = cva(
+  "flex flex-1 justify-between leading-none items-center",
+  {
+    variants: {
+      nestLabel: {
+        true: "items-end",
+      },
+    },
+  }
+);
+
+export const getChartTooltipItemValueClasses = cva("font-mono font-medium tabular-nums");
+
+export const getChartTooltipItemIndicatorClasses = cva(
+  "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+  {
+    variants: {
+      indicator: {
+        dot: "h-2.5 w-2.5",
+        line: "w-1",
+        dashed: "w-0 border-[1.5px] border-dashed bg-transparent",
+      },
+      nestLabel: {
+        true: "",
+      },
+    },
+    compoundVariants: [
+      {
+        indicator: "dashed",
+        nestLabel: true,
+        className: "my-0.5",
+      },
+    ],
+  }
+);

package/src/components/Chart/helpers.ts

@@ -0,0 +1,27 @@
+import { type ChartConfig } from "./types";
+
+// Helper to extract item config from a payload.
+export const getPayloadConfigFromPayload = (config: ChartConfig, payload: unknown, key: string) => {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+};

package/src/components/Chart/hooks/index.ts

@@ -0,0 +1 @@
+export { useChart } from "./useChart";

package/src/components/Chart/hooks/useChart/index.ts

@@ -0,0 +1 @@
+export { useChart } from "./useChart";

package/src/components/Chart/hooks/useChart/useChart.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { ChartContext } from "../../ChartContext";
+
+export const useChart = () => {
+  const context = useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <Chart />");
+  }
+
+  return context;
+};

package/src/components/Chart/index.ts

@@ -0,0 +1,2 @@
+export { Chart } from "./Chart";
+export * from "./components";

package/src/components/Chart/stories/args/activeShapeArgs.ts

@@ -0,0 +1,34 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const activeShapeArgs: ArgTypes = {
+  activeIndex: {
+    description:
+      "The index of the individual shapes of the graph element to be marked as active, and render props.activeShape",
+    table: {
+      category: "General",
+    },
+    control: "number",
+  },
+  shape: {
+    description: "The customized shape to be rendered.",
+    table: {
+      type: {
+        summary: "Function | boolean | ReactElement | object",
+      },
+      defaultValue: undefined,
+      category: "General",
+    },
+    control: "object",
+  },
+  activeShape: {
+    description: "The customized shape to be rendered if activeIndex or activeTooltipIndex match",
+    table: {
+      type: {
+        summary: "Function | boolean | ReactElement | object",
+      },
+      defaultValue: undefined,
+      category: "General",
+    },
+    control: "object",
+  },
+};