@cupcodev/ui 1.0.0 → 1.0.2

package/README.md

@@ -1,11 +1,11 @@
-## @cupcode/ui
+## @cupcodev/ui
 
 Design system Cupcode pronto para uso (componentes React + estilos + presets Tailwind).
 
 ### Instalação
 
 ```bash
-npm install @cupcode/ui
+npm install @cupcodev/ui
 ```
 
 Além do pacote, instale as peer dependencies listadas em `peerDependencies` (React 18, Tailwind 3, Radix UI, etc.). Um comando típico:
@@ -29,10 +29,10 @@ Use o preset disponibilizado pelo pacote:
 ```js
 // tailwind.config.js
 module.exports = {
-  presets: [require("@cupcode/ui/tailwind-preset.cjs")],
+  presets: [require("@cupcodev/ui/tailwind-preset.cjs")],
   content: [
     "./src/**/*.{ts,tsx}", // ajuste para o seu projeto
-    "./node_modules/@cupcode/ui/dist/**/*.{js,jsx}", // necessário para as classes dos componentes
+    "./node_modules/@cupcodev/ui/dist/**/*.{js,jsx}", // necessário para as classes dos componentes
   ],
 };
 ```
@@ -40,26 +40,26 @@ module.exports = {
 E importe os estilos globais (tokens + reset):
 
 ```ts
-import "@cupcode/ui/styles/global.css";
+import "@cupcodev/ui/styles/global.css";
 ```
 
 ### Uso básico
 
 ```tsx
-import { Button } from "@cupcode/ui";
+import { Button } from "@cupcodev/ui";
 
 export default function Example() {
   return <Button variant="default">Oi Cupcode</Button>;
 }
 ```
 
-Todos os componentes Cupcode e shadcn/ui base são reexportados de `@cupcode/ui`. Exemplo:
+Todos os componentes Cupcode e shadcn/ui base são reexportados de `@cupcodev/ui`. Exemplo:
 
 ```ts
-import { NavbarCupcode, ThemeToggle, Card } from "@cupcode/ui";
+import { NavbarCupcode, ThemeToggle, Card } from "@cupcodev/ui";
 ```
 
-Para importações segmentadas, há submódulos como `@cupcode/ui/charts`, que expõe apenas os componentes de gráficos/carrossel.
+Para importações segmentadas, há submódulos como `@cupcodev/ui/charts`, que expõe apenas os componentes de gráficos/carrossel.
 
 ### Tema / Dark mode
 
@@ -96,4 +96,4 @@ Consulte `peerDependencies` para a lista completa ao instalar.
 
 ### Tipos e superfícies
 
-Os componentes são exportados via `export { Component }` (ex.: `export { default as DockWrapper }`). Importe sempre de `@cupcode/ui` para garantir que os tipos e estilos correspondentes estejam alinhados.
+Os componentes são exportados via `export { Component }` (ex.: `export { default as DockWrapper }`). Importe sempre de `@cupcodev/ui` para garantir que os tipos e estilos correspondentes estejam alinhados.

package/dist/charts 2.cjs

@@ -0,0 +1,500 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/charts.ts
+var charts_exports = {};
+__export(charts_exports, {
+  Carousel: () => Carousel,
+  CarouselContent: () => CarouselContent,
+  CarouselItem: () => CarouselItem,
+  CarouselNext: () => CarouselNext,
+  CarouselPrevious: () => CarouselPrevious,
+  ChartContainer: () => ChartContainer,
+  ChartLegend: () => ChartLegend,
+  ChartLegendContent: () => ChartLegendContent,
+  ChartStyle: () => ChartStyle,
+  ChartTooltip: () => ChartTooltip,
+  ChartTooltipContent: () => ChartTooltipContent
+});
+module.exports = __toCommonJS(charts_exports);
+
+// src/components/ui/chart.tsx
+var React = __toESM(require("react"), 1);
+var RechartsPrimitive = __toESM(require("recharts"), 1);
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/chart.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var THEMES = { light: "", dark: ".dark" };
+var ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+var ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-chart": chartId,
+      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,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
+});
+ChartContainer.displayName = "Chart";
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(([_, config2]) => config2.theme || config2.color);
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            var _a;
+            const color = ((_a = itemConfig.theme) == null ? void 0 : _a[theme]) || itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+var ChartTooltipContent = React.forwardRef(
+  ({
+    active,
+    payload,
+    className,
+    indicator = "dot",
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey
+  }, ref) => {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+      var _a;
+      if (hideLabel || !(payload == null ? void 0 : 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" ? ((_a = config[label]) == null ? void 0 : _a.label) || label : itemConfig == null ? void 0 : itemConfig.label;
+      if (labelFormatter) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      }
+      if (!value) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("font-medium", labelClassName), children: value });
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+    if (!active || !(payload == null ? void 0 : payload.length)) {
+      return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        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
+        ),
+        children: [
+          !nestLabel ? tooltipLabel : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                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"
+                ),
+                children: formatter && (item == null ? void 0 : item.value) !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  (itemConfig == null ? void 0 : itemConfig.icon) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "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
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-1.5", children: [
+                          nestLabel ? tooltipLabel : null,
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
+                        ] }),
+                        item.value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() })
+                      ]
+                    }
+                  )
+                ] })
+              },
+              item.dataKey
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+var ChartLegend = RechartsPrimitive.Legend;
+var ChartLegendContent = React.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+  const { config } = useChart();
+  if (!(payload == null ? void 0 : payload.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+      children: payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+            children: [
+              (itemConfig == null ? void 0 : itemConfig.icon) && !hideIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(itemConfig.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: item.color
+                  }
+                }
+              ),
+              itemConfig == null ? void 0 : itemConfig.label
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+});
+ChartLegendContent.displayName = "ChartLegend";
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+// src/components/ui/carousel.tsx
+var React3 = __toESM(require("react"), 1);
+var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
+var import_lucide_react = require("lucide-react");
+
+// src/components/ui/button.tsx
+var React2 = __toESM(require("react"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React2.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/carousel.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CarouselContext = React3.createContext(null);
+function useCarousel() {
+  const context = React3.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+var Carousel = React3.forwardRef(
+  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+    const [carouselRef, api] = (0, import_embla_carousel_react.default)(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y"
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React3.useState(false);
+    const [canScrollNext, setCanScrollNext] = React3.useState(false);
+    const onSelect = React3.useCallback((api2) => {
+      if (!api2) {
+        return;
+      }
+      setCanScrollPrev(api2.canScrollPrev());
+      setCanScrollNext(api2.canScrollNext());
+    }, []);
+    const scrollPrev = React3.useCallback(() => {
+      api == null ? void 0 : api.scrollPrev();
+    }, [api]);
+    const scrollNext = React3.useCallback(() => {
+      api == null ? void 0 : api.scrollNext();
+    }, [api]);
+    const handleKeyDown = React3.useCallback(
+      (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+    React3.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+      setApi(api);
+    }, [api, setApi]);
+    React3.useEffect(() => {
+      if (!api) {
+        return;
+      }
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api == null ? void 0 : api.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      CarouselContext.Provider,
+      {
+        value: {
+          carouselRef,
+          api,
+          opts,
+          orientation: orientation || ((opts == null ? void 0 : opts.axis) === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            ref,
+            onKeyDownCapture: handleKeyDown,
+            className: cn("relative", className),
+            role: "region",
+            "aria-roledescription": "carousel",
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+var CarouselContent = React3.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+        ...props
+      }
+    ) });
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = React3.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-roledescription": "slide",
+        className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+        ...props
+      }
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
+var CarouselPrevious = React3.forwardRef(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        className: cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        disabled: !canScrollPrev,
+        onClick: scrollPrev,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ArrowLeft, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Previous slide" })
+        ]
+      }
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+var CarouselNext = React3.forwardRef(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      Button,
+      {
+        ref,
+        variant,
+        size,
+        className: cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        disabled: !canScrollNext,
+        onClick: scrollNext,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ArrowRight, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Next slide" })
+        ]
+      }
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent
+});
+//# sourceMappingURL=charts.cjs.map