@korsolutions/ui 0.0.32 → 0.0.34

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.
Files changed (71) hide show
  1. package/dist/module/components/index.js +1 -0
  2. package/dist/module/components/index.js.map +1 -1
  3. package/dist/module/components/tabs/index.js +5 -0
  4. package/dist/module/components/tabs/index.js.map +1 -0
  5. package/dist/module/components/tabs/tabs.js +43 -0
  6. package/dist/module/components/tabs/tabs.js.map +1 -0
  7. package/dist/module/components/tabs/variants/default.js +55 -0
  8. package/dist/module/components/tabs/variants/default.js.map +1 -0
  9. package/dist/module/components/tabs/variants/index.js +9 -0
  10. package/dist/module/components/tabs/variants/index.js.map +1 -0
  11. package/dist/module/components/tabs/variants/line.js +46 -0
  12. package/dist/module/components/tabs/variants/line.js.map +1 -0
  13. package/dist/module/primitives/index.js +1 -0
  14. package/dist/module/primitives/index.js.map +1 -1
  15. package/dist/module/primitives/tabs/index.js +14 -0
  16. package/dist/module/primitives/tabs/index.js.map +1 -0
  17. package/dist/module/primitives/tabs/tabs-context.js +12 -0
  18. package/dist/module/primitives/tabs/tabs-context.js.map +1 -0
  19. package/dist/module/primitives/tabs/tabs-list.js +23 -0
  20. package/dist/module/primitives/tabs/tabs-list.js.map +1 -0
  21. package/dist/module/primitives/tabs/tabs-root.js +30 -0
  22. package/dist/module/primitives/tabs/tabs-root.js.map +1 -0
  23. package/dist/module/primitives/tabs/tabs-trigger-text.js +28 -0
  24. package/dist/module/primitives/tabs/tabs-trigger-text.js.map +1 -0
  25. package/dist/module/primitives/tabs/tabs-trigger.js +45 -0
  26. package/dist/module/primitives/tabs/tabs-trigger.js.map +1 -0
  27. package/dist/module/primitives/tabs/types.js +4 -0
  28. package/dist/module/primitives/tabs/types.js.map +1 -0
  29. package/dist/typescript/src/components/index.d.ts +1 -0
  30. package/dist/typescript/src/components/index.d.ts.map +1 -1
  31. package/dist/typescript/src/components/tabs/index.d.ts +3 -0
  32. package/dist/typescript/src/components/tabs/index.d.ts.map +1 -0
  33. package/dist/typescript/src/components/tabs/tabs.d.ts +17 -0
  34. package/dist/typescript/src/components/tabs/tabs.d.ts.map +1 -0
  35. package/dist/typescript/src/components/tabs/variants/default.d.ts +3 -0
  36. package/dist/typescript/src/components/tabs/variants/default.d.ts.map +1 -0
  37. package/dist/typescript/src/components/tabs/variants/index.d.ts +5 -0
  38. package/dist/typescript/src/components/tabs/variants/index.d.ts.map +1 -0
  39. package/dist/typescript/src/components/tabs/variants/line.d.ts +3 -0
  40. package/dist/typescript/src/components/tabs/variants/line.d.ts.map +1 -0
  41. package/dist/typescript/src/primitives/index.d.ts +1 -0
  42. package/dist/typescript/src/primitives/index.d.ts.map +1 -1
  43. package/dist/typescript/src/primitives/tabs/index.d.ts +16 -0
  44. package/dist/typescript/src/primitives/tabs/index.d.ts.map +1 -0
  45. package/dist/typescript/src/primitives/tabs/tabs-context.d.ts +10 -0
  46. package/dist/typescript/src/primitives/tabs/tabs-context.d.ts.map +1 -0
  47. package/dist/typescript/src/primitives/tabs/tabs-list.d.ts +8 -0
  48. package/dist/typescript/src/primitives/tabs/tabs-list.d.ts.map +1 -0
  49. package/dist/typescript/src/primitives/tabs/tabs-root.d.ts +12 -0
  50. package/dist/typescript/src/primitives/tabs/tabs-root.d.ts.map +1 -0
  51. package/dist/typescript/src/primitives/tabs/tabs-trigger-text.d.ts +10 -0
  52. package/dist/typescript/src/primitives/tabs/tabs-trigger-text.d.ts.map +1 -0
  53. package/dist/typescript/src/primitives/tabs/tabs-trigger.d.ts +10 -0
  54. package/dist/typescript/src/primitives/tabs/tabs-trigger.d.ts.map +1 -0
  55. package/dist/typescript/src/primitives/tabs/types.d.ts +11 -0
  56. package/dist/typescript/src/primitives/tabs/types.d.ts.map +1 -0
  57. package/package.json +1 -1
  58. package/src/components/index.ts +1 -0
  59. package/src/components/tabs/index.ts +2 -0
  60. package/src/components/tabs/tabs.tsx +49 -0
  61. package/src/components/tabs/variants/default.tsx +48 -0
  62. package/src/components/tabs/variants/index.ts +7 -0
  63. package/src/components/tabs/variants/line.tsx +43 -0
  64. package/src/primitives/index.ts +1 -0
  65. package/src/primitives/tabs/index.ts +17 -0
  66. package/src/primitives/tabs/tabs-context.tsx +18 -0
  67. package/src/primitives/tabs/tabs-list.tsx +21 -0
  68. package/src/primitives/tabs/tabs-root.tsx +33 -0
  69. package/src/primitives/tabs/tabs-trigger-text.tsx +30 -0
  70. package/src/primitives/tabs/tabs-trigger.tsx +55 -0
  71. package/src/primitives/tabs/types.ts +12 -0
