@sudobility/components-rn 1.0.41 → 1.0.43
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/index.cjs.js +1092 -473
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1095 -476
- package/dist/index.esm.js.map +1 -1
- package/dist/ui/Alert/Alert.d.ts.map +1 -1
- package/dist/ui/Avatar/Avatar.d.ts.map +1 -1
- package/dist/ui/Badge/Badge.d.ts.map +1 -1
- package/dist/ui/Banner/Banner.d.ts.map +1 -1
- package/dist/ui/Breadcrumb/Breadcrumb.d.ts.map +1 -1
- package/dist/ui/BreadcrumbNav/BreadcrumbNav.d.ts.map +1 -1
- package/dist/ui/CTASection/CTASection.d.ts.map +1 -1
- package/dist/ui/Calendar/Calendar.d.ts.map +1 -1
- package/dist/ui/ChainBadge/ChainBadge.d.ts.map +1 -1
- package/dist/ui/Checkbox/Checkbox.d.ts +0 -22
- package/dist/ui/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/ui/Code/Code.d.ts +0 -17
- package/dist/ui/Code/Code.d.ts.map +1 -1
- package/dist/ui/CodeDisplay/CodeDisplay.d.ts +0 -21
- package/dist/ui/CodeDisplay/CodeDisplay.d.ts.map +1 -1
- package/dist/ui/CollapsibleSection/CollapsibleSection.d.ts.map +1 -1
- package/dist/ui/Combobox/Combobox.d.ts.map +1 -1
- package/dist/ui/Command/Command.d.ts.map +1 -1
- package/dist/ui/DashboardStatCard/DashboardStatCard.d.ts +0 -17
- package/dist/ui/DashboardStatCard/DashboardStatCard.d.ts.map +1 -1
- package/dist/ui/DataList/DataList.d.ts.map +1 -1
- package/dist/ui/Divider/Divider.d.ts.map +1 -1
- package/dist/ui/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/ui/ExternalLink/ExternalLink.d.ts.map +1 -1
- package/dist/ui/FeatureCard/FeatureCard.d.ts.map +1 -1
- package/dist/ui/FeatureGrid/FeatureGrid.d.ts.map +1 -1
- package/dist/ui/GradientIconContainer/GradientIconContainer.d.ts +0 -13
- package/dist/ui/GradientIconContainer/GradientIconContainer.d.ts.map +1 -1
- package/dist/ui/Heading/Heading.d.ts.map +1 -1
- package/dist/ui/HelperText/HelperText.d.ts.map +1 -1
- package/dist/ui/IconContainer/IconContainer.d.ts +0 -13
- package/dist/ui/IconContainer/IconContainer.d.ts.map +1 -1
- package/dist/ui/IconText/IconText.d.ts.map +1 -1
- package/dist/ui/InfiniteScroll/InfiniteScroll.d.ts.map +1 -1
- package/dist/ui/InfoBox/InfoBox.d.ts.map +1 -1
- package/dist/ui/Input/Input.d.ts.map +1 -1
- package/dist/ui/KeyValuePair/KeyValuePair.d.ts.map +1 -1
- package/dist/ui/Label/Label.d.ts.map +1 -1
- package/dist/ui/Link/Link.d.ts.map +1 -1
- package/dist/ui/ListItemWithAction/ListItemWithAction.d.ts.map +1 -1
- package/dist/ui/Modal/Modal.d.ts.map +1 -1
- package/dist/ui/MultiSelect/MultiSelect.d.ts.map +1 -1
- package/dist/ui/NavigationList/NavigationList.d.ts.map +1 -1
- package/dist/ui/PageSectionHeader/PageSectionHeader.d.ts.map +1 -1
- package/dist/ui/Pagination/Pagination.d.ts.map +1 -1
- package/dist/ui/PhoneInput/PhoneInput.d.ts.map +1 -1
- package/dist/ui/PopupSelect/PopupSelect.d.ts.map +1 -1
- package/dist/ui/Progress/Progress.d.ts +0 -15
- package/dist/ui/Progress/Progress.d.ts.map +1 -1
- package/dist/ui/ProgressCircle/ProgressCircle.d.ts.map +1 -1
- package/dist/ui/PromotionalBanner/PromotionalBanner.d.ts.map +1 -1
- package/dist/ui/QuickActions/QuickActions.d.ts.map +1 -1
- package/dist/ui/SearchInput/SearchInput.d.ts.map +1 -1
- package/dist/ui/SectionHeader/SectionHeader.d.ts.map +1 -1
- package/dist/ui/Select/Select.d.ts.map +1 -1
- package/dist/ui/SettingsList/SettingsList.d.ts.map +1 -1
- package/dist/ui/Sheet/Sheet.d.ts.map +1 -1
- package/dist/ui/SideNav/SideNav.d.ts.map +1 -1
- package/dist/ui/SmartLink/SmartLink.d.ts.map +1 -1
- package/dist/ui/Spinner/Spinner.d.ts.map +1 -1
- package/dist/ui/StatDisplay/StatDisplay.d.ts +0 -12
- package/dist/ui/StatDisplay/StatDisplay.d.ts.map +1 -1
- package/dist/ui/StepList/StepList.d.ts.map +1 -1
- package/dist/ui/Table/Table.d.ts.map +1 -1
- package/dist/ui/Tabs/Tabs.d.ts.map +1 -1
- package/dist/ui/Text/Text.d.ts.map +1 -1
- package/dist/ui/TextArea/TextArea.d.ts.map +1 -1
- package/dist/ui/TextInputModal/TextInputModal.d.ts.map +1 -1
- package/dist/ui/Toast/Toast.d.ts.map +1 -1
- package/dist/ui/Tooltip/Tooltip.d.ts +0 -20
- package/dist/ui/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/ui/TransferList/TransferList.d.ts.map +1 -1
- package/package.json +5 -4
- package/src/__tests__/alert.test.tsx +20 -10
- package/src/ui/Alert/Alert.tsx +13 -5
- package/src/ui/Avatar/Avatar.tsx +6 -5
- package/src/ui/Badge/Badge.tsx +61 -26
- package/src/ui/Banner/Banner.tsx +36 -25
- package/src/ui/Breadcrumb/Breadcrumb.tsx +8 -5
- package/src/ui/BreadcrumbNav/BreadcrumbNav.tsx +22 -3
- package/src/ui/CTASection/CTASection.tsx +8 -6
- package/src/ui/Calendar/Calendar.tsx +35 -6
- package/src/ui/Card/Card.tsx +2 -2
- package/src/ui/ChainBadge/ChainBadge.tsx +67 -42
- package/src/ui/Checkbox/Checkbox.tsx +47 -20
- package/src/ui/Code/Code.tsx +51 -21
- package/src/ui/CodeDisplay/CodeDisplay.tsx +46 -20
- package/src/ui/CollapsibleSection/CollapsibleSection.tsx +7 -3
- package/src/ui/Combobox/Combobox.tsx +2 -1
- package/src/ui/Command/Command.tsx +2 -1
- package/src/ui/DashboardStatCard/DashboardStatCard.tsx +29 -11
- package/src/ui/DataList/DataList.tsx +23 -5
- package/src/ui/Divider/Divider.tsx +12 -17
- package/src/ui/Dropdown/Dropdown.tsx +4 -1
- package/src/ui/ExternalLink/ExternalLink.tsx +5 -4
- package/src/ui/FeatureCard/FeatureCard.tsx +60 -29
- package/src/ui/FeatureGrid/FeatureGrid.tsx +7 -7
- package/src/ui/GradientIconContainer/GradientIconContainer.tsx +33 -8
- package/src/ui/Heading/Heading.tsx +15 -38
- package/src/ui/HelperText/HelperText.tsx +9 -8
- package/src/ui/IconContainer/IconContainer.tsx +26 -9
- package/src/ui/IconText/IconText.tsx +6 -5
- package/src/ui/InfiniteScroll/InfiniteScroll.tsx +2 -1
- package/src/ui/InfoBox/InfoBox.tsx +35 -17
- package/src/ui/Input/Input.tsx +10 -3
- package/src/ui/KeyValuePair/KeyValuePair.tsx +12 -5
- package/src/ui/Label/Label.tsx +3 -1
- package/src/ui/Link/Link.tsx +6 -5
- package/src/ui/ListItemWithAction/ListItemWithAction.tsx +2 -1
- package/src/ui/Modal/Modal.tsx +16 -2
- package/src/ui/MultiSelect/MultiSelect.tsx +2 -1
- package/src/ui/NavigationList/NavigationList.tsx +17 -3
- package/src/ui/PageSectionHeader/PageSectionHeader.tsx +2 -1
- package/src/ui/Pagination/Pagination.tsx +9 -6
- package/src/ui/PhoneInput/PhoneInput.tsx +3 -2
- package/src/ui/PopupSelect/PopupSelect.tsx +15 -14
- package/src/ui/Progress/Progress.tsx +63 -14
- package/src/ui/ProgressCircle/ProgressCircle.tsx +7 -6
- package/src/ui/PromotionalBanner/PromotionalBanner.tsx +7 -4
- package/src/ui/QuickActions/QuickActions.tsx +13 -9
- package/src/ui/SearchInput/SearchInput.tsx +3 -2
- package/src/ui/SectionHeader/SectionHeader.tsx +4 -1
- package/src/ui/Select/Select.tsx +20 -5
- package/src/ui/SettingsList/SettingsList.tsx +4 -1
- package/src/ui/Sheet/Sheet.tsx +20 -3
- package/src/ui/SideNav/SideNav.tsx +11 -2
- package/src/ui/SmartLink/SmartLink.tsx +6 -3
- package/src/ui/Spinner/Spinner.tsx +8 -6
- package/src/ui/StatDisplay/StatDisplay.tsx +59 -23
- package/src/ui/StepList/StepList.tsx +25 -3
- package/src/ui/Table/Table.tsx +22 -9
- package/src/ui/Tabs/Tabs.tsx +7 -2
- package/src/ui/Text/Text.tsx +19 -52
- package/src/ui/TextArea/TextArea.tsx +2 -1
- package/src/ui/TextInputModal/TextInputModal.tsx +2 -1
- package/src/ui/Toast/Toast.tsx +49 -14
- package/src/ui/Tooltip/Tooltip.tsx +47 -9
- package/src/ui/TransferList/TransferList.tsx +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI7E;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,CAAC;IACpD,qCAAqC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChE,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkBD;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA2B1C,CAAC"}
|
|
@@ -17,17 +17,5 @@ export interface StatDisplayProps {
|
|
|
17
17
|
/** Additional className */
|
|
18
18
|
className?: string;
|
|
19
19
|
}
|
|
20
|
-
/**
|
|
21
|
-
* StatDisplay Component
|
|
22
|
-
*
|
|
23
|
-
* Displays a statistic or metric with a value and label.
|
|
24
|
-
* Commonly used in dashboards, hero sections, and analytics.
|
|
25
|
-
*
|
|
26
|
-
* @example
|
|
27
|
-
* ```tsx
|
|
28
|
-
* <StatDisplay value="5K" label="Gas Overhead" variant="primary" />
|
|
29
|
-
* <StatDisplay value="42" label="Active Users" variant="success" size="lg" />
|
|
30
|
-
* ```
|
|
31
|
-
*/
|
|
32
20
|
export declare const StatDisplay: React.FC<StatDisplayProps>;
|
|
33
21
|
//# sourceMappingURL=StatDisplay.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatDisplay.d.ts","sourceRoot":"","sources":["../../../src/ui/StatDisplay/StatDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"StatDisplay.d.ts","sourceRoot":"","sources":["../../../src/ui/StatDisplay/StatDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7E,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,mBAAmB;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oBAAoB;IACpB,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC9B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoDD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqFlD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepList.d.ts","sourceRoot":"","sources":["../../../src/ui/StepList/StepList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"StepList.d.ts","sourceRoot":"","sources":["../../../src/ui/StepList/StepList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,YAAY;IAC3B,mBAAmB;IACnB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,aAAa;IAC5B,0CAA0C;IAC1C,KAAK,EAAE,CAAC,MAAM,GAAG,YAAY,CAAC,EAAE,CAAC;IACjC,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC7C,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8H5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/ui/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/ui/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,iBAAiB;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACpD,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,oBAAoB;IACpB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,iBAAiB;IACjB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,wBAAwB;IACxB,YAAY,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,yBAAyB;IACzB,IAAI,CAAC,EAAE;QACL,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;KAC3B,CAAC;IACF,mBAAmB;IACnB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wBAAwB;IACxB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACvD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,MAAM,EACN,UAAU,EACV,OAAe,EACf,OAAe,EACf,QAAgB,EAChB,YAAkC,EAClC,SAAS,GACV,EAAE,UAAU,CAAC,CAAC,CAAC,2CA0Hf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqC,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqC,SAAS,EAAE,MAAM,cAAc,CAAC;AAoB5E,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8BpC,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmB5C,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoClD,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiBlD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/ui/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/ui/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,MAAM,WAAW,SAAS;IACxB,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAClE,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAC7D,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3E,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;IAC9D,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyBpC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/ui/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAyB,cAAc,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/ui/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAyB,cAAc,EAAE,MAAM,cAAc,CAAC;AAIrE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;IACrE,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkF5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputModal.d.ts","sourceRoot":"","sources":["../../../src/ui/TextInputModal/TextInputModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextInputModal.d.ts","sourceRoot":"","sources":["../../../src/ui/TextInputModal/TextInputModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;CAC7C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgKxD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAiCf,+DAA+D;AAC/D,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH;AAED,MAAM,WAAW,UAAU;IACzB,oBAAoB;IACpB,KAAK,EAAE,YAAY,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,gFAAgF;AAChF,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;IACpD,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAID;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,yBAMpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0FtC,CAAC;AAwBF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA+BjE,CAAC"}
|
|
@@ -15,25 +15,5 @@ export interface TooltipProps {
|
|
|
15
15
|
/** Variant style */
|
|
16
16
|
variant?: 'default' | 'info' | 'success' | 'warning' | 'error';
|
|
17
17
|
}
|
|
18
|
-
/**
|
|
19
|
-
* Tooltip Component
|
|
20
|
-
*
|
|
21
|
-
* Simple tooltip that appears on long press in React Native.
|
|
22
|
-
* Shows informational content in a floating view.
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* ```tsx
|
|
26
|
-
* <Tooltip content="Click to copy">
|
|
27
|
-
* <Button>Copy</Button>
|
|
28
|
-
* </Tooltip>
|
|
29
|
-
* ```
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* ```tsx
|
|
33
|
-
* <Tooltip content="User profile" placement="bottom" variant="info">
|
|
34
|
-
* <Avatar />
|
|
35
|
-
* </Tooltip>
|
|
36
|
-
* ```
|
|
37
|
-
*/
|
|
38
18
|
export declare const Tooltip: React.FC<TooltipProps>;
|
|
39
19
|
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/ui/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/ui/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,YAAY;IAC3B,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAChE;AA6DD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0I1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../../src/ui/TransferList/TransferList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../../src/ui/TransferList/TransferList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,gBAAgB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,sBAAsB;IACtB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,qBAAqB;IACrB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,qBAAqB;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC3E,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,gCAAgC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoRpD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sudobility/components-rn",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.43",
|
|
4
4
|
"description": "React Native UI components and design system - Ported from @sudobility/components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.esm.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
],
|
|
42
42
|
"author": "Sudobility",
|
|
43
43
|
"peerDependencies": {
|
|
44
|
-
"@sudobility/design": "^1.1.
|
|
44
|
+
"@sudobility/design": "^1.1.26",
|
|
45
45
|
"@sudobility/types": "^1.9.61",
|
|
46
46
|
"nativewind": ">=4.0.0",
|
|
47
47
|
"react": "^18.0.0 || ^19.0.0",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"@react-native/babel-preset": "^0.84.0",
|
|
65
65
|
"@react-native/js-polyfills": "^0.84.0",
|
|
66
66
|
"@react-native/normalize-colors": "^0.84.0",
|
|
67
|
-
"@sudobility/design": "^1.1.
|
|
67
|
+
"@sudobility/design": "^1.1.26",
|
|
68
68
|
"@sudobility/types": "^1.9.61",
|
|
69
69
|
"@testing-library/jest-native": "^5.4.3",
|
|
70
70
|
"@testing-library/react-native": "^13.3.3",
|
|
@@ -91,7 +91,8 @@
|
|
|
91
91
|
"react-test-renderer": "18.3.1",
|
|
92
92
|
"typescript": "^5.9.3",
|
|
93
93
|
"vite": "^6.0.0",
|
|
94
|
-
"vite-plugin-dts": "^4.5.4"
|
|
94
|
+
"vite-plugin-dts": "^4.5.4",
|
|
95
|
+
"vitest": "^4.1.3"
|
|
95
96
|
},
|
|
96
97
|
"repository": {
|
|
97
98
|
"type": "git",
|
|
@@ -4,17 +4,27 @@ import { Text } from 'react-native';
|
|
|
4
4
|
import { Alert, AlertTitle, AlertDescription } from '../ui/Alert';
|
|
5
5
|
|
|
6
6
|
// Mock @sudobility/design
|
|
7
|
-
jest.mock('@sudobility/design', () =>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
jest.mock('@sudobility/design', () => {
|
|
8
|
+
const createDeepProxy = () =>
|
|
9
|
+
new Proxy(() => '', {
|
|
10
|
+
get: (_t, p) => (p === 'then' ? undefined : createDeepProxy()),
|
|
11
|
+
apply: () => '',
|
|
12
|
+
});
|
|
13
|
+
return {
|
|
14
|
+
variants: {
|
|
15
|
+
alert: {
|
|
16
|
+
info: () => 'mocked-alert-info',
|
|
17
|
+
success: () => 'mocked-alert-success',
|
|
18
|
+
warning: () => 'mocked-alert-warning',
|
|
19
|
+
attention: () => 'mocked-alert-attention',
|
|
20
|
+
error: () => 'mocked-alert-error',
|
|
21
|
+
},
|
|
15
22
|
},
|
|
16
|
-
|
|
17
|
-
|
|
23
|
+
textVariants: createDeepProxy(),
|
|
24
|
+
designTokens: createDeepProxy(),
|
|
25
|
+
colors: createDeepProxy(),
|
|
26
|
+
};
|
|
27
|
+
});
|
|
18
28
|
|
|
19
29
|
describe('Alert', () => {
|
|
20
30
|
it('renders with title', () => {
|
package/src/ui/Alert/Alert.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { View, Text, type ViewProps } from 'react-native';
|
|
3
3
|
import { cn } from '../../lib/utils';
|
|
4
|
-
import { variants as v } from '@sudobility/design';
|
|
4
|
+
import { variants as v, textVariants } from '@sudobility/design';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Props for the Alert component.
|
|
@@ -31,7 +31,9 @@ export const AlertTitle: React.FC<{
|
|
|
31
31
|
children: React.ReactNode;
|
|
32
32
|
className?: string;
|
|
33
33
|
}> = ({ children, className }) => (
|
|
34
|
-
<Text className={cn('
|
|
34
|
+
<Text className={cn(textVariants.label.default(), 'mb-1', className)}>
|
|
35
|
+
{children}
|
|
36
|
+
</Text>
|
|
35
37
|
);
|
|
36
38
|
|
|
37
39
|
/** Alert description sub-component with smaller text styling. */
|
|
@@ -39,7 +41,7 @@ export const AlertDescription: React.FC<{
|
|
|
39
41
|
children: React.ReactNode;
|
|
40
42
|
className?: string;
|
|
41
43
|
}> = ({ children, className }) => (
|
|
42
|
-
<Text className={cn(
|
|
44
|
+
<Text className={cn(textVariants.body.sm(), className)}>{children}</Text>
|
|
43
45
|
);
|
|
44
46
|
|
|
45
47
|
/**
|
|
@@ -74,8 +76,14 @@ export const Alert: React.FC<AlertProps> = ({
|
|
|
74
76
|
>
|
|
75
77
|
{IconComponent && <View className='flex-shrink-0'>{IconComponent}</View>}
|
|
76
78
|
<View className='flex-1'>
|
|
77
|
-
{title &&
|
|
78
|
-
|
|
79
|
+
{title && (
|
|
80
|
+
<Text className={cn(textVariants.label.default(), 'mb-1')}>
|
|
81
|
+
{title}
|
|
82
|
+
</Text>
|
|
83
|
+
)}
|
|
84
|
+
{description && (
|
|
85
|
+
<Text className={textVariants.body.sm()}>{description}</Text>
|
|
86
|
+
)}
|
|
79
87
|
{children}
|
|
80
88
|
</View>
|
|
81
89
|
</View>
|
package/src/ui/Avatar/Avatar.tsx
CHANGED
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { View, Text, Image, Pressable } from 'react-native';
|
|
4
4
|
import { cn } from '../../lib/utils';
|
|
5
|
+
import { statusIndicatorColors } from '@sudobility/design';
|
|
5
6
|
|
|
6
7
|
export interface AvatarProps {
|
|
7
8
|
/** Image source URL */
|
|
@@ -76,12 +77,12 @@ export const Avatar: React.FC<AvatarProps> = ({
|
|
|
76
77
|
xl: 'w-4 h-4',
|
|
77
78
|
};
|
|
78
79
|
|
|
79
|
-
// Status indicator configurations
|
|
80
|
+
// Status indicator configurations using DS statusIndicatorColors
|
|
80
81
|
const statusClasses = {
|
|
81
|
-
online:
|
|
82
|
-
offline:
|
|
83
|
-
away: 'bg-yellow-500',
|
|
84
|
-
busy:
|
|
82
|
+
online: statusIndicatorColors.success, // bg-green-500
|
|
83
|
+
offline: statusIndicatorColors.neutral, // bg-gray-500
|
|
84
|
+
away: 'bg-yellow-500', // local fallback, no DS yellow status
|
|
85
|
+
busy: statusIndicatorColors.error, // bg-red-500
|
|
85
86
|
};
|
|
86
87
|
|
|
87
88
|
// Generate initials from name
|
package/src/ui/Badge/Badge.tsx
CHANGED
|
@@ -1,6 +1,38 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { View, Text, Pressable } from 'react-native';
|
|
3
3
|
import { cn } from '../../lib/utils';
|
|
4
|
+
import { colors, designTokens } from '@sudobility/design';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Split combined DS badge color strings (which include both bg-* and text-*)
|
|
8
|
+
* into separate bg and text class strings. React Native Views don't cascade
|
|
9
|
+
* text color to child Text elements, so we must apply them separately.
|
|
10
|
+
*/
|
|
11
|
+
function splitBadgeClasses(base: string, dark: string) {
|
|
12
|
+
const all = `${base} ${dark}`.split(' ');
|
|
13
|
+
return {
|
|
14
|
+
bg: all.filter(c => c.includes('bg-')).join(' '),
|
|
15
|
+
text: all.filter(c => c.includes('text-')).join(' '),
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Lazily derive badge colors from the design system so module-level access
|
|
20
|
+
// doesn't fail when Jest transforms ESM chunk imports.
|
|
21
|
+
let _badgeColors: ReturnType<typeof buildBadgeColors> | null = null;
|
|
22
|
+
function getBadgeColors() {
|
|
23
|
+
if (!_badgeColors) _badgeColors = buildBadgeColors();
|
|
24
|
+
return _badgeColors;
|
|
25
|
+
}
|
|
26
|
+
function buildBadgeColors() {
|
|
27
|
+
const badge = colors.component.badge;
|
|
28
|
+
return {
|
|
29
|
+
default: splitBadgeClasses(badge.default.base, badge.default.dark),
|
|
30
|
+
primary: splitBadgeClasses(badge.primary.base, badge.primary.dark),
|
|
31
|
+
success: splitBadgeClasses(badge.success.base, badge.success.dark),
|
|
32
|
+
warning: splitBadgeClasses(badge.warning.base, badge.warning.dark),
|
|
33
|
+
error: splitBadgeClasses(badge.error.base, badge.error.dark),
|
|
34
|
+
};
|
|
35
|
+
}
|
|
4
36
|
|
|
5
37
|
export interface BadgeProps {
|
|
6
38
|
/** Badge content */
|
|
@@ -66,33 +98,36 @@ export const Badge: React.FC<BadgeProps> = ({
|
|
|
66
98
|
maxCount,
|
|
67
99
|
className,
|
|
68
100
|
}) => {
|
|
69
|
-
|
|
101
|
+
const ds = getBadgeColors();
|
|
102
|
+
|
|
103
|
+
// Filled badge backgrounds from design system (colors.component.badge)
|
|
70
104
|
const variantClasses = {
|
|
71
|
-
default:
|
|
72
|
-
primary:
|
|
73
|
-
success:
|
|
74
|
-
warning:
|
|
75
|
-
danger:
|
|
76
|
-
info:
|
|
105
|
+
default: ds.default.bg,
|
|
106
|
+
primary: ds.primary.bg,
|
|
107
|
+
success: ds.success.bg,
|
|
108
|
+
warning: ds.warning.bg,
|
|
109
|
+
danger: ds.error.bg,
|
|
110
|
+
info: ds.primary.bg,
|
|
77
111
|
purple: 'bg-purple-100 dark:bg-purple-900/30',
|
|
78
112
|
};
|
|
79
113
|
|
|
114
|
+
// Filled badge text colors from design system
|
|
80
115
|
const variantTextClasses = {
|
|
81
|
-
default:
|
|
82
|
-
primary:
|
|
83
|
-
success:
|
|
84
|
-
warning:
|
|
85
|
-
danger:
|
|
86
|
-
info:
|
|
116
|
+
default: ds.default.text,
|
|
117
|
+
primary: ds.primary.text,
|
|
118
|
+
success: ds.success.text,
|
|
119
|
+
warning: ds.warning.text,
|
|
120
|
+
danger: ds.error.text,
|
|
121
|
+
info: ds.primary.text,
|
|
87
122
|
purple: 'text-purple-800 dark:text-purple-400',
|
|
88
123
|
};
|
|
89
124
|
|
|
90
|
-
//
|
|
125
|
+
// Outline badge borders (no direct DS equivalent; aligned with DS color palette)
|
|
91
126
|
const outlineClasses = {
|
|
92
127
|
default: 'border border-gray-300 dark:border-gray-600',
|
|
93
128
|
primary: 'border border-blue-600 dark:border-blue-400',
|
|
94
129
|
success: 'border border-green-600 dark:border-green-400',
|
|
95
|
-
warning: 'border border-
|
|
130
|
+
warning: 'border border-orange-600 dark:border-orange-400',
|
|
96
131
|
danger: 'border border-red-600 dark:border-red-400',
|
|
97
132
|
info: 'border border-blue-600 dark:border-blue-400',
|
|
98
133
|
purple: 'border border-purple-600 dark:border-purple-400',
|
|
@@ -102,7 +137,7 @@ export const Badge: React.FC<BadgeProps> = ({
|
|
|
102
137
|
default: 'text-gray-700 dark:text-gray-300',
|
|
103
138
|
primary: 'text-blue-600 dark:text-blue-400',
|
|
104
139
|
success: 'text-green-600 dark:text-green-400',
|
|
105
|
-
warning: 'text-
|
|
140
|
+
warning: 'text-orange-600 dark:text-orange-400',
|
|
106
141
|
danger: 'text-red-600 dark:text-red-400',
|
|
107
142
|
info: 'text-blue-600 dark:text-blue-400',
|
|
108
143
|
purple: 'text-purple-600 dark:text-purple-400',
|
|
@@ -115,18 +150,12 @@ export const Badge: React.FC<BadgeProps> = ({
|
|
|
115
150
|
lg: 'px-3 py-1.5',
|
|
116
151
|
};
|
|
117
152
|
|
|
118
|
-
|
|
119
|
-
sm: 'text-xs',
|
|
120
|
-
md: 'text-sm',
|
|
121
|
-
lg: 'text-base',
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
// Dot color configurations
|
|
153
|
+
// Dot indicator colors aligned with DS palette
|
|
125
154
|
const dotColorClasses = {
|
|
126
155
|
default: 'bg-gray-600 dark:bg-gray-400',
|
|
127
156
|
primary: 'bg-blue-600 dark:bg-blue-400',
|
|
128
157
|
success: 'bg-green-600 dark:bg-green-400',
|
|
129
|
-
warning: 'bg-
|
|
158
|
+
warning: 'bg-orange-600 dark:bg-orange-400',
|
|
130
159
|
danger: 'bg-red-600 dark:bg-red-400',
|
|
131
160
|
info: 'bg-blue-600 dark:bg-blue-400',
|
|
132
161
|
purple: 'bg-purple-600 dark:bg-purple-400',
|
|
@@ -148,9 +177,15 @@ export const Badge: React.FC<BadgeProps> = ({
|
|
|
148
177
|
className
|
|
149
178
|
);
|
|
150
179
|
|
|
180
|
+
const { typography } = designTokens;
|
|
181
|
+
const textSizeMap = {
|
|
182
|
+
sm: typography.size.xs,
|
|
183
|
+
md: typography.size.sm,
|
|
184
|
+
lg: typography.size.base,
|
|
185
|
+
};
|
|
151
186
|
const textClasses = cn(
|
|
152
|
-
|
|
153
|
-
|
|
187
|
+
textSizeMap[size],
|
|
188
|
+
typography.weight.medium,
|
|
154
189
|
outline ? outlineTextClasses[variant] : variantTextClasses[variant]
|
|
155
190
|
);
|
|
156
191
|
|
package/src/ui/Banner/Banner.tsx
CHANGED
|
@@ -2,6 +2,26 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
|
|
|
2
2
|
import { View, Text, Pressable, Animated } from 'react-native';
|
|
3
3
|
import { InfoType } from '@sudobility/types';
|
|
4
4
|
import { cn } from '../../lib/utils';
|
|
5
|
+
import { colors } from '@sudobility/design';
|
|
6
|
+
|
|
7
|
+
const alert = colors.component.alert;
|
|
8
|
+
|
|
9
|
+
// Split DS alert color strings into container (bg+border) and text for RN.
|
|
10
|
+
// Views don't cascade text color to child Text elements.
|
|
11
|
+
function splitAlertClasses(base: string, dark: string) {
|
|
12
|
+
const all = `${base} ${dark}`.split(' ');
|
|
13
|
+
return {
|
|
14
|
+
container: all
|
|
15
|
+
.filter(c => c.includes('bg-') || c.includes('border-'))
|
|
16
|
+
.join(' '),
|
|
17
|
+
text: all.filter(c => c.includes('text-')).join(' '),
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const dsInfo = splitAlertClasses(alert.info.base, alert.info.dark);
|
|
22
|
+
const dsSuccess = splitAlertClasses(alert.success.base, alert.success.dark);
|
|
23
|
+
const dsWarning = splitAlertClasses(alert.warning.base, alert.warning.dark);
|
|
24
|
+
const dsError = splitAlertClasses(alert.error.base, alert.error.dark);
|
|
5
25
|
|
|
6
26
|
export interface BannerProps {
|
|
7
27
|
/** Whether the banner is visible */
|
|
@@ -24,46 +44,39 @@ export interface BannerProps {
|
|
|
24
44
|
closeAccessibilityLabel?: string;
|
|
25
45
|
}
|
|
26
46
|
|
|
47
|
+
// Banner variant config derived from design system (colors.component.alert)
|
|
27
48
|
const variantConfig: Record<
|
|
28
49
|
InfoType,
|
|
29
50
|
{
|
|
30
51
|
icon: string;
|
|
31
52
|
container: string;
|
|
32
53
|
iconColor: string;
|
|
33
|
-
|
|
34
|
-
descriptionColor: string;
|
|
54
|
+
textColor: string;
|
|
35
55
|
}
|
|
36
56
|
> = {
|
|
37
57
|
[InfoType.INFO]: {
|
|
38
58
|
icon: '\u2139',
|
|
39
|
-
container:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
titleColor: 'text-blue-900 dark:text-blue-100',
|
|
43
|
-
descriptionColor: 'text-blue-700 dark:text-blue-300',
|
|
59
|
+
container: dsInfo.container,
|
|
60
|
+
iconColor: alert.info.icon,
|
|
61
|
+
textColor: dsInfo.text,
|
|
44
62
|
},
|
|
45
63
|
[InfoType.SUCCESS]: {
|
|
46
64
|
icon: '\u2713',
|
|
47
|
-
container:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
titleColor: 'text-green-900 dark:text-green-100',
|
|
51
|
-
descriptionColor: 'text-green-700 dark:text-green-300',
|
|
65
|
+
container: dsSuccess.container,
|
|
66
|
+
iconColor: alert.success.icon,
|
|
67
|
+
textColor: dsSuccess.text,
|
|
52
68
|
},
|
|
53
69
|
[InfoType.WARNING]: {
|
|
54
70
|
icon: '\u26A0',
|
|
55
|
-
container:
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
titleColor: 'text-yellow-900 dark:text-amber-100',
|
|
59
|
-
descriptionColor: 'text-yellow-700 dark:text-amber-300',
|
|
71
|
+
container: dsWarning.container,
|
|
72
|
+
iconColor: alert.warning.icon,
|
|
73
|
+
textColor: dsWarning.text,
|
|
60
74
|
},
|
|
61
75
|
[InfoType.ERROR]: {
|
|
62
76
|
icon: '\u2717',
|
|
63
|
-
container:
|
|
64
|
-
iconColor:
|
|
65
|
-
|
|
66
|
-
descriptionColor: 'text-red-700 dark:text-red-300',
|
|
77
|
+
container: dsError.container,
|
|
78
|
+
iconColor: alert.error.icon,
|
|
79
|
+
textColor: dsError.text,
|
|
67
80
|
},
|
|
68
81
|
};
|
|
69
82
|
|
|
@@ -206,11 +219,9 @@ export const Banner: React.FC<BannerProps> = ({
|
|
|
206
219
|
|
|
207
220
|
{/* Content */}
|
|
208
221
|
<View className='flex-1 min-w-0'>
|
|
209
|
-
<Text className={cn('font-semibold', config.
|
|
210
|
-
{title}
|
|
211
|
-
</Text>
|
|
222
|
+
<Text className={cn('font-semibold', config.textColor)}>{title}</Text>
|
|
212
223
|
{description ? (
|
|
213
|
-
<Text className={cn('text-sm mt-1', config.
|
|
224
|
+
<Text className={cn('text-sm mt-1', config.textColor)}>
|
|
214
225
|
{description}
|
|
215
226
|
</Text>
|
|
216
227
|
) : null}
|
|
@@ -2,6 +2,9 @@ import * as React from 'react';
|
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { View, Text, Pressable, ScrollView } from 'react-native';
|
|
4
4
|
import { cn } from '../../lib/utils';
|
|
5
|
+
import { designTokens } from '@sudobility/design';
|
|
6
|
+
|
|
7
|
+
const { typography } = designTokens;
|
|
5
8
|
|
|
6
9
|
export interface BreadcrumbItem {
|
|
7
10
|
/** Item label */
|
|
@@ -64,9 +67,9 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
|
|
|
64
67
|
|
|
65
68
|
// Size configurations
|
|
66
69
|
const sizeClasses = {
|
|
67
|
-
sm:
|
|
68
|
-
md:
|
|
69
|
-
lg:
|
|
70
|
+
sm: typography.size.sm,
|
|
71
|
+
md: typography.size.base,
|
|
72
|
+
lg: typography.size.lg,
|
|
70
73
|
};
|
|
71
74
|
|
|
72
75
|
// Determine which items to display
|
|
@@ -98,7 +101,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
|
|
|
98
101
|
<Text
|
|
99
102
|
className={cn(
|
|
100
103
|
sizeClasses[size],
|
|
101
|
-
|
|
104
|
+
`text-gray-900 dark:text-white ${typography.weight.medium}`
|
|
102
105
|
)}
|
|
103
106
|
accessibilityRole='text'
|
|
104
107
|
>
|
|
@@ -136,7 +139,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
|
|
|
136
139
|
className={cn(
|
|
137
140
|
sizeClasses[size],
|
|
138
141
|
isCurrent
|
|
139
|
-
?
|
|
142
|
+
? `text-gray-900 dark:text-white ${typography.weight.medium}`
|
|
140
143
|
: 'text-gray-600 dark:text-gray-400'
|
|
141
144
|
)}
|
|
142
145
|
>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { View, Text, Pressable } from 'react-native';
|
|
3
3
|
import { cn } from '../../lib/utils';
|
|
4
|
+
import { designTokens } from '@sudobility/design';
|
|
5
|
+
|
|
6
|
+
const { typography } = designTokens;
|
|
4
7
|
|
|
5
8
|
export interface BreadcrumbNavItem {
|
|
6
9
|
/** Item label */
|
|
@@ -49,12 +52,23 @@ export const BreadcrumbNav: React.FC<BreadcrumbNavProps> = ({
|
|
|
49
52
|
{items.map((item, index) => (
|
|
50
53
|
<React.Fragment key={index}>
|
|
51
54
|
{index > 0 && (
|
|
52
|
-
<Text
|
|
55
|
+
<Text
|
|
56
|
+
className={cn(
|
|
57
|
+
'text-gray-400 dark:text-gray-600',
|
|
58
|
+
typography.size.sm
|
|
59
|
+
)}
|
|
60
|
+
>
|
|
53
61
|
{typeof separator === 'string' ? separator : separator}
|
|
54
62
|
</Text>
|
|
55
63
|
)}
|
|
56
64
|
{index === items.length - 1 ? (
|
|
57
|
-
<Text
|
|
65
|
+
<Text
|
|
66
|
+
className={cn(
|
|
67
|
+
'text-gray-900 dark:text-white',
|
|
68
|
+
typography.weight.medium,
|
|
69
|
+
typography.size.sm
|
|
70
|
+
)}
|
|
71
|
+
>
|
|
58
72
|
{item.label}
|
|
59
73
|
</Text>
|
|
60
74
|
) : (
|
|
@@ -63,7 +77,12 @@ export const BreadcrumbNav: React.FC<BreadcrumbNavProps> = ({
|
|
|
63
77
|
accessibilityRole='link'
|
|
64
78
|
accessibilityLabel={item.label}
|
|
65
79
|
>
|
|
66
|
-
<Text
|
|
80
|
+
<Text
|
|
81
|
+
className={cn(
|
|
82
|
+
'text-blue-600 dark:text-blue-400',
|
|
83
|
+
typography.size.sm
|
|
84
|
+
)}
|
|
85
|
+
>
|
|
67
86
|
{item.label}
|
|
68
87
|
</Text>
|
|
69
88
|
</Pressable>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { View, Text, Pressable } from 'react-native';
|
|
3
3
|
import { cn } from '../../lib/utils';
|
|
4
|
+
import { designTokens } from '@sudobility/design';
|
|
4
5
|
|
|
5
6
|
export interface CTAButton {
|
|
6
7
|
/** Button label */
|
|
@@ -68,16 +69,17 @@ export const CTASection: React.FC<CTASectionProps> = ({
|
|
|
68
69
|
lg: 'py-16 px-8',
|
|
69
70
|
};
|
|
70
71
|
|
|
72
|
+
// Typography sizing from design tokens
|
|
71
73
|
const titleSizeClasses = {
|
|
72
|
-
sm: '
|
|
73
|
-
md: '
|
|
74
|
-
lg: '
|
|
74
|
+
sm: designTokens.typography.size['2xl'],
|
|
75
|
+
md: designTokens.typography.size['3xl'],
|
|
76
|
+
lg: designTokens.typography.size['4xl'],
|
|
75
77
|
};
|
|
76
78
|
|
|
77
79
|
const descriptionSizeClasses = {
|
|
78
|
-
sm:
|
|
79
|
-
md:
|
|
80
|
-
lg:
|
|
80
|
+
sm: designTokens.typography.size.base,
|
|
81
|
+
md: designTokens.typography.size.lg,
|
|
82
|
+
lg: designTokens.typography.size.xl,
|
|
81
83
|
};
|
|
82
84
|
|
|
83
85
|
const textColorClass = textColor === 'light' ? 'text-white' : 'text-gray-900';
|