@stack-spot/citric-react 0.22.0 → 0.23.0
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/citric.css +17 -4
- package/dist/components/Accordion.d.ts +34 -0
- package/dist/components/Accordion.d.ts.map +1 -1
- package/dist/components/Accordion.js +34 -0
- package/dist/components/Accordion.js.map +1 -1
- package/dist/components/Alert.d.ts +8 -0
- package/dist/components/Alert.d.ts.map +1 -1
- package/dist/components/Alert.js +8 -0
- package/dist/components/Alert.js.map +1 -1
- package/dist/components/AsyncContent.d.ts +18 -4
- package/dist/components/AsyncContent.d.ts.map +1 -1
- package/dist/components/AsyncContent.js +18 -4
- package/dist/components/AsyncContent.js.map +1 -1
- package/dist/components/Avatar.d.ts +9 -0
- package/dist/components/Avatar.d.ts.map +1 -1
- package/dist/components/Avatar.js +11 -1
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/AvatarGroup.d.ts +8 -0
- package/dist/components/AvatarGroup.d.ts.map +1 -1
- package/dist/components/AvatarGroup.js +8 -0
- package/dist/components/AvatarGroup.js.map +1 -1
- package/dist/components/Badge.d.ts +13 -2
- package/dist/components/Badge.d.ts.map +1 -1
- package/dist/components/Badge.js +14 -3
- package/dist/components/Badge.js.map +1 -1
- package/dist/components/Blockquote.d.ts +8 -0
- package/dist/components/Blockquote.d.ts.map +1 -1
- package/dist/components/Blockquote.js +8 -0
- package/dist/components/Blockquote.js.map +1 -1
- package/dist/components/Breadcrumb.d.ts +8 -0
- package/dist/components/Breadcrumb.d.ts.map +1 -1
- package/dist/components/Breadcrumb.js +10 -1
- package/dist/components/Breadcrumb.js.map +1 -1
- package/dist/components/Button.d.ts +11 -0
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +14 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Card.d.ts +15 -4
- package/dist/components/Card.d.ts.map +1 -1
- package/dist/components/Card.js +13 -1
- package/dist/components/Card.js.map +1 -1
- package/dist/components/Checkbox.d.ts +14 -0
- package/dist/components/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox.js +14 -0
- package/dist/components/Checkbox.js.map +1 -1
- package/dist/components/CheckboxGroup.d.ts +22 -3
- package/dist/components/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/CheckboxGroup.js +23 -3
- package/dist/components/CheckboxGroup.js.map +1 -1
- package/dist/components/Circle.d.ts +16 -0
- package/dist/components/Circle.d.ts.map +1 -1
- package/dist/components/Circle.js +8 -0
- package/dist/components/Circle.js.map +1 -1
- package/dist/components/CitricComponent.d.ts +14 -0
- package/dist/components/CitricComponent.d.ts.map +1 -1
- package/dist/components/CitricComponent.js +14 -0
- package/dist/components/CitricComponent.js.map +1 -1
- package/dist/components/Divider.d.ts +4 -1
- package/dist/components/Divider.d.ts.map +1 -1
- package/dist/components/Divider.js +4 -1
- package/dist/components/Divider.js.map +1 -1
- package/dist/components/ErrorBoundary.d.ts +13 -0
- package/dist/components/ErrorBoundary.d.ts.map +1 -1
- package/dist/components/ErrorBoundary.js +13 -0
- package/dist/components/ErrorBoundary.js.map +1 -1
- package/dist/components/ErrorMessage.js +1 -1
- package/dist/components/ErrorMessage.js.map +1 -1
- package/dist/components/FallbackBoundary.d.ts +12 -1
- package/dist/components/FallbackBoundary.d.ts.map +1 -1
- package/dist/components/FallbackBoundary.js +12 -1
- package/dist/components/FallbackBoundary.js.map +1 -1
- package/dist/components/Favorite.d.ts +12 -0
- package/dist/components/Favorite.d.ts.map +1 -1
- package/dist/components/Favorite.js +12 -0
- package/dist/components/Favorite.js.map +1 -1
- package/dist/components/FieldGroup.d.ts +13 -0
- package/dist/components/FieldGroup.d.ts.map +1 -1
- package/dist/components/FieldGroup.js +13 -0
- package/dist/components/FieldGroup.js.map +1 -1
- package/dist/components/Form.d.ts +18 -0
- package/dist/components/Form.d.ts.map +1 -1
- package/dist/components/Form.js +18 -0
- package/dist/components/Form.js.map +1 -1
- package/dist/components/FormGroup.d.ts +12 -0
- package/dist/components/FormGroup.d.ts.map +1 -1
- package/dist/components/FormGroup.js +12 -0
- package/dist/components/FormGroup.js.map +1 -1
- package/dist/components/IconBox.d.ts +33 -8
- package/dist/components/IconBox.d.ts.map +1 -1
- package/dist/components/IconBox.js +37 -11
- package/dist/components/IconBox.js.map +1 -1
- package/dist/components/ImageBox.d.ts +32 -8
- package/dist/components/ImageBox.d.ts.map +1 -1
- package/dist/components/ImageBox.js +36 -11
- package/dist/components/ImageBox.js.map +1 -1
- package/dist/components/ImageWithFallback.d.ts +18 -0
- package/dist/components/ImageWithFallback.d.ts.map +1 -1
- package/dist/components/ImageWithFallback.js +11 -0
- package/dist/components/ImageWithFallback.js.map +1 -1
- package/dist/components/Input.d.ts +15 -3
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/Input.js +16 -3
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Link.d.ts +6 -0
- package/dist/components/Link.d.ts.map +1 -1
- package/dist/components/Link.js +6 -0
- package/dist/components/Link.js.map +1 -1
- package/dist/components/MenuOverlay/index.d.ts +20 -0
- package/dist/components/MenuOverlay/index.d.ts.map +1 -1
- package/dist/components/MenuOverlay/index.js +20 -0
- package/dist/components/MenuOverlay/index.js.map +1 -1
- package/dist/components/Overlay/index.d.ts +16 -0
- package/dist/components/Overlay/index.d.ts.map +1 -1
- package/dist/components/Overlay/index.js +16 -0
- package/dist/components/Overlay/index.js.map +1 -1
- package/dist/components/Pagination.d.ts +27 -8
- package/dist/components/Pagination.d.ts.map +1 -1
- package/dist/components/Pagination.js +18 -5
- package/dist/components/Pagination.js.map +1 -1
- package/dist/components/ProgressBar.d.ts +14 -0
- package/dist/components/ProgressBar.d.ts.map +1 -1
- package/dist/components/ProgressBar.js +14 -0
- package/dist/components/ProgressBar.js.map +1 -1
- package/dist/components/ProgressCircular.d.ts +14 -0
- package/dist/components/ProgressCircular.d.ts.map +1 -1
- package/dist/components/ProgressCircular.js +14 -0
- package/dist/components/ProgressCircular.js.map +1 -1
- package/dist/components/RadioGroup.d.ts +24 -3
- package/dist/components/RadioGroup.d.ts.map +1 -1
- package/dist/components/RadioGroup.js +25 -3
- package/dist/components/RadioGroup.js.map +1 -1
- package/dist/components/Rating.d.ts +10 -0
- package/dist/components/Rating.d.ts.map +1 -1
- package/dist/components/Rating.js +10 -0
- package/dist/components/Rating.js.map +1 -1
- package/dist/components/Select/RichSelect.d.ts +3 -5
- package/dist/components/Select/RichSelect.d.ts.map +1 -1
- package/dist/components/Select/RichSelect.js +4 -4
- package/dist/components/Select/RichSelect.js.map +1 -1
- package/dist/components/Select/SimpleSelect.d.ts +2 -3
- package/dist/components/Select/SimpleSelect.d.ts.map +1 -1
- package/dist/components/Select/SimpleSelect.js +2 -3
- package/dist/components/Select/SimpleSelect.js.map +1 -1
- package/dist/components/Select/index.d.ts +25 -2
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +26 -3
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Select/types.d.ts +1 -2
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/components/SelectBox.d.ts +31 -2
- package/dist/components/SelectBox.d.ts.map +1 -1
- package/dist/components/SelectBox.js +32 -3
- package/dist/components/SelectBox.js.map +1 -1
- package/dist/components/Skeleton.d.ts +11 -0
- package/dist/components/Skeleton.d.ts.map +1 -1
- package/dist/components/Skeleton.js +11 -0
- package/dist/components/Skeleton.js.map +1 -1
- package/dist/components/Slider.d.ts +12 -0
- package/dist/components/Slider.d.ts.map +1 -1
- package/dist/components/Slider.js +12 -0
- package/dist/components/Slider.js.map +1 -1
- package/dist/components/SmartTable.d.ts +36 -2
- package/dist/components/SmartTable.d.ts.map +1 -1
- package/dist/components/SmartTable.js +37 -3
- package/dist/components/SmartTable.js.map +1 -1
- package/dist/components/Stepper.d.ts +20 -3
- package/dist/components/Stepper.d.ts.map +1 -1
- package/dist/components/Stepper.js +21 -3
- package/dist/components/Stepper.js.map +1 -1
- package/dist/components/Table.d.ts +10 -0
- package/dist/components/Table.d.ts.map +1 -1
- package/dist/components/Table.js +10 -0
- package/dist/components/Table.js.map +1 -1
- package/dist/components/Tabs/TabController.d.ts +14 -0
- package/dist/components/Tabs/TabController.d.ts.map +1 -1
- package/dist/components/Tabs/TabController.js +14 -0
- package/dist/components/Tabs/TabController.js.map +1 -1
- package/dist/components/Tabs/index.d.ts +20 -3
- package/dist/components/Tabs/index.d.ts.map +1 -1
- package/dist/components/Tabs/index.js +21 -3
- package/dist/components/Tabs/index.js.map +1 -1
- package/dist/components/Text.d.ts +16 -2
- package/dist/components/Text.d.ts.map +1 -1
- package/dist/components/Text.js +17 -3
- package/dist/components/Text.js.map +1 -1
- package/dist/components/Textarea.d.ts +11 -1
- package/dist/components/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea.js +12 -2
- package/dist/components/Textarea.js.map +1 -1
- package/dist/components/Tooltip.d.ts +14 -1
- package/dist/components/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip.js +13 -0
- package/dist/components/Tooltip.js.map +1 -1
- package/dist/components/layout.d.ts +41 -7
- package/dist/components/layout.d.ts.map +1 -1
- package/dist/components/layout.js +44 -9
- package/dist/components/layout.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Accordion.tsx +34 -0
- package/src/components/Alert.tsx +8 -0
- package/src/components/AsyncContent.tsx +18 -4
- package/src/components/Avatar.tsx +11 -1
- package/src/components/AvatarGroup.tsx +8 -0
- package/src/components/Badge.tsx +24 -8
- package/src/components/Blockquote.tsx +8 -0
- package/src/components/Breadcrumb.tsx +10 -1
- package/src/components/Button.tsx +17 -2
- package/src/components/Card.tsx +34 -14
- package/src/components/Checkbox.tsx +14 -0
- package/src/components/CheckboxGroup.tsx +61 -40
- package/src/components/Circle.tsx +16 -0
- package/src/components/CitricComponent.ts +14 -0
- package/src/components/Divider.tsx +6 -5
- package/src/components/ErrorBoundary.tsx +13 -0
- package/src/components/ErrorMessage.tsx +1 -1
- package/src/components/FallbackBoundary.tsx +12 -1
- package/src/components/Favorite.tsx +12 -0
- package/src/components/FieldGroup.tsx +13 -0
- package/src/components/Form.tsx +18 -0
- package/src/components/FormGroup.tsx +12 -0
- package/src/components/IconBox.tsx +61 -30
- package/src/components/ImageBox.tsx +60 -30
- package/src/components/ImageWithFallback.tsx +18 -0
- package/src/components/Input.tsx +28 -14
- package/src/components/Link.tsx +6 -0
- package/src/components/MenuOverlay/index.tsx +20 -0
- package/src/components/Overlay/index.tsx +17 -0
- package/src/components/Pagination.tsx +40 -17
- package/src/components/ProgressBar.tsx +14 -0
- package/src/components/ProgressCircular.tsx +14 -0
- package/src/components/RadioGroup.tsx +62 -39
- package/src/components/Rating.tsx +10 -0
- package/src/components/Select/RichSelect.tsx +183 -182
- package/src/components/Select/SimpleSelect.tsx +57 -57
- package/src/components/Select/index.tsx +29 -5
- package/src/components/Select/types.ts +1 -1
- package/src/components/SelectBox.tsx +92 -62
- package/src/components/Skeleton.tsx +11 -0
- package/src/components/Slider.tsx +12 -0
- package/src/components/SmartTable.tsx +91 -56
- package/src/components/Stepper.tsx +76 -57
- package/src/components/Table.tsx +10 -0
- package/src/components/Tabs/TabController.ts +14 -0
- package/src/components/Tabs/index.tsx +56 -37
- package/src/components/Text.ts +36 -21
- package/src/components/Textarea.tsx +14 -4
- package/src/components/Tooltip.tsx +14 -1
- package/src/components/layout.tsx +56 -13
- package/src/index.ts +0 -1
- package/dist/components/Switch.d.ts +0 -10
- package/dist/components/Switch.d.ts.map +0 -1
- package/dist/components/Switch.js +0 -8
- package/dist/components/Switch.js.map +0 -1
- package/src/components/Switch.tsx +0 -30
package/dist/components/Table.js
CHANGED
|
@@ -5,6 +5,16 @@ import { useEffect, useRef } from 'react';
|
|
|
5
5
|
import { applyCSSVariable } from '../utils/css.js';
|
|
6
6
|
import { withRef } from '../utils/react.js';
|
|
7
7
|
import { CitricComponent } from './CitricComponent.js';
|
|
8
|
+
/**
|
|
9
|
+
* Renders an HTML table. Use its props for customizing the appearance.
|
|
10
|
+
*
|
|
11
|
+
* - If you need to use Accordion rows, use `<Tr>`instead of `<tr>`.
|
|
12
|
+
* - If you need to sort columns, use `<Th>`instead of `<th>`.
|
|
13
|
+
*
|
|
14
|
+
* This works exactly like the HTML tag "table".
|
|
15
|
+
*
|
|
16
|
+
* Attention: prefer using the component "SmartTable". Use this only if you need full control over the table.
|
|
17
|
+
*/
|
|
8
18
|
export const Table = withRef(({ appearance, stripped, compressed, showBorders, showHeaderBorders, showRowBorders, rounded, roundedRows, uppercaseHeader, className, children, accordionRows, ...props }) => {
|
|
9
19
|
const classes = listToClass([
|
|
10
20
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA2GnD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,EAC5B,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAClI,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,EACtB,EAAE,EAAE;IACf,MAAM,OAAO,GAAG,WAAW,CAAC;QAC1B,SAAS;QACT,QAAQ,IAAI,UAAU;QACtB,UAAU,IAAI,YAAY;QAC1B,WAAW,IAAI,UAAU;QACzB,iBAAiB,KAAK,KAAK,IAAI,mBAAmB;QAClD,cAAc,IAAI,eAAe;QACjC,OAAO,KAAK,KAAK,IAAI,QAAQ;QAC7B,WAAW,KAAK,KAAK,IAAI,aAAa;QACtC,eAAe,IAAI,kBAAkB;QACrC,aAAa,IAAI,gBAAgB;KAClC,CAAC,CAAA;IACF,OAAO,CACL,KAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,qBAAkB,UAAU,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACtG,QAAQ,GACO,CACnB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAW,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,IAAI,GAAuB,CAAA;IAC3B,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA;IACjE,IAAI,MAAM,IAAI,CAAC,SAAS;QAAE,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAA;IACxF,IAAI,MAAM,IAAI,SAAS,KAAK,KAAK;QAAE,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAA;IACnG,IAAI,MAAM,IAAI,SAAS,KAAK,MAAM;QAAE,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;IAExF,SAAS,UAAU;QACjB,IAAI,CAAC,SAAS;YAAE,MAAM,EAAE,CAAC,KAAK,CAAC,CAAA;aAC1B,IAAI,SAAS,KAAK,KAAK;YAAE,MAAM,EAAE,CAAC,MAAM,CAAC,CAAA;;YACzC,MAAM,EAAE,CAAC,SAAS,CAAC,CAAA;IAC1B,CAAC;IAED,OAAO,CACL,aACE,SAAS,EAAE,WAAW,CAAC,CAAC,MAAM,IAAI,UAAU,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,EACpE,OAAO,EAAE,MAAM,CAAA,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACvC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC5D,GAAG,EACf,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,KAC5B,KAAK,YAER,QAAQ,GACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,EAAE,GAAG,OAAO,CACvB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAW,EAAE,EAAE;IAC7H,MAAM,QAAQ,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAA;IACzD,MAAM,GAAG,GAAG,QAA8D,IAAI,QAAQ,CAAA;IAEtF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS;YAAE,OAAM;QACtB,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,oCAAoC,CAAC,CAAA;QACnG,IAAI,QAAQ,YAAY,WAAW,EAAE,CAAC;YACpC,MAAM,QAAQ,GAAG,CAAC,CAAQ,EAAE,EAAE;gBAC5B,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,gBAAgB,CAAC;oBAAE,OAAM;gBACnE,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;oBACrB,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;oBAChD,GAAG,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;gBACtC,CAAC;qBAAM,CAAC;oBACN,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;oBAC/C,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;gBAC3C,CAAC;YACH,CAAC,CAAA;YACD,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;YAC7C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAC/D,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,CACL,aACE,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,SAAS,IAAI,WAAW,EAAE,gBAAgB,KAAK,KAAK,IAAI,WAAW,CAAC,CAAC,EACxG,OAAO,EAAE,gBAAgB,KAAK,KAAK;YACjC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;gBACN,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,oCAAoC,CAAC,CAAA;gBACjF,IAAI,QAAQ,YAAY,gBAAgB,IAAI,CAAC,CAAC,MAAM,KAAK,QAAQ;oBAAE,QAAQ,CAAC,KAAK,EAAE,CAAA;gBACnF,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;YACd,CAAC;YACD,CAAC,CAAC,OAAO,EAEX,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,EAAE,kBAAkB,CAAC,iBACnD,SAAS,KAClB,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAEvC,QAAQ,GACN,CACN,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,aAAa,EAAE,mCAAmC;QAClD,cAAc,EAAE,oCAAoC;QACpD,QAAQ,EAAE,0BAA0B;KACrC;IACD,EAAE,EAAE;QACF,aAAa,EAAE,yCAAyC;QACxD,cAAc,EAAE,2CAA2C;QAC3D,QAAQ,EAAE,kCAAkC;KAC7C;CACmB,CAAA"}
|
|
@@ -3,9 +3,23 @@ export declare class TabController<Key extends string> extends ValueController<K
|
|
|
3
3
|
private tabOrder;
|
|
4
4
|
constructor(tabOrder: Key[], value: Key);
|
|
5
5
|
private getCurrentIndex;
|
|
6
|
+
/**
|
|
7
|
+
* @returns true if there's another tab after the one currently selected. False otherwise.
|
|
8
|
+
*/
|
|
6
9
|
hasNext(): boolean;
|
|
10
|
+
/**
|
|
11
|
+
* @returns true if there's a tab before the one currently selected. False otherwise.
|
|
12
|
+
*/
|
|
7
13
|
hasPrevious(): boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Selects the tab on the right of the one currently selected. If there's no next tab, nothing happens.
|
|
16
|
+
* @returns true if the tab is changed, false otherwise.
|
|
17
|
+
*/
|
|
8
18
|
next(): boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Selects the tab on the left of the one currently selected. If there's no previous tab, nothing happens.
|
|
21
|
+
* @returns true if the tab is changed, false otherwise.
|
|
22
|
+
*/
|
|
9
23
|
previous(): boolean;
|
|
10
24
|
}
|
|
11
25
|
//# sourceMappingURL=TabController.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabController.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,qBAAa,aAAa,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,eAAe,CAAC,GAAG,CAAC;IACzE,OAAO,CAAC,QAAQ,CAAO;gBAEX,QAAQ,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG;IAKvC,OAAO,CAAC,eAAe;IAIvB,OAAO,IAAI,OAAO;IAKlB,WAAW,IAAI,OAAO;IAKtB,IAAI,IAAI,OAAO;IAQf,QAAQ,IAAI,OAAO;CAOpB"}
|
|
1
|
+
{"version":3,"file":"TabController.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,qBAAa,aAAa,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,eAAe,CAAC,GAAG,CAAC;IACzE,OAAO,CAAC,QAAQ,CAAO;gBAEX,QAAQ,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG;IAKvC,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,OAAO,IAAI,OAAO;IAKlB;;OAEG;IACH,WAAW,IAAI,OAAO;IAKtB;;;OAGG;IACH,IAAI,IAAI,OAAO;IAQf;;;OAGG;IACH,QAAQ,IAAI,OAAO;CAOpB"}
|
|
@@ -13,14 +13,24 @@ export class TabController extends ValueController {
|
|
|
13
13
|
getCurrentIndex() {
|
|
14
14
|
return this.tabOrder.findIndex(t => t === this.value);
|
|
15
15
|
}
|
|
16
|
+
/**
|
|
17
|
+
* @returns true if there's another tab after the one currently selected. False otherwise.
|
|
18
|
+
*/
|
|
16
19
|
hasNext() {
|
|
17
20
|
const current = this.getCurrentIndex();
|
|
18
21
|
return current > -1 && current + 1 < this.tabOrder.length;
|
|
19
22
|
}
|
|
23
|
+
/**
|
|
24
|
+
* @returns true if there's a tab before the one currently selected. False otherwise.
|
|
25
|
+
*/
|
|
20
26
|
hasPrevious() {
|
|
21
27
|
const current = this.getCurrentIndex();
|
|
22
28
|
return current > -1 && current - 1 >= 0;
|
|
23
29
|
}
|
|
30
|
+
/**
|
|
31
|
+
* Selects the tab on the right of the one currently selected. If there's no next tab, nothing happens.
|
|
32
|
+
* @returns true if the tab is changed, false otherwise.
|
|
33
|
+
*/
|
|
24
34
|
next() {
|
|
25
35
|
if (this.hasNext()) {
|
|
26
36
|
this.setValue(this.tabOrder[this.getCurrentIndex() + 1]);
|
|
@@ -28,6 +38,10 @@ export class TabController extends ValueController {
|
|
|
28
38
|
}
|
|
29
39
|
return false;
|
|
30
40
|
}
|
|
41
|
+
/**
|
|
42
|
+
* Selects the tab on the left of the one currently selected. If there's no previous tab, nothing happens.
|
|
43
|
+
* @returns true if the tab is changed, false otherwise.
|
|
44
|
+
*/
|
|
31
45
|
previous() {
|
|
32
46
|
if (this.hasPrevious()) {
|
|
33
47
|
this.setValue(this.tabOrder[this.getCurrentIndex() - 1]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabController.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,MAAM,OAAO,aAAkC,SAAQ,eAAoB;IAGzE,YAAY,QAAe,EAAE,KAAU;QACrC,KAAK,CAAC,KAAK,CAAC,CAAA;QAHN;;;;;WAAe;QAIrB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAC1B,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;IACvD,CAAC;IAED,OAAO;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACtC,OAAO,OAAO,GAAG,CAAC,CAAC,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC3D,CAAC;IAED,WAAW;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACtC,OAAO,OAAO,GAAG,CAAC,CAAC,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC;IAED,IAAI;QACF,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACxD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACxD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;CACF"}
|
|
1
|
+
{"version":3,"file":"TabController.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,MAAM,OAAO,aAAkC,SAAQ,eAAoB;IAGzE,YAAY,QAAe,EAAE,KAAU;QACrC,KAAK,CAAC,KAAK,CAAC,CAAA;QAHN;;;;;WAAe;QAIrB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAC1B,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;IACvD,CAAC;IAED;;OAEG;IACH,OAAO;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACtC,OAAO,OAAO,GAAG,CAAC,CAAC,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC3D,CAAC;IAED;;OAEG;IACH,WAAW;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACtC,OAAO,OAAO,GAAG,CAAC,CAAC,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACxD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;OAGG;IACH,QAAQ;QACN,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACxD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;CACF"}
|
|
@@ -1,7 +1,24 @@
|
|
|
1
1
|
import { TabController } from './TabController.js';
|
|
2
2
|
import { TabsProps } from './types.js';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Builds a Tab selector. The content of a tab is a React component and it can suspend, i.e. tabs can be asynchronously loaded.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
*
|
|
8
|
+
* ```
|
|
9
|
+
* const tabs: Tab[] = useMemo(() => [
|
|
10
|
+
* { key: 'tab1', label: 'Tab 1', content: <><h1>First tab</h1><p>Content of the first tab</p></> },
|
|
11
|
+
* { key: 'tab2', label: 'Tab 2', content: <><h1>Second tab</h1><p>Content of the second tab</p></> },
|
|
12
|
+
* { key: 'tab3', label: 'Tab 3', content: <><h1>Third tab</h1><p>Content of the third tab</p></> },
|
|
13
|
+
* ], [])
|
|
14
|
+
*
|
|
15
|
+
* return <Tabs tabs={tabs} />
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare const Tabs: <Key extends string>({ tabs, value, equallySized, onChange, controller: ctrl, className, ...props }: TabsProps<Key>) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
/**
|
|
20
|
+
* Request the tab controller of the current context. Use this to control the tabs in the parent components. This returns undefined when
|
|
21
|
+
* no tab context is found.
|
|
22
|
+
*/
|
|
4
23
|
export declare function useTabController<Key extends string = string>(): TabController<Key> | undefined;
|
|
5
|
-
export declare const Tabs: typeof _Tabs;
|
|
6
|
-
export {};
|
|
7
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKnC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKnC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,GACD,GAAG,SAAS,MAAM,kFAAkF,SAAS,CAAC,GAAG,CAAC,4CAuCjI,CAAA;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAE9F"}
|
|
@@ -10,7 +10,22 @@ import { Center } from '../layout.js';
|
|
|
10
10
|
import { TabController } from './TabController.js';
|
|
11
11
|
import { findSelectedIndex } from './utils.js';
|
|
12
12
|
const ctx = createContext(undefined);
|
|
13
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Builds a Tab selector. The content of a tab is a React component and it can suspend, i.e. tabs can be asynchronously loaded.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
*
|
|
18
|
+
* ```
|
|
19
|
+
* const tabs: Tab[] = useMemo(() => [
|
|
20
|
+
* { key: 'tab1', label: 'Tab 1', content: <><h1>First tab</h1><p>Content of the first tab</p></> },
|
|
21
|
+
* { key: 'tab2', label: 'Tab 2', content: <><h1>Second tab</h1><p>Content of the second tab</p></> },
|
|
22
|
+
* { key: 'tab3', label: 'Tab 3', content: <><h1>Third tab</h1><p>Content of the third tab</p></> },
|
|
23
|
+
* ], [])
|
|
24
|
+
*
|
|
25
|
+
* return <Tabs tabs={tabs} />
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export const Tabs = withRef(function Tabs({ tabs, value, equallySized, onChange, controller: ctrl, className, ...props }) {
|
|
14
29
|
const controller = useMemo(() => ctrl ?? new TabController(tabs.map(t => t.key), value || tabs[0]?.key), []);
|
|
15
30
|
const t = useTranslate(dictionary);
|
|
16
31
|
const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()));
|
|
@@ -24,7 +39,11 @@ function _Tabs({ tabs, value, equallySized, onChange, controller: ctrl, classNam
|
|
|
24
39
|
}), [tabs]);
|
|
25
40
|
const nav = useMemo(() => tabs.map(({ key, label, disabled }, index) => (_jsxs("label", { children: [_jsx("input", { type: "radio", role: "tab", checked: index === selectedIndex, onChange: () => controller.setValue(key), disabled: disabled }), label || key] }, key))), [tabs, selectedIndex]);
|
|
26
41
|
return (_jsx(ctx.Provider, { value: controller, children: _jsxs(CitricComponent, { tag: "div", component: "tabs", className: listToClass([className, equallySized && 'equally-sized']), ...props, children: [_jsx("nav", { children: nav }), _jsx("section", { children: _jsx(ErrorBoundary, { message: t.error, children: _jsx(Suspense, { fallback: _jsx(Center, { style: { padding: '20px' }, children: _jsx(ProgressCircular, {}) }), children: selectedIndex === -1 ? null : tabs[selectedIndex]?.content }) }, selectedIndex) })] }) }));
|
|
27
|
-
}
|
|
42
|
+
});
|
|
43
|
+
/**
|
|
44
|
+
* Request the tab controller of the current context. Use this to control the tabs in the parent components. This returns undefined when
|
|
45
|
+
* no tab context is found.
|
|
46
|
+
*/
|
|
28
47
|
export function useTabController() {
|
|
29
48
|
return useContext(ctx);
|
|
30
49
|
}
|
|
@@ -36,5 +55,4 @@ const dictionary = {
|
|
|
36
55
|
error: 'Ocorreu um erro ao carregar a aba.',
|
|
37
56
|
},
|
|
38
57
|
};
|
|
39
|
-
export const Tabs = withRef(_Tabs);
|
|
40
58
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzF,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE3C,MAAM,GAAG,GAAG,aAAa,CAAiC,SAAS,CAAC,CAAA;AAEpE,SAAS,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -31,10 +31,24 @@ export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends
|
|
|
31
31
|
nowrapEllipsis?: boolean;
|
|
32
32
|
}
|
|
33
33
|
export type TextProps<T extends SupportedTags> = HTMLTag[T] & BaseTextProps<T>;
|
|
34
|
-
|
|
34
|
+
/**
|
|
35
|
+
* Renders a text. The tag can be set by the property "tag". If unset, the tag rendered will be based on the property "appearance". If
|
|
36
|
+
* "appearance" is also unset, the tag "p" is rendered.
|
|
37
|
+
*
|
|
38
|
+
* Texts have no margin by default, to enable margins, use `showMargins = true`.
|
|
39
|
+
*
|
|
40
|
+
* If the appearance is not set, it will be inherited from the parent.
|
|
41
|
+
*
|
|
42
|
+
* A font can be applied to a text without this component, just use `{ font: theme.font.$textAppearance }` in your style.
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```
|
|
46
|
+
* <Text appearance="body2">Hello World!</Text>
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
49
|
+
export declare const Text: <T extends SupportedTags>({ tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }: TextProps<T>) => import("react").DetailedReactHTMLElement<{
|
|
35
50
|
className: string;
|
|
36
51
|
style: import("react").CSSProperties | undefined;
|
|
37
52
|
} & Omit<TextProps<T>, "className" | "style" | "color" | "children" | "weight" | "appearance" | "tag" | "align" | "showMargins" | "nowrapEllipsis">, HTMLElement>;
|
|
38
|
-
export declare const Text: typeof _Text;
|
|
39
53
|
export {};
|
|
40
54
|
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAI7D,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,EAAE,GAAG,KAAK,CAAA;AAEvE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,SAAS;IACvF;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAoC9E,
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAI7D,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,EAAE,GAAG,KAAK,CAAA;AAEvE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,SAAS;IACvF;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAoC9E;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,GACD,CAAC,SAAS,aAAa,gHAC2E,SAAS,CAAC,CAAC,CAAC;;;iKAkB7H,CAAA"}
|
package/dist/components/Text.js
CHANGED
|
@@ -34,7 +34,22 @@ const appearanceToTag = {
|
|
|
34
34
|
subtitle3: 'p',
|
|
35
35
|
subtitle4: 'p',
|
|
36
36
|
};
|
|
37
|
-
|
|
37
|
+
/**
|
|
38
|
+
* Renders a text. The tag can be set by the property "tag". If unset, the tag rendered will be based on the property "appearance". If
|
|
39
|
+
* "appearance" is also unset, the tag "p" is rendered.
|
|
40
|
+
*
|
|
41
|
+
* Texts have no margin by default, to enable margins, use `showMargins = true`.
|
|
42
|
+
*
|
|
43
|
+
* If the appearance is not set, it will be inherited from the parent.
|
|
44
|
+
*
|
|
45
|
+
* A font can be applied to a text without this component, just use `{ font: theme.font.$textAppearance }` in your style.
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```
|
|
49
|
+
* <Text appearance="body2">Hello World!</Text>
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
export const Text = withRef(function Text({ tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }) {
|
|
38
53
|
const renderedTag = tag || appearanceToTag[appearance || 'body2'];
|
|
39
54
|
const renderedAppearance = appearance || (tag ? tagToAppearance[tag] : undefined);
|
|
40
55
|
if (!appearance && !showMargins)
|
|
@@ -50,6 +65,5 @@ function _Text({ tag, appearance, color, showMargins, weight, align, nowrapEllip
|
|
|
50
65
|
style: applyColor(style, color),
|
|
51
66
|
...props,
|
|
52
67
|
}, children);
|
|
53
|
-
}
|
|
54
|
-
export const Text = withRef(_Text);
|
|
68
|
+
});
|
|
55
69
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAqCxC,MAAM,eAAe,GAAsD;IACzE,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,CAAC,EAAE,OAAO;IACV,GAAG,EAAE,OAAO;CACb,CAAA;AAED,MAAM,eAAe,GAA0C;IAC7D,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;CACf,CAAA;AAED,SAAS,
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAqCxC,MAAM,eAAe,GAAsD;IACzE,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,CAAC,EAAE,OAAO;IACV,GAAG,EAAE,OAAO;CACb,CAAA;AAED,MAAM,eAAe,GAA0C;IAC7D,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;CACf,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CACzB,SAAS,IAAI,CACX,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;IAE1H,MAAM,WAAW,GAAG,GAAG,IAAI,eAAe,CAAC,UAAU,IAAI,OAAO,CAAC,CAAA;IACjE,MAAM,kBAAkB,GAAG,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACjF,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW;QAAE,KAAK,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,CAAA;IAChE,IAAI,MAAM;QAAE,KAAK,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IACpD,IAAI,KAAK;QAAE,KAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,CAAA;IACjD,IAAI,cAAc;QAAE,KAAK,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,CAAA;IAC5G,OAAO,aAAa,CAClB,WAAW,EACX;QACE,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC,SAAS,EAAE,WAAW,IAAI,mBAAmB,CAAC,CAAC,EAAE,kBAAkB,CAAC;QAChH,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;QAC/B,GAAG,KAAK;KACT,EACD,QAAQ,CACT,CAAA;AACH,CAAC,CACF,CAAA"}
|
|
@@ -6,6 +6,16 @@ export interface BaseTextareaProps extends WithColorScheme {
|
|
|
6
6
|
ref?: React.MutableRefObject<HTMLTextAreaElement | null>;
|
|
7
7
|
}
|
|
8
8
|
export type TextareaProps = ControlledTextarea & BaseTextareaProps;
|
|
9
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Renders a textarea HTML element. With the difference that the value is not determined by the children, but the property "value" instead.
|
|
11
|
+
*
|
|
12
|
+
* Attention: "onChange" receives the new value, not the event.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```
|
|
16
|
+
* const [value, setValue] = useState('')
|
|
17
|
+
* return <Textarea value={value} onChange={setValue} />
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
10
20
|
export declare const Textarea: ({ value, onChange, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
21
|
//# sourceMappingURL=Textarea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI9D,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;CAC1D;AAED,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG,iBAAiB,CAAA;AAElE
|
|
1
|
+
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI9D,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;CAC1D;AAED,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG,iBAAiB,CAAA;AAElE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,kCAA2C,aAAa,4CAE5E,CAAA"}
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { withRef } from '../utils/react.js';
|
|
3
3
|
import { CitricComponent } from './CitricComponent.js';
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Renders a textarea HTML element. With the difference that the value is not determined by the children, but the property "value" instead.
|
|
6
|
+
*
|
|
7
|
+
* Attention: "onChange" receives the new value, not the event.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```
|
|
11
|
+
* const [value, setValue] = useState('')
|
|
12
|
+
* return <Textarea value={value} onChange={setValue} />
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export const Textarea = withRef(({ value, onChange, ...props }) => _jsx(CitricComponent, { tag: "textarea", component: "textarea", value: value, onChange: e => onChange?.(e.target.value), ...props }));
|
|
6
16
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAUnD,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAUnD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CAC/E,KAAC,eAAe,IAAC,GAAG,EAAC,UAAU,EAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI,CAC5H,CAAA"}
|
|
@@ -26,6 +26,19 @@ export interface BaseTooltipProps extends Omit<BaseOverlayProps<'div'>, 'tag' |
|
|
|
26
26
|
*/
|
|
27
27
|
disabled?: boolean;
|
|
28
28
|
}
|
|
29
|
-
export type TooltipProps = React.JSX.IntrinsicElements['div'] & BaseTooltipProps;
|
|
29
|
+
export type TooltipProps = Omit<React.JSX.IntrinsicElements['div'], 'content'> & BaseTooltipProps;
|
|
30
|
+
/**
|
|
31
|
+
* Renders a tooltip overlay for its child. By default, the tooltip is rendered on hover, but this can be changed through the property
|
|
32
|
+
* "triggerOn".
|
|
33
|
+
*
|
|
34
|
+
* The content of the tooltip can be any React element.
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* ```
|
|
38
|
+
* <Tooltip content="This is some help for you">
|
|
39
|
+
* <IconButton icon="Question" />
|
|
40
|
+
* </Tooltip>
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
30
43
|
export declare const Tooltip: ({ tooltipId, children, showArrow, compact, attributes, colorScheme, colorPalette, disabled, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
31
44
|
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAElD,MAAM,WAAW,gBAAiB,SAChC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,WAAW,CAAC,EAAE,gBAAgB,EAAE,eAAe;IACvG;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAElD,MAAM,WAAW,gBAAiB,SAChC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,WAAW,CAAC,EAAE,gBAAgB,EAAE,eAAe;IACvG;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,gBAAgB,CAAA;AAEjG;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,GAClB,wGAAsH,YAAY,4CAqBnI,CAAA"}
|
|
@@ -2,6 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
3
|
import { useRef } from 'react';
|
|
4
4
|
import { Overlay } from './Overlay/index.js';
|
|
5
|
+
/**
|
|
6
|
+
* Renders a tooltip overlay for its child. By default, the tooltip is rendered on hover, but this can be changed through the property
|
|
7
|
+
* "triggerOn".
|
|
8
|
+
*
|
|
9
|
+
* The content of the tooltip can be any React element.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```
|
|
13
|
+
* <Tooltip content="This is some help for you">
|
|
14
|
+
* <IconButton icon="Question" />
|
|
15
|
+
* </Tooltip>
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
5
18
|
export const Tooltip = ({ tooltipId, children, showArrow = true, compact = true, attributes, colorScheme, colorPalette, disabled, ...props }) => {
|
|
6
19
|
const id = useRef(tooltipId || `${Math.random()}`);
|
|
7
20
|
return disabled ? children : (_jsx(Overlay, { attributes: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAiCnC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,GAAG,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAClI,EAAE;IACF,MAAM,EAAE,GAAG,MAAM,CAAC,SAAS,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAClD,OAAO,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC3B,KAAC,OAAO,IACN,UAAU,EAAE;YACV,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,IAAI,YAAY,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC;YAChG,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,KAAK,EAAE;YAC9C,IAAI,EAAE,SAAS;YACf,EAAE,EAAE,EAAE,CAAC,OAAO;YACd,aAAa,EAAE,SAAS;YACxB,mBAAmB,EAAE,WAAW;YAChC,oBAAoB,EAAE,YAAY;YAClC,GAAG,UAAU;SACd,EACD,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,kBAAkB,EAAE,EAAE,CAAC,OAAO,CAAC,KAC9D,KAAK,YAER,QAAQ,GACD,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAiCnC;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,GAAG,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAClI,EAAE;IACF,MAAM,EAAE,GAAG,MAAM,CAAC,SAAS,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAClD,OAAO,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC3B,KAAC,OAAO,IACN,UAAU,EAAE;YACV,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,IAAI,YAAY,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC;YAChG,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,KAAK,EAAE;YAC9C,IAAI,EAAE,SAAS;YACf,EAAE,EAAE,EAAE,CAAC,OAAO;YACd,aAAa,EAAE,SAAS;YACxB,mBAAmB,EAAE,WAAW;YAChC,oBAAoB,EAAE,YAAY;YAClC,GAAG,UAAU;SACd,EACD,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,kBAAkB,EAAE,EAAE,CAAC,OAAO,CAAC,KAC9D,KAAK,YAER,QAAQ,GACD,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -31,20 +31,54 @@ export interface BaseColumnProps<T extends keyof HTMLTag> extends BaseLayoutProp
|
|
|
31
31
|
export type CenterProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseLayoutProps<T>;
|
|
32
32
|
export type RowProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseRowProps<T>;
|
|
33
33
|
export type ColumnProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseColumnProps<T>;
|
|
34
|
-
|
|
34
|
+
/**
|
|
35
|
+
* Centers the content both vertically and horizontally. Elements are placed in a column (flex).
|
|
36
|
+
*
|
|
37
|
+
* This element accepts many style shortcuts as attributes: bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml,
|
|
38
|
+
* mr, p, pt, pb, pl, pr, w, h.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```
|
|
42
|
+
* <Center w="200px" h="200px" gap="10px">
|
|
43
|
+
* <img src="/an-image.png" />
|
|
44
|
+
* <Text>This content is centered!</Text>
|
|
45
|
+
* </Center>
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
export declare const Center: <T extends keyof HTMLTag = "div">({ tag, className, ...props }: CenterProps<T>) => import("react").ReactElement<{
|
|
35
49
|
style: any;
|
|
36
50
|
className: string;
|
|
37
51
|
}, string | import("react").JSXElementConstructor<any>>;
|
|
38
|
-
|
|
52
|
+
/**
|
|
53
|
+
* Creates a row (flex). The elements in this row are horizontally centered unless `center = false`.
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```
|
|
57
|
+
* <Row gap={3}>
|
|
58
|
+
* <Icon icon="Stack" />
|
|
59
|
+
* <Text>Stacks</Text>
|
|
60
|
+
* </Row>
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
export declare const Row: <T extends keyof HTMLTag = "div">({ tag, className, center, ...props }: RowProps<T>) => import("react").ReactElement<{
|
|
39
64
|
style: any;
|
|
40
65
|
className: string;
|
|
41
66
|
}, string | import("react").JSXElementConstructor<any>>;
|
|
42
|
-
|
|
67
|
+
/**
|
|
68
|
+
* Creates a column (flex). The elements in this row are placed at the start of the horizontal axis, unless `center = true`, in this case,
|
|
69
|
+
* they're centered.
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* ```
|
|
73
|
+
* <Column gap={5}>
|
|
74
|
+
* <Text>Item 1</Text>
|
|
75
|
+
* <Text>Item 2</Text>
|
|
76
|
+
* <Text>Item 3</Text>
|
|
77
|
+
* </Row>
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
80
|
+
export declare const Column: <T extends keyof HTMLTag = "div">({ tag, className, center, ...props }: ColumnProps<T>) => import("react").ReactElement<{
|
|
43
81
|
style: any;
|
|
44
82
|
className: string;
|
|
45
83
|
}, string | import("react").JSXElementConstructor<any>>;
|
|
46
|
-
export declare const Center: typeof _Center;
|
|
47
|
-
export declare const Row: typeof _Row;
|
|
48
|
-
export declare const Column: typeof _Column;
|
|
49
|
-
export {};
|
|
50
84
|
//# sourceMappingURL=layout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAItD,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAClF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAElF,
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAItD,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAClF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAElF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,GACD,CAAC,SAAS,MAAM,OAAO,wCAAwC,WAAW,CAAC,CAAC,CAAC;;;uDAG9F,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,GAAG,GACD,CAAC,SAAS,MAAM,OAAO,gDAAgD,QAAQ,CAAC,CAAC,CAAC;;;uDAMhG,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,GACD,CAAC,SAAS,MAAM,OAAO,gDAAgD,WAAW,CAAC,CAAC,CAAC;;;uDAGtG,CAAA"}
|
|
@@ -7,16 +7,51 @@ export const layout = {
|
|
|
7
7
|
row: 'row',
|
|
8
8
|
column: 'column',
|
|
9
9
|
};
|
|
10
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Centers the content both vertically and horizontally. Elements are placed in a column (flex).
|
|
12
|
+
*
|
|
13
|
+
* This element accepts many style shortcuts as attributes: bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml,
|
|
14
|
+
* mr, p, pt, pb, pl, pr, w, h.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```
|
|
18
|
+
* <Center w="200px" h="200px" gap="10px">
|
|
19
|
+
* <img src="/an-image.png" />
|
|
20
|
+
* <Text>This content is centered!</Text>
|
|
21
|
+
* </Center>
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export const Center = withRef(function Center({ tag, className, ...props }) {
|
|
11
25
|
return createElement(tag || 'div', { className: listToClass(['center', className]), ...applyStyles(props) });
|
|
12
|
-
}
|
|
13
|
-
|
|
26
|
+
});
|
|
27
|
+
/**
|
|
28
|
+
* Creates a row (flex). The elements in this row are horizontally centered unless `center = false`.
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* ```
|
|
32
|
+
* <Row gap={3}>
|
|
33
|
+
* <Icon icon="Stack" />
|
|
34
|
+
* <Text>Stacks</Text>
|
|
35
|
+
* </Row>
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
export const Row = withRef(function Row({ tag, className, center, ...props }) {
|
|
14
39
|
return createElement(tag || 'div', { className: listToClass(['row', center === false && 'no-center', className]), ...applyStyles(props) });
|
|
15
|
-
}
|
|
16
|
-
|
|
40
|
+
});
|
|
41
|
+
/**
|
|
42
|
+
* Creates a column (flex). The elements in this row are placed at the start of the horizontal axis, unless `center = true`, in this case,
|
|
43
|
+
* they're centered.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* ```
|
|
47
|
+
* <Column gap={5}>
|
|
48
|
+
* <Text>Item 1</Text>
|
|
49
|
+
* <Text>Item 2</Text>
|
|
50
|
+
* <Text>Item 3</Text>
|
|
51
|
+
* </Row>
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
54
|
+
export const Column = withRef(function Column({ tag, className, center, ...props }) {
|
|
17
55
|
return createElement(tag || 'div', { className: listToClass(['column', center && 'center', className]), ...applyStyles(props) });
|
|
18
|
-
}
|
|
19
|
-
export const Center = withRef(_Center);
|
|
20
|
-
export const Row = withRef(_Row);
|
|
21
|
-
export const Column = withRef(_Column);
|
|
56
|
+
});
|
|
22
57
|
//# sourceMappingURL=layout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;CACjB,CAAA;AAiCD,
|
|
1
|
+
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;CACjB,CAAA;AAiCD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAC3B,SAAS,MAAM,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IAC3F,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAC9G,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,OAAO,CACxB,SAAS,GAAG,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAe;IAC7F,OAAO,aAAa,CAClB,GAAG,IAAI,KAAK,EACZ,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,IAAI,WAAW,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CACvG,CAAA;AACH,CAAC,CACF,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAC3B,SAAS,MAAM,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAkB;IACnG,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,MAAM,IAAI,QAAQ,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAClI,CAAC,CACF,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -40,7 +40,6 @@ export * from './components/Skeleton.js';
|
|
|
40
40
|
export * from './components/Slider.js';
|
|
41
41
|
export * from './components/SmartTable.js';
|
|
42
42
|
export * from './components/Stepper.js';
|
|
43
|
-
export * from './components/Switch.js';
|
|
44
43
|
export * from './components/Table.js';
|
|
45
44
|
export * from './components/Tabs/index.js';
|
|
46
45
|
export * from './components/Tabs/TabController.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -40,7 +40,6 @@ export * from './components/Skeleton.js';
|
|
|
40
40
|
export * from './components/Slider.js';
|
|
41
41
|
export * from './components/SmartTable.js';
|
|
42
42
|
export * from './components/Stepper.js';
|
|
43
|
-
export * from './components/Switch.js';
|
|
44
43
|
export * from './components/Table.js';
|
|
45
44
|
export * from './components/Tabs/index.js';
|
|
46
45
|
export * from './components/Tabs/TabController.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/citric-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.23.0",
|
|
4
4
|
"author": "StackSpot",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"url": "https://github.com/stack-spot/citric"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
|
-
"@stack-spot/citric-icons": ">=0.2.
|
|
18
|
+
"@stack-spot/citric-icons": ">=0.2.2",
|
|
19
19
|
"@stack-spot/portal-theme": ">=1.2.1",
|
|
20
20
|
"@stack-spot/portal-translate": ">=1.2.2",
|
|
21
21
|
"lodash": ">=4.17.21",
|