@alexgorbatchev/shadcn 0.0.0-stage → 0.0.16

package/dist/components/carousel/index.js

@@ -0,0 +1,207 @@
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "../../chunk-73rkr9ct.js";
+
+// src/components/carousel/Carousel.tsx
+import { useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { useDirection } from "@base-ui/react/direction-provider";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "lucide-react";
+
+// src/components/carousel/CarouselContext.ts
+import { createContext } from "react";
+var CarouselContext = createContext(null);
+
+// src/components/carousel/hooks/useCarousel.ts
+import { useContext } from "react";
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context)
+    throw new Error("useCarousel must be used within Carousel.");
+  return context;
+}
+
+// src/components/carousel/Carousel.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function Carousel({
+  density,
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  onKeyDown,
+  ...props
+}) {
+  const inheritedDirection = useDirection();
+  const direction = opts?.direction ?? inheritedDirection;
+  const [carouselRef, api] = useEmblaCarousel({
+    ...opts,
+    direction,
+    axis: orientation === "horizontal" ? "x" : "y",
+    breakpoints: {
+      ...opts?.breakpoints,
+      "(prefers-reduced-motion: reduce)": {
+        ...opts?.breakpoints?.["(prefers-reduced-motion: reduce)"],
+        duration: 0
+      }
+    }
+  }, plugins);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const scrollPrev = useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = useCallback(() => api?.scrollNext(), [api]);
+  useEffect(() => {
+    if (!api)
+      return;
+    const update = () => {
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+    update();
+    api.on("reInit", update);
+    api.on("select", update);
+    return () => {
+      api.off("reInit", update);
+      api.off("select", update);
+    };
+  }, [api]);
+  useEffect(() => {
+    if (api)
+      setApi?.(api);
+  }, [api, setApi]);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.target !== event.currentTarget)
+      return;
+    const previousKey = orientation === "vertical" ? "ArrowUp" : direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+    const nextKey = orientation === "vertical" ? "ArrowDown" : direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+    if (event.key === previousKey) {
+      event.preventDefault();
+      scrollPrev();
+    }
+    if (event.key === nextKey) {
+      event.preventDefault();
+      scrollNext();
+    }
+  };
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+    value: { carouselRef, api, orientation, direction, scrollPrev, scrollNext, canScrollPrev, canScrollNext },
+    children: /* @__PURE__ */ jsx("div", {
+      "data-slot": "carousel",
+      "data-density": density,
+      dir: direction,
+      role: "region",
+      "aria-roledescription": "carousel",
+      tabIndex: 0,
+      className: cn2("relative outline-none focus-visible:ring-1 focus-visible:ring-ring", className),
+      ...props,
+      onKeyDown: handleKeyDown,
+      children
+    })
+  });
+}
+function CarouselContent({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx("div", {
+    ref: carouselRef,
+    "data-slot": "carousel-content",
+    className: "overflow-hidden",
+    children: /* @__PURE__ */ jsx("div", {
+      className: cn2("flex", orientation === "horizontal" ? "-ms-panel touch-pan-y touch-pinch-zoom" : "-mt-panel flex-col touch-pan-x touch-pinch-zoom", className),
+      ...props
+    })
+  });
+}
+function CarouselItem({ className, ...props }) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx("div", {
+    role: "group",
+    "aria-roledescription": "slide",
+    "data-slot": "carousel-item",
+    className: cn2("min-h-0 min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "ps-panel" : "pt-panel", className),
+    ...props
+  });
+}
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  disabled,
+  onClick,
+  children,
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsx(Button2, {
+    "data-slot": "carousel-previous",
+    variant,
+    size,
+    className: (state) => cn2("absolute touch-manipulation", orientation === "horizontal" ? "inset-y-0 -start-10 my-auto" : "-top-10 left-1/2 -translate-x-1/2", typeof className === "function" ? className(state) : className),
+    disabled: disabled || !canScrollPrev,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented)
+        scrollPrev();
+    },
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronLeftIcon, {
+          className: "rtl:rotate-180"
+        }) : /* @__PURE__ */ jsx(ChevronUpIcon, {}),
+        /* @__PURE__ */ jsx("span", {
+          className: "sr-only",
+          children: "Previous slide"
+        })
+      ]
+    })
+  });
+}
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  disabled,
+  onClick,
+  children,
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsx(Button2, {
+    "data-slot": "carousel-next",
+    variant,
+    size,
+    className: (state) => cn2("absolute touch-manipulation", orientation === "horizontal" ? "inset-y-0 -end-10 my-auto" : "-bottom-10 left-1/2 -translate-x-1/2", typeof className === "function" ? className(state) : className),
+    disabled: disabled || !canScrollNext,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented)
+        scrollNext();
+    },
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronRightIcon, {
+          className: "rtl:rotate-180"
+        }) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+        /* @__PURE__ */ jsx("span", {
+          className: "sr-only",
+          children: "Next slide"
+        })
+      ]
+    })
+  });
+}
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  useCarousel
+};

