ixia-ui-react 1.8.0 → 2.0.0

package/dist/calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Calendar","CalendarRoot"],"sources":["../../src/components/calendar/calendar.reducer.ts","../../src/components/calendar/calendar.tsx","../../src/components/calendar/calendar-day-button.tsx","../../src/components/calendar/calendar-dropdown.tsx","../../src/components/calendar/calendar-footer.tsx","../../src/components/calendar/calendar-header.tsx","../../src/components/calendar/calendar-next-month-button.tsx","../../src/components/calendar/calendar.types.ts","../../src/components/calendar/calendar-panel.tsx","../../src/components/calendar/calendar-chevron.tsx","../../src/components/calendar/calendar-previous-month-button.tsx","../../src/components/calendar/calendar-picker.tsx","../../src/components/calendar/calendar-summary.tsx","../../src/components/calendar/index.ts"],"sourcesContent":["import type { CalendarState, CalendarAction } from './calendar.types'\n\nexport const calendarReducer = (state: CalendarState, action: CalendarAction): CalendarState => {\n  switch (action.type) {\n    case 'SET_SELECTED_DATES': {\n      return {\n        ...state,\n        selectedDates: action.payload,\n      }\n    }\n    default: {\n      return state\n    }\n  }\n}\n","import React from 'react'\n\nimport { calendarReducer } from './calendar.reducer'\nimport type { CalendarProps, CalendarContextValue } from './calendar.types'\n\nconst CalendarContext = React.createContext<CalendarContextValue | undefined>(undefined),\n  useCalendar = () => {\n    const context = React.useContext(CalendarContext)\n\n    if (!context) {\n      throw new Error('useCalendar must be used within a Calendar')\n    }\n\n    return context\n  }\n\nfunction Calendar({ defaultState, children }: CalendarProps) {\n  const [state, dispatch] = React.useReducer(\n    calendarReducer,\n    defaultState ?? { selectedDates: undefined },\n  )\n\n  return <CalendarContext.Provider value={{ dispatch, state }}>{children}</CalendarContext.Provider>\n}\n\nexport { Calendar, useCalendar }\n","import { DayButton } from '@daypicker/react'\n\nimport { cn } from '@/utils'\n\nimport { buttonVariants } from '../button/button.types'\nimport type { CalendarDayButtonProps } from './calendar.types'\n\nexport function CalendarDayButton({ className, modifiers, ...props }: CalendarDayButtonProps) {\n  return (\n    <DayButton\n      {...props}\n      modifiers={modifiers}\n      className={cn(\n        buttonVariants({ size: 'medium', tone: 'neutral', variant: 'ghost' }),\n        'text-inherit hover:bg-brand-container hover:text-brand-on-container',\n        modifiers.selected && 'hover:bg-brand-default hover:text-brand-on-default',\n        className,\n      )}\n    />\n  )\n}\n","import type { ChangeEvent } from 'react'\n\nimport { cn } from '@/utils'\n\nimport { Icon } from '../icon'\nimport {\n  Select,\n  SelectIcon,\n  SelectItem,\n  SelectList,\n  SelectPopup,\n  SelectTitle,\n  SelectTrigger,\n  SelectValue,\n} from '../select'\nimport type { CalendarDropdownProps } from './calendar.types'\n\nfunction createSelectTarget(value: string): HTMLSelectElement {\n  const element = document.createElement('select'),\n    option = Object.assign(document.createElement('option'), { value })\n\n  element.append(option)\n  element.value = value\n\n  return element\n}\n\nexport function CalendarDropdown({\n  children,\n  className,\n  disabled,\n  value,\n  options,\n  onChange,\n  'aria-label': ariaLabel,\n}: CalendarDropdownProps) {\n  const handleValueChange = (newValue: string | null) => {\n    if (onChange) {\n      const element = createSelectTarget(newValue ?? ''),\n        syntheticEvent = {\n          bubbles: false,\n          cancelable: false,\n          currentTarget: element,\n          defaultPrevented: false,\n          eventPhase: Event.NONE,\n          isDefaultPrevented: () => false,\n          isPropagationStopped: () => false,\n          isTrusted: false,\n          nativeEvent: new Event('change'),\n          persist: () => undefined,\n          preventDefault: () => undefined,\n          stopPropagation: () => undefined,\n          target: element,\n          timeStamp: performance.now(),\n          type: 'change',\n        } satisfies ChangeEvent<HTMLSelectElement>\n\n      onChange(syntheticEvent)\n    }\n  }\n\n  return (\n    <Select<string> disabled={disabled} value={value?.toString()} onValueChange={handleValueChange}>\n      <SelectTrigger variant=\"ghost\" aria-label={ariaLabel} className={cn('', className)}>\n        <SelectValue>{options?.find((option) => option.value === value)?.label}</SelectValue>\n        {children ?? (\n          <SelectIcon>\n            <Icon name=\"chevronsUpDown\" />\n          </SelectIcon>\n        )}\n      </SelectTrigger>\n      <SelectPopup>\n        <SelectList>\n          {options?.map((option) => (\n            <SelectItem\n              key={option.value}\n              value={option.value.toString()}\n              disabled={option.disabled}\n            >\n              <SelectTitle>{option.label}</SelectTitle>\n            </SelectItem>\n          ))}\n        </SelectList>\n      </SelectPopup>\n    </Select>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { CalendarFooterProps } from './calendar.types'\n\nexport function CalendarFooter({ className, children, ref, ...props }: CalendarFooterProps) {\n  return (\n    <div\n      data-slot=\"calendar-footer\"\n      className={cn('mt-xs flex flex-col gap-3xs border-t border-border pt-xs', className)}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { CalendarHeaderProps } from './calendar.types'\n\nexport function CalendarHeader({ className, children, ref, ...props }: CalendarHeaderProps) {\n  return (\n    <div className={cn('', className)} ref={ref} {...props}>\n      {children}\n    </div>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport type { CalendarNextMonthButtonProps } from './calendar.types'\n\nexport function CalendarNextMonthButton({\n  className,\n  children,\n  ...props\n}: CalendarNextMonthButtonProps) {\n  return (\n    <Button variant=\"ghost\" tone=\"neutral\" size=\"small\" className={cn('', className)} {...props}>\n      {children ?? <Icon name=\"chevronRight\" />}\n    </Button>\n  )\n}\n","import type { DateRange, DayButton, Mode, PropsBase } from '@daypicker/react'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\nimport type React from 'react'\n\nconst calendarPanelVariants = cva('w-fit', {\n  compoundVariants: [\n    {\n      className: 'rounded-2xl p-sm',\n      variant: ['elevated', 'outline'],\n    },\n  ],\n  defaultVariants: {\n    variant: 'elevated',\n  },\n  variants: {\n    variant: {\n      elevated: 'bg-surface shadow-2xs',\n      ghost: 'bg-transparent',\n      outline: 'border border-border',\n    },\n  },\n})\n\ntype CalendarSelected = Date | Date[] | DateRange\n\ninterface CalendarState {\n  selectedDates: CalendarSelected | undefined\n}\n\ninterface CalendarAction {\n  type: 'SET_SELECTED_DATES'\n  payload: CalendarSelected | undefined\n}\n\ntype CalendarProps = React.ComponentProps<'div'> & {\n  defaultState?: CalendarState\n}\ninterface CalendarContextValue {\n  state: CalendarState\n  dispatch: React.Dispatch<CalendarAction>\n}\n\ntype CalendarPickerProps = PropsBase & {\n  selected?: CalendarSelected\n  onSelect?: (date: CalendarSelected | undefined) => void\n  mode?: Mode\n}\ntype CalendarPanelProps = React.ComponentProps<'div'> & VariantProps<typeof calendarPanelVariants>\ntype CalendarHeaderProps = React.ComponentProps<'div'>\ntype CalendarSummaryProps = React.ComponentProps<'div'>\ntype CalendarFooterProps = React.ComponentProps<'div'>\ntype CalendarComponents = NonNullable<PropsBase['components']>\ntype CalendarChevronProps = React.ComponentProps<NonNullable<CalendarComponents['Chevron']>>\ntype CalendarNextMonthButtonProps = React.ComponentProps<\n  NonNullable<CalendarComponents['NextMonthButton']>\n>\ntype CalendarPreviousMonthButtonProps = React.ComponentProps<\n  NonNullable<CalendarComponents['PreviousMonthButton']>\n>\ntype CalendarDropdownProps = React.ComponentProps<NonNullable<CalendarComponents['Dropdown']>> & {\n  children?: React.ReactNode\n}\ntype CalendarDayButtonProps = React.ComponentProps<typeof DayButton>\n\nexport type {\n  CalendarSelected,\n  CalendarState,\n  CalendarAction,\n  CalendarProps,\n  CalendarContextValue,\n  CalendarPickerProps,\n  CalendarPanelProps,\n  CalendarHeaderProps,\n  CalendarSummaryProps,\n  CalendarFooterProps,\n  CalendarNextMonthButtonProps,\n  CalendarChevronProps,\n  CalendarPreviousMonthButtonProps,\n  CalendarDropdownProps,\n  CalendarDayButtonProps,\n  CalendarComponents,\n}\nexport { calendarPanelVariants }\n","import { cn } from '@/utils/cn'\n\nimport { calendarPanelVariants } from './calendar.types'\nimport type { CalendarPanelProps } from './calendar.types'\n\nexport function CalendarPanel({ variant, className, children, ref, ...props }: CalendarPanelProps) {\n  return (\n    <div className={cn(calendarPanelVariants({ variant }), className)} ref={ref} {...props}>\n      {children}\n    </div>\n  )\n}\n","import { Icon } from '../icon'\nimport type { IconName } from '../icon'\nimport type { CalendarChevronProps } from './calendar.types'\n\nconst chevronIcons: Record<NonNullable<CalendarChevronProps['orientation']>, IconName> = {\n  down: 'chevronDown',\n  left: 'chevronLeft',\n  right: 'chevronRight',\n  up: 'chevronUp',\n}\n\n// DayPicker renders this inside its navigation and caption controls in place of its own blue chevron.\nexport function CalendarChevron({ orientation = 'left' }: CalendarChevronProps) {\n  return <Icon name={chevronIcons[orientation]} />\n}\n","import { cn } from '@/utils/cn'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport type { CalendarPreviousMonthButtonProps } from './calendar.types'\n\nexport function CalendarPreviousMonthButton({\n  className,\n  children,\n  ...props\n}: CalendarPreviousMonthButtonProps) {\n  return (\n    <Button {...props} variant=\"ghost\" tone=\"neutral\" size=\"small\" className={cn('', className)}>\n      {children ?? <Icon name=\"chevronLeft\" />}\n    </Button>\n  )\n}\n","import { DayPicker, getDefaultClassNames, isDateRange, labelDayButton } from '@daypicker/react'\nimport type { OnSelectHandler, PropsBase } from '@daypicker/react'\n\nimport { cn } from '@/utils/cn'\n\nimport { useCalendar } from './calendar'\nimport { CalendarChevron } from './calendar-chevron'\nimport { CalendarDayButton } from './calendar-day-button'\nimport { CalendarDropdown } from './calendar-dropdown'\nimport { CalendarNextMonthButton } from './calendar-next-month-button'\nimport { CalendarPreviousMonthButton } from './calendar-previous-month-button'\nimport type { CalendarComponents, CalendarPickerProps, CalendarSelected } from './calendar.types'\n\nfunction getMultipleSelected(selectedDates: CalendarSelected | undefined): Date[] | undefined {\n  if (Array.isArray(selectedDates)) {\n    return selectedDates\n  }\n  return undefined\n}\n\nfunction getRangeSelected(selectedDates: CalendarSelected | undefined) {\n  if (isDateRange(selectedDates)) {\n    return selectedDates\n  }\n  return undefined\n}\n\nfunction getSingleSelected(selectedDates: CalendarSelected | undefined): Date | undefined {\n  if (selectedDates instanceof Date) {\n    return selectedDates\n  }\n  return undefined\n}\n\n// WCAG 2.5.3: the accessible name must contain the visible text, which is the day number.\nfunction labelDayButtonWithVisibleText(...args: Parameters<typeof labelDayButton>) {\n  const [date, modifiers, options, dateLib] = args,\n    visibleDay = dateLib?.format(date, 'd') ?? String(date.getDate())\n  return `${visibleDay}, ${labelDayButton(date, modifiers, options, dateLib)}`\n}\n\nconst defaultClassNames = getDefaultClassNames(),\n  defaultComponents: CalendarComponents = {\n    Chevron: CalendarChevron,\n    DayButton: CalendarDayButton,\n    Dropdown: CalendarDropdown,\n    NextMonthButton: CalendarNextMonthButton,\n    PreviousMonthButton: CalendarPreviousMonthButton,\n  },\n  calendarClassNames: PropsBase['classNames'] = {\n    caption_label: 'style-text-strong-0',\n    day: cn(\n      'size-xl! rounded-full style-text-default-0 transition-colors hover:bg-brand-container hover:text-brand-on-container data-selected:text-brand-on-default data-selected:hover:bg-brand-default',\n      defaultClassNames.day,\n    ),\n    day_button: cn('size-xl! rounded-full', defaultClassNames.day_button),\n    disabled: cn('pointer-events-none text-on-surface', defaultClassNames.disabled),\n    month_caption: 'flex items-center justify-center h-lg',\n    month_grid: cn('mt-xs border-separate! border-spacing-3xs', defaultClassNames.month_grid),\n    nav: cn('h-lg! w-full justify-between!', defaultClassNames.nav),\n    outside: cn('border-none text-on-surface-muted', defaultClassNames.outside),\n    range_end: cn('rounded-l-none bg-brand-default text-brand-on-default'),\n    range_middle: cn(\n      'rounded-none! border-y border-brand-border bg-brand-container! text-brand-on-container! transition-none',\n    ),\n    range_start: cn(\n      'rounded-r-none bg-brand-default text-brand-on-default',\n      '[&.rounded-l-none]:rounded-xl',\n    ),\n    selected: cn('bg-brand-default text-brand-on-default'),\n    today: cn('text-brand-default! data-selected:text-brand-on-default!', defaultClassNames.today),\n    week: cn('', defaultClassNames.week),\n    weekdays: cn('style-text-default-0 text-on-surface-muted', defaultClassNames.weekdays),\n  }\n\nexport function CalendarPicker({\n  className,\n  components,\n  mode = 'single',\n  selected,\n  onSelect,\n  ...props\n}: CalendarPickerProps) {\n  const { state, dispatch } = useCalendar(),\n    selectedValue = selected ?? state.selectedDates,\n    handleSelect: OnSelectHandler<CalendarSelected | undefined> = (next) => {\n      dispatch({ payload: next, type: 'SET_SELECTED_DATES' })\n      onSelect?.(next)\n    },\n    baseProps: PropsBase = {\n      className,\n      classNames: calendarClassNames,\n      components: { ...defaultComponents, ...components },\n      labels: { labelDayButton: labelDayButtonWithVisibleText },\n      ...props,\n    }\n\n  switch (mode) {\n    case 'multiple': {\n      return (\n        <DayPicker\n          {...baseProps}\n          mode=\"multiple\"\n          selected={getMultipleSelected(selectedValue)}\n          onSelect={handleSelect}\n        />\n      )\n    }\n    case 'range': {\n      return (\n        <DayPicker\n          {...baseProps}\n          mode=\"range\"\n          selected={getRangeSelected(selectedValue)}\n          onSelect={handleSelect}\n        />\n      )\n    }\n    default: {\n      return (\n        <DayPicker\n          {...baseProps}\n          mode=\"single\"\n          selected={getSingleSelected(selectedValue)}\n          onSelect={handleSelect}\n        />\n      )\n    }\n  }\n}\n","import { isDateRange } from '@daypicker/react'\nimport { useState } from 'react'\n\nimport { cn } from '@/utils/cn'\nimport { formatDate } from '@/utils/date-time'\n\nimport { useCalendar } from './calendar'\nimport type { CalendarSummaryProps } from './calendar.types'\n\nconst dateFormatOptions: Intl.DateTimeFormatOptions = {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  },\n  formatCalendarDate = (date: Date) => formatDate(date, 'en-US', dateFormatOptions)\n\nexport function CalendarSummary({ className, children, ref, ...props }: CalendarSummaryProps) {\n  const { state } = useCalendar(),\n    [today, setToday] = useState(() => new Date())\n  void setToday\n  let formattedDate: string | undefined = undefined\n\n  if (state.selectedDates instanceof Date) {\n    formattedDate = formatCalendarDate(state.selectedDates)\n  }\n\n  if (isDateRange(state.selectedDates)) {\n    const { from: startDate, to: endDate } = state.selectedDates\n    if (startDate && endDate) {\n      formattedDate = `${formatCalendarDate(startDate)} - ${formatCalendarDate(endDate)}`\n    }\n  }\n\n  return (\n    <div className={cn('flex flex-col', className)} ref={ref} {...props}>\n      <span className=\"style-text-strong-1\">{formatCalendarDate(today)}</span>\n      <span className=\"style-text-strong-0\">{formattedDate}</span>\n      {children}\n    </div>\n  )\n}\n","// Imported here rather than in the main stylesheet so `@daypicker/react` stays an optional peer.\nimport '@daypicker/react/style.css'\nimport { Calendar as CalendarRoot } from './calendar'\nimport { CalendarDayButton } from './calendar-day-button'\nimport { CalendarDropdown } from './calendar-dropdown'\nimport { CalendarFooter } from './calendar-footer'\nimport { CalendarHeader } from './calendar-header'\nimport { CalendarNextMonthButton } from './calendar-next-month-button'\nimport { CalendarPanel } from './calendar-panel'\nimport { CalendarPicker } from './calendar-picker'\nimport { CalendarPreviousMonthButton } from './calendar-previous-month-button'\nimport { CalendarSummary } from './calendar-summary'\n\nconst Calendar = Object.assign(CalendarRoot, {\n  DayButton: CalendarDayButton,\n  Dropdown: CalendarDropdown,\n  Footer: CalendarFooter,\n  Header: CalendarHeader,\n  NextMonthButton: CalendarNextMonthButton,\n  Panel: CalendarPanel,\n  Picker: CalendarPicker,\n  PreviousMonthButton: CalendarPreviousMonthButton,\n  Summary: CalendarSummary,\n})\n\nexport type {\n  CalendarAction,\n  CalendarContextValue,\n  CalendarProps,\n  CalendarFooterProps,\n  CalendarHeaderProps,\n  CalendarPanelProps,\n  CalendarPickerProps,\n  CalendarSummaryProps,\n  CalendarDayButtonProps,\n  CalendarChevronProps,\n  CalendarNextMonthButtonProps,\n  CalendarPreviousMonthButtonProps,\n  CalendarDropdownProps,\n  CalendarComponents,\n} from './calendar.types'\n\nexport { CalendarPicker } from './calendar-picker'\nexport { CalendarFooter } from './calendar-footer'\nexport { CalendarHeader } from './calendar-header'\nexport { CalendarPanel } from './calendar-panel'\nexport { CalendarSummary } from './calendar-summary'\nexport { CalendarDayButton } from './calendar-day-button'\nexport { CalendarChevron } from './calendar-chevron'\nexport { CalendarNextMonthButton } from './calendar-next-month-button'\nexport { CalendarPreviousMonthButton } from './calendar-previous-month-button'\nexport { CalendarDropdown } from './calendar-dropdown'\nexport { Calendar }\n"],"mappings":"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"}

