@korsolutions/ui 0.0.33 → 0.0.35
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/module/components/index.js +1 -0
- package/dist/module/components/index.js.map +1 -1
- package/dist/module/components/tabs/index.js +5 -0
- package/dist/module/components/tabs/index.js.map +1 -0
- package/dist/module/components/tabs/tabs.js +43 -0
- package/dist/module/components/tabs/tabs.js.map +1 -0
- package/dist/module/components/tabs/variants/default.js +55 -0
- package/dist/module/components/tabs/variants/default.js.map +1 -0
- package/dist/module/components/tabs/variants/index.js +9 -0
- package/dist/module/components/tabs/variants/index.js.map +1 -0
- package/dist/module/components/tabs/variants/line.js +46 -0
- package/dist/module/components/tabs/variants/line.js.map +1 -0
- package/dist/module/primitives/index.js +1 -0
- package/dist/module/primitives/index.js.map +1 -1
- package/dist/module/primitives/tabs/index.js +14 -0
- package/dist/module/primitives/tabs/index.js.map +1 -0
- package/dist/module/primitives/tabs/tabs-context.js +12 -0
- package/dist/module/primitives/tabs/tabs-context.js.map +1 -0
- package/dist/module/primitives/tabs/tabs-list.js +23 -0
- package/dist/module/primitives/tabs/tabs-list.js.map +1 -0
- package/dist/module/primitives/tabs/tabs-root.js +30 -0
- package/dist/module/primitives/tabs/tabs-root.js.map +1 -0
- package/dist/module/primitives/tabs/tabs-trigger-text.js +28 -0
- package/dist/module/primitives/tabs/tabs-trigger-text.js.map +1 -0
- package/dist/module/primitives/tabs/tabs-trigger.js +45 -0
- package/dist/module/primitives/tabs/tabs-trigger.js.map +1 -0
- package/dist/module/primitives/tabs/types.js +4 -0
- package/dist/module/primitives/tabs/types.js.map +1 -0
- package/dist/typescript/src/components/index.d.ts +1 -0
- package/dist/typescript/src/components/index.d.ts.map +1 -1
- package/dist/typescript/src/components/tabs/index.d.ts +3 -0
- package/dist/typescript/src/components/tabs/index.d.ts.map +1 -0
- package/dist/typescript/src/components/tabs/tabs.d.ts +17 -0
- package/dist/typescript/src/components/tabs/tabs.d.ts.map +1 -0
- package/dist/typescript/src/components/tabs/variants/default.d.ts +3 -0
- package/dist/typescript/src/components/tabs/variants/default.d.ts.map +1 -0
- package/dist/typescript/src/components/tabs/variants/index.d.ts +5 -0
- package/dist/typescript/src/components/tabs/variants/index.d.ts.map +1 -0
- package/dist/typescript/src/components/tabs/variants/line.d.ts +3 -0
- package/dist/typescript/src/components/tabs/variants/line.d.ts.map +1 -0
- package/dist/typescript/src/primitives/index.d.ts +1 -0
- package/dist/typescript/src/primitives/index.d.ts.map +1 -1
- package/dist/typescript/src/primitives/tabs/index.d.ts +16 -0
- package/dist/typescript/src/primitives/tabs/index.d.ts.map +1 -0
- package/dist/typescript/src/primitives/tabs/tabs-context.d.ts +10 -0
- package/dist/typescript/src/primitives/tabs/tabs-context.d.ts.map +1 -0
- package/dist/typescript/src/primitives/tabs/tabs-list.d.ts +8 -0
- package/dist/typescript/src/primitives/tabs/tabs-list.d.ts.map +1 -0
- package/dist/typescript/src/primitives/tabs/tabs-root.d.ts +12 -0
- package/dist/typescript/src/primitives/tabs/tabs-root.d.ts.map +1 -0
- package/dist/typescript/src/primitives/tabs/tabs-trigger-text.d.ts +10 -0
- package/dist/typescript/src/primitives/tabs/tabs-trigger-text.d.ts.map +1 -0
- package/dist/typescript/src/primitives/tabs/tabs-trigger.d.ts +10 -0
- package/dist/typescript/src/primitives/tabs/tabs-trigger.d.ts.map +1 -0
- package/dist/typescript/src/primitives/tabs/types.d.ts +11 -0
- package/dist/typescript/src/primitives/tabs/types.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/index.ts +1 -0
- package/src/components/tabs/index.ts +2 -0
- package/src/components/tabs/tabs.tsx +49 -0
- package/src/components/tabs/variants/default.tsx +48 -0
- package/src/components/tabs/variants/index.ts +7 -0
- package/src/components/tabs/variants/line.tsx +43 -0
- package/src/primitives/index.ts +1 -0
- package/src/primitives/tabs/index.ts +17 -0
- package/src/primitives/tabs/tabs-context.tsx +18 -0
- package/src/primitives/tabs/tabs-list.tsx +21 -0
- package/src/primitives/tabs/tabs-root.tsx +33 -0
- package/src/primitives/tabs/tabs-trigger-text.tsx +26 -0
- package/src/primitives/tabs/tabs-trigger.tsx +43 -0
- package/src/primitives/tabs/types.ts +12 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Tabs","TabsVariants"],"sourceRoot":"../../../../src","sources":["components/tabs/index.ts"],"mappings":";;AAAA,SAASA,IAAI;AACb,SAASC,YAAY","ignoreList":[]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { TabsPrimitive } from "../../primitives/index.js";
|
|
4
|
+
import React, { useState } from "react";
|
|
5
|
+
import { TabsVariants } from "./variants/index.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
export function Tabs(props) {
|
|
8
|
+
const {
|
|
9
|
+
tabs,
|
|
10
|
+
defaultValue,
|
|
11
|
+
value: controlledValue,
|
|
12
|
+
onChange,
|
|
13
|
+
variant = "default"
|
|
14
|
+
} = props;
|
|
15
|
+
const initialValue = defaultValue ?? tabs[0]?.value ?? "";
|
|
16
|
+
const [uncontrolledValue, setUncontrolledValue] = useState(initialValue);
|
|
17
|
+
const value = controlledValue ?? uncontrolledValue;
|
|
18
|
+
const handleValueChange = newValue => {
|
|
19
|
+
if (controlledValue === undefined) {
|
|
20
|
+
setUncontrolledValue(newValue);
|
|
21
|
+
}
|
|
22
|
+
onChange?.(newValue);
|
|
23
|
+
};
|
|
24
|
+
const useVariantStyles = TabsVariants[variant];
|
|
25
|
+
const variantStyles = useVariantStyles();
|
|
26
|
+
return /*#__PURE__*/_jsx(TabsPrimitive.Root, {
|
|
27
|
+
value: String(value),
|
|
28
|
+
onChange: newValue => handleValueChange(newValue),
|
|
29
|
+
styles: variantStyles,
|
|
30
|
+
children: /*#__PURE__*/_jsx(TabsPrimitive.List, {
|
|
31
|
+
children: tabs.map(tab => /*#__PURE__*/_jsx(TabsPrimitive.Trigger, {
|
|
32
|
+
value: String(tab.value),
|
|
33
|
+
isDisabled: tab.disabled,
|
|
34
|
+
children: /*#__PURE__*/_jsx(TabsPrimitive.TriggerText, {
|
|
35
|
+
value: String(tab.value),
|
|
36
|
+
isDisabled: tab.disabled,
|
|
37
|
+
children: tab.label
|
|
38
|
+
})
|
|
39
|
+
}, String(tab.value)))
|
|
40
|
+
})
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["TabsPrimitive","React","useState","TabsVariants","jsx","_jsx","Tabs","props","tabs","defaultValue","value","controlledValue","onChange","variant","initialValue","uncontrolledValue","setUncontrolledValue","handleValueChange","newValue","undefined","useVariantStyles","variantStyles","Root","String","styles","children","List","map","tab","Trigger","isDisabled","disabled","TriggerText","label"],"sourceRoot":"../../../../src","sources":["components/tabs/tabs.tsx"],"mappings":";;AAAA,SAASA,aAAa;AACtB,OAAOC,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAgB1C,OAAO,SAASC,IAAIA,CAAIC,KAAmB,EAAE;EAC3C,MAAM;IAAEC,IAAI;IAAEC,YAAY;IAAEC,KAAK,EAAEC,eAAe;IAAEC,QAAQ;IAAEC,OAAO,GAAG;EAAU,CAAC,GAAGN,KAAK;EAE3F,MAAMO,YAAY,GAAGL,YAAY,IAAID,IAAI,CAAC,CAAC,CAAC,EAAEE,KAAK,IAAK,EAAQ;EAChE,MAAM,CAACK,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGd,QAAQ,CAACY,YAAY,CAAC;EACxE,MAAMJ,KAAK,GAAGC,eAAe,IAAII,iBAAiB;EAElD,MAAME,iBAAiB,GAAIC,QAAW,IAAK;IACzC,IAAIP,eAAe,KAAKQ,SAAS,EAAE;MACjCH,oBAAoB,CAACE,QAAQ,CAAC;IAChC;IACAN,QAAQ,GAAGM,QAAQ,CAAC;EACtB,CAAC;EAED,MAAME,gBAAgB,GAAGjB,YAAY,CAACU,OAAO,CAAC;EAC9C,MAAMQ,aAAa,GAAGD,gBAAgB,CAAC,CAAC;EAExC,oBACEf,IAAA,CAACL,aAAa,CAACsB,IAAI;IAACZ,KAAK,EAAEa,MAAM,CAACb,KAAK,CAAE;IAACE,QAAQ,EAAGM,QAAQ,IAAKD,iBAAiB,CAACC,QAAa,CAAE;IAACM,MAAM,EAAEH,aAAc;IAAAI,QAAA,eACxHpB,IAAA,CAACL,aAAa,CAAC0B,IAAI;MAAAD,QAAA,EAChBjB,IAAI,CAACmB,GAAG,CAAEC,GAAG,iBACZvB,IAAA,CAACL,aAAa,CAAC6B,OAAO;QAAyBnB,KAAK,EAAEa,MAAM,CAACK,GAAG,CAAClB,KAAK,CAAE;QAACoB,UAAU,EAAEF,GAAG,CAACG,QAAS;QAAAN,QAAA,eAChGpB,IAAA,CAACL,aAAa,CAACgC,WAAW;UAACtB,KAAK,EAAEa,MAAM,CAACK,GAAG,CAAClB,KAAK,CAAE;UAACoB,UAAU,EAAEF,GAAG,CAACG,QAAS;UAAAN,QAAA,EAC3EG,GAAG,CAACK;QAAK,CACe;MAAC,GAHFV,MAAM,CAACK,GAAG,CAAClB,KAAK,CAIrB,CACxB;IAAC,CACgB;EAAC,CACH,CAAC;AAEzB","ignoreList":[]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useThemedStyles } from "../../../utils/use-themed-styles.js";
|
|
4
|
+
export const useTabsVariantDefault = () => {
|
|
5
|
+
return useThemedStyles(({
|
|
6
|
+
colors,
|
|
7
|
+
radius,
|
|
8
|
+
fontFamily,
|
|
9
|
+
fontSize
|
|
10
|
+
}) => ({
|
|
11
|
+
list: {
|
|
12
|
+
flexDirection: "row",
|
|
13
|
+
backgroundColor: colors.muted,
|
|
14
|
+
padding: 4,
|
|
15
|
+
borderRadius: radius,
|
|
16
|
+
gap: 4
|
|
17
|
+
},
|
|
18
|
+
trigger: {
|
|
19
|
+
default: {
|
|
20
|
+
paddingVertical: 8,
|
|
21
|
+
paddingHorizontal: 12,
|
|
22
|
+
borderRadius: radius,
|
|
23
|
+
backgroundColor: "transparent"
|
|
24
|
+
},
|
|
25
|
+
active: {
|
|
26
|
+
backgroundColor: colors.background,
|
|
27
|
+
shadowColor: "#000",
|
|
28
|
+
shadowOffset: {
|
|
29
|
+
width: 0,
|
|
30
|
+
height: 1
|
|
31
|
+
},
|
|
32
|
+
shadowOpacity: 0.1,
|
|
33
|
+
shadowRadius: 2,
|
|
34
|
+
elevation: 2
|
|
35
|
+
},
|
|
36
|
+
disabled: {
|
|
37
|
+
opacity: 0.5
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
triggerText: {
|
|
41
|
+
default: {
|
|
42
|
+
color: colors.mutedForeground,
|
|
43
|
+
fontSize,
|
|
44
|
+
fontFamily
|
|
45
|
+
},
|
|
46
|
+
active: {
|
|
47
|
+
color: colors.foreground
|
|
48
|
+
},
|
|
49
|
+
disabled: {
|
|
50
|
+
color: colors.mutedForeground
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}));
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=default.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useThemedStyles","useTabsVariantDefault","colors","radius","fontFamily","fontSize","list","flexDirection","backgroundColor","muted","padding","borderRadius","gap","trigger","default","paddingVertical","paddingHorizontal","active","background","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","disabled","opacity","triggerText","color","mutedForeground","foreground"],"sourceRoot":"../../../../../src","sources":["components/tabs/variants/default.tsx"],"mappings":";;AACA,SAASA,eAAe;AAExB,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KAAkB;EACrD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAkB;IACzDC,IAAI,EAAE;MACJC,aAAa,EAAE,KAAK;MACpBC,eAAe,EAAEN,MAAM,CAACO,KAAK;MAC7BC,OAAO,EAAE,CAAC;MACVC,YAAY,EAAER,MAAM;MACpBS,GAAG,EAAE;IACP,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE;QACPC,eAAe,EAAE,CAAC;QAClBC,iBAAiB,EAAE,EAAE;QACrBL,YAAY,EAAER,MAAM;QACpBK,eAAe,EAAE;MACnB,CAAC;MACDS,MAAM,EAAE;QACNT,eAAe,EAAEN,MAAM,CAACgB,UAAU;QAClCC,WAAW,EAAE,MAAM;QACnBC,YAAY,EAAE;UAAEC,KAAK,EAAE,CAAC;UAAEC,MAAM,EAAE;QAAE,CAAC;QACrCC,aAAa,EAAE,GAAG;QAClBC,YAAY,EAAE,CAAC;QACfC,SAAS,EAAE;MACb,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF,CAAC;IACDC,WAAW,EAAE;MACXd,OAAO,EAAE;QACPe,KAAK,EAAE3B,MAAM,CAAC4B,eAAe;QAC7BzB,QAAQ;QACRD;MACF,CAAC;MACDa,MAAM,EAAE;QACNY,KAAK,EAAE3B,MAAM,CAAC6B;MAChB,CAAC;MACDL,QAAQ,EAAE;QACRG,KAAK,EAAE3B,MAAM,CAAC4B;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useTabsVariantDefault","useTabsVariantLine","TabsVariants","default","line"],"sourceRoot":"../../../../../src","sources":["components/tabs/variants/index.ts"],"mappings":";;AAAA,SAASA,qBAAqB;AAC9B,SAASC,kBAAkB;AAE3B,OAAO,MAAMC,YAAY,GAAG;EAC1BC,OAAO,EAAEH,qBAAqB;EAC9BI,IAAI,EAAEH;AACR,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useThemedStyles } from "../../../utils/use-themed-styles.js";
|
|
4
|
+
export const useTabsVariantLine = () => {
|
|
5
|
+
return useThemedStyles(({
|
|
6
|
+
colors,
|
|
7
|
+
fontFamily,
|
|
8
|
+
fontSize
|
|
9
|
+
}) => ({
|
|
10
|
+
list: {
|
|
11
|
+
flexDirection: "row",
|
|
12
|
+
borderBottomWidth: 1,
|
|
13
|
+
borderBottomColor: colors.border,
|
|
14
|
+
gap: 0
|
|
15
|
+
},
|
|
16
|
+
trigger: {
|
|
17
|
+
default: {
|
|
18
|
+
paddingVertical: 12,
|
|
19
|
+
paddingHorizontal: 16,
|
|
20
|
+
borderBottomWidth: 2,
|
|
21
|
+
borderBottomColor: "transparent",
|
|
22
|
+
backgroundColor: "transparent"
|
|
23
|
+
},
|
|
24
|
+
active: {
|
|
25
|
+
borderBottomColor: colors.primary
|
|
26
|
+
},
|
|
27
|
+
disabled: {
|
|
28
|
+
opacity: 0.5
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
triggerText: {
|
|
32
|
+
default: {
|
|
33
|
+
color: colors.mutedForeground,
|
|
34
|
+
fontSize,
|
|
35
|
+
fontFamily
|
|
36
|
+
},
|
|
37
|
+
active: {
|
|
38
|
+
color: colors.foreground
|
|
39
|
+
},
|
|
40
|
+
disabled: {
|
|
41
|
+
color: colors.mutedForeground
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}));
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=line.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useThemedStyles","useTabsVariantLine","colors","fontFamily","fontSize","list","flexDirection","borderBottomWidth","borderBottomColor","border","gap","trigger","default","paddingVertical","paddingHorizontal","backgroundColor","active","primary","disabled","opacity","triggerText","color","mutedForeground","foreground"],"sourceRoot":"../../../../../src","sources":["components/tabs/variants/line.tsx"],"mappings":";;AACA,SAASA,eAAe;AAExB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAkB;EAClD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAkB;IACjDC,IAAI,EAAE;MACJC,aAAa,EAAE,KAAK;MACpBC,iBAAiB,EAAE,CAAC;MACpBC,iBAAiB,EAAEN,MAAM,CAACO,MAAM;MAChCC,GAAG,EAAE;IACP,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE;QACPC,eAAe,EAAE,EAAE;QACnBC,iBAAiB,EAAE,EAAE;QACrBP,iBAAiB,EAAE,CAAC;QACpBC,iBAAiB,EAAE,aAAa;QAChCO,eAAe,EAAE;MACnB,CAAC;MACDC,MAAM,EAAE;QACNR,iBAAiB,EAAEN,MAAM,CAACe;MAC5B,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF,CAAC;IACDC,WAAW,EAAE;MACXR,OAAO,EAAE;QACPS,KAAK,EAAEnB,MAAM,CAACoB,eAAe;QAC7BlB,QAAQ;QACRD;MACF,CAAC;MACDa,MAAM,EAAE;QACNK,KAAK,EAAEnB,MAAM,CAACqB;MAChB,CAAC;MACDL,QAAQ,EAAE;QACRG,KAAK,EAAEnB,MAAM,CAACoB;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["primitives/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["primitives/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { TabsList } from "./tabs-list.js";
|
|
4
|
+
import { TabsRoot } from "./tabs-root.js";
|
|
5
|
+
import { TabsTrigger } from "./tabs-trigger.js";
|
|
6
|
+
import { TabsTriggerText } from "./tabs-trigger-text.js";
|
|
7
|
+
export const TabsPrimitive = {
|
|
8
|
+
Root: TabsRoot,
|
|
9
|
+
List: TabsList,
|
|
10
|
+
Trigger: TabsTrigger,
|
|
11
|
+
TriggerText: TabsTriggerText
|
|
12
|
+
};
|
|
13
|
+
export * from "./types.js";
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["TabsList","TabsRoot","TabsTrigger","TabsTriggerText","TabsPrimitive","Root","List","Trigger","TriggerText"],"sourceRoot":"../../../../src","sources":["primitives/tabs/index.ts"],"mappings":";;AAAA,SAASA,QAAQ;AACjB,SAASC,QAAQ;AACjB,SAASC,WAAW;AACpB,SAASC,eAAe;AAExB,OAAO,MAAMC,aAAa,GAAG;EAC3BC,IAAI,EAAEJ,QAAQ;EACdK,IAAI,EAAEN,QAAQ;EACdO,OAAO,EAAEL,WAAW;EACpBM,WAAW,EAAEL;AACf,CAAC;AAMD","ignoreList":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { useContext } from "react";
|
|
4
|
+
export const TabsPrimitiveContext = /*#__PURE__*/React.createContext(null);
|
|
5
|
+
export const useTabsContext = () => {
|
|
6
|
+
const context = useContext(TabsPrimitiveContext);
|
|
7
|
+
if (!context) {
|
|
8
|
+
throw new Error("Tabs compound components must be used within TabsPrimitive.Root");
|
|
9
|
+
}
|
|
10
|
+
return context;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=tabs-context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useContext","TabsPrimitiveContext","createContext","useTabsContext","context","Error"],"sourceRoot":"../../../../src","sources":["primitives/tabs/tabs-context.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AASzC,OAAO,MAAMC,oBAAoB,gBAAGF,KAAK,CAACG,aAAa,CAAmC,IAAI,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,MAAMC,OAAO,GAAGJ,UAAU,CAACC,oBAAoB,CAAC;EAChD,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,iEAAiE,CAAC;EACpF;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { View } from "react-native";
|
|
5
|
+
import { useTabsContext } from "./tabs-context.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
export function TabsList(props) {
|
|
8
|
+
const {
|
|
9
|
+
children,
|
|
10
|
+
style,
|
|
11
|
+
...viewProps
|
|
12
|
+
} = props;
|
|
13
|
+
const {
|
|
14
|
+
styles
|
|
15
|
+
} = useTabsContext();
|
|
16
|
+
const calculatedStyle = [styles?.list, style];
|
|
17
|
+
return /*#__PURE__*/_jsx(View, {
|
|
18
|
+
...viewProps,
|
|
19
|
+
style: calculatedStyle,
|
|
20
|
+
children: children
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=tabs-list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","View","useTabsContext","jsx","_jsx","TabsList","props","children","style","viewProps","styles","calculatedStyle","list"],"sourceRoot":"../../../../src","sources":["primitives/tabs/tabs-list.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwD,cAAc;AACnF,SAASC,cAAc;AAAyB,SAAAC,GAAA,IAAAC,IAAA;AAOhD,OAAO,SAASC,QAAQA,CAACC,KAA6B,EAAE;EACtD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EAC/C,MAAM;IAAEI;EAAO,CAAC,GAAGR,cAAc,CAAC,CAAC;EAEnC,MAAMS,eAAe,GAAG,CAACD,MAAM,EAAEE,IAAI,EAAEJ,KAAK,CAAC;EAE7C,oBACEJ,IAAA,CAACH,IAAI;IAAA,GAAKQ,SAAS;IAAED,KAAK,EAAEG,eAAgB;IAAAJ,QAAA,EACzCA;EAAQ,CACL,CAAC;AAEX","ignoreList":[]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { useMemo } from "react";
|
|
4
|
+
import { View } from "react-native";
|
|
5
|
+
import { TabsPrimitiveContext } from "./tabs-context.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
export function TabsRoot(props) {
|
|
8
|
+
const {
|
|
9
|
+
children,
|
|
10
|
+
value,
|
|
11
|
+
onChange,
|
|
12
|
+
styles,
|
|
13
|
+
style,
|
|
14
|
+
...viewProps
|
|
15
|
+
} = props;
|
|
16
|
+
const contextValue = useMemo(() => ({
|
|
17
|
+
value,
|
|
18
|
+
onChange,
|
|
19
|
+
styles
|
|
20
|
+
}), [value, onChange, styles]);
|
|
21
|
+
return /*#__PURE__*/_jsx(TabsPrimitiveContext.Provider, {
|
|
22
|
+
value: contextValue,
|
|
23
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
24
|
+
...viewProps,
|
|
25
|
+
style: style,
|
|
26
|
+
children: children
|
|
27
|
+
})
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=tabs-root.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useMemo","View","TabsPrimitiveContext","jsx","_jsx","TabsRoot","props","children","value","onChange","styles","style","viewProps","contextValue","Provider"],"sourceRoot":"../../../../src","sources":["primitives/tabs/tabs-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAwD,cAAc;AACnF,SAASC,oBAAoB;AAAyB,SAAAC,GAAA,IAAAC,IAAA;AAWtD,OAAO,SAASC,QAAQA,CAACC,KAA6B,EAAE;EACtD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGN,KAAK;EAExE,MAAMO,YAAY,GAAGb,OAAO,CAC1B,OAAO;IACLQ,KAAK;IACLC,QAAQ;IACRC;EACF,CAAC,CAAC,EACF,CAACF,KAAK,EAAEC,QAAQ,EAAEC,MAAM,CAC1B,CAAC;EAED,oBACEN,IAAA,CAACF,oBAAoB,CAACY,QAAQ;IAACN,KAAK,EAAEK,YAAa;IAAAN,QAAA,eACjDH,IAAA,CAACH,IAAI;MAAA,GAAKW,SAAS;MAAED,KAAK,EAAEA,KAAM;MAAAJ,QAAA,EAC/BA;IAAQ,CACL;EAAC,CACsB,CAAC;AAEpC","ignoreList":[]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { Text } from "react-native";
|
|
5
|
+
import { useTabsContext } from "./tabs-context.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
export function TabsTriggerText(props) {
|
|
8
|
+
const {
|
|
9
|
+
children,
|
|
10
|
+
value: triggerValue,
|
|
11
|
+
isDisabled,
|
|
12
|
+
style,
|
|
13
|
+
...textProps
|
|
14
|
+
} = props;
|
|
15
|
+
const {
|
|
16
|
+
value,
|
|
17
|
+
styles
|
|
18
|
+
} = useTabsContext();
|
|
19
|
+
const isActive = value === triggerValue;
|
|
20
|
+
const state = isDisabled ? "disabled" : isActive ? "active" : "default";
|
|
21
|
+
const calculatedStyle = [styles?.triggerText?.default, styles?.triggerText?.[state], style];
|
|
22
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
23
|
+
...textProps,
|
|
24
|
+
style: calculatedStyle,
|
|
25
|
+
children: children
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=tabs-trigger-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Text","useTabsContext","jsx","_jsx","TabsTriggerText","props","children","value","triggerValue","isDisabled","style","textProps","styles","isActive","state","calculatedStyle","triggerText","default"],"sourceRoot":"../../../../src","sources":["primitives/tabs/tabs-trigger-text.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwD,cAAc;AACnF,SAASC,cAAc;AAAyB,SAAAC,GAAA,IAAAC,IAAA;AAShD,OAAO,SAASC,eAAeA,CAACC,KAAoC,EAAE;EACpE,MAAM;IAAEC,QAAQ;IAAEC,KAAK,EAAEC,YAAY;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGN,KAAK;EAChF,MAAM;IAAEE,KAAK;IAAEK;EAAO,CAAC,GAAGX,cAAc,CAAC,CAAC;EAE1C,MAAMY,QAAQ,GAAGN,KAAK,KAAKC,YAAY;EACvC,MAAMM,KAAK,GAAGL,UAAU,GAAG,UAAU,GAAGI,QAAQ,GAAG,QAAQ,GAAG,SAAS;EAEvE,MAAME,eAAe,GAAG,CAACH,MAAM,EAAEI,WAAW,EAAEC,OAAO,EAAEL,MAAM,EAAEI,WAAW,GAAGF,KAAK,CAAC,EAAEJ,KAAK,CAAC;EAE3F,oBACEP,IAAA,CAACH,IAAI;IAAA,GAAKW,SAAS;IAAED,KAAK,EAAEK,eAAgB;IAAAT,QAAA,EACzCA;EAAQ,CACL,CAAC;AAEX","ignoreList":[]}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { Pressable } from "react-native";
|
|
5
|
+
import { useTabsContext } from "./tabs-context.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
const calculateState = (isActive, isDisabled) => {
|
|
8
|
+
if (isDisabled) {
|
|
9
|
+
return "disabled";
|
|
10
|
+
}
|
|
11
|
+
if (isActive) {
|
|
12
|
+
return "active";
|
|
13
|
+
}
|
|
14
|
+
return "default";
|
|
15
|
+
};
|
|
16
|
+
export function TabsTrigger(props) {
|
|
17
|
+
const {
|
|
18
|
+
children,
|
|
19
|
+
value: triggerValue,
|
|
20
|
+
isDisabled,
|
|
21
|
+
style,
|
|
22
|
+
...pressableProps
|
|
23
|
+
} = props;
|
|
24
|
+
const {
|
|
25
|
+
value,
|
|
26
|
+
onChange,
|
|
27
|
+
styles
|
|
28
|
+
} = useTabsContext();
|
|
29
|
+
const isActive = value === triggerValue;
|
|
30
|
+
const state = calculateState(isActive, isDisabled);
|
|
31
|
+
const handlePress = () => {
|
|
32
|
+
if (!isDisabled) {
|
|
33
|
+
onChange(triggerValue);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
const calculatedStyle = [styles?.trigger?.default, styles?.trigger?.[state], style];
|
|
37
|
+
return /*#__PURE__*/_jsx(Pressable, {
|
|
38
|
+
...pressableProps,
|
|
39
|
+
disabled: isDisabled,
|
|
40
|
+
onPress: handlePress,
|
|
41
|
+
style: calculatedStyle,
|
|
42
|
+
children: children
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=tabs-trigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Pressable","useTabsContext","jsx","_jsx","calculateState","isActive","isDisabled","TabsTrigger","props","children","value","triggerValue","style","pressableProps","onChange","styles","state","handlePress","calculatedStyle","trigger","default","disabled","onPress"],"sourceRoot":"../../../../src","sources":["primitives/tabs/tabs-trigger.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAA6D,cAAc;AAC7F,SAASC,cAAc;AAAyB,SAAAC,GAAA,IAAAC,IAAA;AAUhD,MAAMC,cAAc,GAAGA,CAACC,QAAiB,EAAEC,UAA+B,KAAgB;EACxF,IAAIA,UAAU,EAAE;IACd,OAAO,UAAU;EACnB;EACA,IAAID,QAAQ,EAAE;IACZ,OAAO,QAAQ;EACjB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASE,WAAWA,CAACC,KAAgC,EAAE;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,KAAK,EAAEC,YAAY;IAAEL,UAAU;IAAEM,KAAK;IAAE,GAAGC;EAAe,CAAC,GAAGL,KAAK;EACrF,MAAM;IAAEE,KAAK;IAAEI,QAAQ;IAAEC;EAAO,CAAC,GAAGd,cAAc,CAAC,CAAC;EAEpD,MAAMI,QAAQ,GAAGK,KAAK,KAAKC,YAAY;EACvC,MAAMK,KAAK,GAAGZ,cAAc,CAACC,QAAQ,EAAEC,UAAU,CAAC;EAElD,MAAMW,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAI,CAACX,UAAU,EAAE;MACfQ,QAAQ,CAACH,YAAY,CAAC;IACxB;EACF,CAAC;EAED,MAAMO,eAAe,GAAG,CAACH,MAAM,EAAEI,OAAO,EAAEC,OAAO,EAAEL,MAAM,EAAEI,OAAO,GAAGH,KAAK,CAAC,EAAEJ,KAAK,CAAC;EAEnF,oBACET,IAAA,CAACH,SAAS;IAAA,GAAKa,cAAc;IAAEQ,QAAQ,EAAEf,UAAW;IAACgB,OAAO,EAAEL,WAAY;IAACL,KAAK,EAAEM,eAAgB;IAAAT,QAAA,EAC/FA;EAAQ,CACA,CAAC;AAEhB","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["primitives/tabs/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TabsVariants } from "./variants";
|
|
3
|
+
export interface Tab<T> {
|
|
4
|
+
value: T;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
}
|
|
8
|
+
interface TabsProps<T> {
|
|
9
|
+
tabs: Tab<T>[];
|
|
10
|
+
defaultValue?: T;
|
|
11
|
+
value?: T;
|
|
12
|
+
onChange?: (value: T) => void;
|
|
13
|
+
variant?: keyof typeof TabsVariants;
|
|
14
|
+
}
|
|
15
|
+
export declare function Tabs<T>(props: TabsProps<T>): React.JSX.Element;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,WAAW,GAAG,CAAC,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,SAAS,CAAC,CAAC;IACnB,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACrC;AAED,wBAAgB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,qBA8B1C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/variants/default.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,eAAO,MAAM,qBAAqB,QAAO,UA4CxC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/variants/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/variants/line.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,eAAO,MAAM,kBAAkB,QAAO,UAuCrC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { TabsList } from "./tabs-list";
|
|
2
|
+
import { TabsRoot } from "./tabs-root";
|
|
3
|
+
import { TabsTrigger } from "./tabs-trigger";
|
|
4
|
+
import { TabsTriggerText } from "./tabs-trigger-text";
|
|
5
|
+
export declare const TabsPrimitive: {
|
|
6
|
+
Root: typeof TabsRoot;
|
|
7
|
+
List: typeof TabsList;
|
|
8
|
+
Trigger: typeof TabsTrigger;
|
|
9
|
+
TriggerText: typeof TabsTriggerText;
|
|
10
|
+
};
|
|
11
|
+
export type { TabsPrimitiveListProps } from "./tabs-list";
|
|
12
|
+
export type { TabsPrimitiveRootProps } from "./tabs-root";
|
|
13
|
+
export type { TabsPrimitiveTriggerProps } from "./tabs-trigger";
|
|
14
|
+
export type { TabsPrimitiveTriggerTextProps } from "./tabs-trigger-text";
|
|
15
|
+
export * from "./types";
|
|
16
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,eAAO,MAAM,aAAa;;;;;CAKzB,CAAC;AAEF,YAAY,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAC1D,YAAY,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAChE,YAAY,EAAE,6BAA6B,EAAE,MAAM,qBAAqB,CAAC;AACzE,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { TabsStyles } from "./types";
|
|
3
|
+
export interface TabsPrimitiveContextValue {
|
|
4
|
+
value: string;
|
|
5
|
+
onChange: (value: string) => void;
|
|
6
|
+
styles?: TabsStyles;
|
|
7
|
+
}
|
|
8
|
+
export declare const TabsPrimitiveContext: React.Context<TabsPrimitiveContextValue | null>;
|
|
9
|
+
export declare const useTabsContext: () => TabsPrimitiveContextValue;
|
|
10
|
+
//# sourceMappingURL=tabs-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs-context.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/tabs/tabs-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB,iDAA8D,CAAC;AAEhG,eAAO,MAAM,cAAc,iCAM1B,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
|
|
3
|
+
export interface TabsPrimitiveListProps extends ViewProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
style?: StyleProp<ViewStyle>;
|
|
6
|
+
}
|
|
7
|
+
export declare function TabsList(props: TabsPrimitiveListProps): React.JSX.Element;
|
|
8
|
+
//# sourceMappingURL=tabs-list.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs-list.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/tabs/tabs-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpF,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,sBAAsB,qBAWrD"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
|
|
3
|
+
import type { TabsStyles } from "./types";
|
|
4
|
+
export interface TabsPrimitiveRootProps extends Omit<ViewProps, "children"> {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
value: string;
|
|
7
|
+
onChange: (value: string) => void;
|
|
8
|
+
style?: StyleProp<ViewStyle>;
|
|
9
|
+
styles?: TabsStyles;
|
|
10
|
+
}
|
|
11
|
+
export declare function TabsRoot(props: TabsPrimitiveRootProps): React.JSX.Element;
|
|
12
|
+
//# sourceMappingURL=tabs-root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs-root.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/tabs/tabs-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,sBAAsB,qBAmBrD"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type StyleProp, type TextProps, type TextStyle } from "react-native";
|
|
3
|
+
export interface TabsPrimitiveTriggerTextProps extends TextProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
value: string;
|
|
6
|
+
isDisabled?: boolean;
|
|
7
|
+
style?: StyleProp<TextStyle>;
|
|
8
|
+
}
|
|
9
|
+
export declare function TabsTriggerText(props: TabsPrimitiveTriggerTextProps): React.JSX.Element;
|
|
10
|
+
//# sourceMappingURL=tabs-trigger-text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs-trigger-text.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/tabs/tabs-trigger-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpF,MAAM,WAAW,6BAA8B,SAAQ,SAAS;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,6BAA6B,qBAcnE"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type PressableProps, type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
+
export interface TabsPrimitiveTriggerProps extends PressableProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
value: string;
|
|
6
|
+
isDisabled?: boolean;
|
|
7
|
+
style?: StyleProp<ViewStyle>;
|
|
8
|
+
}
|
|
9
|
+
export declare function TabsTrigger(props: TabsPrimitiveTriggerProps): React.JSX.Element;
|
|
10
|
+
//# sourceMappingURL=tabs-trigger.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs-trigger.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/tabs/tabs-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9F,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAYD,wBAAgB,WAAW,CAAC,KAAK,EAAE,yBAAyB,qBAoB3D"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { StyleProp, TextStyle } from "react-native";
|
|
2
|
+
import type { TabsPrimitiveListProps } from "./tabs-list";
|
|
3
|
+
import type { TabsPrimitiveTriggerProps } from "./tabs-trigger";
|
|
4
|
+
export type TabsState = "default" | "active" | "disabled";
|
|
5
|
+
export interface TabsStyles {
|
|
6
|
+
root?: TabsPrimitiveListProps["style"];
|
|
7
|
+
list?: TabsPrimitiveListProps["style"];
|
|
8
|
+
trigger?: Partial<Record<TabsState, TabsPrimitiveTriggerProps["style"]>>;
|
|
9
|
+
triggerText?: Partial<Record<TabsState, StyleProp<TextStyle>>>;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CAChE"}
|
package/package.json
CHANGED
package/src/components/index.ts
CHANGED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { TabsPrimitive } from "@/primitives";
|
|
2
|
+
import React, { useState } from "react";
|
|
3
|
+
import { TabsVariants } from "./variants";
|
|
4
|
+
|
|
5
|
+
export interface Tab<T> {
|
|
6
|
+
value: T;
|
|
7
|
+
label: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface TabsProps<T> {
|
|
12
|
+
tabs: Tab<T>[];
|
|
13
|
+
defaultValue?: T;
|
|
14
|
+
value?: T;
|
|
15
|
+
onChange?: (value: T) => void;
|
|
16
|
+
variant?: keyof typeof TabsVariants;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export function Tabs<T>(props: TabsProps<T>) {
|
|
20
|
+
const { tabs, defaultValue, value: controlledValue, onChange, variant = "default" } = props;
|
|
21
|
+
|
|
22
|
+
const initialValue = defaultValue ?? tabs[0]?.value ?? ("" as T);
|
|
23
|
+
const [uncontrolledValue, setUncontrolledValue] = useState(initialValue);
|
|
24
|
+
const value = controlledValue ?? uncontrolledValue;
|
|
25
|
+
|
|
26
|
+
const handleValueChange = (newValue: T) => {
|
|
27
|
+
if (controlledValue === undefined) {
|
|
28
|
+
setUncontrolledValue(newValue);
|
|
29
|
+
}
|
|
30
|
+
onChange?.(newValue);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const useVariantStyles = TabsVariants[variant];
|
|
34
|
+
const variantStyles = useVariantStyles();
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<TabsPrimitive.Root value={String(value)} onChange={(newValue) => handleValueChange(newValue as T)} styles={variantStyles}>
|
|
38
|
+
<TabsPrimitive.List>
|
|
39
|
+
{tabs.map((tab) => (
|
|
40
|
+
<TabsPrimitive.Trigger key={String(tab.value)} value={String(tab.value)} isDisabled={tab.disabled}>
|
|
41
|
+
<TabsPrimitive.TriggerText value={String(tab.value)} isDisabled={tab.disabled}>
|
|
42
|
+
{tab.label}
|
|
43
|
+
</TabsPrimitive.TriggerText>
|
|
44
|
+
</TabsPrimitive.Trigger>
|
|
45
|
+
))}
|
|
46
|
+
</TabsPrimitive.List>
|
|
47
|
+
</TabsPrimitive.Root>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { type TabsStyles } from "@/primitives";
|
|
2
|
+
import { useThemedStyles } from "@/utils/use-themed-styles";
|
|
3
|
+
|
|
4
|
+
export const useTabsVariantDefault = (): TabsStyles => {
|
|
5
|
+
return useThemedStyles(
|
|
6
|
+
({ colors, radius, fontFamily, fontSize }): TabsStyles => ({
|
|
7
|
+
list: {
|
|
8
|
+
flexDirection: "row",
|
|
9
|
+
backgroundColor: colors.muted,
|
|
10
|
+
padding: 4,
|
|
11
|
+
borderRadius: radius,
|
|
12
|
+
gap: 4,
|
|
13
|
+
},
|
|
14
|
+
trigger: {
|
|
15
|
+
default: {
|
|
16
|
+
paddingVertical: 8,
|
|
17
|
+
paddingHorizontal: 12,
|
|
18
|
+
borderRadius: radius,
|
|
19
|
+
backgroundColor: "transparent",
|
|
20
|
+
},
|
|
21
|
+
active: {
|
|
22
|
+
backgroundColor: colors.background,
|
|
23
|
+
shadowColor: "#000",
|
|
24
|
+
shadowOffset: { width: 0, height: 1 },
|
|
25
|
+
shadowOpacity: 0.1,
|
|
26
|
+
shadowRadius: 2,
|
|
27
|
+
elevation: 2,
|
|
28
|
+
},
|
|
29
|
+
disabled: {
|
|
30
|
+
opacity: 0.5,
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
triggerText: {
|
|
34
|
+
default: {
|
|
35
|
+
color: colors.mutedForeground,
|
|
36
|
+
fontSize,
|
|
37
|
+
fontFamily,
|
|
38
|
+
},
|
|
39
|
+
active: {
|
|
40
|
+
color: colors.foreground,
|
|
41
|
+
},
|
|
42
|
+
disabled: {
|
|
43
|
+
color: colors.mutedForeground,
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
})
|
|
47
|
+
);
|
|
48
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { type TabsStyles } from "@/primitives";
|
|
2
|
+
import { useThemedStyles } from "@/utils/use-themed-styles";
|
|
3
|
+
|
|
4
|
+
export const useTabsVariantLine = (): TabsStyles => {
|
|
5
|
+
return useThemedStyles(
|
|
6
|
+
({ colors, fontFamily, fontSize }): TabsStyles => ({
|
|
7
|
+
list: {
|
|
8
|
+
flexDirection: "row",
|
|
9
|
+
borderBottomWidth: 1,
|
|
10
|
+
borderBottomColor: colors.border,
|
|
11
|
+
gap: 0,
|
|
12
|
+
},
|
|
13
|
+
trigger: {
|
|
14
|
+
default: {
|
|
15
|
+
paddingVertical: 12,
|
|
16
|
+
paddingHorizontal: 16,
|
|
17
|
+
borderBottomWidth: 2,
|
|
18
|
+
borderBottomColor: "transparent",
|
|
19
|
+
backgroundColor: "transparent",
|
|
20
|
+
},
|
|
21
|
+
active: {
|
|
22
|
+
borderBottomColor: colors.primary,
|
|
23
|
+
},
|
|
24
|
+
disabled: {
|
|
25
|
+
opacity: 0.5,
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
triggerText: {
|
|
29
|
+
default: {
|
|
30
|
+
color: colors.mutedForeground,
|
|
31
|
+
fontSize,
|
|
32
|
+
fontFamily,
|
|
33
|
+
},
|
|
34
|
+
active: {
|
|
35
|
+
color: colors.foreground,
|
|
36
|
+
},
|
|
37
|
+
disabled: {
|
|
38
|
+
color: colors.mutedForeground,
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
})
|
|
42
|
+
);
|
|
43
|
+
};
|
package/src/primitives/index.ts
CHANGED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { TabsList } from "./tabs-list";
|
|
2
|
+
import { TabsRoot } from "./tabs-root";
|
|
3
|
+
import { TabsTrigger } from "./tabs-trigger";
|
|
4
|
+
import { TabsTriggerText } from "./tabs-trigger-text";
|
|
5
|
+
|
|
6
|
+
export const TabsPrimitive = {
|
|
7
|
+
Root: TabsRoot,
|
|
8
|
+
List: TabsList,
|
|
9
|
+
Trigger: TabsTrigger,
|
|
10
|
+
TriggerText: TabsTriggerText,
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export type { TabsPrimitiveListProps } from "./tabs-list";
|
|
14
|
+
export type { TabsPrimitiveRootProps } from "./tabs-root";
|
|
15
|
+
export type { TabsPrimitiveTriggerProps } from "./tabs-trigger";
|
|
16
|
+
export type { TabsPrimitiveTriggerTextProps } from "./tabs-trigger-text";
|
|
17
|
+
export * from "./types";
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React, { useContext } from "react";
|
|
2
|
+
import type { TabsStyles } from "./types";
|
|
3
|
+
|
|
4
|
+
export interface TabsPrimitiveContextValue {
|
|
5
|
+
value: string;
|
|
6
|
+
onChange: (value: string) => void;
|
|
7
|
+
styles?: TabsStyles;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export const TabsPrimitiveContext = React.createContext<TabsPrimitiveContextValue | null>(null);
|
|
11
|
+
|
|
12
|
+
export const useTabsContext = () => {
|
|
13
|
+
const context = useContext(TabsPrimitiveContext);
|
|
14
|
+
if (!context) {
|
|
15
|
+
throw new Error("Tabs compound components must be used within TabsPrimitive.Root");
|
|
16
|
+
}
|
|
17
|
+
return context;
|
|
18
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
|
|
3
|
+
import { useTabsContext } from "./tabs-context";
|
|
4
|
+
|
|
5
|
+
export interface TabsPrimitiveListProps extends ViewProps {
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
style?: StyleProp<ViewStyle>;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export function TabsList(props: TabsPrimitiveListProps) {
|
|
11
|
+
const { children, style, ...viewProps } = props;
|
|
12
|
+
const { styles } = useTabsContext();
|
|
13
|
+
|
|
14
|
+
const calculatedStyle = [styles?.list, style];
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<View {...viewProps} style={calculatedStyle}>
|
|
18
|
+
{children}
|
|
19
|
+
</View>
|
|
20
|
+
);
|
|
21
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React, { useMemo } from "react";
|
|
2
|
+
import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
|
|
3
|
+
import { TabsPrimitiveContext } from "./tabs-context";
|
|
4
|
+
import type { TabsStyles } from "./types";
|
|
5
|
+
|
|
6
|
+
export interface TabsPrimitiveRootProps extends Omit<ViewProps, "children"> {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
value: string;
|
|
9
|
+
onChange: (value: string) => void;
|
|
10
|
+
style?: StyleProp<ViewStyle>;
|
|
11
|
+
styles?: TabsStyles;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export function TabsRoot(props: TabsPrimitiveRootProps) {
|
|
15
|
+
const { children, value, onChange, styles, style, ...viewProps } = props;
|
|
16
|
+
|
|
17
|
+
const contextValue = useMemo(
|
|
18
|
+
() => ({
|
|
19
|
+
value,
|
|
20
|
+
onChange,
|
|
21
|
+
styles,
|
|
22
|
+
}),
|
|
23
|
+
[value, onChange, styles]
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<TabsPrimitiveContext.Provider value={contextValue}>
|
|
28
|
+
<View {...viewProps} style={style}>
|
|
29
|
+
{children}
|
|
30
|
+
</View>
|
|
31
|
+
</TabsPrimitiveContext.Provider>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
|
|
3
|
+
import { useTabsContext } from "./tabs-context";
|
|
4
|
+
|
|
5
|
+
export interface TabsPrimitiveTriggerTextProps extends TextProps {
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
value: string;
|
|
8
|
+
isDisabled?: boolean;
|
|
9
|
+
style?: StyleProp<TextStyle>;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function TabsTriggerText(props: TabsPrimitiveTriggerTextProps) {
|
|
13
|
+
const { children, value: triggerValue, isDisabled, style, ...textProps } = props;
|
|
14
|
+
const { value, styles } = useTabsContext();
|
|
15
|
+
|
|
16
|
+
const isActive = value === triggerValue;
|
|
17
|
+
const state = isDisabled ? "disabled" : isActive ? "active" : "default";
|
|
18
|
+
|
|
19
|
+
const calculatedStyle = [styles?.triggerText?.default, styles?.triggerText?.[state], style];
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<Text {...textProps} style={calculatedStyle}>
|
|
23
|
+
{children}
|
|
24
|
+
</Text>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
+
import { useTabsContext } from "./tabs-context";
|
|
4
|
+
import type { TabsState } from "./types";
|
|
5
|
+
|
|
6
|
+
export interface TabsPrimitiveTriggerProps extends PressableProps {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
value: string;
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
style?: StyleProp<ViewStyle>;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const calculateState = (isActive: boolean, isDisabled: boolean | undefined): TabsState => {
|
|
14
|
+
if (isDisabled) {
|
|
15
|
+
return "disabled";
|
|
16
|
+
}
|
|
17
|
+
if (isActive) {
|
|
18
|
+
return "active";
|
|
19
|
+
}
|
|
20
|
+
return "default";
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export function TabsTrigger(props: TabsPrimitiveTriggerProps) {
|
|
24
|
+
const { children, value: triggerValue, isDisabled, style, ...pressableProps } = props;
|
|
25
|
+
const { value, onChange, styles } = useTabsContext();
|
|
26
|
+
|
|
27
|
+
const isActive = value === triggerValue;
|
|
28
|
+
const state = calculateState(isActive, isDisabled);
|
|
29
|
+
|
|
30
|
+
const handlePress = () => {
|
|
31
|
+
if (!isDisabled) {
|
|
32
|
+
onChange(triggerValue);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const calculatedStyle = [styles?.trigger?.default, styles?.trigger?.[state], style];
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<Pressable {...pressableProps} disabled={isDisabled} onPress={handlePress} style={calculatedStyle}>
|
|
40
|
+
{children}
|
|
41
|
+
</Pressable>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { StyleProp, TextStyle } from "react-native";
|
|
2
|
+
import type { TabsPrimitiveListProps } from "./tabs-list";
|
|
3
|
+
import type { TabsPrimitiveTriggerProps } from "./tabs-trigger";
|
|
4
|
+
|
|
5
|
+
export type TabsState = "default" | "active" | "disabled";
|
|
6
|
+
|
|
7
|
+
export interface TabsStyles {
|
|
8
|
+
root?: TabsPrimitiveListProps["style"];
|
|
9
|
+
list?: TabsPrimitiveListProps["style"];
|
|
10
|
+
trigger?: Partial<Record<TabsState, TabsPrimitiveTriggerProps["style"]>>;
|
|
11
|
+
triggerText?: Partial<Record<TabsState, StyleProp<TextStyle>>>;
|
|
12
|
+
}
|