@korsolutions/ui 0.0.43 → 0.0.45
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/button/variants/default.js +5 -13
- package/dist/module/components/button/variants/default.js.map +1 -1
- package/dist/module/components/button/variants/secondary.js +1 -1
- package/dist/module/components/index.js +1 -0
- package/dist/module/components/index.js.map +1 -1
- package/dist/module/components/progress/index.js +4 -0
- package/dist/module/components/progress/index.js.map +1 -0
- package/dist/module/components/progress/progress.js +27 -0
- package/dist/module/components/progress/progress.js.map +1 -0
- package/dist/module/components/progress/variants/default.js +27 -0
- package/dist/module/components/progress/variants/default.js.map +1 -0
- package/dist/module/components/progress/variants/index.js +7 -0
- package/dist/module/components/progress/variants/index.js.map +1 -0
- package/dist/module/primitives/button/button-label.js +3 -2
- package/dist/module/primitives/button/button-label.js.map +1 -1
- package/dist/module/primitives/button/button-root.js +23 -3
- package/dist/module/primitives/button/button-root.js.map +1 -1
- package/dist/module/primitives/empty/empty-description.js +1 -2
- package/dist/module/primitives/empty/empty-description.js.map +1 -1
- package/dist/module/primitives/index.js +1 -0
- package/dist/module/primitives/index.js.map +1 -1
- package/dist/module/primitives/progress/context.js +12 -0
- package/dist/module/primitives/progress/context.js.map +1 -0
- package/dist/module/primitives/progress/index.js +9 -0
- package/dist/module/primitives/progress/index.js.map +1 -0
- package/dist/module/primitives/progress/progress-indicator.js +21 -0
- package/dist/module/primitives/progress/progress-indicator.js.map +1 -0
- package/dist/module/primitives/progress/progress-root.js +28 -0
- package/dist/module/primitives/progress/progress-root.js.map +1 -0
- package/dist/module/primitives/progress/types.js +4 -0
- package/dist/module/primitives/progress/types.js.map +1 -0
- package/dist/typescript/src/components/button/variants/default.d.ts.map +1 -1
- 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/progress/index.d.ts +2 -0
- package/dist/typescript/src/components/progress/index.d.ts.map +1 -0
- package/dist/typescript/src/components/progress/progress.d.ts +11 -0
- package/dist/typescript/src/components/progress/progress.d.ts.map +1 -0
- package/dist/typescript/src/components/progress/variants/default.d.ts +3 -0
- package/dist/typescript/src/components/progress/variants/default.d.ts.map +1 -0
- package/dist/typescript/src/components/progress/variants/index.d.ts +4 -0
- package/dist/typescript/src/components/progress/variants/index.d.ts.map +1 -0
- package/dist/typescript/src/primitives/button/button-label.d.ts +0 -1
- package/dist/typescript/src/primitives/button/button-label.d.ts.map +1 -1
- package/dist/typescript/src/primitives/button/button-root.d.ts +0 -1
- package/dist/typescript/src/primitives/button/button-root.d.ts.map +1 -1
- 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/progress/context.d.ts +10 -0
- package/dist/typescript/src/primitives/progress/context.d.ts.map +1 -0
- package/dist/typescript/src/primitives/progress/index.d.ts +10 -0
- package/dist/typescript/src/primitives/progress/index.d.ts.map +1 -0
- package/dist/typescript/src/primitives/progress/progress-indicator.d.ts +10 -0
- package/dist/typescript/src/primitives/progress/progress-indicator.d.ts.map +1 -0
- package/dist/typescript/src/primitives/progress/progress-root.d.ts +13 -0
- package/dist/typescript/src/primitives/progress/progress-root.d.ts.map +1 -0
- package/dist/typescript/src/primitives/progress/types.d.ts +8 -0
- package/dist/typescript/src/primitives/progress/types.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/button/variants/default.tsx +5 -13
- package/src/components/button/variants/secondary.tsx +1 -1
- package/src/components/index.ts +1 -0
- package/src/components/progress/index.ts +1 -0
- package/src/components/progress/progress.tsx +23 -0
- package/src/components/progress/variants/default.tsx +25 -0
- package/src/components/progress/variants/index.ts +5 -0
- package/src/primitives/button/button-label.tsx +7 -4
- package/src/primitives/button/button-root.tsx +33 -5
- package/src/primitives/empty/empty-description.tsx +2 -2
- package/src/primitives/index.ts +1 -0
- package/src/primitives/progress/context.ts +19 -0
- package/src/primitives/progress/index.ts +11 -0
- package/src/primitives/progress/progress-indicator.tsx +21 -0
- package/src/primitives/progress/progress-root.tsx +36 -0
- package/src/primitives/progress/types.ts +9 -0
|
@@ -26,7 +26,7 @@ export const useButtonVariantDefault = () => {
|
|
|
26
26
|
opacity: 0.5
|
|
27
27
|
},
|
|
28
28
|
loading: {
|
|
29
|
-
opacity: 0.
|
|
29
|
+
opacity: 0.5
|
|
30
30
|
},
|
|
31
31
|
hovered: {
|
|
32
32
|
backgroundColor: hslaSetRelativeLightness(colors.primary, -10)
|
|
@@ -38,23 +38,15 @@ export const useButtonVariantDefault = () => {
|
|
|
38
38
|
fontSize,
|
|
39
39
|
fontFamily
|
|
40
40
|
},
|
|
41
|
-
disabled: {
|
|
42
|
-
|
|
43
|
-
},
|
|
44
|
-
loading: {
|
|
45
|
-
color: colors.mutedForeground
|
|
46
|
-
}
|
|
41
|
+
disabled: {},
|
|
42
|
+
loading: {}
|
|
47
43
|
},
|
|
48
44
|
spinner: {
|
|
49
45
|
default: {
|
|
50
46
|
color: colors.primaryForeground
|
|
51
47
|
},
|
|
52
|
-
disabled: {
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
loading: {
|
|
56
|
-
color: colors.mutedForeground
|
|
57
|
-
}
|
|
48
|
+
disabled: {},
|
|
49
|
+
loading: {}
|
|
58
50
|
}
|
|
59
51
|
}));
|
|
60
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useButtonVariantDefault","colors","radius","fontFamily","fontSize","root","default","flexDirection","paddingVertical","paddingHorizontal","borderRadius","gap","alignItems","justifyContent","backgroundColor","primary","borderWidth","borderColor","border","disabled","opacity","loading","hovered","label","color","primaryForeground","
|
|
1
|
+
{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useButtonVariantDefault","colors","radius","fontFamily","fontSize","root","default","flexDirection","paddingVertical","paddingHorizontal","borderRadius","gap","alignItems","justifyContent","backgroundColor","primary","borderWidth","borderColor","border","disabled","opacity","loading","hovered","label","color","primaryForeground","spinner"],"sourceRoot":"../../../../../src","sources":["components/button/variants/default.tsx"],"mappings":";;AACA,SAASA,wBAAwB;AACjC,SAASC,eAAe;AAExB,OAAO,MAAMC,uBAAuB,GAAGA,CAAA,KAAoB;EACzD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAoB;IAC3DC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,aAAa,EAAE,KAAK;QACpBC,eAAe,EAAE,EAAE;QACnBC,iBAAiB,EAAE,EAAE;QACrBC,YAAY,EAAER,MAAM;QACpBS,GAAG,EAAE,CAAC;QACNC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBC,eAAe,EAAEb,MAAM,CAACc,OAAO;QAC/BC,WAAW,EAAE,CAAC;QACdC,WAAW,EAAEhB,MAAM,CAACiB;MACtB,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX,CAAC;MACDC,OAAO,EAAE;QACPD,OAAO,EAAE;MACX,CAAC;MACDE,OAAO,EAAE;QACPR,eAAe,EAAEhB,wBAAwB,CAACG,MAAM,CAACc,OAAO,EAAE,CAAC,EAAE;MAC/D;IACF,CAAC;IACDQ,KAAK,EAAE;MACLjB,OAAO,EAAE;QACPkB,KAAK,EAAEvB,MAAM,CAACwB,iBAAiB;QAC/BrB,QAAQ;QACRD;MACF,CAAC;MACDgB,QAAQ,EAAE,CAAC,CAAC;MACZE,OAAO,EAAE,CAAC;IACZ,CAAC;IACDK,OAAO,EAAE;MACPpB,OAAO,EAAE;QACPkB,KAAK,EAAEvB,MAAM,CAACwB;MAChB,CAAC;MACDN,QAAQ,EAAE,CAAC,CAAC;MACZE,OAAO,EAAE,CAAC;IACZ;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -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;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;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Progress"],"sourceRoot":"../../../../src","sources":["components/progress/index.ts"],"mappings":";;AAAA,SAASA,QAAQ","ignoreList":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { ProgressPrimitive } from "../../primitives/index.js";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { ProgressVariants } from "./variants/index.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
export function Progress(props) {
|
|
8
|
+
const {
|
|
9
|
+
value = 0,
|
|
10
|
+
max = 100,
|
|
11
|
+
variant = "default",
|
|
12
|
+
indicatorColor
|
|
13
|
+
} = props;
|
|
14
|
+
const useVariantStyles = ProgressVariants[variant];
|
|
15
|
+
const variantStyles = useVariantStyles();
|
|
16
|
+
return /*#__PURE__*/_jsx(ProgressPrimitive.Root, {
|
|
17
|
+
value: value,
|
|
18
|
+
max: max,
|
|
19
|
+
styles: variantStyles,
|
|
20
|
+
children: /*#__PURE__*/_jsx(ProgressPrimitive.Indicator, {
|
|
21
|
+
style: indicatorColor ? {
|
|
22
|
+
backgroundColor: indicatorColor
|
|
23
|
+
} : undefined
|
|
24
|
+
})
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=progress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["ProgressPrimitive","React","ProgressVariants","jsx","_jsx","Progress","props","value","max","variant","indicatorColor","useVariantStyles","variantStyles","Root","styles","children","Indicator","style","backgroundColor","undefined"],"sourceRoot":"../../../../src","sources":["components/progress/progress.tsx"],"mappings":";;AAAA,SAASA,iBAAiB;AAC1B,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAS9C,OAAO,SAASC,QAAQA,CAACC,KAAoB,EAAE;EAC7C,MAAM;IAAEC,KAAK,GAAG,CAAC;IAAEC,GAAG,GAAG,GAAG;IAAEC,OAAO,GAAG,SAAS;IAAEC;EAAe,CAAC,GAAGJ,KAAK;EAE3E,MAAMK,gBAAgB,GAAGT,gBAAgB,CAACO,OAAO,CAAC;EAClD,MAAMG,aAAa,GAAGD,gBAAgB,CAAC,CAAC;EAExC,oBACEP,IAAA,CAACJ,iBAAiB,CAACa,IAAI;IAACN,KAAK,EAAEA,KAAM;IAACC,GAAG,EAAEA,GAAI;IAACM,MAAM,EAAEF,aAAc;IAAAG,QAAA,eACpEX,IAAA,CAACJ,iBAAiB,CAACgB,SAAS;MAACC,KAAK,EAAEP,cAAc,GAAG;QAAEQ,eAAe,EAAER;MAAe,CAAC,GAAGS;IAAU,CAAE;EAAC,CAClF,CAAC;AAE7B","ignoreList":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useThemedStyles } from "../../../utils/use-themed-styles.js";
|
|
4
|
+
export const useProgressVariantDefault = () => {
|
|
5
|
+
return useThemedStyles(({
|
|
6
|
+
colors,
|
|
7
|
+
radius
|
|
8
|
+
}) => ({
|
|
9
|
+
root: {
|
|
10
|
+
default: {
|
|
11
|
+
width: "100%",
|
|
12
|
+
height: 8,
|
|
13
|
+
backgroundColor: colors.muted,
|
|
14
|
+
borderRadius: radius,
|
|
15
|
+
overflow: "hidden"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
indicator: {
|
|
19
|
+
default: {
|
|
20
|
+
height: "100%",
|
|
21
|
+
backgroundColor: colors.primary,
|
|
22
|
+
borderRadius: radius
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=default.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useThemedStyles","useProgressVariantDefault","colors","radius","root","default","width","height","backgroundColor","muted","borderRadius","overflow","indicator","primary"],"sourceRoot":"../../../../../src","sources":["components/progress/variants/default.tsx"],"mappings":";;AACA,SAASA,eAAe;AAExB,OAAO,MAAMC,yBAAyB,GAAGA,CAAA,KAAsB;EAC7D,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC;EAAO,CAAC,MAAsB;IACvCC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,CAAC;QACTC,eAAe,EAAEN,MAAM,CAACO,KAAK;QAC7BC,YAAY,EAAEP,MAAM;QACpBQ,QAAQ,EAAE;MACZ;IACF,CAAC;IACDC,SAAS,EAAE;MACTP,OAAO,EAAE;QACPE,MAAM,EAAE,MAAM;QACdC,eAAe,EAAEN,MAAM,CAACW,OAAO;QAC/BH,YAAY,EAAEP;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useProgressVariantDefault","ProgressVariants","default"],"sourceRoot":"../../../../../src","sources":["components/progress/variants/index.ts"],"mappings":";;AAAA,SAASA,yBAAyB;AAElC,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,OAAO,EAAEF;AACX,CAAC","ignoreList":[]}
|
|
@@ -8,8 +8,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
8
8
|
export function ButtonLabel(props) {
|
|
9
9
|
const button = useButtonPrimitive();
|
|
10
10
|
const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
|
|
11
|
-
const
|
|
12
|
-
return /*#__PURE__*/_jsx(
|
|
11
|
+
const isSelectable = button.state !== "disabled" && button.state !== "loading";
|
|
12
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
13
|
+
selectable: isSelectable,
|
|
13
14
|
style: calculatedStyle,
|
|
14
15
|
children: props.children
|
|
15
16
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["calculateComposedStyles","React","Text","useButtonPrimitive","jsx","_jsx","ButtonLabel","props","button","calculatedStyle","styles","state","style","
|
|
1
|
+
{"version":3,"names":["calculateComposedStyles","React","Text","useButtonPrimitive","jsx","_jsx","ButtonLabel","props","button","calculatedStyle","styles","state","style","isSelectable","selectable","children"],"sourceRoot":"../../../../src","sources":["primitives/button/button-label.tsx"],"mappings":";;AAAA,SAASA,uBAAuB;AAChC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAyBC,IAAI,QAAwB,cAAc;AACnE,SAASC,kBAAkB;AAA2B,SAAAC,GAAA,IAAAC,IAAA;AAQtD,OAAO,SAASC,WAAWA,CAACC,KAAgC,EAAE;EAC5D,MAAMC,MAAM,GAAGL,kBAAkB,CAAC,CAAC;EAEnC,MAAMM,eAAe,GAAGT,uBAAuB,CAACQ,MAAM,CAACE,MAAM,EAAEF,MAAM,CAACG,KAAK,EAAE,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;EAElG,MAAMC,YAAY,GAAGL,MAAM,CAACG,KAAK,KAAK,UAAU,IAAIH,MAAM,CAACG,KAAK,KAAK,SAAS;EAE9E,oBACEN,IAAA,CAACH,IAAI;IAACY,UAAU,EAAED,YAAa;IAACD,KAAK,EAAEH,eAAgB;IAAAM,QAAA,EACpDR,KAAK,CAACQ;EAAQ,CACX,CAAC;AAEX","ignoreList":[]}
|
|
@@ -16,22 +16,42 @@ const calculateState = (props, isHovered) => {
|
|
|
16
16
|
}
|
|
17
17
|
return "default";
|
|
18
18
|
};
|
|
19
|
+
const cursorValue = state => {
|
|
20
|
+
switch (state) {
|
|
21
|
+
case "disabled":
|
|
22
|
+
return "not-allowed";
|
|
23
|
+
case "loading":
|
|
24
|
+
return "wait";
|
|
25
|
+
default:
|
|
26
|
+
return "pointer";
|
|
27
|
+
}
|
|
28
|
+
};
|
|
19
29
|
export function ButtonRoot(props) {
|
|
20
30
|
const [isHovered, setIsHovered] = useState(false);
|
|
21
31
|
const state = calculateState(props, isHovered);
|
|
22
32
|
const calculatedStyle = [props.styles?.root?.default, props.styles?.root?.[state], props.style];
|
|
23
|
-
const
|
|
33
|
+
const handlePress = event => {
|
|
34
|
+
if (props.isDisabled || props.isLoading) {
|
|
35
|
+
event.preventDefault();
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
props.onPress?.(event);
|
|
39
|
+
};
|
|
24
40
|
return /*#__PURE__*/_jsx(ButtonPrimitiveContext.Provider, {
|
|
25
41
|
value: {
|
|
26
42
|
disabled: props.isDisabled,
|
|
27
43
|
state,
|
|
28
44
|
styles: props.styles
|
|
29
45
|
},
|
|
30
|
-
children: /*#__PURE__*/_jsx(
|
|
46
|
+
children: /*#__PURE__*/_jsx(Pressable, {
|
|
31
47
|
...props,
|
|
48
|
+
onPress: handlePress,
|
|
32
49
|
onHoverIn: () => setIsHovered(true),
|
|
33
50
|
onHoverOut: () => setIsHovered(false),
|
|
34
|
-
|
|
51
|
+
disabled: props.isDisabled,
|
|
52
|
+
style: [calculatedStyle, {
|
|
53
|
+
cursor: cursorValue(state)
|
|
54
|
+
}]
|
|
35
55
|
})
|
|
36
56
|
});
|
|
37
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","Pressable","ButtonPrimitiveContext","jsx","_jsx","calculateState","props","isHovered","isDisabled","isLoading","
|
|
1
|
+
{"version":3,"names":["React","useState","Pressable","ButtonPrimitiveContext","jsx","_jsx","calculateState","props","isHovered","isDisabled","isLoading","cursorValue","state","ButtonRoot","setIsHovered","calculatedStyle","styles","root","default","style","handlePress","event","preventDefault","onPress","Provider","value","disabled","children","onHoverIn","onHoverOut","cursor"],"sourceRoot":"../../../../src","sources":["primitives/button/button-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,QAA+E,cAAc;AAC/G,SAASC,sBAAsB;AAA2B,SAAAC,GAAA,IAAAC,IAAA;AAa1D,MAAMC,cAAc,GAAGA,CAACC,KAA+B,EAAEC,SAAkB,KAAkB;EAC3F,IAAID,KAAK,CAACE,UAAU,EAAE;IACpB,OAAO,UAAU;EACnB;EACA,IAAIF,KAAK,CAACG,SAAS,EAAE;IACnB,OAAO,SAAS;EAClB;EACA,IAAIF,SAAS,EAAE;IACb,OAAO,SAAS;EAClB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,MAAMG,WAAW,GAAIC,KAAkB,IAAkB;EACvD,QAAQA,KAAK;IACX,KAAK,UAAU;MACb,OAAO,aAAa;IACtB,KAAK,SAAS;MACZ,OAAO,MAAM;IACf;MACE,OAAO,SAAS;EACpB;AACF,CAAC;AAED,OAAO,SAASC,UAAUA,CAACN,KAA+B,EAAE;EAC1D,MAAM,CAACC,SAAS,EAAEM,YAAY,CAAC,GAAGb,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMW,KAAK,GAAGN,cAAc,CAACC,KAAK,EAAEC,SAAS,CAAC;EAE9C,MAAMO,eAAe,GAAG,CAACR,KAAK,CAACS,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEX,KAAK,CAACS,MAAM,EAAEC,IAAI,GAAGL,KAAK,CAAC,EAAEL,KAAK,CAACY,KAAK,CAAC;EAE/F,MAAMC,WAAsC,GAAIC,KAAK,IAAK;IACxD,IAAId,KAAK,CAACE,UAAU,IAAIF,KAAK,CAACG,SAAS,EAAE;MACvCW,KAAK,CAACC,cAAc,CAAC,CAAC;MACtB;IACF;IACAf,KAAK,CAACgB,OAAO,GAAGF,KAAK,CAAC;EACxB,CAAC;EAED,oBACEhB,IAAA,CAACF,sBAAsB,CAACqB,QAAQ;IAACC,KAAK,EAAE;MAAEC,QAAQ,EAAEnB,KAAK,CAACE,UAAU;MAAEG,KAAK;MAAEI,MAAM,EAAET,KAAK,CAACS;IAAO,CAAE;IAAAW,QAAA,eAClGtB,IAAA,CAACH,SAAS;MAAA,GACJK,KAAK;MACTgB,OAAO,EAAEH,WAAY;MACrBQ,SAAS,EAAEA,CAAA,KAAMd,YAAY,CAAC,IAAI,CAAE;MACpCe,UAAU,EAAEA,CAAA,KAAMf,YAAY,CAAC,KAAK,CAAE;MACtCY,QAAQ,EAAEnB,KAAK,CAACE,UAAW;MAC3BU,KAAK,EAAE,CACLJ,eAAe,EACf;QACEe,MAAM,EAAEnB,WAAW,CAACC,KAAK;MAC3B,CAAC;IACD,CACH;EAAC,CAC6B,CAAC;AAEtC","ignoreList":[]}
|
|
@@ -7,8 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
7
7
|
export function EmptyDescription(props) {
|
|
8
8
|
const empty = useEmpty();
|
|
9
9
|
const composedStyles = [empty.styles?.description, props.style];
|
|
10
|
-
|
|
11
|
-
return /*#__PURE__*/_jsx(Component, {
|
|
10
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
12
11
|
...props,
|
|
13
12
|
style: composedStyles
|
|
14
13
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","useEmpty","jsx","_jsx","EmptyDescription","props","empty","composedStyles","styles","description","style"
|
|
1
|
+
{"version":3,"names":["React","Text","useEmpty","jsx","_jsx","EmptyDescription","props","empty","composedStyles","styles","description","style"],"sourceRoot":"../../../../src","sources":["primitives/empty/empty-description.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAyBC,IAAI,QAAwB,cAAc;AACnE,SAASC,QAAQ;AAAoB,SAAAC,GAAA,IAAAC,IAAA;AAQrC,OAAO,SAASC,gBAAgBA,CAACC,KAA4B,EAAE;EAC7D,MAAMC,KAAK,GAAGL,QAAQ,CAAC,CAAC;EACxB,MAAMM,cAAc,GAAG,CAACD,KAAK,CAACE,MAAM,EAAEC,WAAW,EAAEJ,KAAK,CAACK,KAAK,CAAC;EAE/D,oBAAOP,IAAA,CAACH,IAAI;IAAA,GAAKK,KAAK;IAAEK,KAAK,EAAEH;EAAe,CAAE,CAAC;AACnD","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;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;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { createContext, useContext } from "react";
|
|
4
|
+
export const ProgressContext = /*#__PURE__*/createContext(undefined);
|
|
5
|
+
export const useProgress = () => {
|
|
6
|
+
const context = useContext(ProgressContext);
|
|
7
|
+
if (!context) {
|
|
8
|
+
throw new Error("useProgress must be used within a ProgressRoot");
|
|
9
|
+
}
|
|
10
|
+
return context;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createContext","useContext","ProgressContext","undefined","useProgress","context","Error"],"sourceRoot":"../../../../src","sources":["primitives/progress/context.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAUjD,OAAO,MAAMC,eAAe,gBAAGF,aAAa,CAA8BG,SAAS,CAAC;AAEpF,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC/B,MAAMC,OAAO,GAAGJ,UAAU,CAACC,eAAe,CAAC;EAC3C,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,gDAAgD,CAAC;EACnE;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["ProgressRoot","ProgressIndicator","ProgressPrimitive","Root","Indicator"],"sourceRoot":"../../../../src","sources":["primitives/progress/index.ts"],"mappings":";;AAAA,SAASA,YAAY;AACrB,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,iBAAiB,GAAG;EAC/BC,IAAI,EAAEH,YAAY;EAClBI,SAAS,EAAEH;AACb,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { calculateComposedStyles } from "../../utils/calculate-styles.js";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { View } from "react-native";
|
|
6
|
+
import { useProgress } from "./context.js";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
export function ProgressIndicator(props) {
|
|
9
|
+
const progress = useProgress();
|
|
10
|
+
const percentage = Math.min(Math.max(progress.value / progress.max * 100, 0), 100);
|
|
11
|
+
const composedStyle = calculateComposedStyles(progress.styles, progress.state, "indicator", props.style);
|
|
12
|
+
const Component = props.render ?? View;
|
|
13
|
+
return /*#__PURE__*/_jsx(Component, {
|
|
14
|
+
...props,
|
|
15
|
+
percentage: percentage,
|
|
16
|
+
style: [composedStyle, {
|
|
17
|
+
width: `${percentage}%`
|
|
18
|
+
}]
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=progress-indicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["calculateComposedStyles","React","View","useProgress","jsx","_jsx","ProgressIndicator","props","progress","percentage","Math","min","max","value","composedStyle","styles","state","style","Component","render","width"],"sourceRoot":"../../../../src","sources":["primitives/progress/progress-indicator.tsx"],"mappings":";;AAAA,SAASA,uBAAuB;AAChC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAyBC,IAAI,QAAwB,cAAc;AACnE,SAASC,WAAW;AAAoB,SAAAC,GAAA,IAAAC,IAAA;AAQxC,OAAO,SAASC,iBAAiBA,CAACC,KAA6B,EAAE;EAC/D,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;EAE9B,MAAMM,UAAU,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAAEJ,QAAQ,CAACK,KAAK,GAAGL,QAAQ,CAACI,GAAG,GAAI,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC;EAEpF,MAAME,aAAa,GAAGd,uBAAuB,CAACQ,QAAQ,CAACO,MAAM,EAAEP,QAAQ,CAACQ,KAAK,EAAE,WAAW,EAAET,KAAK,CAACU,KAAK,CAAC;EAExG,MAAMC,SAAS,GAAGX,KAAK,CAACY,MAAM,IAAIjB,IAAI;EACtC,oBAAOG,IAAA,CAACa,SAAS;IAAA,GAAKX,KAAK;IAAEE,UAAU,EAAEA,UAAW;IAACQ,KAAK,EAAE,CAACH,aAAa,EAAE;MAAEM,KAAK,EAAE,GAAGX,UAAU;IAAI,CAAC;EAAE,CAAE,CAAC;AAC9G","ignoreList":[]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { calculateComposedStyles } from "../../utils/calculate-styles.js";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { View } from "react-native";
|
|
6
|
+
import { ProgressContext } from "./context.js";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
export function ProgressRoot(props) {
|
|
9
|
+
const {
|
|
10
|
+
value = 0,
|
|
11
|
+
max = 100
|
|
12
|
+
} = props;
|
|
13
|
+
const composedStyle = calculateComposedStyles(props.styles, "default", "root", props.style);
|
|
14
|
+
const Component = props.render ?? View;
|
|
15
|
+
return /*#__PURE__*/_jsx(ProgressContext.Provider, {
|
|
16
|
+
value: {
|
|
17
|
+
state: "default",
|
|
18
|
+
styles: props.styles,
|
|
19
|
+
value,
|
|
20
|
+
max
|
|
21
|
+
},
|
|
22
|
+
children: /*#__PURE__*/_jsx(Component, {
|
|
23
|
+
...props,
|
|
24
|
+
style: composedStyle
|
|
25
|
+
})
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=progress-root.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["calculateComposedStyles","React","View","ProgressContext","jsx","_jsx","ProgressRoot","props","value","max","composedStyle","styles","style","Component","render","Provider","state","children"],"sourceRoot":"../../../../src","sources":["primitives/progress/progress-root.tsx"],"mappings":";;AAAA,SAASA,uBAAuB;AAChC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAyBC,IAAI,QAAwB,cAAc;AACnE,SAASC,eAAe;AAAoB,SAAAC,GAAA,IAAAC,IAAA;AAe5C,OAAO,SAASC,YAAYA,CAACC,KAAwB,EAAE;EACrD,MAAM;IAAEC,KAAK,GAAG,CAAC;IAAEC,GAAG,GAAG;EAAI,CAAC,GAAGF,KAAK;EACtC,MAAMG,aAAa,GAAGV,uBAAuB,CAACO,KAAK,CAACI,MAAM,EAAE,SAAS,EAAE,MAAM,EAAEJ,KAAK,CAACK,KAAK,CAAC;EAE3F,MAAMC,SAAS,GAAGN,KAAK,CAACO,MAAM,IAAIZ,IAAI;EACtC,oBACEG,IAAA,CAACF,eAAe,CAACY,QAAQ;IACvBP,KAAK,EAAE;MACLQ,KAAK,EAAE,SAAS;MAChBL,MAAM,EAAEJ,KAAK,CAACI,MAAM;MACpBH,KAAK;MACLC;IACF,CAAE;IAAAQ,QAAA,eAEFZ,IAAA,CAACQ,SAAS;MAAA,GAAKN,KAAK;MAAEK,KAAK,EAAEF;IAAc,CAAE;EAAC,CACtB,CAAC;AAE/B","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["primitives/progress/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/default.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD,eAAO,MAAM,uBAAuB,QAAO,
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/default.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD,eAAO,MAAM,uBAAuB,QAAO,YA4C1C,CAAC"}
|
|
@@ -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,6BAA6B,CAAC;AAC5C,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;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,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,6BAA6B,CAAC;AAC5C,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;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ProgressVariants } from "./variants";
|
|
3
|
+
interface ProgressProps {
|
|
4
|
+
value?: number;
|
|
5
|
+
max?: number;
|
|
6
|
+
variant?: keyof typeof ProgressVariants;
|
|
7
|
+
indicatorColor?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare function Progress(props: ProgressProps): React.JSX.Element;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=progress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../../src/components/progress/progress.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,UAAU,aAAa;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAW5C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/progress/variants/default.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,eAAO,MAAM,yBAAyB,QAAO,cAqB5C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/progress/variants/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;CAE5B,CAAC"}
|
|
@@ -2,7 +2,6 @@ import React from "react";
|
|
|
2
2
|
import { type StyleProp, type TextStyle } from "react-native";
|
|
3
3
|
export interface ButtonPrimitiveLabelProps {
|
|
4
4
|
children?: string;
|
|
5
|
-
render?: (props: this) => React.ReactElement;
|
|
6
5
|
style?: StyleProp<TextStyle>;
|
|
7
6
|
}
|
|
8
7
|
export declare function ButtonLabel(props: ButtonPrimitiveLabelProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-label.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/button/button-label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,
|
|
1
|
+
{"version":3,"file":"button-label.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/button/button-label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,yBAAyB,qBAY3D"}
|
|
@@ -7,7 +7,6 @@ export interface ButtonPrimitiveRootProps extends PressableProps {
|
|
|
7
7
|
isLoading?: boolean;
|
|
8
8
|
style?: StyleProp<ViewStyle>;
|
|
9
9
|
styles?: ButtonStyles;
|
|
10
|
-
render?: (props: this) => React.ReactElement;
|
|
11
10
|
}
|
|
12
11
|
export declare function ButtonRoot(props: ButtonPrimitiveRootProps): React.JSX.Element;
|
|
13
12
|
//# sourceMappingURL=button-root.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-root.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/button/button-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,
|
|
1
|
+
{"version":3,"file":"button-root.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/button/button-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAA+B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhH,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AA0BD,wBAAgB,UAAU,CAAC,KAAK,EAAE,wBAAwB,qBAgCzD"}
|
|
@@ -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,gBAAgB,CAAC;AAC/B,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;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,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,gBAAgB,CAAC;AAC/B,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;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ProgressState, ProgressStyles } from "./types";
|
|
2
|
+
export interface ProgressContext {
|
|
3
|
+
state: ProgressState;
|
|
4
|
+
styles?: ProgressStyles;
|
|
5
|
+
value: number;
|
|
6
|
+
max: number;
|
|
7
|
+
}
|
|
8
|
+
export declare const ProgressContext: import("react").Context<ProgressContext | undefined>;
|
|
9
|
+
export declare const useProgress: () => ProgressContext;
|
|
10
|
+
//# sourceMappingURL=context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/progress/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,sDAAwD,CAAC;AAErF,eAAO,MAAM,WAAW,uBAMvB,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ProgressRoot } from "./progress-root";
|
|
2
|
+
import { ProgressIndicator } from "./progress-indicator";
|
|
3
|
+
export declare const ProgressPrimitive: {
|
|
4
|
+
Root: typeof ProgressRoot;
|
|
5
|
+
Indicator: typeof ProgressIndicator;
|
|
6
|
+
};
|
|
7
|
+
export type { ProgressRootProps } from "./progress-root";
|
|
8
|
+
export type { ProgressIndicatorProps } from "./progress-indicator";
|
|
9
|
+
export type { ProgressStyles } from "./types";
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,eAAO,MAAM,iBAAiB;;;CAG7B,CAAC;AAEF,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,YAAY,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
+
export interface ProgressIndicatorProps {
|
|
4
|
+
render?: (props: ProgressIndicatorProps & {
|
|
5
|
+
percentage: number;
|
|
6
|
+
}) => React.ReactNode;
|
|
7
|
+
style?: StyleProp<ViewStyle>;
|
|
8
|
+
}
|
|
9
|
+
export declare function ProgressIndicator(props: ProgressIndicatorProps): React.JSX.Element;
|
|
10
|
+
//# sourceMappingURL=progress-indicator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"progress-indicator.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/progress/progress-indicator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,GAAG;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAErF,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAS9D"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
+
import type { ProgressStyles } from "./types";
|
|
4
|
+
export interface ProgressRootProps {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
render?: (props: ProgressRootProps) => React.ReactNode;
|
|
7
|
+
style?: StyleProp<ViewStyle>;
|
|
8
|
+
styles?: ProgressStyles;
|
|
9
|
+
value?: number;
|
|
10
|
+
max?: number;
|
|
11
|
+
}
|
|
12
|
+
export declare function ProgressRoot(props: ProgressRootProps): React.JSX.Element;
|
|
13
|
+
//# sourceMappingURL=progress-root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"progress-root.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/progress/progress-root.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAiBpD"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ProgressIndicatorProps } from "./progress-indicator";
|
|
2
|
+
import type { ProgressRootProps } from "./progress-root";
|
|
3
|
+
export type ProgressState = "default";
|
|
4
|
+
export interface ProgressStyles {
|
|
5
|
+
root?: Partial<Record<ProgressState, ProgressRootProps["style"]>>;
|
|
6
|
+
indicator?: Partial<Record<ProgressState, ProgressIndicatorProps["style"]>>;
|
|
7
|
+
}
|
|
8
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/progress/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC;AAEtC,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;CAC7E"}
|
package/package.json
CHANGED
|
@@ -22,7 +22,7 @@ export const useButtonVariantDefault = (): ButtonStyles => {
|
|
|
22
22
|
opacity: 0.5,
|
|
23
23
|
},
|
|
24
24
|
loading: {
|
|
25
|
-
opacity: 0.
|
|
25
|
+
opacity: 0.5,
|
|
26
26
|
},
|
|
27
27
|
hovered: {
|
|
28
28
|
backgroundColor: hslaSetRelativeLightness(colors.primary, -10),
|
|
@@ -34,23 +34,15 @@ export const useButtonVariantDefault = (): ButtonStyles => {
|
|
|
34
34
|
fontSize,
|
|
35
35
|
fontFamily,
|
|
36
36
|
},
|
|
37
|
-
disabled: {
|
|
38
|
-
|
|
39
|
-
},
|
|
40
|
-
loading: {
|
|
41
|
-
color: colors.mutedForeground,
|
|
42
|
-
},
|
|
37
|
+
disabled: {},
|
|
38
|
+
loading: {},
|
|
43
39
|
},
|
|
44
40
|
spinner: {
|
|
45
41
|
default: {
|
|
46
42
|
color: colors.primaryForeground,
|
|
47
43
|
},
|
|
48
|
-
disabled: {
|
|
49
|
-
|
|
50
|
-
},
|
|
51
|
-
loading: {
|
|
52
|
-
color: colors.mutedForeground,
|
|
53
|
-
},
|
|
44
|
+
disabled: {},
|
|
45
|
+
loading: {},
|
|
54
46
|
},
|
|
55
47
|
}),
|
|
56
48
|
);
|
package/src/components/index.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Progress } from "./progress";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ProgressPrimitive } from "@/primitives";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { ProgressVariants } from "./variants";
|
|
4
|
+
|
|
5
|
+
interface ProgressProps {
|
|
6
|
+
value?: number;
|
|
7
|
+
max?: number;
|
|
8
|
+
variant?: keyof typeof ProgressVariants;
|
|
9
|
+
indicatorColor?: string;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function Progress(props: ProgressProps) {
|
|
13
|
+
const { value = 0, max = 100, variant = "default", indicatorColor } = props;
|
|
14
|
+
|
|
15
|
+
const useVariantStyles = ProgressVariants[variant];
|
|
16
|
+
const variantStyles = useVariantStyles();
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<ProgressPrimitive.Root value={value} max={max} styles={variantStyles}>
|
|
20
|
+
<ProgressPrimitive.Indicator style={indicatorColor ? { backgroundColor: indicatorColor } : undefined} />
|
|
21
|
+
</ProgressPrimitive.Root>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { type ProgressStyles } from "@/primitives";
|
|
2
|
+
import { useThemedStyles } from "@/utils/use-themed-styles";
|
|
3
|
+
|
|
4
|
+
export const useProgressVariantDefault = (): ProgressStyles => {
|
|
5
|
+
return useThemedStyles(
|
|
6
|
+
({ colors, radius }): ProgressStyles => ({
|
|
7
|
+
root: {
|
|
8
|
+
default: {
|
|
9
|
+
width: "100%",
|
|
10
|
+
height: 8,
|
|
11
|
+
backgroundColor: colors.muted,
|
|
12
|
+
borderRadius: radius,
|
|
13
|
+
overflow: "hidden",
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
indicator: {
|
|
17
|
+
default: {
|
|
18
|
+
height: "100%",
|
|
19
|
+
backgroundColor: colors.primary,
|
|
20
|
+
borderRadius: radius,
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
})
|
|
24
|
+
);
|
|
25
|
+
};
|
|
@@ -6,8 +6,6 @@ import { useButtonPrimitive } from "./button-context";
|
|
|
6
6
|
export interface ButtonPrimitiveLabelProps {
|
|
7
7
|
children?: string;
|
|
8
8
|
|
|
9
|
-
render?: (props: this) => React.ReactElement;
|
|
10
|
-
|
|
11
9
|
style?: StyleProp<TextStyle>;
|
|
12
10
|
}
|
|
13
11
|
|
|
@@ -16,6 +14,11 @@ export function ButtonLabel(props: ButtonPrimitiveLabelProps) {
|
|
|
16
14
|
|
|
17
15
|
const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
|
|
18
16
|
|
|
19
|
-
const
|
|
20
|
-
|
|
17
|
+
const isSelectable = button.state !== "disabled" && button.state !== "loading";
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<Text selectable={isSelectable} style={calculatedStyle}>
|
|
21
|
+
{props.children}
|
|
22
|
+
</Text>
|
|
23
|
+
);
|
|
21
24
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
|
-
import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
|
|
2
|
+
import { Pressable, type CursorValue, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
|
|
3
3
|
import { ButtonPrimitiveContext } from "./button-context";
|
|
4
4
|
import type { ButtonState, ButtonStyles } from "./types";
|
|
5
5
|
|
|
@@ -11,8 +11,6 @@ export interface ButtonPrimitiveRootProps extends PressableProps {
|
|
|
11
11
|
|
|
12
12
|
style?: StyleProp<ViewStyle>;
|
|
13
13
|
styles?: ButtonStyles;
|
|
14
|
-
|
|
15
|
-
render?: (props: this) => React.ReactElement;
|
|
16
14
|
}
|
|
17
15
|
|
|
18
16
|
const calculateState = (props: ButtonPrimitiveRootProps, isHovered: boolean): ButtonState => {
|
|
@@ -28,6 +26,17 @@ const calculateState = (props: ButtonPrimitiveRootProps, isHovered: boolean): Bu
|
|
|
28
26
|
return "default";
|
|
29
27
|
};
|
|
30
28
|
|
|
29
|
+
const cursorValue = (state: ButtonState): CursorValue => {
|
|
30
|
+
switch (state) {
|
|
31
|
+
case "disabled":
|
|
32
|
+
return "not-allowed" as CursorValue;
|
|
33
|
+
case "loading":
|
|
34
|
+
return "wait" as CursorValue;
|
|
35
|
+
default:
|
|
36
|
+
return "pointer";
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
31
40
|
export function ButtonRoot(props: ButtonPrimitiveRootProps) {
|
|
32
41
|
const [isHovered, setIsHovered] = useState(false);
|
|
33
42
|
|
|
@@ -35,10 +44,29 @@ export function ButtonRoot(props: ButtonPrimitiveRootProps) {
|
|
|
35
44
|
|
|
36
45
|
const calculatedStyle = [props.styles?.root?.default, props.styles?.root?.[state], props.style];
|
|
37
46
|
|
|
38
|
-
const
|
|
47
|
+
const handlePress: PressableProps["onPress"] = (event) => {
|
|
48
|
+
if (props.isDisabled || props.isLoading) {
|
|
49
|
+
event.preventDefault();
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
props.onPress?.(event);
|
|
53
|
+
};
|
|
54
|
+
|
|
39
55
|
return (
|
|
40
56
|
<ButtonPrimitiveContext.Provider value={{ disabled: props.isDisabled, state, styles: props.styles }}>
|
|
41
|
-
<
|
|
57
|
+
<Pressable
|
|
58
|
+
{...props}
|
|
59
|
+
onPress={handlePress}
|
|
60
|
+
onHoverIn={() => setIsHovered(true)}
|
|
61
|
+
onHoverOut={() => setIsHovered(false)}
|
|
62
|
+
disabled={props.isDisabled}
|
|
63
|
+
style={[
|
|
64
|
+
calculatedStyle,
|
|
65
|
+
{
|
|
66
|
+
cursor: cursorValue(state),
|
|
67
|
+
},
|
|
68
|
+
]}
|
|
69
|
+
/>
|
|
42
70
|
</ButtonPrimitiveContext.Provider>
|
|
43
71
|
);
|
|
44
72
|
}
|
|
@@ -11,6 +11,6 @@ export interface EmptyDescriptionProps {
|
|
|
11
11
|
export function EmptyDescription(props: EmptyDescriptionProps) {
|
|
12
12
|
const empty = useEmpty();
|
|
13
13
|
const composedStyles = [empty.styles?.description, props.style];
|
|
14
|
-
|
|
15
|
-
return <
|
|
14
|
+
|
|
15
|
+
return <Text {...props} style={composedStyles} />;
|
|
16
16
|
}
|
package/src/primitives/index.ts
CHANGED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
import type { ProgressState, ProgressStyles } from "./types";
|
|
3
|
+
|
|
4
|
+
export interface ProgressContext {
|
|
5
|
+
state: ProgressState;
|
|
6
|
+
styles?: ProgressStyles;
|
|
7
|
+
value: number;
|
|
8
|
+
max: number;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export const ProgressContext = createContext<ProgressContext | undefined>(undefined);
|
|
12
|
+
|
|
13
|
+
export const useProgress = () => {
|
|
14
|
+
const context = useContext(ProgressContext);
|
|
15
|
+
if (!context) {
|
|
16
|
+
throw new Error("useProgress must be used within a ProgressRoot");
|
|
17
|
+
}
|
|
18
|
+
return context;
|
|
19
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ProgressRoot } from "./progress-root";
|
|
2
|
+
import { ProgressIndicator } from "./progress-indicator";
|
|
3
|
+
|
|
4
|
+
export const ProgressPrimitive = {
|
|
5
|
+
Root: ProgressRoot,
|
|
6
|
+
Indicator: ProgressIndicator,
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export type { ProgressRootProps } from "./progress-root";
|
|
10
|
+
export type { ProgressIndicatorProps } from "./progress-indicator";
|
|
11
|
+
export type { ProgressStyles } from "./types";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { calculateComposedStyles } from "@/utils/calculate-styles";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { type StyleProp, View, type ViewStyle } from "react-native";
|
|
4
|
+
import { useProgress } from "./context";
|
|
5
|
+
|
|
6
|
+
export interface ProgressIndicatorProps {
|
|
7
|
+
render?: (props: ProgressIndicatorProps & { percentage: number }) => React.ReactNode;
|
|
8
|
+
|
|
9
|
+
style?: StyleProp<ViewStyle>;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function ProgressIndicator(props: ProgressIndicatorProps) {
|
|
13
|
+
const progress = useProgress();
|
|
14
|
+
|
|
15
|
+
const percentage = Math.min(Math.max((progress.value / progress.max) * 100, 0), 100);
|
|
16
|
+
|
|
17
|
+
const composedStyle = calculateComposedStyles(progress.styles, progress.state, "indicator", props.style);
|
|
18
|
+
|
|
19
|
+
const Component = props.render ?? View;
|
|
20
|
+
return <Component {...props} percentage={percentage} style={[composedStyle, { width: `${percentage}%` }]} />;
|
|
21
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { calculateComposedStyles } from "@/utils/calculate-styles";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { type StyleProp, View, type ViewStyle } from "react-native";
|
|
4
|
+
import { ProgressContext } from "./context";
|
|
5
|
+
import type { ProgressStyles } from "./types";
|
|
6
|
+
|
|
7
|
+
export interface ProgressRootProps {
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
|
|
10
|
+
render?: (props: ProgressRootProps) => React.ReactNode;
|
|
11
|
+
|
|
12
|
+
style?: StyleProp<ViewStyle>;
|
|
13
|
+
styles?: ProgressStyles;
|
|
14
|
+
|
|
15
|
+
value?: number;
|
|
16
|
+
max?: number;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export function ProgressRoot(props: ProgressRootProps) {
|
|
20
|
+
const { value = 0, max = 100 } = props;
|
|
21
|
+
const composedStyle = calculateComposedStyles(props.styles, "default", "root", props.style);
|
|
22
|
+
|
|
23
|
+
const Component = props.render ?? View;
|
|
24
|
+
return (
|
|
25
|
+
<ProgressContext.Provider
|
|
26
|
+
value={{
|
|
27
|
+
state: "default",
|
|
28
|
+
styles: props.styles,
|
|
29
|
+
value,
|
|
30
|
+
max,
|
|
31
|
+
}}
|
|
32
|
+
>
|
|
33
|
+
<Component {...props} style={composedStyle} />
|
|
34
|
+
</ProgressContext.Provider>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { ProgressIndicatorProps } from "./progress-indicator";
|
|
2
|
+
import type { ProgressRootProps } from "./progress-root";
|
|
3
|
+
|
|
4
|
+
export type ProgressState = "default";
|
|
5
|
+
|
|
6
|
+
export interface ProgressStyles {
|
|
7
|
+
root?: Partial<Record<ProgressState, ProgressRootProps["style"]>>;
|
|
8
|
+
indicator?: Partial<Record<ProgressState, ProgressIndicatorProps["style"]>>;
|
|
9
|
+
}
|