package/dist/chart/index.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import { DefaultLegendContentProps, LegendProps, TooltipContentProps, TooltipPayloadEntry, TooltipProps } from "recharts";
+declare const THEMES: {
+  readonly dark: '.dark';
+  readonly light: '';
+}, ChartContainerContext: React.Context<ChartContainerContextProps | undefined>, ChartLegendPayloadContext: React.Context<{
+  label?: string;
+  color?: string;
+  icon?: React.ComponentType;
+} | undefined>;
+type ChartConfig = Record<string, {
+  label?: string;
+  icon?: React.ComponentType;
+} & ({
+  color?: string;
+  theme?: never;
+} | {
+  color?: never;
+  theme: Record<keyof typeof THEMES, string>;
+})>;
+interface ChartContainerContextProps {
+  config: ChartConfig;
+}
+type ChartContainerProps = React.ComponentProps<'div'> & {
+  config: ChartConfig;
+  initialDimension?: {
+    width: number;
+    height: number;
+  };
+};
+type ChartTooltipProps = TooltipProps;
+type ChartTooltipContentProps = React.ComponentProps<'div'> & Partial<TooltipContentProps>;
+type ChartLegendProps = LegendProps;
+type ChartLegendContentProps = React.ComponentProps<'div'> & DefaultLegendContentProps;
+type ChartTooltipLabelProps = React.ComponentProps<'p'>;
+type ChartTooltipNameProps = React.ComponentProps<'p'>;
+type ChartTooltipPayloadProps = React.ComponentProps<'div'>;
+type ChartLegendPayloadProps = React.ComponentProps<'div'>;
+type ChartTooltipIndicatorProps = React.ComponentProps<'div'> & {
+  shape?: 'circle' | 'square' | 'diamond' | 'triangle' | 'wye' | 'line';
+};
+type ChartLinearGradientProps = React.ComponentProps<'defs'> & {
+  gradients: {
+    id: string;
+    stopColor: string;
+  }[];
+};
+type ChartTooltipIconProps = React.ComponentProps<'div'>;
+type ChartLegendIconProps = React.ComponentProps<'div'>;
+type ChartLegendLabelProps = React.ComponentProps<'p'>;
+type ChartLegendIndicatorProps = React.ComponentProps<'div'> & {
+  shape?: 'circle' | 'square' | 'diamond' | 'triangle' | 'wye' | 'line';
+};
+type ChartTooltipValueProps = React.ComponentProps<'p'>;
+export declare function ChartContainer({ id, config, className, children, initialDimension, ref, ...props }: ChartContainerProps): React.JSX.Element;
+export declare function ChartTooltip({ content, ...props }: ChartTooltipProps): import("react").JSX.Element;
+declare function ChartTooltipContent({ className, children, ref, ...props }: ChartTooltipContentProps): React.JSX.Element;
+declare function useChartTooltipContent(): ChartTooltipContentProps;
+export declare function ChartTooltipLabel({ className, children, ref, ...props }: ChartTooltipLabelProps): import("react").JSX.Element;
+declare function ChartTooltipPayload({ className, children, ref, ...props }: ChartTooltipPayloadProps): React.JSX.Element;
+declare function useChartTooltipPayload(): TooltipPayloadEntry<import("recharts").TooltipValueType, import("recharts/types/component/DefaultTooltipContent").NameType>;
+export declare function ChartLegend({ children, ...props }: ChartLegendProps): import("react").JSX.Element;
+export declare function ChartLegendContent({ payload, verticalAlign, className, children, ref, ...props }: ChartLegendContentProps): import("react").JSX.Element;
+export declare function ChartLinearGradient({ gradients, className, children, ref, ...props }: ChartLinearGradientProps): import("react").JSX.Element;
+export declare function ChartTooltipIndicator({ shape, className, children, ref, ...props }: ChartTooltipIndicatorProps): import("react").JSX.Element;
+export declare function ChartTooltipName({ className, children, ref, ...props }: ChartTooltipNameProps): import("react").JSX.Element;
+export declare function ChartLegendIcon({ className, children, ref, ...props }: ChartLegendIconProps): import("react").JSX.Element;
+export declare function ChartLegendLabel({ className, children, ref, ...props }: ChartLegendLabelProps): import("react").JSX.Element;
+export declare function ChartLegendIndicator({ shape, className, children, ref, ...props }: ChartLegendIndicatorProps): import("react").JSX.Element;
+export declare function ChartTooltipIcon({ className, children, ref, ...props }: ChartTooltipIconProps): import("react").JSX.Element;
+declare const getPayloadConfigFromPayload: (config: ChartConfig, payload: unknown, key: string) => ({
+  label?: string;
+  icon?: React.ComponentType;
+} & ({
+  color?: string;
+  theme?: never;
+} | {
+  color?: never;
+  theme: Record<"dark" | "light", string>;
+})) | undefined, useChart: () => ChartContainerContextProps, useChartLegendPayload: () => {
+  label?: string;
+  color?: string;
+  icon?: React.ComponentType;
+};
+export declare function ChartTooltipValue({ className, children, ref, ...props }: ChartTooltipValueProps): import("react").JSX.Element;
+export { type ChartConfig, ChartContainerContext, type ChartContainerContextProps, type ChartContainerProps, type ChartLegendContentProps, type ChartLegendIconProps, type ChartLegendIndicatorProps, type ChartLegendLabelProps, type ChartLegendPayloadProps, type ChartLegendProps, type ChartLinearGradientProps, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipIconProps, type ChartTooltipIndicatorProps, type ChartTooltipLabelProps, type ChartTooltipNameProps, ChartTooltipPayload, type ChartTooltipPayloadProps, type ChartTooltipProps, type ChartTooltipValueProps, getPayloadConfigFromPayload, useChart, useChartTooltipContent, useChartTooltipPayload };
+//# sourceMappingURL=index.d.ts.map

