@lobehub/ui/es/base-ui/Tabs/Tabs.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"Tabs.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from './atoms';\nimport { styles } from './style';\nimport type { TabsProps } from './type';\n\nconst Tabs: FC<TabsProps> = ({\n  activeKey,\n  className,\n  classNames,\n  defaultActiveKey,\n  items,\n  onChange,\n  orientation = 'horizontal',\n  ref,\n  size = 'middle',\n  style,\n  styles: customStyles,\n  variant = 'rounded',\n}) => {\n  const initialActiveKey = defaultActiveKey ?? items?.find((item) => !item.disabled)?.key ?? null;\n  const [value, setValue] = useControlledState<string | null>(initialActiveKey, {\n    defaultValue: initialActiveKey,\n    onChange: (next) => {\n      if (next != null) onChange?.(next);\n    },\n    value: activeKey,\n  });\n\n  const hasPanels = items?.some((item) => item.children != null);\n\n  return (\n    <TabsRoot\n      className={cx(styles.root, classNames?.root, className)}\n      orientation={orientation}\n      ref={ref}\n      size={size}\n      style={{ ...style, ...customStyles?.root }}\n      value={value}\n      variant={variant}\n      onValueChange={(next) => setValue(next ?? null)}\n    >\n      <TabsList className={cx(classNames?.list)} style={customStyles?.list}>\n        <TabsIndicator className={cx(classNames?.indicator)} style={customStyles?.indicator} />\n        {items?.map((item) => (\n          <TabsTab\n            className={cx(classNames?.tab)}\n            disabled={item.disabled}\n            key={item.key}\n            style={customStyles?.tab}\n            value={item.key}\n          >\n            {item.icon}\n            {item.label}\n          </TabsTab>\n        ))}\n      </TabsList>\n      {hasPanels &&\n        items?.map((item) => (\n          <TabsPanel\n            className={cx(classNames?.panel)}\n            key={item.key}\n            style={customStyles?.panel}\n            value={item.key}\n          >\n            {item.children}\n          </TabsPanel>\n        ))}\n    </TabsRoot>\n  );\n};\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"mappings":";;;;;;;AAUA,MAAM,QAAuB,EAC3B,WACA,WACA,YACA,kBACA,OACA,UACA,cAAc,cACd,KACA,OAAO,UACP,OACA,QAAQ,cACR,UAAU,gBACN;CACJ,MAAM,mBAAmB,oBAAoB,OAAO,MAAM,SAAS,CAAC,KAAK,QAAQ,CAAC,EAAE,OAAO;CAC3F,MAAM,CAAC,OAAO,YAAYA,cAAkC,kBAAkB;EAC5E,cAAc;EACd,WAAW,SAAS;GAClB,IAAI,QAAQ,MAAM,WAAW,IAAI;EACnC;EACA,OAAO;CACT,CAAC;CAED,MAAM,YAAY,OAAO,MAAM,SAAS,KAAK,YAAY,IAAI;CAE7D,OACE,qBAAC,UAAD;EACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,SAAS;EACzC;EACR;EACC;EACN,OAAO;GAAE,GAAG;GAAO,GAAG,cAAc;EAAK;EAClC;EACE;EACT,gBAAgB,SAAS,SAAS,QAAQ,IAAI;YARhD,CAUE,qBAAC,UAAD;GAAU,WAAW,GAAG,YAAY,IAAI;GAAG,OAAO,cAAc;aAAhE,CACE,oBAAC,eAAD;IAAe,WAAW,GAAG,YAAY,SAAS;IAAG,OAAO,cAAc;GAAY,CAAA,GACrF,OAAO,KAAK,SACX,qBAAC,SAAD;IACE,WAAW,GAAG,YAAY,GAAG;IAC7B,UAAU,KAAK;IAEf,OAAO,cAAc;IACrB,OAAO,KAAK;cALd,CAOG,KAAK,MACL,KAAK,KACC;MANF,KAAK,GAMH,CACV,CACO;MACT,aACC,OAAO,KAAK,SACV,oBAAC,WAAD;GACE,WAAW,GAAG,YAAY,KAAK;GAE/B,OAAO,cAAc;GACrB,OAAO,KAAK;aAEX,KAAK;EACG,GALJ,KAAK,GAKD,CACZ,CACK;;AAEd;AAEA,KAAK,cAAc"}