@seeqdev/qomponents 0.0.46 → 0.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -14559,14 +14559,14 @@ const $69cb30bb0017df05$export$54c2e3dc7acea9f5 = $69cb30bb0017df05$export$9712d
14559
14559
  const $69cb30bb0017df05$export$41fb9f06171c75f4 = $69cb30bb0017df05$export$8114b9fdfdf9f3ba;
14560
14560
  const $69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$bd905d70e8fd2ebb;
14561
14561
 
14562
- const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames, testId, id, }) => {
14562
+ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames, testId, id, stretchTabs = false, }) => {
14563
14563
  const handleTabSelect = (tabId) => {
14564
14564
  if (activeTab === tabId)
14565
14565
  return;
14566
14566
  onTabSelect && onTabSelect(tabId);
14567
14567
  };
14568
- return (React.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, { className: `tw-flex tw-flex-col tw-min-w-[300px] ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect },
14569
- React.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { className: `tw-bg-sq-light-gray dark:tw-bg-gray-700 tw-flex tw-flex-row tw-gap-[2px]` }, tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled }, index) => (React.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-h-[45px] tw-border-solid dark:tw-border-gray-700 tw-flex tw-flex-1 tw-justify-center tw-items-center ${tabExtraClassNames || ''} ${activeTab === id
14568
+ return (React.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, { className: `tw-flex tw-flex-col tw-min-w-[300px] tw-max-w-full h-full ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect },
14569
+ React.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { className: `tw-flex tw-flex-row tw-flex-wrap tw-z-[1001]` }, tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled }, index) => (React.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-h-[45px] tw-min-w-[100px] tw-px-4 tw-border-solid dark:tw-border-gray-700 tw-flex tw-flex-1 tw-justify-center tw-items-center tw-border-r-[2px] last:tw-border-r-0 ${stretchTabs ? '' : 'tw-max-w-max tw-min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
14570
14570
  ? 'tw-border-b-sq-color-dark dark:tw-border-b-sq-color-dark tw-border-b-[3px]'
14571
14571
  : 'hover:tw-bg-sq-light-gray tw-border-b-[1px] hover:dark:tw-bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, key: `${label}-${id}-${index}`, value: id },
14572
14572
  React.createElement("span", null,
@@ -14574,8 +14574,7 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
14574
14574
  React.createElement("span", { className: `tw-text-[14px] tw-font-medium ${activeTab === id
14575
14575
  ? 'dark:tw-text-sq-dark-text tw-text-gray-500'
14576
14576
  : 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'}` }, label)))))),
14577
- tabs.map((tab, index) => (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { key: `${tab.label}_${index}_content`, value: tab.id },
14578
- React.createElement("div", { className: "tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-4" }, tab.content))))));
14577
+ tabs.map((tab, index) => (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-h-full tw-overflow-y-auto -tw-mt-[1px] tw-border-t-[1px] tw-z-[500] ${tab.tabContentExtraClassNames || ''}`, key: `${tab.label}_${index}_content`, value: tab.id }, tab.content)))));
14579
14578
  };
14580
14579
 
14581
14580
  exports.Button = Button;