package/dist/components/carousel/types.d.ts

@@ -0,0 +1,23 @@
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import type useEmblaCarousel from "embla-carousel-react";
+import type { ComponentProps } from "react";
+import type { IDensityProps } from "../../density/types.js";
+export type CarouselApi = UseEmblaCarouselType[1];
+export type CarouselOptions = Parameters<typeof useEmblaCarousel>[0];
+export type CarouselPlugins = Parameters<typeof useEmblaCarousel>[1];
+export type CarouselProps = ComponentProps<"div"> & IDensityProps & {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugins;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+export interface ICarouselContextValue {
+    carouselRef: UseEmblaCarouselType[0];
+    api: CarouselApi;
+    orientation: "horizontal" | "vertical";
+    direction: "ltr" | "rtl";
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+}

package/dist/components/chart/Chart.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+import type { ChartProps, ChartTooltipContentProps, ChartLegendContentProps } from "./types.js";
+import { Tooltip } from "recharts";
+import { ChartStyle } from "./ChartStyle.js";
+declare function Chart({ id, dir, density, className, children, config, initialDimension, ...props }: ChartProps): ReactElement;
+declare function ChartTooltipContent({ density, active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, htmlProps, contentStyle, itemStyle, labelStyle, wrapperClassName, itemSorter, }: ChartTooltipContentProps): ReactElement | null;
+declare function ChartLegendContent({ density, className, hideIcon, payload, verticalAlign, nameKey, onClick, onMouseEnter, onMouseLeave, formatter, htmlProps, labelStyle, inactiveColor, }: ChartLegendContentProps): ReactElement | null;
+declare const ChartTooltip: typeof Tooltip;
+declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: import("recharts").LegendProps) => React.ReactPortal | null>;
+export { Chart, Chart as ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/components/chart/ChartContext.d.ts

@@ -0,0 +1,2 @@
+import type { IChartContextValue } from "./types.js";
+export declare const ChartContext: import("react").Context<IChartContextValue | null>;

package/dist/components/chart/ChartStyle.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from "react";
+import type { ChartStyleProps } from "./types.js";
+export declare function ChartStyle({ id, config }: ChartStyleProps): ReactElement | null;

package/dist/components/chart/getPayloadConfigFromPayload.d.ts

@@ -0,0 +1,2 @@
+import type { ChartConfig } from "./types.js";
+export declare function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string): ChartConfig[string] | undefined;

package/dist/components/chart/hooks/useChart.d.ts

@@ -0,0 +1,2 @@
+import type { IChartContextValue } from "../types.js";
+export declare function useChart(): IChartContextValue;

package/dist/components/chart/index.d.ts

@@ -0,0 +1,3 @@
+export { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, } from "./Chart.js";
+export type { ChartConfig, ChartProps, ChartTooltipContentProps, ChartLegendContentProps } from "./types.js";
+export { useChart } from "./hooks/useChart.js";

package/dist/components/chart/index.js

@@ -0,0 +1,22 @@
+import {
+  useChart2,
+  ChartStyle2,
+  Chart3,
+  ChartTooltipContent2,
+  ChartLegendContent2,
+  ChartTooltip2,
+  ChartLegend2
+} from "../../chunk-82e7fbmq.js";
+import"../../chunk-e6hk39ev.js";
+import"../../chunk-cp2m7y7v.js";
+import"../../chunk-jpvw9xqy.js";
+export {
+  Chart3 as Chart,
+  Chart3 as ChartContainer,
+  ChartLegend2 as ChartLegend,
+  ChartLegendContent2 as ChartLegendContent,
+  ChartStyle2 as ChartStyle,
+  ChartTooltip2 as ChartTooltip,
+  ChartTooltipContent2 as ChartTooltipContent,
+  useChart2 as useChart
+};

package/dist/components/chart/types.d.ts