package/dist/chart/index.js

@@ -0,0 +1,262 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Legend, ResponsiveContainer, Tooltip } from "recharts";
+// src/components/chart/chart.types.ts
+const ChartContainerContext = React.createContext(void 0);
+const ChartLegendPayloadContext = React.createContext(void 0);
+// src/components/chart/chart-container.tsx
+function ChartContainer({ id, config, className, children, initialDimension, ref, ...props }) {
+	const uniqueId = React.useId(), chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ jsx(ChartContainerContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "chart",
+			"data-chart": chartId,
+			className: cn("flex aspect-video justify-center style-text-default--1 [&_.recharts-cartesian-axis-tick_text]:fill-on-surface-muted [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-neutral-container-high [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-neutral-container-high [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			ref,
+			...props,
+			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+				initialDimension,
+				children
+			})
+		})
+	});
+}
+// src/components/chart/chart-tooltip.tsx
+function ChartTooltip({ content, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content,
+		...props
+	});
+}
+// src/components/chart/chart-tooltip-content.tsx
+const ChartTooltipContentContext = React.createContext(void 0);
+function ChartTooltipContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(ChartTooltipContentContext.Provider, {
+		value: props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("min-w-[125px] space-y-2xs rounded-lg bg-surface-2 px-xs py-2xs shadow-md", className),
+			ref,
+			...props,
+			children
+		})
+	});
+}
+function useChartTooltipContent() {
+	const context = React.useContext(ChartTooltipContentContext);
+	if (!context) throw new Error("useChartTooltipContent must be used within a ChartTooltipContentProvider");
+	return context;
+}
+// src/components/chart/chart-tooltip-label.tsx
+function ChartTooltipLabel({ className, children, ref, ...props }) {
+	const { label } = useChartTooltipContent();
+	return /* @__PURE__ */ jsxs("p", {
+		className: cn("style-text-default-0", className),
+		ref,
+		...props,
+		children: [children, label]
+	});
+}
+// src/components/chart/chart-tooltip-payload.tsx
+const ChartTooltipPayloadContext = React.createContext(void 0);
+function ChartTooltipPayload({ className, children, ref, ...props }) {
+	const { payload } = useChartTooltipContent();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-3xs", className),
+		ref,
+		...props,
+		children: payload?.map((entry) => /* @__PURE__ */ jsx(ChartTooltipPayloadContext.Provider, {
+			value: entry,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-between gap-2xs",
+				children
+			})
+		}, String(entry.dataKey ?? entry.name)))
+	});
+}
+function useChartTooltipPayload() {
+	const context = React.useContext(ChartTooltipPayloadContext);
+	if (!context) throw new Error("useChartTooltipPayload must be used within a ChartTooltipPayloadProvider");
+	return context;
+}
+// src/components/chart/chart-legend.tsx
+function ChartLegend({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Legend, {
+		...props,
+		children
+	});
+}
+// src/components/chart/chart.utils.ts
+const getPayloadConfigFromPayload = (config, payload, key) => {
+	if (typeof payload !== "object" || payload === null) return;
+	if (key in config) return config[key];
+	if ("name" in payload && typeof payload.name === "string" && payload.name in config) return config[payload.name];
+};
+const useChart = () => {
+	const context = React.useContext(ChartContainerContext);
+	if (!context) throw new Error("useChart must be used within a ChartContainerProvider");
+	return context;
+};
+const useChartLegendPayload = () => {
+	const context = React.useContext(ChartLegendPayloadContext);
+	if (!context) throw new Error("useChartLegendPayload must be used within a ChartLegendPayloadProvider");
+	return context;
+};
+// src/components/chart/chart-legend-icon.tsx
+function ChartLegendIcon({ className, children, ref, ...props }) {
+	const { icon: Icon, color } = useChartLegendPayload();
+	return /* @__PURE__ */ jsxs("div", {
+		style: { color },
+		className: cn("shrink-0 [&>svg]:size-xs", className),
+		ref,
+		...props,
+		children: [children, Icon && /* @__PURE__ */ jsx(Icon, {})]
+	});
+}
+// src/components/chart/chart-legend-indicator.tsx
+function ChartLegendIndicator({ shape = "circle", className, children, ref, ...props }) {
+	const { color } = useChartLegendPayload();
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			backgroundColor: color,
+			...shape === "circle" && { borderRadius: "50%" },
+			...shape === "diamond" && { transform: "rotate(45deg)" },
+			...shape === "triangle" && { clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)" },
+			...shape === "wye" && { clipPath: "polygon(50% 0%, 61.8% 35.4%, 98.5% 35.4%, 69.1% 57.1%, 80.9% 92.5%, 50% 70.7%, 19.1% 92.5%, 30.9% 57.1%, 1.5% 35.4%, 38.2% 35.4%)" },
+			...shape === "line" && {
+				borderRadius: "1.5px",
+				maxHeight: "100%",
+				width: "3px"
+			}
+		},
+		className: cn("size-xs", className),
+		ref,
+		...props,
+		children
+	});
+}
+// src/components/chart/chart-legend-label.tsx
+function ChartLegendLabel({ className, children, ref, ...props }) {
+	const { label } = useChartLegendPayload();
+	return /* @__PURE__ */ jsxs("p", {
+		className: cn("style-text-default--1 capitalize", className),
+		ref,
+		...props,
+		children: [children, label]
+	});
+}
+// src/components/chart/chart-legend-content.tsx
+function ChartLegendContent({ payload, verticalAlign = "bottom", className, children, ref, ...props }) {
+	const { config } = useChart();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center gap-lg", verticalAlign === "top" && "mb-md", verticalAlign === "bottom" && "mt-md", className),
+		ref,
+		...props,
+		children: payload?.map((entry) => {
+			let payloadKey = "value";
+			if (typeof entry.dataKey === "string") payloadKey = entry.dataKey;
+			const payloadConfig = getPayloadConfigFromPayload(config, entry, payloadKey);
+			return /* @__PURE__ */ jsx(ChartLegendPayloadContext.Provider, {
+				value: {
+					color: payloadConfig?.color,
+					icon: payloadConfig?.icon,
+					label: payloadConfig?.label
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2xs",
+					children: [
+						payloadConfig?.icon && /* @__PURE__ */ jsx(ChartLegendIcon, {}),
+						!payloadConfig?.icon && /* @__PURE__ */ jsx(ChartLegendIndicator, {}),
+						/* @__PURE__ */ jsx(ChartLegendLabel, {}),
+						children
+					]
+				})
+			}, String(entry.dataKey ?? entry.value));
+		})
+	});
+}
+// src/components/chart/chart-linear-gradient.tsx
+function ChartLinearGradient({ gradients, className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("defs", {
+		className: cn("", className),
+		ref,
+		...props,
+		children: [gradients.map((gradient) => /* @__PURE__ */ jsxs("linearGradient", {
+			id: gradient.id,
+			x1: "0",
+			y1: "0",
+			x2: "0",
+			y2: "1",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "5%",
+				stopColor: gradient.stopColor,
+				stopOpacity: .8
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "95%",
+				stopColor: gradient.stopColor,
+				stopOpacity: .1
+			})]
+		}, gradient.id)), children]
+	});
+}
+// src/components/chart/chart-tooltip-indicator.tsx
+function ChartTooltipIndicator({ shape = "circle", className, children, ref, ...props }) {
+	const { color } = useChartTooltipPayload();
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			backgroundColor: color,
+			...shape === "circle" && { borderRadius: "50%" },
+			...shape === "diamond" && { transform: "rotate(45deg)" },
+			...shape === "triangle" && { clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)" },
+			...shape === "wye" && { clipPath: "polygon(50% 0%, 61.8% 35.4%, 98.5% 35.4%, 69.1% 57.1%, 80.9% 92.5%, 50% 70.7%, 19.1% 92.5%, 30.9% 57.1%, 1.5% 35.4%, 38.2% 35.4%)" },
+			...shape === "line" && {
+				borderRadius: "1.5px",
+				maxHeight: "100%",
+				width: "3px"
+			}
+		},
+		className: cn("size-xs", className),
+		ref,
+		...props,
+		children
+	});
+}
+// src/components/chart/chart-tooltip-name.tsx
+function ChartTooltipName({ className, children, ref, ...props }) {
+	const { name } = useChartTooltipPayload();
+	return /* @__PURE__ */ jsxs("p", {
+		className: cn("grow text-left style-text-default--1 text-on-surface-variant capitalize", className),
+		ref,
+		...props,
+		children: [children, name]
+	});
+}
+// src/components/chart/chart-tooltip-icon.tsx
+function resolveConfigKey(dataKey) {
+	if (typeof dataKey === "string") return dataKey;
+	return "value";
+}
+function ChartTooltipIcon({ className, children, ref, ...props }) {
+	const { config } = useChart(), payload = useChartTooltipPayload(), Icon = getPayloadConfigFromPayload(config, payload, resolveConfigKey(payload.dataKey))?.icon;
+	return /* @__PURE__ */ jsxs("div", {
+		style: { color: payload.color },
+		className: cn("shrink-0 [&>svg]:size-xs", className),
+		ref,
+		...props,
+		children: [children, Icon && /* @__PURE__ */ jsx(Icon, {})]
+	});
+}
+// src/components/chart/chart-tooltip-value.tsx
+function ChartTooltipValue({ className, children, ref, ...props }) {
+	const { value } = useChartTooltipPayload();
+	return /* @__PURE__ */ jsxs("p", {
+		className: cn("mx-auto style-text-default--1", className),
+		ref,
+		...props,
+		children: [children, value]
+	});
+}
+export { ChartContainer, ChartContainerContext, ChartLegend, ChartLegendContent, ChartLegendIcon, ChartLegendIndicator, ChartLegendLabel, ChartLinearGradient, ChartTooltip, ChartTooltipContent, ChartTooltipIcon, ChartTooltipIndicator, ChartTooltipLabel, ChartTooltipName, ChartTooltipPayload, ChartTooltipValue, getPayloadConfigFromPayload, useChart, useChartTooltipContent, useChartTooltipPayload };
+
+//# sourceMappingURL=index.js.map

