@ataraui/ataraui-react 0.5.0 → 0.6.0

package/dist/index.js

@@ -1398,7 +1398,390 @@ var Skeleton = ({
   );
 };
 Skeleton.displayName = "Skeleton";
+var tabsListVariants = classVarianceAuthority.cva(
+  "flex items-center gap-1 rounded-(--radius-lg) bg-(--color-neutral-100) p-1",
+  {
+    variants: {
+      variant: {
+        default: "bg-(--color-neutral-100)",
+        outline: "bg-transparent border border-(--color-neutral-200)",
+        pills: "bg-transparent gap-2"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var tabsTriggerVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-(--radius-md) px-3 py-1.5 text-sm font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-(--color-primary-500) disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "text-(--color-neutral-500) data-[state=active]:bg-white data-[state=active]:text-(--color-neutral-900) data-[state=active]:shadow-sm",
+        outline: "text-(--color-neutral-500) data-[state=active]:border data-[state=active]:border-(--color-neutral-200) data-[state=active]:bg-white data-[state=active]:text-(--color-neutral-900)",
+        pills: "text-(--color-neutral-500) rounded-full data-[state=active]:bg-(--color-primary-500) data-[state=active]:text-white"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var TabsContext = React13__default.default.createContext(null);
+var useTabsContext = () => {
+  const ctx = React13__default.default.useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs components must be used within <Tabs>");
+  return ctx;
+};
+var Tabs = ({
+  value,
+  defaultValue = "",
+  onChange,
+  variant = "default",
+  className,
+  children,
+  ...props
+}) => {
+  const [uncontrolled, setUncontrolled] = React13__default.default.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const active = isControlled ? value : uncontrolled;
+  const setActive = React13__default.default.useCallback((val) => {
+    if (!isControlled) setUncontrolled(val);
+    onChange == null ? void 0 : onChange(val);
+  }, [isControlled, onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { active, setActive, variant }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-2", className), ...props, children }) });
+};
+Tabs.displayName = "Tabs";
+var TabsList = ({ className, children, ...props }) => {
+  const { variant } = useTabsContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tablist",
+      className: cn(tabsListVariants({ variant }), className),
+      ...props,
+      children
+    }
+  );
+};
+TabsList.displayName = "TabsList";
+var TabsTrigger = ({
+  value,
+  className,
+  children,
+  ...props
+}) => {
+  const { active, setActive, variant } = useTabsContext();
+  const isActive = active === value;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      "data-state": isActive ? "active" : "inactive",
+      onClick: () => setActive(value),
+      className: cn(tabsTriggerVariants({ variant }), className),
+      ...props,
+      children
+    }
+  );
+};
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = ({
+  value,
+  className,
+  children,
+  ...props
+}) => {
+  const { active } = useTabsContext();
+  if (active !== value) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tabpanel",
+      className: cn("mt-2", className),
+      ...props,
+      children
+    }
+  );
+};
+TabsContent.displayName = "TabsContent";
+var accordionVariants = classVarianceAuthority.cva(
+  "w-full",
+  {
+    variants: {
+      variant: {
+        default: "divide-y divide-(--color-neutral-200) rounded-(--radius-lg) border border-(--color-neutral-200)",
+        ghost: "divide-y divide-(--color-neutral-200)",
+        outlined: "flex flex-col gap-2"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var AccordionContext = React13__default.default.createContext(null);
+var useAccordionContext = () => {
+  const ctx = React13__default.default.useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion components must be used within <Accordion>");
+  return ctx;
+};
+var Accordion = ({
+  type = "single",
+  value,
+  defaultValue,
+  onChange,
+  variant = "default",
+  className,
+  children,
+  ...props
+}) => {
+  const initOpen = defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : [];
+  const [uncontrolled, setUncontrolled] = React13__default.default.useState(initOpen);
+  const isControlled = value !== void 0;
+  const openItems = isControlled ? Array.isArray(value) ? value : [value] : uncontrolled;
+  const toggle = React13__default.default.useCallback((val) => {
+    var _a;
+    let next;
+    if (type === "single") {
+      next = openItems.includes(val) ? [] : [val];
+    } else {
+      next = openItems.includes(val) ? openItems.filter((v) => v !== val) : [...openItems, val];
+    }
+    if (!isControlled) setUncontrolled(next);
+    onChange == null ? void 0 : onChange(type === "single" ? (_a = next[0]) != null ? _a : "" : next);
+  }, [isControlled, onChange, openItems, type]);
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: { openItems, toggle, variant }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(accordionVariants({ variant }), className), ...props, children }) });
+};
+Accordion.displayName = "Accordion";
+var AccordionItemContext = React13__default.default.createContext(null);
+var useAccordionItemContext = () => {
+  const ctx = React13__default.default.useContext(AccordionItemContext);
+  if (!ctx) throw new Error("AccordionTrigger/Content must be used within <AccordionItem>");
+  return ctx;
+};
+var AccordionItem = ({
+  value,
+  disabled = false,
+  className,
+  children,
+  ...props
+}) => {
+  const { openItems, variant } = useAccordionContext();
+  const isOpen = openItems.includes(value);
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value: { value, isOpen, disabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-state": isOpen ? "open" : "closed",
+      className: cn(
+        variant === "outlined" && "rounded-(--radius-lg) border border-(--color-neutral-200)",
+        disabled && "opacity-50 pointer-events-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { toggle } = useAccordionContext();
+  const { value, isOpen } = useAccordionItemContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-expanded": isOpen,
+      onClick: () => toggle(value),
+      className: cn(
+        "flex w-full items-center justify-between px-4 py-4 text-sm font-medium text-(--color-neutral-900) transition-all hover:bg-(--color-neutral-50) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--color-primary-500)",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: cn("shrink-0 text-(--color-neutral-500) transition-transform duration-200", isOpen && "rotate-180"),
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+          }
+        )
+      ]
+    }
+  );
+};
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { isOpen } = useAccordionItemContext();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("px-4 pb-4 text-sm text-(--color-neutral-600)", className),
+      ...props,
+      children
+    }
+  );
+};
+AccordionContent.displayName = "AccordionContent";
+var tableVariants = classVarianceAuthority.cva(
+  "w-full caption-bottom text-sm",
+  {
+    variants: {
+      variant: {
+        default: "",
+        striped: "",
+        bordered: ""
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var TableContext = React13__default.default.createContext({ variant: "default" });
+var Table = ({
+  variant = "default",
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full overflow-auto rounded-(--radius-lg) border border-(--color-neutral-200)", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      className: cn(tableVariants({ variant }), className),
+      ...props,
+      children
+    }
+  ) }) });
+};
+Table.displayName = "Table";
+var TableHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "thead",
+  {
+    className: cn("bg-(--color-neutral-50) [&_tr]:border-b [&_tr]:border-(--color-neutral-200)", className),
+    ...props,
+    children
+  }
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { variant } = React13__default.default.useContext(TableContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tbody",
+    {
+      className: cn(
+        "[&_tr:last-child]:border-0",
+        variant === "striped" && "[&_tr:nth-child(odd)]:bg-(--color-neutral-50)",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+TableBody.displayName = "TableBody";
+var TableFooter = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tfoot",
+  {
+    className: cn("border-t border-(--color-neutral-200) bg-(--color-neutral-50) font-medium", className),
+    ...props,
+    children
+  }
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { variant } = React13__default.default.useContext(TableContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      className: cn(
+        "border-b border-(--color-neutral-200) transition-colors hover:bg-(--color-neutral-50)",
+        variant === "bordered" && "[&_td]:border-r [&_td]:last:border-r-0 [&_th]:border-r [&_th]:last:border-r-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+TableRow.displayName = "TableRow";
+var TableHead = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "th",
+  {
+    className: cn(
+      "h-10 px-4 text-left align-middle text-xs font-semibold uppercase tracking-wide text-(--color-neutral-500)",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+TableHead.displayName = "TableHead";
+var TableCell = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "td",
+  {
+    className: cn("px-4 py-3 align-middle text-(--color-neutral-700)", className),
+    ...props,
+    children
+  }
+);
+TableCell.displayName = "TableCell";
+var TableCaption = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "caption",
+  {
+    className: cn("mt-4 text-sm text-(--color-neutral-500)", className),
+    ...props,
+    children
+  }
+);
+TableCaption.displayName = "TableCaption";
 
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
 exports.Alert = Alert;
 exports.AlertDescription = AlertDescription;
 exports.AlertTitle = AlertTitle;
@@ -1433,9 +1816,22 @@ exports.Separator = Separator;
 exports.Skeleton = Skeleton;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
 exports.ToastProvider = ToastProvider;
 exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
+exports.accordionVariants = accordionVariants;
 exports.alertVariants = alertVariants;
 exports.avatarVariants = avatarVariants;
 exports.badgeVariants = badgeVariants;
@@ -1453,6 +1849,9 @@ exports.selectVariants = selectVariants;
 exports.separatorVariants = separatorVariants;
 exports.skeletonVariants = skeletonVariants;
 exports.spinnerVariants = spinnerVariants;
+exports.tableVariants = tableVariants;
+exports.tabsListVariants = tabsListVariants;
+exports.tabsTriggerVariants = tabsTriggerVariants;
 exports.toastVariants = toastVariants;
 exports.useToast = useToast;
 //# sourceMappingURL=index.js.map