@aegov/design-system-react/dist/components/Tabs/Tabs.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactTabs = require("@radix-ui/react-tabs");
var _classVarianceAuthority = require("class-variance-authority");
var _zod = require("zod");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const tabsSchema = _zod.z.object({
  variant: _zod.z.enum(['default', 'pills', 'compact']).default('default'),
  items: _zod.z.array(_zod.z.object({
    value: _zod.z.string(),
    label: _zod.z.string(),
    content: _zod.z.any(),
    icon: _zod.z.any().optional()
  })),
  defaultValue: _zod.z.string().optional()
});
const tabsVariants = (0, _classVarianceAuthority.cva)('w-full', {
  variants: {
    variant: {
      default: 'border-b-2 border-gray-200',
      pills: '',
      compact: 'border-b-2 border-gray-200'
    }
  },
  defaultVariants: {
    variant: 'default'
  }
});
const tabListVariants = (0, _classVarianceAuthority.cva)('flex gap-4 md:gap-6 lg:gap-7 xl:gap-8 -mb-px', {
  variants: {
    variant: {
      default: '',
      pills: '',
      compact: ''
    }
  }
});
const tabTriggerVariants = (0, _classVarianceAuthority.cva)('items-center gap-3 font-medium rounded-t-lg border-b-[3px] border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-0', {
  variants: {
    variant: {
      default: 'py-6 px-1 text-base hover:text-gray-950 hover:border-primary-500 data-[state=active]:text-primary-600 data-[state=active]:border-primary-500',
      pills: 'py-3 px-4 lg:px-6 text-base rounded-lg hover:bg-aeblack-50 data-[state=active]:bg-primary-100 data-[state=active]:text-primary-900',
      compact: 'py-4 px-1 text-sm hover:text-gray-950 hover:border-primary-500 data-[state=active]:text-primary-600 data-[state=active]:border-primary-500'
    }
  },
  defaultVariants: {
    variant: 'default'
  }
});
const tabContentVariants = (0, _classVarianceAuthority.cva)('p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-0', {
  variants: {
    variant: {
      default: 'border-t border-aeblack-100 border-t-2',
      pills: '',
      compact: 'border-t border-aeblack-100 border-t-2'
    }
  }
});
const Tabs = ({
  variant = 'default',
  items,
  defaultValue,
  className,
  ...props
}) => {
  // Validate props
  try {
    tabsSchema.parse({
      variant,
      items,
      defaultValue
    });
  } catch (error) {
    console.error('Tabs validation error:', error);
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_reactTabs.Root, _extends({
    defaultValue: defaultValue || items[0].value,
    className: tabsVariants({
      variant,
      className
    })
  }, props), /*#__PURE__*/_react.default.createElement(_reactTabs.List, {
    className: tabListVariants({
      variant
    })
  }, items.map(({
    value,
    label,
    icon: Icon
  }) => /*#__PURE__*/_react.default.createElement(_reactTabs.Trigger, {
    key: value,
    value: value,
    className: tabTriggerVariants({
      variant
    })
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "flex items-center gap-2"
  }, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
    className: "w-5 h-5"
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "whitespace-nowrap"
  }, label))))), items.map(({
    value,
    content
  }) => /*#__PURE__*/_react.default.createElement(_reactTabs.Content, {
    key: value,
    value: value,
    className: tabContentVariants({
      variant
    })
  }, content)));
};
var _default = exports.default = Tabs;