package/dist/chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/components/chart/chart.types.ts","../../src/components/chart/chart-container.tsx","../../src/components/chart/chart-tooltip.tsx","../../src/components/chart/chart-tooltip-content.tsx","../../src/components/chart/chart-tooltip-label.tsx","../../src/components/chart/chart-tooltip-payload.tsx","../../src/components/chart/chart-legend.tsx","../../src/components/chart/chart.utils.ts","../../src/components/chart/chart-legend-icon.tsx","../../src/components/chart/chart-legend-indicator.tsx","../../src/components/chart/chart-legend-label.tsx","../../src/components/chart/chart-legend-content.tsx","../../src/components/chart/chart-linear-gradient.tsx","../../src/components/chart/chart-tooltip-indicator.tsx","../../src/components/chart/chart-tooltip-name.tsx","../../src/components/chart/chart-tooltip-icon.tsx","../../src/components/chart/chart-tooltip-value.tsx"],"sourcesContent":["import React from 'react'\nimport type {\n  TooltipProps as RechartsTooltipProps,\n  TooltipContentProps as RechartsTooltipContentProps,\n  LegendProps as RechartsLegendProps,\n  DefaultLegendContentProps as RechartsDefaultLegendContentProps,\n} from 'recharts'\n\nconst THEMES = { dark: '.dark', light: '' } as const,\n  ChartContainerContext = React.createContext<ChartContainerContextProps | undefined>(undefined),\n  ChartLegendPayloadContext = React.createContext<\n    | {\n        label?: string\n        color?: string\n        icon?: React.ComponentType\n      }\n    | undefined\n  >(undefined)\n\ntype ChartConfig = Record<\n  string,\n  {\n    label?: string\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>\n\ninterface ChartContainerContextProps {\n  config: ChartConfig\n}\n\ntype ChartContainerProps = React.ComponentProps<'div'> & {\n  config: ChartConfig\n  initialDimension?: { width: number; height: number }\n}\n\ntype ChartTooltipProps = RechartsTooltipProps\ntype ChartTooltipContentProps = React.ComponentProps<'div'> & Partial<RechartsTooltipContentProps>\ntype ChartLegendProps = RechartsLegendProps\ntype ChartLegendContentProps = React.ComponentProps<'div'> & RechartsDefaultLegendContentProps\ntype ChartTooltipLabelProps = React.ComponentProps<'p'>\ntype ChartTooltipNameProps = React.ComponentProps<'p'>\ntype ChartTooltipPayloadProps = React.ComponentProps<'div'>\ntype ChartLegendPayloadProps = React.ComponentProps<'div'>\ntype ChartTooltipIndicatorProps = React.ComponentProps<'div'> & {\n  shape?: 'circle' | 'square' | 'diamond' | 'triangle' | 'wye' | 'line'\n}\ntype ChartLinearGradientProps = React.ComponentProps<'defs'> & {\n  gradients: {\n    id: string\n    stopColor: string\n  }[]\n}\ntype ChartTooltipIconProps = React.ComponentProps<'div'>\ntype ChartLegendIconProps = React.ComponentProps<'div'>\ntype ChartLegendLabelProps = React.ComponentProps<'p'>\ntype ChartLegendIndicatorProps = React.ComponentProps<'div'> & {\n  shape?: 'circle' | 'square' | 'diamond' | 'triangle' | 'wye' | 'line'\n}\ntype ChartTooltipValueProps = React.ComponentProps<'p'>\n\nexport type {\n  ChartConfig,\n  ChartContainerContextProps,\n  ChartContainerProps,\n  ChartTooltipProps,\n  ChartTooltipContentProps,\n  ChartLegendProps,\n  ChartLegendContentProps,\n  ChartTooltipLabelProps,\n  ChartTooltipNameProps,\n  ChartTooltipPayloadProps,\n  ChartLegendPayloadProps,\n  ChartTooltipIndicatorProps,\n  ChartLinearGradientProps,\n  ChartTooltipIconProps,\n  ChartLegendIconProps,\n  ChartLegendLabelProps,\n  ChartLegendIndicatorProps,\n  ChartTooltipValueProps,\n}\nexport { ChartContainerContext, ChartLegendPayloadContext }\n","import React from 'react'\nimport { ResponsiveContainer } from 'recharts'\n\nimport { cn } from '@/utils/cn'\n\nimport { ChartContainerContext } from './chart.types'\nimport type { ChartContainerProps } from './chart.types'\n\nexport function ChartContainer({\n  id,\n  config,\n  className,\n  children,\n  initialDimension,\n  ref,\n  ...props\n}: ChartContainerProps) {\n  const uniqueId = React.useId(),\n    chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`\n\n  return (\n    <ChartContainerContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center style-text-default--1 [&_.recharts-cartesian-axis-tick_text]:fill-on-surface-muted [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-neutral-container-high [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-neutral-container-high [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        <ResponsiveContainer initialDimension={initialDimension}>{children}</ResponsiveContainer>\n      </div>\n    </ChartContainerContext.Provider>\n  )\n}\n","import { Tooltip } from 'recharts'\n\nimport type { ChartTooltipProps } from './chart.types'\n\nexport function ChartTooltip({ content, ...props }: ChartTooltipProps) {\n  return <Tooltip content={content} {...props} />\n}\n","import React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { ChartTooltipContentProps } from './chart.types'\n\nconst ChartTooltipContentContext = React.createContext<ChartTooltipContentProps | undefined>(\n  undefined,\n)\n\nfunction ChartTooltipContent({ className, children, ref, ...props }: ChartTooltipContentProps) {\n  return (\n    <ChartTooltipContentContext.Provider value={props}>\n      <div\n        className={cn(\n          'min-w-[125px] space-y-2xs rounded-lg bg-surface-2 px-xs py-2xs shadow-md',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </div>\n    </ChartTooltipContentContext.Provider>\n  )\n}\n\nfunction useChartTooltipContent() {\n  const context = React.useContext(ChartTooltipContentContext)\n\n  if (!context) {\n    throw new Error('useChartTooltipContent must be used within a ChartTooltipContentProvider')\n  }\n\n  return context\n}\n\nexport { ChartTooltipContent, useChartTooltipContent }\n","import { cn } from '@/utils/cn'\n\nimport { useChartTooltipContent } from './chart-tooltip-content'\nimport type { ChartTooltipLabelProps } from './chart.types'\n\nexport function ChartTooltipLabel({ className, children, ref, ...props }: ChartTooltipLabelProps) {\n  const { label } = useChartTooltipContent()\n\n  return (\n    <p className={cn('style-text-default-0', className)} ref={ref} {...props}>\n      {children}\n      {label}\n    </p>\n  )\n}\n","import React from 'react'\nimport type { TooltipPayloadEntry } from 'recharts'\n\nimport { cn } from '@/utils/cn'\n\nimport { useChartTooltipContent } from './chart-tooltip-content'\nimport type { ChartTooltipPayloadProps } from './chart.types'\n\nconst ChartTooltipPayloadContext = React.createContext<TooltipPayloadEntry | undefined>(undefined)\n\nfunction ChartTooltipPayload({ className, children, ref, ...props }: ChartTooltipPayloadProps) {\n  const { payload } = useChartTooltipContent()\n\n  return (\n    <div className={cn('flex flex-col gap-3xs', className)} ref={ref} {...props}>\n      {payload?.map((entry) => (\n        <ChartTooltipPayloadContext.Provider\n          key={String(entry.dataKey ?? entry.name)}\n          value={entry}\n        >\n          <div className=\"flex items-center justify-between gap-2xs\">{children}</div>\n        </ChartTooltipPayloadContext.Provider>\n      ))}\n    </div>\n  )\n}\n\nfunction useChartTooltipPayload() {\n  const context = React.useContext(ChartTooltipPayloadContext)\n\n  if (!context) {\n    throw new Error('useChartTooltipPayload must be used within a ChartTooltipPayloadProvider')\n  }\n\n  return context\n}\n\nexport { ChartTooltipPayload, useChartTooltipPayload }\n","import { Legend } from 'recharts'\n\nimport type { ChartLegendProps } from './chart.types'\n\nexport function ChartLegend({ children, ...props }: ChartLegendProps) {\n  return <Legend {...props}>{children}</Legend>\n}\n","import React from 'react'\n\nimport { ChartLegendPayloadContext, ChartContainerContext } from './chart.types'\nimport type { ChartConfig } from './chart.types'\n\nconst getPayloadConfigFromPayload = (config: ChartConfig, payload: unknown, key: string) => {\n    if (typeof payload !== 'object' || payload === null) {\n      return undefined\n    }\n\n    if (key in config) {\n      return config[key]\n    }\n\n    if ('name' in payload && typeof payload.name === 'string' && payload.name in config) {\n      return config[payload.name]\n    }\n\n    return undefined\n  },\n  useChart = () => {\n    const context = React.useContext(ChartContainerContext)\n\n    if (!context) {\n      throw new Error('useChart must be used within a ChartContainerProvider')\n    }\n\n    return context\n  },\n  useChartLegendPayload = () => {\n    const context = React.useContext(ChartLegendPayloadContext)\n\n    if (!context) {\n      throw new Error('useChartLegendPayload must be used within a ChartLegendPayloadProvider')\n    }\n\n    return context\n  }\n\nexport { getPayloadConfigFromPayload, useChart, useChartLegendPayload }\n","import { cn } from '@/utils/cn'\n\nimport type { ChartLegendIconProps } from './chart.types'\nimport { useChartLegendPayload } from './chart.utils'\n\nexport function ChartLegendIcon({ className, children, ref, ...props }: ChartLegendIconProps) {\n  const { icon: Icon, color } = useChartLegendPayload()\n\n  return (\n    <div\n      style={{\n        color,\n      }}\n      className={cn('shrink-0 [&>svg]:size-xs', className)}\n      ref={ref}\n      {...props}\n    >\n      {children}\n      {Icon && <Icon />}\n    </div>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { ChartLegendIndicatorProps } from './chart.types'\nimport { useChartLegendPayload } from './chart.utils'\n\nexport function ChartLegendIndicator({\n  shape = 'circle',\n  className,\n  children,\n  ref,\n  ...props\n}: ChartLegendIndicatorProps) {\n  const { color } = useChartLegendPayload()\n\n  return (\n    <div\n      style={{\n        backgroundColor: color,\n        ...(shape === 'circle' && { borderRadius: '50%' }),\n        ...(shape === 'diamond' && { transform: 'rotate(45deg)' }),\n        ...(shape === 'triangle' && { clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)' }),\n        ...(shape === 'wye' && {\n          clipPath:\n            'polygon(50% 0%, 61.8% 35.4%, 98.5% 35.4%, 69.1% 57.1%, 80.9% 92.5%, 50% 70.7%, 19.1% 92.5%, 30.9% 57.1%, 1.5% 35.4%, 38.2% 35.4%)',\n        }),\n        ...(shape === 'line' && { borderRadius: '1.5px', maxHeight: '100%', width: '3px' }),\n      }}\n      className={cn('size-xs', className)}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { ChartLegendLabelProps } from './chart.types'\nimport { useChartLegendPayload } from './chart.utils'\n\nexport function ChartLegendLabel({ className, children, ref, ...props }: ChartLegendLabelProps) {\n  const { label } = useChartLegendPayload()\n\n  return (\n    <p className={cn('style-text-default--1 capitalize', className)} ref={ref} {...props}>\n      {children}\n      {label}\n    </p>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { ChartLegendIcon } from './chart-legend-icon'\nimport { ChartLegendIndicator } from './chart-legend-indicator'\nimport { ChartLegendLabel } from './chart-legend-label'\nimport { ChartLegendPayloadContext } from './chart.types'\nimport type { ChartLegendContentProps } from './chart.types'\nimport { getPayloadConfigFromPayload, useChart } from './chart.utils'\n\nexport function ChartLegendContent({\n  payload,\n  verticalAlign = 'bottom',\n  className,\n  children,\n  ref,\n  ...props\n}: ChartLegendContentProps) {\n  const { config } = useChart()\n\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-lg',\n        verticalAlign === 'top' && 'mb-md',\n        verticalAlign === 'bottom' && 'mt-md',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      {payload?.map((entry) => {\n        let payloadKey = 'value'\n\n        if (typeof entry.dataKey === 'string') {\n          payloadKey = entry.dataKey\n        }\n\n        const payloadConfig = getPayloadConfigFromPayload(config, entry, payloadKey)\n\n        return (\n          <ChartLegendPayloadContext.Provider\n            key={String(entry.dataKey ?? entry.value)}\n            value={{\n              color: payloadConfig?.color,\n              icon: payloadConfig?.icon,\n              label: payloadConfig?.label,\n            }}\n          >\n            <div className=\"flex items-center gap-2xs\">\n              {payloadConfig?.icon && <ChartLegendIcon />}\n              {!payloadConfig?.icon && <ChartLegendIndicator />}\n              <ChartLegendLabel />\n              {children}\n            </div>\n          </ChartLegendPayloadContext.Provider>\n        )\n      })}\n    </div>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { ChartLinearGradientProps } from './chart.types'\n\nexport function ChartLinearGradient({\n  gradients,\n  className,\n  children,\n  ref,\n  ...props\n}: ChartLinearGradientProps) {\n  return (\n    <defs className={cn('', className)} ref={ref} {...props}>\n      {gradients.map((gradient) => (\n        <linearGradient key={gradient.id} id={gradient.id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"5%\" stopColor={gradient.stopColor} stopOpacity={0.8} />\n          <stop offset=\"95%\" stopColor={gradient.stopColor} stopOpacity={0.1} />\n        </linearGradient>\n      ))}\n      {children}\n    </defs>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { useChartTooltipPayload } from './chart-tooltip-payload'\nimport type { ChartTooltipIndicatorProps } from './chart.types'\n\nexport function ChartTooltipIndicator({\n  shape = 'circle',\n  className,\n  children,\n  ref,\n  ...props\n}: ChartTooltipIndicatorProps) {\n  const { color } = useChartTooltipPayload()\n\n  return (\n    <div\n      style={{\n        backgroundColor: color,\n        ...(shape === 'circle' && { borderRadius: '50%' }),\n        ...(shape === 'diamond' && { transform: 'rotate(45deg)' }),\n        ...(shape === 'triangle' && { clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)' }),\n        ...(shape === 'wye' && {\n          clipPath:\n            'polygon(50% 0%, 61.8% 35.4%, 98.5% 35.4%, 69.1% 57.1%, 80.9% 92.5%, 50% 70.7%, 19.1% 92.5%, 30.9% 57.1%, 1.5% 35.4%, 38.2% 35.4%)',\n        }),\n        ...(shape === 'line' && { borderRadius: '1.5px', maxHeight: '100%', width: '3px' }),\n      }}\n      className={cn('size-xs', className)}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { useChartTooltipPayload } from './chart-tooltip-payload'\nimport type { ChartTooltipNameProps } from './chart.types'\n\nexport function ChartTooltipName({ className, children, ref, ...props }: ChartTooltipNameProps) {\n  const { name } = useChartTooltipPayload()\n\n  return (\n    <p\n      className={cn(\n        'grow text-left style-text-default--1 text-on-surface-variant capitalize',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      {children}\n      {name}\n    </p>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { useChartTooltipPayload } from './chart-tooltip-payload'\nimport type { ChartTooltipIconProps } from './chart.types'\nimport { getPayloadConfigFromPayload, useChart } from './chart.utils'\n\nfunction resolveConfigKey(dataKey: unknown): string {\n  if (typeof dataKey === 'string') {\n    return dataKey\n  }\n\n  return 'value'\n}\n\nexport function ChartTooltipIcon({ className, children, ref, ...props }: ChartTooltipIconProps) {\n  const { config } = useChart(),\n    payload = useChartTooltipPayload(),\n    payloadConfig = getPayloadConfigFromPayload(config, payload, resolveConfigKey(payload.dataKey)),\n    Icon = payloadConfig?.icon\n\n  return (\n    <div\n      style={{\n        color: payload.color,\n      }}\n      className={cn('shrink-0 [&>svg]:size-xs', className)}\n      ref={ref}\n      {...props}\n    >\n      {children}\n      {Icon && <Icon />}\n    </div>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { useChartTooltipPayload } from './chart-tooltip-payload'\nimport type { ChartTooltipValueProps } from './chart.types'\n\nexport function ChartTooltipValue({ className, children, ref, ...props }: ChartTooltipValueProps) {\n  const { value } = useChartTooltipPayload()\n\n  return (\n    <p className={cn('mx-auto style-text-default--1', className)} ref={ref} {...props}>\n      {children}\n      {value}\n    </p>\n  )\n}\n"],"mappings":"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"}

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { i as CheckboxRootProps, n as CheckboxIndicator, r as CheckboxIndicatorProps, t as Checkbox } from "../index-x4f8gnaI.js";
+export { Checkbox, CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxRootProps };

package/dist/checkbox/index.js

@@ -0,0 +1 @@
+export { t as Checkbox, n as CheckboxIndicator } from "../checkbox-BuUZ1Lly.js";

package/dist/checkbox-BuUZ1Lly.js

@@ -0,0 +1,54 @@
+import { t as cn } from "./cn-BDi0DfT5.js";
+import { n as Icon } from "./icon-D3JWfCa2.js";
+import { t as Label } from "./label-BgpayDvN.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+// src/components/checkbox/checkbox-indicator.tsx
+function CheckboxIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+		className: cn("flex", className),
+		...props,
+		render: (innerProps, state) => {
+			if (state.indeterminate) return /* @__PURE__ */ jsx(Icon, {
+				name: "minus",
+				...innerProps,
+				className: "text-accent-default"
+			});
+			return /* @__PURE__ */ jsx(Icon, {
+				name: "selected",
+				...innerProps
+			});
+		}
+	});
+}
+// src/components/checkbox/checkbox.types.ts
+const checkboxVariants = cva("group flex size-md items-center justify-center rounded-md shadow-2xs outline-2 outline-transparent transition-colors not-indeterminate:text-accent-on-default indeterminate:text-accent-default hover:cursor-pointer hover:outline-accent-border disabled:cursor-not-allowed disabled:hover:cursor-not-allowed data-checked:bg-accent-default [&_svg]:size-sm", {
+	defaultVariants: { variant: "elevated" },
+	variants: { variant: {
+		elevated: "bg-surface shadow-2xs",
+		inSurface: "bg-surface-low shadow-none inset-shadow-2xs data-checked:inset-shadow-none",
+		outline: "bg-inherit shadow-none outline [&:not([data-checked])]:not-hover:outline-border-strong"
+	} }
+});
+// src/components/checkbox/checkbox.tsx
+function Checkbox$3({ variant, children, className, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(Label, {
+		className: "flex items-center gap-xs has-disabled:opacity-50",
+		children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+			className: cn(checkboxVariants({
+				className,
+				variant
+			})),
+			ref,
+			...props,
+			children: /* @__PURE__ */ jsx(CheckboxIndicator, {})
+		}), children]
+	});
+}
+// src/components/checkbox/index.ts
+const Checkbox$2 = Object.assign(Checkbox$3, { Indicator: CheckboxIndicator });
+export { CheckboxIndicator as n, Checkbox$2 as t };
+
+//# sourceMappingURL=checkbox-BuUZ1Lly.js.map

package/dist/checkbox-BuUZ1Lly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-BuUZ1Lly.js","names":["BaseCheckbox","Checkbox","BaseCheckbox","Checkbox","CheckboxRoot"],"sources":["../src/components/checkbox/checkbox-indicator.tsx","../src/components/checkbox/checkbox.types.ts","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts"],"sourcesContent":["import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox'\n\nimport { cn } from '@/utils/cn'\n\nimport { Icon } from '../icon'\nimport type { CheckboxIndicatorProps } from './checkbox.types'\n\nexport function CheckboxIndicator({ className, ...props }: CheckboxIndicatorProps) {\n  return (\n    <BaseCheckbox.Indicator\n      className={cn('flex', className)}\n      {...props}\n      render={(innerProps, state) => {\n        if (state.indeterminate) {\n          return <Icon name=\"minus\" {...innerProps} className=\"text-accent-default\" />\n        }\n        return <Icon name=\"selected\" {...innerProps} />\n      }}\n    />\n  )\n}\n","import type { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\nimport type { ComponentProps } from 'react'\n\nconst checkboxVariants = cva(\n  'group flex size-md items-center justify-center rounded-md shadow-2xs outline-2 outline-transparent transition-colors not-indeterminate:text-accent-on-default indeterminate:text-accent-default hover:cursor-pointer hover:outline-accent-border disabled:cursor-not-allowed disabled:hover:cursor-not-allowed data-checked:bg-accent-default [&_svg]:size-sm',\n  {\n    defaultVariants: {\n      variant: 'elevated',\n    },\n    variants: {\n      variant: {\n        elevated: 'bg-surface shadow-2xs',\n        inSurface: 'bg-surface-low shadow-none inset-shadow-2xs data-checked:inset-shadow-none',\n        outline:\n          'bg-inherit shadow-none outline [&:not([data-checked])]:not-hover:outline-border-strong',\n      },\n    },\n  },\n)\n\ntype CheckboxRootProps = ComponentProps<typeof BaseCheckbox.Root> &\n  VariantProps<typeof checkboxVariants>\n\ntype CheckboxIndicatorProps = ComponentProps<typeof BaseCheckbox.Indicator>\n\nexport { checkboxVariants, type CheckboxRootProps, type CheckboxIndicatorProps }\n","import { Checkbox as BaseCheckbox } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Label } from '../label'\nimport { CheckboxIndicator } from './checkbox-indicator'\nimport { checkboxVariants } from './checkbox.types'\nimport type { CheckboxRootProps } from './checkbox.types'\n\nexport function Checkbox({ variant, children, className, ref, ...props }: CheckboxRootProps) {\n  return (\n    <Label className=\"flex items-center gap-xs has-disabled:opacity-50\">\n      <BaseCheckbox.Root\n        className={cn(checkboxVariants({ className, variant }))}\n        ref={ref}\n        {...props}\n      >\n        <CheckboxIndicator />\n      </BaseCheckbox.Root>\n      {children}\n    </Label>\n  )\n}\n","import { Checkbox as CheckboxRoot } from './checkbox'\nimport { CheckboxIndicator } from './checkbox-indicator'\n\nconst Checkbox = Object.assign(CheckboxRoot, {\n  Indicator: CheckboxIndicator,\n})\n\nexport type { CheckboxIndicatorProps, CheckboxRootProps } from './checkbox.types'\nexport { CheckboxIndicator } from './checkbox-indicator'\n\nexport { Checkbox }\n"],"mappings":";;;;;;;;AAOA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CACjF,OACE,oBAACA,WAAa,WAAd;EACE,WAAW,GAAG,QAAQ,SAAS;EAC/B,GAAI;EACJ,SAAS,YAAY,UAAU;GAC7B,IAAI,MAAM,eACR,OAAO,oBAAC,MAAD;IAAM,MAAK;IAAQ,GAAI;IAAY,WAAU;GAAuB,CAAA;GAE7E,OAAO,oBAAC,MAAD;IAAM,MAAK;IAAW,GAAI;GAAa,CAAA;EAChD;CACD,CAAA;AAEL;;ACfA,MAAM,mBAAmB,IACvB,iWACA;CACE,iBAAiB,EACf,SAAS,WACX;CACA,UAAU,EACR,SAAS;EACP,UAAU;EACV,WAAW;EACX,SACE;CACJ,EACF;AACF,CACF;;ACXA,SAAgBC,WAAS,EAAE,SAAS,UAAU,WAAW,KAAK,GAAG,SAA4B;CAC3F,OACE,qBAAC,OAAD;EAAO,WAAU;EAAjB,UAAA,CACE,oBAACC,SAAa,MAAd;GACE,WAAW,GAAG,iBAAiB;IAAE;IAAW;GAAQ,CAAC,CAAC;GACjD;GACL,GAAI;GAEJ,UAAA,oBAAC,mBAAD,CAAoB,CAAA;EACH,CAAA,GAClB,QACI;;AAEX;;ACnBA,MAAMC,aAAW,OAAO,OAAOC,YAAc,EAC3C,WAAW,kBACb,CAAC"}

package/dist/checkbox-group/index.d.ts

@@ -0,0 +1,6 @@
+import React$1 from "react";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react";
+type CheckboxGroupProps = React.ComponentProps<typeof CheckboxGroup$1>;
+export declare function CheckboxGroup({ className, ref, ...props }: CheckboxGroupProps): React$1.JSX.Element;
+export type { CheckboxGroupProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/checkbox-group/index.js

@@ -0,0 +1,17 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react";
+// src/components/checkbox-group/checkbox-group.tsx
+function CheckboxGroup({ className, ref, ...props }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsx(CheckboxGroup$1, {
+		"aria-labelledby": id,
+		className: cn("flex flex-col items-start gap-2xs", className),
+		ref,
+		...props
+	});
+}
+export { CheckboxGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/checkbox-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BaseCheckboxGroup"],"sources":["../../src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react'\nimport React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { CheckboxGroupProps } from './checkbox-group.types'\n\nexport function CheckboxGroup({ className, ref, ...props }: CheckboxGroupProps) {\n  const id = React.useId()\n  return (\n    <BaseCheckboxGroup\n      aria-labelledby={id}\n      className={cn('flex flex-col items-start gap-2xs', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;AAOA,SAAgB,cAAc,EAAE,WAAW,KAAK,GAAG,SAA6B;CAC9E,MAAM,KAAK,MAAM,MAAM;CACvB,OACE,oBAACA,iBAAD;EACE,mBAAiB;EACjB,WAAW,GAAG,qCAAqC,SAAS;EACvD;EACL,GAAI;CACL,CAAA;AAEL"}

package/dist/cn-BDi0DfT5.js

@@ -0,0 +1,29 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+// src/utils/cn.ts
+const twMerge = extendTailwindMerge({ extend: { theme: { spacing: [
+	"3xs",
+	"2xs",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl",
+	"3xs-2xs",
+	"2xs-xs",
+	"xs-sm",
+	"sm-md",
+	"md-lg",
+	"lg-xl",
+	"xl-2xl",
+	"2xl-3xl",
+	"sm-lg"
+] } } });
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+export { cn as t };
+
+//# sourceMappingURL=cn-BDi0DfT5.js.map

package/dist/cn-BDi0DfT5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn-BDi0DfT5.js","names":[],"sources":["../src/utils/cn.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport type { ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n// Theme spacing tokens from styles/input.css; without them twMerge cannot dedupe e.g. gap-md vs gap-0.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      spacing: [\n        '3xs',\n        '2xs',\n        'xs',\n        'sm',\n        'md',\n        'lg',\n        'xl',\n        '2xl',\n        '3xl',\n        '3xs-2xs',\n        '2xs-xs',\n        'xs-sm',\n        'sm-md',\n        'md-lg',\n        'lg-xl',\n        'xl-2xl',\n        '2xl-3xl',\n        'sm-lg',\n      ],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;AAKA,MAAM,UAAU,oBAAoB,EAClC,QAAQ,EACN,OAAO,EACL,SAAS;CACP;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}