@x-plat/design-system 0.1.5 → 0.2.1

package/dist/components/CardTab/index.js

@@ -0,0 +1,87 @@
+// src/components/CardTab/CardTab.tsx
+import React from "react";
+
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/CardTab/CardTabPanel.tsx
+import { jsx } from "react/jsx-runtime";
+var CardTabPanel = (props) => {
+  const { children, columns = 3, className } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx_default("card-tab-panel", className),
+      style: { "--card-tab-columns": columns },
+      children
+    }
+  );
+};
+CardTabPanel.displayName = "CardTab.Panel";
+var CardTabPanel_default = CardTabPanel;
+
+// src/components/CardTab/CardTab.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CardTabRoot = (props) => {
+  const {
+    tabs,
+    activeValue: activeValueProp,
+    onChange,
+    size = "md",
+    children,
+    className
+  } = props;
+  const isControlled = activeValueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(tabs[0]?.value ?? "");
+  const activeValue = isControlled ? activeValueProp : uncontrolledValue;
+  const handleTabClick = (tab) => {
+    if (!isControlled) {
+      setUncontrolledValue(tab.value);
+    }
+    onChange?.(tab);
+  };
+  const panels = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type === CardTabPanel_default
+  );
+  const activePanel = panels.find(
+    (panel) => panel.props.value === activeValue
+  );
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-card-tab", size, className), children: [
+    /* @__PURE__ */ jsx2("div", { className: "card-tab-bar", children: tabs.map((tab) => {
+      const isActive = tab.value === activeValue;
+      return /* @__PURE__ */ jsx2(
+        "button",
+        {
+          className: clsx_default("card-tab-trigger", isActive && "active"),
+          onClick: () => handleTabClick(tab),
+          role: "tab",
+          "aria-selected": isActive,
+          children: tab.title
+        },
+        tab.value
+      );
+    }) }),
+    /* @__PURE__ */ jsx2("div", { className: "card-tab-body", children: activePanel })
+  ] });
+};
+CardTabRoot.displayName = "CardTab";
+var CardTab = Object.assign(CardTabRoot, {
+  Panel: CardTabPanel_default
+});
+var CardTab_default = CardTab;
+export {
+  CardTab_default as CardTab
+};