export declare const tabsTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { Button, resetButton, styledText } from \"cherry-styled-components\";\nimport React, { ReactNode, useId, useRef, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface TabContentProps {\n  title: string;\n  icon?: string;\n  children: ReactNode;\n}\n\ninterface TabsProps {\n  children: React.ReactElement<TabContentProps>[];\n}\n\nconst TabsContainer = styled.div`\n  width: 100%;\n  margin: 0 auto;\n`;\n\nconst TabsList = styled.div<{ theme: Theme }>`\n  display: flex;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background-color: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  overflow-x: auto;\n  ${thinScrollbar};\n`;\n\nconst TabButton = styled(Button)<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton};\n  appearance: none;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 20px;\n  border: none;\n  border-radius: 0;\n  background: ${({ theme }) => theme.colors.light};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-bottom: 3px solid transparent;\n  min-width: fit-content;\n  height: auto;\n  min-height: 0;\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.dark};\n  font-weight: 600;\n  position: relative;\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  ${({ theme, $isActive }) =>\n    $isActive &&\n    css`\n      color: ${theme.colors.primary};\n      border-bottom-color: ${theme.colors.primary};\n    `}\n\n  &:hover {\n    ${({ theme, $isActive }) =>\n      !$isActive &&\n      css`\n        color: ${theme.colors.primary};\n        background-color: color-mix(\n          in srgb,\n          ${theme.colors.primaryLight} 10%,\n          transparent\n        );\n      `}\n  }\n\n  &:focus-visible {\n    outline: none;\n    z-index: 1;\n    box-shadow: inset 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:not(:last-child) {\n    border-right: 1px solid ${({ theme }) => theme.colors.grayLight};\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nconst TabPanel = styled.div<{ theme: Theme }>`\n  background-color: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  border-radius: 0 0 ${({ theme }) => theme.spacing.radius.lg}\n    ${({ theme }) => theme.spacing.radius.lg};\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledText(theme)}\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-top: none;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n\n  &[hidden] {\n    display: none;\n  }\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: inset 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nconst TabContent: React.FC<TabContentProps> = ({ children }) => {\n  return <>{children}</>;\n};\n\nconst Tabs: React.FC<TabsProps> = ({ children }) => {\n  const [activeTab, setActiveTab] = useState(0);\n  const tabsId = useId();\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const tabs = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<TabContentProps> =>\n      Boolean(\n        React.isValidElement(child) &&\n        child.props &&\n        typeof child.props === \"object\" &&\n        \"title\" in child.props &&\n        typeof child.props.title === \"string\" &&\n        child.props.title.trim() !== \"\",\n      ),\n  );\n\n  const selectTab = (index: number) => {\n    setActiveTab(index);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleTabKeyDown = (\n    event: React.KeyboardEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    let nextIndex: number | null = null;\n    if (event.key === \"ArrowRight\") {\n      nextIndex = index === tabs.length - 1 ? 0 : index + 1;\n    } else if (event.key === \"ArrowLeft\") {\n      nextIndex = index === 0 ? tabs.length - 1 : index - 1;\n    } else if (event.key === \"Home\") {\n      nextIndex = 0;\n    } else if (event.key === \"End\") {\n      nextIndex = tabs.length - 1;\n    }\n\n    if (nextIndex === null) return;\n    event.preventDefault();\n    selectTab(nextIndex);\n  };\n\n  return (\n    <TabsContainer>\n      <TabsList\n        role=\"tablist\"\n        aria-label=\"Content tabs\"\n        aria-orientation=\"horizontal\"\n      >\n        {tabs.map((tab, index) => {\n          const tabId = tabsId + \"-tab-\" + index;\n          const panelId = tabsId + \"-panel-\" + index;\n          return (\n            <TabButton\n              key={tabId}\n              ref={(element) => {\n                tabRefs.current[index] = element;\n              }}\n              id={tabId}\n              role=\"tab\"\n              aria-selected={activeTab === index}\n              aria-controls={panelId}\n              tabIndex={activeTab === index ? 0 : -1}\n              $isActive={activeTab === index}\n              onClick={() => setActiveTab(index)}\n              onKeyDown={(event) => handleTabKeyDown(event, index)}\n              type=\"button\"\n            >\n              {tab.props.icon && <Icon name={tab.props.icon} size={18} />}\n              {tab.props.title}\n            </TabButton>\n          );\n        })}\n      </TabsList>\n      {tabs.map((tab, index) => (\n        <TabPanel\n          key={tabsId + \"-panel-\" + index}\n          id={tabsId + \"-panel-\" + index}\n          role=\"tabpanel\"\n          aria-labelledby={tabsId + \"-tab-\" + index}\n          tabIndex={activeTab === index ? 0 : -1}\n          hidden={activeTab !== index}\n        >\n          {tab.props.children}\n        </TabPanel>\n      ))}\n    </TabsContainer>\n  );\n};\n\nexport { Tabs, TabContent };\n";