1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.TabContent = exports.TabBar = exports.Tab = exports.Root = void 0;
|
7 |
|
8 | var _index = require("../styles/index.js");
|
9 |
|
10 | var _constants = require("./constants.js");
|
11 |
|
12 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
13 |
|
14 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
15 |
|
16 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
17 |
|
18 |
|
19 | var Root = (0, _index.styled)('div', function (props) {
|
20 | var $orientation = props.$orientation;
|
21 | return {
|
22 | display: 'flex',
|
23 | flexDirection: $orientation === _constants.ORIENTATION.vertical ? 'row' : 'column'
|
24 | };
|
25 | });
|
26 |
|
27 | exports.Root = Root;
|
28 | Root.displayName = "Root";
|
29 | var Tab = (0, _index.styled)('div', function (props) {
|
30 | var $disabled = props.$disabled,
|
31 | $active = props.$active,
|
32 | $orientation = props.$orientation,
|
33 | $isFocusVisible = props.$isFocusVisible,
|
34 | _props$$theme = props.$theme,
|
35 | colors = _props$$theme.colors,
|
36 | sizing = _props$$theme.sizing,
|
37 | typography = _props$$theme.typography;
|
38 |
|
39 | var style = _objectSpread({}, typography.font200, {
|
40 | boxSizing: 'border-box',
|
41 | color: $active ? colors.contentPrimary : colors.tabColor,
|
42 | cursor: $disabled ? 'not-allowed' : 'pointer',
|
43 | paddingTop: sizing.scale600,
|
44 | paddingBottom: sizing.scale600,
|
45 | paddingLeft: sizing.scale300,
|
46 | paddingRight: sizing.scale300,
|
47 | marginLeft: sizing.scale200,
|
48 | marginRight: sizing.scale200,
|
49 | outline: $isFocusVisible ? "3px solid ".concat(colors.accent) : 'none',
|
50 | outlineOffset: '-3px',
|
51 | borderBottom: $orientation === _constants.ORIENTATION.horizontal && $active && !$isFocusVisible ? "2px solid ".concat(colors.primary) : '2px solid transparent',
|
52 | display: 'inline-block'
|
53 | });
|
54 |
|
55 | if (!$disabled) {
|
56 | style = _objectSpread({}, style, {
|
57 | ':focus': {
|
58 | color: colors.primary
|
59 | },
|
60 | ':hover': {
|
61 | color: colors.primary
|
62 | }
|
63 | });
|
64 | }
|
65 |
|
66 | return style;
|
67 | });
|
68 |
|
69 | exports.Tab = Tab;
|
70 | Tab.displayName = "Tab";
|
71 | var TabBar = (0, _index.styled)('div', function (props) {
|
72 | var $orientation = props.$orientation,
|
73 | _props$$theme2 = props.$theme,
|
74 | colors = _props$$theme2.colors,
|
75 | sizing = _props$$theme2.sizing;
|
76 | return {
|
77 | display: 'flex',
|
78 | flexDirection: $orientation === _constants.ORIENTATION.vertical ? 'column' : 'row',
|
79 | paddingLeft: sizing.scale400,
|
80 | paddingRight: sizing.scale400,
|
81 | backgroundColor: colors.tabBarFill
|
82 | };
|
83 | });
|
84 |
|
85 | exports.TabBar = TabBar;
|
86 | TabBar.displayName = "TabBar";
|
87 | var TabContent = (0, _index.styled)('div', function (props) {
|
88 | var $active = props.$active,
|
89 | _props$$theme3 = props.$theme,
|
90 | sizing = _props$$theme3.sizing,
|
91 | typography = _props$$theme3.typography;
|
92 | return _objectSpread({}, typography.font300, {
|
93 | display: $active ? 'block' : 'none',
|
94 | paddingLeft: sizing.scale800,
|
95 | paddingRight: sizing.scale800,
|
96 | paddingTop: sizing.scale500,
|
97 | paddingBottom: sizing.scale500
|
98 | });
|
99 | });
|
100 | exports.TabContent = TabContent;
|
101 | TabContent.displayName = "TabContent"; |
\ | No newline at end of file |