@@ -0,0 +1,50 @@
+import type { ComponentProps, ComponentType, CSSProperties, ReactNode } from "react";
+import type { DefaultLegendContentProps, DefaultTooltipContentProps, ResponsiveContainer, TooltipValueType } from "recharts";
+import type { Density, IDensityProps } from "../../density/types.js";
+import type { ResolvedTheme } from "../../theme/types.js";
+export type ChartConfig = Record<string, {
+    label?: ReactNode;
+    icon?: ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<ResolvedTheme, string>;
+})>;
+export interface IChartContextValue {
+    config: ChartConfig;
+    density: Density;
+    dir: string;
+    chartId: string;
+}
+export type ChartProps = ComponentProps<"div"> & IDensityProps & {
+    config: ChartConfig;
+    children: ComponentProps<typeof ResponsiveContainer>["children"];
+    initialDimension?: ComponentProps<typeof ResponsiveContainer>["initialDimension"];
+};
+export type ChartStyleProps = {
+    id: string;
+    config: ChartConfig;
+};
+export type ChartIndicatorStyle = CSSProperties & {
+    "--color-bg"?: string;
+    "--color-border"?: string;
+};
+export type ChartTooltipContentProps = Omit<DefaultTooltipContentProps<TooltipValueType, number | string>, "accessibilityLayer"> & IDensityProps & {
+    className?: string;
+    htmlProps?: ComponentProps<"div">;
+    active?: boolean;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    color?: string;
+};
+export type ChartLegendContentProps = DefaultLegendContentProps & IDensityProps & {
+    className?: string;
+    htmlProps?: ComponentProps<"div">;
+    hideIcon?: boolean;
+    nameKey?: string;
+};

package/dist/components/command/Command.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps, ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+import { Command as CommandPrimitive } from "cmdk";
+import { Dialog } from "../Dialog.js";
+type CommandProps = ComponentProps<typeof CommandPrimitive> & IDensityProps;
+declare function Command({ density, className, ...props }: CommandProps): ReactElement;
+type CommandDialogProps<Payload> = ComponentProps<typeof Dialog<Payload>> & IDensityProps & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+};
+declare function CommandDialog<Payload>({ title, description, children, density, className, showCloseButton, ...props }: CommandDialogProps<Payload>): ReactElement;
+declare function CommandInput({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>): ReactElement;
+declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): ReactElement;
+declare function CommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>): ReactElement;
+declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): ReactElement;
+declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): ReactElement;
+declare function CommandItem({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.Item>): ReactElement;
+declare function CommandShortcut({ className, ...props }: ComponentProps<"span">): ReactElement;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, };

package/dist/components/command/index.d.ts

@@ -0,0 +1 @@
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } from "./Command.js";

package/dist/components/command/index.js

@@ -0,0 +1,30 @@
+import"../../chunk-cp2m7y7v.js";
+import"../../chunk-e6hk39ev.js";
+import"../../chunk-j89xg1ak.js";
+import"../../chunk-73rkr9ct.js";
+import"../../chunk-zhnwybhq.js";
+import"../../chunk-59p19t57.js";
+import"../../chunk-hz9azhzx.js";
+import"../../chunk-1jeg5z55.js";
+import {
+  Command2,
+  CommandDialog2,
+  CommandInput2,
+  CommandList2,
+  CommandEmpty2,
+  CommandGroup2,
+  CommandSeparator2,
+  CommandItem2,
+  CommandShortcut2
+} from "../../chunk-4gby2v61.js";
+export {
+  Command2 as Command,
+  CommandDialog2 as CommandDialog,
+  CommandEmpty2 as CommandEmpty,
+  CommandGroup2 as CommandGroup,
+  CommandInput2 as CommandInput,
+  CommandItem2 as CommandItem,
+  CommandList2 as CommandList,
+  CommandSeparator2 as CommandSeparator,
+  CommandShortcut2 as CommandShortcut
+};

package/dist/components/input-otp/InputOTP.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+import { OTPInput } from "input-otp";
+type InputOTPProps = ComponentProps<typeof OTPInput> & IDensityProps;
+declare function InputOTP({ density, className, containerClassName, dir, ...props }: InputOTPProps): ReactElement;
+declare function InputOTPGroup({ className, ...props }: ComponentProps<"div">): ReactElement;
+type InputOTPSlotProps = ComponentProps<"div"> & {
+    index: number;
+};
+declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps): ReactElement;
+declare function InputOTPSeparator({ className, children, ...props }: ComponentProps<"div">): ReactElement;
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1 @@
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./InputOTP.js";