torch-glare 2.1.0 → 2.1.1

package/apps/lib/components/Badge.tsx

@@ -60,7 +60,7 @@ const solidCompoundVariants = [
 ];
 
 const SUBTLE_TEXT =
-  "text-content-presentation-global-subtle [&_i]:text-content-presentation-global-subtle mix-blend-luminosity";
+  "text-content-presentation-global-subtle [&>div]:mix-blend-luminosity [&_i]:text-content-presentation-global-subtle [&_i]:mix-blend-luminosity [&>button]:mix-blend-luminosity";
 
 const subtleCompoundVariants = [
   {
@@ -163,8 +163,8 @@ interface BadgeProps
   label?: string;
   badgeIcon?: ReactNode;
   showIcon?: boolean;
-  isSelected?: boolean;
-  onUnselect?: () => void;
+  isClosable?: boolean;
+  onClose?: () => void;
   theme?: Themes;
   className?: string;
 }
@@ -173,8 +173,8 @@ export const Badge: React.FC<BadgeProps> = ({
   label,
   badgeIcon,
   showIcon = true,
-  isSelected,
-  onUnselect,
+  isClosable,
+  onClose,
   theme,
   badgeStyle,
   color,
@@ -188,7 +188,7 @@ export const Badge: React.FC<BadgeProps> = ({
       data-theme={theme}
       className={cn(
         badgeStyles({ badgeStyle, color, size }),
-        { "cursor-default": isSelected },
+        { "cursor-default": isClosable },
         className,
       )}
     >
@@ -198,149 +198,46 @@ export const Badge: React.FC<BadgeProps> = ({
         </div>
       )}
 
-      {label && (
-        <div className={cn("px-[3px]", { "pt-[1px]": size === "M" })}>
-          {label}
-        </div>
-      )}
+      {label && <div className="px-[3px]">{label}</div>}
 
-      {isSelected && (
+      {isClosable && (
         <button
           type="button"
-          onClick={onUnselect}
+          onClick={onClose}
           onKeyDown={(e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              onUnselect?.();
+              onClose?.();
             }
           }}
-          className="rounded-[2px] flex items-center justify-center cursor-pointer"
+          className={cn(
+            "rounded-[4px]",
+            "flex items-center justify-center cursor-pointer",
+            "hover:bg-background-presentation-action-secondary",
+            "transition-colors duration-150",
+            size === "M"
+              ? "w-[16px] h-[16px]"
+              : size === "S"
+                ? "w-[14px] h-[14px]"
+                : "w-[12px] h-[12px]",
+          )}
           aria-label="Remove badge"
         >
-          <i className="ri-close-line" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="100%"
+            height="100%"
+            viewBox="0 0 12 12"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M6.00002 5.33336L8.33334 3L9 3.66667L6.66668 6.00002L9 8.33334L8.33334 9L6.00002 6.66668L3.66667 9L3 8.33334L5.33336 6.00002L3 3.66667L3.66667 3L6.00002 5.33336Z"
+              fill="currentColor"
+            />
+          </svg>
         </button>
       )}
     </span>
   );
 };
-
-/* ============================================================
- * REFERENCE — original Badge implementation (pre-NEWCOLORS2)
- * Kept as a commented snippet so the old token names and variant
- * surface remain consultable while migrating callers. Do not
- * uncomment — the referenced tokens no longer exist in the
- * regenerated mapping-color-system plugin.
- * ============================================================
- *
- * export const badgeBase = cva(
- *   [
- *     "px-[6px]",
- *     "[&_div]:text-content-presentation-action-light-primary",
- *     "[&_i]:!leading-none",
- *     "flex",
- *     "justify-center",
- *     "items-center",
- *     "border",
- *     "rounded-[6px]",
- *     "transition-all",
- *     "duration-300",
- *     "ease-in-out",
- *     "w-fit",
- *     "cursor-pointer",
- *     "[&_i]:leading-0",
- *   ],
- *   {
- *     variants: {
- *       size: {
- *         XS: "h-[18px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
- *         S: "h-[22px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
- *         M: "h-[26px] [&_i]:text-[16px] [&_div]:typography-body-medium-medium",
- *       },
- *       variant: {
- *         highlight: ["h-[20px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
- *           "bg-background-presentation-badge-gray border-transparent px-[3px]"
- *         ],
- *         green: "border-border-presentation-badge-green bg-background-presentation-badge-green [&_i]:text-content-presentation-badge-green",
- *         greenLight: "border-border-presentation-badge-green-light bg-background-presentation-badge-green-light [&_i]:text-content-presentation-badge-green-light",
- *         cocktailGreen: "border-border-presentation-badge-cocktail-green bg-background-presentation-badge-cocktail-green [&_i]:text-content-presentation-badge-cocktail-green",
- *         yellow: "border-border-presentation-badge-yellow bg-background-presentation-badge-yellow [&_i]:text-content-presentation-badge-yellow",
- *         redOrange: "border-border-presentation-badge-red-orange bg-background-presentation-badge-red-orange [&_i]:text-content-presentation-badge-red-orange",
- *         redLight: "border-border-presentation-badge-red bg-background-presentation-badge-red [&_i]:text-content-presentation-badge-red",
- *         rose: "border-border-presentation-badge-rose bg-background-presentation-badge-rose [&_i]:text-content-presentation-badge-rose",
- *         purple: "border-border-presentation-badge-purple bg-background-presentation-badge-purple [&_i]:text-content-presentation-badge-purple",
- *         bluePurple: "border-border-presentation-badge-blue-purple bg-background-presentation-badge-blue-purple [&_i]:text-content-presentation-badge-blue-purple",
- *         blue: "border-border-presentation-badge-blue bg-background-presentation-badge-blue [&_i]:text-content-presentation-badge-blue",
- *         navy: "border-border-presentation-badge-navy bg-background-presentation-badge-navy [&_i]:text-content-presentation-badge-navy",
- *         gray: "border-border-presentation-badge-gray bg-background-presentation-badge-gray [&_i]:text-content-presentation-badge-gray",
- *       },
- *     },
- *     defaultVariants: {
- *       size: "S",
- *       variant: "green",
- *     },
- *   }
- * );
- *
- * interface BadgeProps extends HTMLAttributes<HTMLButtonElement>,
- *   VariantProps<typeof badgeBase> {
- *   label?: string;
- *   onUnselect?: () => void;
- *   isSelected?: boolean;
- *   badgeIcon?: ReactNode;
- *   className?: string;
- *   theme?: Themes
- * }
- *
- * export const Badge: React.FC<BadgeProps> = ({
- *   label,
- *   onUnselect,
- *   isSelected,
- *   badgeIcon,
- *   theme,
- *   size = "S",
- *   variant = "green",
- *   className,
- *   ...props
- * }) => {
- *   return (
- *     <span
- *       {...props}
- *       data-theme={theme}
- *       className={cn(
- *         badgeBase({ size, variant }),
- *         {
- *           "cursor-default": isSelected,
- *         },
- *         className
- *       )}
- *     >
- *       <div className={"flex justify-center items-center"}>
- *         {!badgeIcon ? (
- *           <i className={cn("ri-circle-fill !text-[8px]", { "hidden": variant === "highlight" })}></i>
- *         ) : (
- *           badgeIcon
- *         )}
- *       </div>
- *
- *       <div className="px-[3px] whitespace-nowrap">{label}</div>
- *       {isSelected && (
- *         <button
- *           onClick={onUnselect}
- *           className="rounded-[2px] flex justify-center items-center cursor-pointer"
- *           tabIndex={0}
- *           role="button"
- *           aria-label="Remove badge"
- *           onKeyDown={(e) => {
- *             if (e.key === 'Enter' || e.key === ' ') {
- *               e.preventDefault();
- *               onUnselect?.();
- *             }
- *           }}
- *         >
- *           <i className="ri-close-line !text-content-presentation-action-light-primary"></i>
- *         </button>
- *       )}
- *     </span>
- *   );
- * };
- */

package/apps/lib/components/BadgeField.tsx

@@ -126,8 +126,8 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
                   size={size}
                   color={tag.variant as any}
                   label={tag.name}
-                  isSelected={true}
-                  onUnselect={() => handleUnselectTag(tag.id)}
+                  isClosable={true}
+                  onClose={() => handleUnselectTag(tag.id)}
                   className={
                     focusedTagIndex === index ? "ring-2 ring-blue-500" : ""
                   }

package/apps/lib/components/Charts-dev.tsx

@@ -0,0 +1,365 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "../utils/cn"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode
+        icon?: React.ComponentType
+    } & (
+        | { color?: string; theme?: never }
+        | { color?: never; theme: Record<keyof typeof THEMES, string> }
+    )
+}
+
+type ChartContextProps = {
+    config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+    const context = React.useContext(ChartContext)
+
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />")
+    }
+
+    return context
+}
+
+const ChartContainer = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<"div"> & {
+        config: ChartConfig
+        children: React.ComponentProps<
+            typeof RechartsPrimitive.ResponsiveContainer
+        >["children"]
+    }
+>(({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = React.useId()
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+    return (
+        <ChartContext.Provider value={{ config }}>
+            <div
+                data-chart={chartId}
+                ref={ref}
+                className={cn(
+                    "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.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-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+                    className
+                )}
+                {...props}
+            >
+                <ChartStyle id={chartId} config={config} />
+                <RechartsPrimitive.ResponsiveContainer>
+                    {children}
+                </RechartsPrimitive.ResponsiveContainer>
+            </div>
+        </ChartContext.Provider>
+    )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+    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 keyof typeof itemConfig.theme] ||
+                                        itemConfig.color
+                                    return color ? `  --color-${key}: ${color};` : null
+                                })
+                                .join("\n")}
+}
+`
+                    )
+                    .join("\n"),
+            }}
+        />
+    )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+        hideLabel?: boolean
+        hideIndicator?: boolean
+        indicator?: "line" | "dot" | "dashed"
+        nameKey?: string
+        labelKey?: string
+    }
+>(
+    (
+        {
+            active,
+            payload,
+            className,
+            indicator = "dot",
+            hideLabel = false,
+            hideIndicator = false,
+            label,
+            labelFormatter,
+            labelClassName,
+            formatter,
+            color,
+            nameKey,
+            labelKey,
+        },
+        ref
+    ) => {
+        const { config } = useChart()
+
+        const tooltipLabel = React.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 as keyof typeof config]?.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(
+                    "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+                    className
+                )}
+            >
+                {!nestLabel ? tooltipLabel : null}
+                <div className="grid gap-1.5">
+                    {payload.map((item: any, index: number) => {
+                        const key = `${nameKey || item.name || item.dataKey || "value"}`
+                        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+                        const indicatorColor = color || item.payload.fill || item.color
+
+                        return (
+                            <div
+                                key={item.dataKey}
+                                className={cn(
+                                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                                    indicator === "dot" && "items-center"
+                                )}
+                            >
+                                {formatter && item?.value !== undefined && item.name ? (
+                                    formatter(item.value, item.name, item, index, item.payload)
+                                ) : (
+                                    <>
+                                        {itemConfig?.icon ? (
+                                            <itemConfig.icon />
+                                        ) : (
+                                            !hideIndicator && (
+                                                <div
+                                                    className={cn(
+                                                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                                                        {
+                                                            "h-2.5 w-2.5": indicator === "dot",
+                                                            "w-1": indicator === "line",
+                                                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                                                                indicator === "dashed",
+                                                            "my-0.5": nestLabel && indicator === "dashed",
+                                                        }
+                                                    )}
+                                                    style={
+                                                        {
+                                                            "--color-bg": indicatorColor,
+                                                            "--color-border": indicatorColor,
+                                                        } as React.CSSProperties
+                                                    }
+                                                />
+                                            )
+                                        )}
+                                        <div
+                                            className={cn(
+                                                "flex flex-1 justify-between leading-none",
+                                                nestLabel ? "items-end" : "items-center"
+                                            )}
+                                        >
+                                            <div className="grid gap-1.5">
+                                                {nestLabel ? tooltipLabel : null}
+                                                <span className="text-muted-foreground">
+                                                    {itemConfig?.label || item.name}
+                                                </span>
+                                            </div>
+                                            {item.value && (
+                                                <span className="font-mono font-medium tabular-nums text-foreground">
+                                                    {item.value.toLocaleString()}
+                                                </span>
+                                            )}
+                                        </div>
+                                    </>
+                                )}
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        )
+    }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+        hideIcon?: boolean
+        nameKey?: string
+    }
+>(
+    (
+        { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+        ref
+    ) => {
+        const { config } = useChart()
+
+        if (!payload?.length) {
+            return null
+        }
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "flex items-center justify-center gap-4",
+                    verticalAlign === "top" ? "pb-3" : "pt-3",
+                    className
+                )}
+            >
+                {payload.map((item) => {
+                    const key = `${nameKey || item.dataKey || "value"}`
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+                    return (
+                        <div
+                            key={item.value}
+                            className={cn(
+                                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+                            )}
+                        >
+                            {itemConfig?.icon && !hideIcon ? (
+                                <itemConfig.icon />
+                            ) : (
+                                <div
+                                    className="h-2 w-2 shrink-0 rounded-[2px]"
+                                    style={{
+                                        backgroundColor: item.color,
+                                    }}
+                                />
+                            )}
+                            {itemConfig?.label}
+                        </div>
+                    )
+                })}
+            </div>
+        )
+    }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function 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 as keyof typeof config]
+}
+
+export {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    ChartLegend,
+    ChartLegendContent,
+    ChartStyle,
+}