var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: !0 });
}, __copyProps = (to, from, except, desc) => {
  if (from && typeof from == "object" || typeof from == "function")
    for (let key of __getOwnPropNames(from))
      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
var Tabs_exports = {};
__export(Tabs_exports, {
  TabItem: () => TabItem,
  Tabs: () => Tabs,
  TabsContainer: () => TabsContainer,
  TabsContent: () => TabsContent
});
module.exports = __toCommonJS(Tabs_exports);
var import_react = require("react"), import_react_native = require("react-native-web"), import_tamagui = require("tamagui"), import_typography = require("./typography"), import_jsx_runtime = require("react/jsx-runtime");
const Container = (0, import_tamagui.styled)(import_tamagui.XStack, {
  name: "TabsContainer",
  backgroundColor: "$surface",
  height: 48,
  width: "100%",
  variants: {
    outlined: {
      true: {
        borderBottomWidth: "$border.outline",
        borderBottomColor: "$outlineVariant"
      },
      false: {}
    }
  },
  defaultVariants: {
    outlined: !1
  }
});
function TabItem({ label, active = !1 }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tab, { active, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tab.Label, { children: label }) });
}
const ItemContext = (0, import_tamagui.createStyledContext)({ active: !1 }), Item = (0, import_tamagui.styled)(import_tamagui.YStack, {
  name: "TabItem",
  context: ItemContext,
  alignContent: "center",
  justifyContent: "center",
  fg: 1,
  flexBasis: 1,
  cursor: "pointer",
  paddingLeft: 12,
  paddingRight: 12,
  borderRadius: "$shape.corner_m",
  minWidth: 88,
  variants: {
    active: {
      true: {
        hoverStyle: {
          backgroundColor: "$primaryContainer"
        }
      },
      false: {
        hoverStyle: {
          backgroundColor: "$onSurfaceOpacity"
        }
      }
    }
  }
}), Label = (0, import_tamagui.styled)(import_typography.Title, {
  name: "TabLabel",
  context: ItemContext,
  textAlign: "center",
  size: "small",
  col: "$onPrimaryContainer",
  variants: {
    active: {
      true: {
        col: "$primary"
      }
    }
  }
}), Tab = (0, import_tamagui.withStaticProperties)(Item, {
  Props: ItemContext.Provider,
  Label
}), TabsContainer = (0, import_tamagui.withStaticProperties)(Container, {});
function Tabs({
  value,
  onChange,
  items,
  shiftLeft,
  ...props
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContainer, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: items?.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_react_native.Pressable,
    {
      onPress: () => onChange(item.value),
      style: {
        flexBasis: shiftLeft ? void 0 : 1,
        flexGrow: shiftLeft ? void 0 : 1,
        position: "relative",
        flexDirection: "column",
        alignItems: "center",
        alignContent: "center"
      },
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabItem, { active: item.value == value, label: item.label }),
        item.value == value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActiveIndicator, {}, `indicator-${value}`)
      ]
    },
    `tab-item-${item.value}`
  )) }) });
}
function TabsContent({
  value,
  items,
  ...props
}) {
  const [renderTab, setRenderTab] = (0, import_react.useState)(value);
  return (0, import_react.useEffect)(() => {
    setRenderTab(void 0), setTimeout(() => setRenderTab(value), 400);
  }, [value]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: items?.map(
    (tab, index) => renderTab == tab.value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabContent, { ...props, children: tab.content instanceof Function ? tab.content() : tab.content }, `tab-content-${index}`)
  ) });
}
const TabContent = (0, import_tamagui.styled)(import_tamagui.View, {
  name: "TabContent",
  animation: "lazy",
  enterStyle: {
    opacity: 0
  },
  exitStyle: {
    opacity: 0
  }
}), ActiveIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
  name: "ActiveIndicator",
  backgroundColor: "$primary",
  position: "absolute",
  height: 3,
  maxWidth: 48,
  width: "100%",
  borderTopRightRadius: 3,
  borderTopLeftRadius: 3,
  animation: "300ms",
  animateOnly: ["opacity", "scale"],
  bottom: 0,
  exitStyle: {
    opacity: 0,
    scale: 1
  },
  enterStyle: {
    opacity: 0,
    scale: 0
  }
});
//# sourceMappingURL=Tabs.js.map