@@ -15,4 +15,5 @@ export * from "./textarea/textarea.js";
15
15
  export * from "./dropdown-menu/dropdown-menu.js";
16
16
  export * from "./popover/popover.js";
17
17
  export * from "./calendar/calendar.js";
18
+ export * from "./tabs/index.js";
18
19
  //# sourceMappingURL=index.js.map
@@ -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,5 @@
1
+ "use strict";
2
+
3
+ export { Tabs } from "./tabs.js";
4
+ export { TabsVariants } from "./variants/index.js";
5
+ //# sourceMappingURL=index.js.map
@@ -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
+ onValueChange,
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
+ onValueChange?.(newValue);
23
+ };
24
+ const useVariantStyles = TabsVariants[variant];
25
+ const variantStyles = useVariantStyles();
26
+ return /*#__PURE__*/_jsx(TabsPrimitive.Root, {
27
+ value: value,
28
+ onValueChange: handleValueChange,
29
+ styles: variantStyles,
30
+ children: /*#__PURE__*/_jsx(TabsPrimitive.List, {
31
+ children: tabs.map(tab => /*#__PURE__*/_jsx(TabsPrimitive.Trigger, {
32
+ value: tab.value,
33
+ isDisabled: tab.disabled,
34
+ children: /*#__PURE__*/_jsx(TabsPrimitive.TriggerText, {
35
+ value: tab.value,
36
+ isDisabled: tab.disabled,
37
+ children: tab.label
38
+ })
39
+ }, 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","onValueChange","variant","initialValue","uncontrolledValue","setUncontrolledValue","handleValueChange","newValue","undefined","useVariantStyles","variantStyles","Root","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,CAACC,KAAgB,EAAE;EACrC,MAAM;IAAEC,IAAI;IAAEC,YAAY;IAAEC,KAAK,EAAEC,eAAe;IAAEC,aAAa;IAAEC,OAAO,GAAG;EAAU,CAAC,GAAGN,KAAK;EAEhG,MAAMO,YAAY,GAAGL,YAAY,IAAID,IAAI,CAAC,CAAC,CAAC,EAAEE,KAAK,IAAI,EAAE;EACzD,MAAM,CAACK,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGd,QAAQ,CAACY,YAAY,CAAC;EACxE,MAAMJ,KAAK,GAAGC,eAAe,IAAII,iBAAiB;EAElD,MAAME,iBAAiB,GAAIC,QAAgB,IAAK;IAC9C,IAAIP,eAAe,KAAKQ,SAAS,EAAE;MACjCH,oBAAoB,CAACE,QAAQ,CAAC;IAChC;IACAN,aAAa,GAAGM,QAAQ,CAAC;EAC3B,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,KAAM;IAACE,aAAa,EAAEK,iBAAkB;IAACM,MAAM,EAAEF,aAAc;IAAAG,QAAA,eACxFnB,IAAA,CAACL,aAAa,CAACyB,IAAI;MAAAD,QAAA,EAChBhB,IAAI,CAACkB,GAAG,CAAEC,GAAG,iBACZtB,IAAA,CAACL,aAAa,CAAC4B,OAAO;QAAiBlB,KAAK,EAAEiB,GAAG,CAACjB,KAAM;QAACmB,UAAU,EAAEF,GAAG,CAACG,QAAS;QAAAN,QAAA,eAChFnB,IAAA,CAACL,aAAa,CAAC+B,WAAW;UAACrB,KAAK,EAAEiB,GAAG,CAACjB,KAAM;UAACmB,UAAU,EAAEF,GAAG,CAACG,QAAS;UAAAN,QAAA,EACnEG,GAAG,CAACK;QAAK,CACe;MAAC,GAHFL,GAAG,CAACjB,KAIT,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,9 @@
1
+ "use strict";
2
+
3
+ import { useTabsVariantDefault } from "./default.js";
4
+ import { useTabsVariantLine } from "./line.js";
5
+ export const TabsVariants = {
6
+ default: useTabsVariantDefault,
7
+ line: useTabsVariantLine
8
+ };
9
+ //# sourceMappingURL=index.js.map
@@ -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":[]}
@@ -14,4 +14,5 @@ export * from "./dropdown-menu/index.js";
14
14
  export * from "./popover/index.js";
15
15
  export * from "./portal/index.js";
16
16
  export * from "./calendar/index.js";
17
+ export * from "./tabs/index.js";
17
18
  //# sourceMappingURL=index.js.map
@@ -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 { TabsRoot } from "./tabs-root.js";
4
+ import { TabsList } from "./tabs-list.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":["TabsRoot","TabsList","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,EAAEL,QAAQ;EACdM,IAAI,EAAEL,QAAQ;EACdM,OAAO,EAAEL,WAAW;EACpBM,WAAW,EAAEL;AACf,CAAC;AAMD","ignoreList":[]}
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ import React from "react";
4
+ export const TabsPrimitiveContext = /*#__PURE__*/React.createContext(null);
5
+ export const useTabsContext = () => {
6
+ const context = React.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","TabsPrimitiveContext","createContext","useTabsContext","context","useContext","Error"],"sourceRoot":"../../../../src","sources":["primitives/tabs/tabs-context.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,OAAO,MAAMC,oBAAoB,gBAAGD,KAAK,CAACE,aAAa,CAAmC,IAAI,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,MAAMC,OAAO,GAAGJ,KAAK,CAACK,UAAU,CAACJ,oBAAoB,CAAC;EACtD,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CAAC,iEAAiE,CAAC;EACpF;EACA,OAAOF,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 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
+ onValueChange,
12
+ styles,
13
+ style,
14
+ ...viewProps
15
+ } = props;
16
+ const contextValue = React.useMemo(() => ({
17
+ value,
18
+ onValueChange,
19
+ styles
20
+ }), [value, onValueChange, 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","View","TabsPrimitiveContext","jsx","_jsx","TabsRoot","props","children","value","onValueChange","styles","style","viewProps","contextValue","useMemo","Provider"],"sourceRoot":"../../../../src","sources":["primitives/tabs/tabs-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,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,aAAa;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGN,KAAK;EAE7E,MAAMO,YAAY,GAAGb,KAAK,CAACc,OAAO,CAChC,OAAO;IACLN,KAAK;IACLC,aAAa;IACbC;EACF,CAAC,CAAC,EACF,CAACF,KAAK,EAAEC,aAAa,EAAEC,MAAM,CAC/B,CAAC;EAED,oBACEN,IAAA,CAACF,oBAAoB,CAACa,QAAQ;IAACP,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,CACtBH,MAAM,EAAEI,WAAW,EAAEC,OAAO,EAC5BL,MAAM,EAAEI,WAAW,GAAGF,KAAK,CAAC,EAC5BJ,KAAK,CACN;EAED,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
+ onValueChange,
27
+ styles
28
+ } = useTabsContext();
29
+ const isActive = value === triggerValue;
30
+ const state = calculateState(isActive, isDisabled);
31
+ const handlePress = () => {
32
+ if (!isDisabled) {
33
+ onValueChange(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","onValueChange","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,CACrBC,QAAiB,EACjBC,UAA+B,KACjB;EACd,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,aAAa;IAAEC;EAAO,CAAC,GAAGd,cAAc,CAAC,CAAC;EAEzD,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,aAAa,CAACH,YAAY,CAAC;IAC7B;EACF,CAAC;EAED,MAAMO,eAAe,GAAG,CACtBH,MAAM,EAAEI,OAAO,EAAEC,OAAO,EACxBL,MAAM,EAAEI,OAAO,GAAGH,KAAK,CAAC,EACxBJ,KAAK,CACN;EAED,oBACET,IAAA,CAACH,SAAS;IAAA,GACJa,cAAc;IAClBQ,QAAQ,EAAEf,UAAW;IACrBgB,OAAO,EAAEL,WAAY;IACrBL,KAAK,EAAEM,eAAgB;IAAAT,QAAA,EAEtBA;EAAQ,CACA,CAAC;AAEhB","ignoreList":[]}
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+
3
+ export {};
4
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":[],"sourceRoot":"../../../../src","sources":["primitives/tabs/types.ts"],"mappings":"","ignoreList":[]}
@@ -13,4 +13,5 @@ export * from "./textarea/textarea";
13
13
  export * from "./dropdown-menu/dropdown-menu";
14
14
  export * from "./popover/popover";
15
15
  export * from "./calendar/calendar";
16
+ export * from "./tabs";
16
17
  //# sourceMappingURL=index.d.ts.map
@@ -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,3 @@
1
+ export { Tabs, type Tab } from "./tabs";
2
+ export { TabsVariants } from "./variants";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -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 {
4
+ value: string;
5
+ label: string;
6
+ disabled?: boolean;
7
+ }
8
+ interface TabsProps {
9
+ tabs: Tab[];
10
+ defaultValue?: string;
11
+ value?: string;
12
+ onValueChange?: (value: string) => void;
13
+ variant?: keyof typeof TabsVariants;
14
+ }
15
+ export declare function Tabs(props: TabsProps): 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;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACrC;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,qBA8BpC"}
@@ -0,0 +1,3 @@
1
+ import { type TabsStyles } from "../../../primitives";
2
+ export declare const useTabsVariantDefault: () => TabsStyles;
3
+ //# sourceMappingURL=default.d.ts.map
@@ -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,5 @@
1
+ export declare const TabsVariants: {
2
+ default: () => import("../../../primitives").TabsStyles;
3
+ line: () => import("../../../primitives").TabsStyles;
4
+ };
5
+ //# sourceMappingURL=index.d.ts.map
@@ -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,3 @@
1
+ import { type TabsStyles } from "../../../primitives";
2
+ export declare const useTabsVariantLine: () => TabsStyles;
3
+ //# sourceMappingURL=line.d.ts.map
@@ -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"}
@@ -12,4 +12,5 @@ export * from "./dropdown-menu";
12
12
  export * from "./popover";
13
13
  export * from "./portal";
14
14
  export * from "./calendar";
15
+ export * from "./tabs";
15
16
  //# sourceMappingURL=index.d.ts.map
@@ -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 { TabsRoot } from "./tabs-root";
2
+ import { TabsList } from "./tabs-list";
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 { TabsPrimitiveRootProps } from "./tabs-root";
12
+ export type { TabsPrimitiveListProps } from "./tabs-list";
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
+ onValueChange: (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,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,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 ViewProps, type StyleProp, 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 ViewProps, type StyleProp, 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
+ onValueChange: (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,KAAK,MAAM,OAAO,CAAC;AAC1B,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,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,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 TextProps, type StyleProp, 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,qBAkBnE"}
@@ -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;AAeD,wBAAgB,WAAW,CAAC,KAAK,EAAE,yBAAyB,qBA6B3D"}
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@korsolutions/ui",
3
- "version": "0.0.32",
3
+ "version": "0.0.34",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
@@ -13,3 +13,4 @@ export * from "./textarea/textarea";
13
13
  export * from "./dropdown-menu/dropdown-menu";
14
14
  export * from "./popover/popover";
15
15
  export * from "./calendar/calendar";
16
+ export * from "./tabs";
@@ -0,0 +1,2 @@
1
+ export { Tabs, type Tab } from "./tabs";
2
+ export { TabsVariants } from "./variants";
@@ -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 {
6
+ value: string;
7
+ label: string;
8
+ disabled?: boolean;
9
+ }
10
+
11
+ interface TabsProps {
12
+ tabs: Tab[];
13
+ defaultValue?: string;
14
+ value?: string;
15
+ onValueChange?: (value: string) => void;
16
+ variant?: keyof typeof TabsVariants;
17
+ }
18
+
19
+ export function Tabs(props: TabsProps) {
20
+ const { tabs, defaultValue, value: controlledValue, onValueChange, variant = "default" } = props;
21
+
22
+ const initialValue = defaultValue ?? tabs[0]?.value ?? "";
23
+ const [uncontrolledValue, setUncontrolledValue] = useState(initialValue);
24
+ const value = controlledValue ?? uncontrolledValue;
25
+
26
+ const handleValueChange = (newValue: string) => {
27
+ if (controlledValue === undefined) {
28
+ setUncontrolledValue(newValue);
29
+ }
30
+ onValueChange?.(newValue);
31
+ };
32
+
33
+ const useVariantStyles = TabsVariants[variant];
34
+ const variantStyles = useVariantStyles();
35
+
36
+ return (
37
+ <TabsPrimitive.Root value={value} onValueChange={handleValueChange} styles={variantStyles}>
38
+ <TabsPrimitive.List>
39
+ {tabs.map((tab) => (
40
+ <TabsPrimitive.Trigger key={tab.value} value={tab.value} isDisabled={tab.disabled}>
41
+ <TabsPrimitive.TriggerText value={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,7 @@
1
+ import { useTabsVariantDefault } from "./default";
2
+ import { useTabsVariantLine } from "./line";
3
+
4
+ export const TabsVariants = {
5
+ default: useTabsVariantDefault,
6
+ line: useTabsVariantLine,
7
+ };
@@ -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
+ };
@@ -12,3 +12,4 @@ export * from "./dropdown-menu";
12
12
  export * from "./popover";
13
13
  export * from "./portal";
14
14
  export * from "./calendar";
15
+ export * from "./tabs";
@@ -0,0 +1,17 @@
1
+ import { TabsRoot } from "./tabs-root";
2
+ import { TabsList } from "./tabs-list";
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 { TabsPrimitiveRootProps } from "./tabs-root";
14
+ export type { TabsPrimitiveListProps } from "./tabs-list";
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 from "react";
2
+ import type { TabsStyles } from "./types";
3
+
4
+ export interface TabsPrimitiveContextValue {
5
+ value: string;
6
+ onValueChange: (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 = React.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 ViewProps, type StyleProp, 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 from "react";
2
+ import { View, type ViewProps, type StyleProp, 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
+ onValueChange: (value: string) => void;
10
+ style?: StyleProp<ViewStyle>;
11
+ styles?: TabsStyles;
12
+ }
13
+
14
+ export function TabsRoot(props: TabsPrimitiveRootProps) {
15
+ const { children, value, onValueChange, styles, style, ...viewProps } = props;
16
+
17
+ const contextValue = React.useMemo(
18
+ () => ({
19
+ value,
20
+ onValueChange,
21
+ styles,
22
+ }),
23
+ [value, onValueChange, 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,30 @@
1
+ import React from "react";
2
+ import { Text, type TextProps, type StyleProp, 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 = [
20
+ styles?.triggerText?.default,
21
+ styles?.triggerText?.[state],
22
+ style,
23
+ ];
24
+
25
+ return (
26
+ <Text {...textProps} style={calculatedStyle}>
27
+ {children}
28
+ </Text>
29
+ );
30
+ }
@@ -0,0 +1,55 @@
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 = (
14
+ isActive: boolean,
15
+ isDisabled: boolean | undefined
16
+ ): TabsState => {
17
+ if (isDisabled) {
18
+ return "disabled";
19
+ }
20
+ if (isActive) {
21
+ return "active";
22
+ }
23
+ return "default";
24
+ };
25
+
26
+ export function TabsTrigger(props: TabsPrimitiveTriggerProps) {
27
+ const { children, value: triggerValue, isDisabled, style, ...pressableProps } = props;
28
+ const { value, onValueChange, styles } = useTabsContext();
29
+
30
+ const isActive = value === triggerValue;
31
+ const state = calculateState(isActive, isDisabled);
32
+
33
+ const handlePress = () => {
34
+ if (!isDisabled) {
35
+ onValueChange(triggerValue);
36
+ }
37
+ };
38
+
39
+ const calculatedStyle = [
40
+ styles?.trigger?.default,
41
+ styles?.trigger?.[state],
42
+ style,
43
+ ];
44
+
45
+ return (
46
+ <Pressable
47
+ {...pressableProps}
48
+ disabled={isDisabled}
49
+ onPress={handlePress}
50
+ style={calculatedStyle}
51
+ >
52
+ {children}
53
+ </Pressable>
54
+ );
55
+ }
@@ -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
+ }