@cocso-ui/react 0.2.1 → 0.2.3
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/cjs/badge/Badge.d.ts +13 -0
- package/dist/cjs/badge/Badge.js +49 -0
- package/dist/cjs/badge/Badge.module.css.js +9 -0
- package/dist/cjs/button/Button.js +1 -1
- package/dist/cjs/checkbox/Checkbox.js +1 -1
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/modal/Modal.js +2 -1
- package/dist/cjs/pagination/Pagination.js +3 -2
- package/dist/cjs/pagination/Pagination.module.css.js +1 -1
- package/dist/cjs/popover/Popover.module.css.js +1 -1
- package/dist/cjs/spinner/Spinner.js +1 -1
- package/dist/cjs/spinner/Spinner.module.css.js +1 -1
- package/dist/esm/badge/Badge.d.mts +13 -0
- package/dist/esm/badge/Badge.mjs +47 -0
- package/dist/esm/badge/Badge.module.css.mjs +3 -0
- package/dist/esm/button/Button.mjs +1 -1
- package/dist/esm/checkbox/Checkbox.mjs +1 -1
- package/dist/esm/index.css +1 -1
- package/dist/esm/index.d.mts +1 -0
- package/dist/esm/index.mjs +1 -0
- package/dist/esm/modal/Modal.mjs +2 -1
- package/dist/esm/pagination/Pagination.mjs +3 -2
- package/dist/esm/spinner/Spinner.mjs +1 -1
- package/package.json +3 -2
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
|
|
4
|
+
type BadgeSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
type BadgeVariant = 'default' | 'danger' | 'primary' | 'success' | 'warning';
|
|
6
|
+
interface BadgeProps extends ComponentProps<'div'> {
|
|
7
|
+
size?: BadgeSize;
|
|
8
|
+
variant?: BadgeVariant;
|
|
9
|
+
}
|
|
10
|
+
declare const Badge: react.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
|
|
12
|
+
export { Badge };
|
|
13
|
+
export type { BadgeProps };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var clsx = require('clsx');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var tsPattern = require('ts-pattern');
|
|
6
|
+
var Badge_module = require('./Badge.module.css.js');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
var Typography = require('../typography/Typography.js');
|
|
9
|
+
var color = require('../token/color.js');
|
|
10
|
+
|
|
11
|
+
const Badge = /*#__PURE__*/react.forwardRef(({
|
|
12
|
+
className,
|
|
13
|
+
children,
|
|
14
|
+
size = 'md',
|
|
15
|
+
variant = 'default',
|
|
16
|
+
style: _style,
|
|
17
|
+
...props
|
|
18
|
+
}, ref) => {
|
|
19
|
+
const style = {
|
|
20
|
+
..._style,
|
|
21
|
+
'--cocso-badge-padding': getPadding(size),
|
|
22
|
+
'--cocso-badge-border-radius': '6px',
|
|
23
|
+
'--cocso-badge-bg-color': getBackgroundColor(variant)
|
|
24
|
+
};
|
|
25
|
+
const fontColor = getFontColor(variant);
|
|
26
|
+
const fontSize = getFontSize(size);
|
|
27
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
28
|
+
ref: ref,
|
|
29
|
+
className: clsx.clsx(Badge_module.badge, className),
|
|
30
|
+
style: style,
|
|
31
|
+
...props,
|
|
32
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
|
|
33
|
+
color: fontColor,
|
|
34
|
+
size: fontSize,
|
|
35
|
+
weight: "medium",
|
|
36
|
+
lineHeight: "tight",
|
|
37
|
+
asChild: true,
|
|
38
|
+
children: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
39
|
+
children: children
|
|
40
|
+
})
|
|
41
|
+
})
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
const getPadding = size => tsPattern.match(size).with('sm', () => '4px 8px').with('md', () => '6px 12px').with('lg', () => '8px 16px').exhaustive();
|
|
45
|
+
const getFontSize = size => tsPattern.match(size).with('sm', () => 12).with('md', () => 14).with('lg', () => 16).exhaustive();
|
|
46
|
+
const getFontColor = variant => tsPattern.match(variant).with('default', () => color.colors.neutral600).with('danger', () => color.colors.danger600).with('primary', () => color.colors.primary600).with('success', () => color.colors.success600).with('warning', () => color.colors.warning600).exhaustive();
|
|
47
|
+
const getBackgroundColor = variant => tsPattern.match(variant).with('default', () => color.colors.neutral50).with('danger', () => color.colors.danger50).with('primary', () => color.colors.primary50).with('success', () => color.colors.success50).with('warning', () => color.colors.warning50).exhaustive();
|
|
48
|
+
|
|
49
|
+
exports.Badge = Badge;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
|
|
4
|
+
|
|
5
|
+
var css_248z = ".Badge-module_badge__ikDSa{--cocso-badge-padding:inherit;--cocso-badge-border-radius:inherit;--cocso-badge-bg-color:inherit;background-color:var(--cocso-badge-bg-color);border-radius:var(--cocso-badge-border-radius);display:inline-flex;padding:var(--cocso-badge-padding);user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}";
|
|
6
|
+
var styles = {"badge":"Badge-module_badge__ikDSa"};
|
|
7
|
+
styleInject_es(css_248z);
|
|
8
|
+
|
|
9
|
+
module.exports = styles;
|
|
@@ -6,8 +6,8 @@ var react = require('react');
|
|
|
6
6
|
var tsPattern = require('ts-pattern');
|
|
7
7
|
var Button_module = require('./Button.module.css.js');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
-
var typography = require('../token/typography.js');
|
|
10
9
|
var Spinner = require('../spinner/Spinner.js');
|
|
10
|
+
var typography = require('../token/typography.js');
|
|
11
11
|
var color = require('../token/color.js');
|
|
12
12
|
|
|
13
13
|
const Button = /*#__PURE__*/react.forwardRef(({
|
|
@@ -7,9 +7,9 @@ var react = require('react');
|
|
|
7
7
|
var tsPattern = require('ts-pattern');
|
|
8
8
|
var Checkbox_module = require('./Checkbox.module.css.js');
|
|
9
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
-
var Typography = require('../typography/Typography.js');
|
|
11
10
|
var spacing = require('../token/spacing.js');
|
|
12
11
|
var color = require('../token/color.js');
|
|
12
|
+
var Typography = require('../typography/Typography.js');
|
|
13
13
|
|
|
14
14
|
function _interopNamespaceDefault(e) {
|
|
15
15
|
var n = Object.create(null);
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { Accordion } from './accordion/Accordion.js';
|
|
2
|
+
export { Badge, BadgeProps } from './badge/Badge.js';
|
|
2
3
|
export { Button, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './button/Button.js';
|
|
3
4
|
export { Checkbox, CheckboxProps, CheckboxSize, CheckboxStatus } from './checkbox/Checkbox.js';
|
|
4
5
|
export { Dropdown } from './dropdown/Dropdown.js';
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var Accordion = require('./accordion/Accordion.js');
|
|
4
|
+
var Badge = require('./badge/Badge.js');
|
|
4
5
|
var Button = require('./button/Button.js');
|
|
5
6
|
var Checkbox = require('./checkbox/Checkbox.js');
|
|
6
7
|
var Dropdown = require('./dropdown/Dropdown.js');
|
|
@@ -23,6 +24,7 @@ var Typography = require('./typography/Typography.js');
|
|
|
23
24
|
|
|
24
25
|
|
|
25
26
|
exports.Accordion = Accordion.Accordion;
|
|
27
|
+
exports.Badge = Badge.Badge;
|
|
26
28
|
exports.Button = Button.Button;
|
|
27
29
|
exports.Checkbox = Checkbox.Checkbox;
|
|
28
30
|
exports.Dropdown = Dropdown.Dropdown;
|
package/dist/cjs/modal/Modal.js
CHANGED
|
@@ -70,6 +70,7 @@ const ModalTitle = /*#__PURE__*/react.forwardRef(({
|
|
|
70
70
|
...props,
|
|
71
71
|
children: /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
|
|
72
72
|
type: "heading",
|
|
73
|
+
size: "sm",
|
|
73
74
|
children: children
|
|
74
75
|
})
|
|
75
76
|
});
|
|
@@ -85,7 +86,7 @@ const ModalDescription = /*#__PURE__*/react.forwardRef(({
|
|
|
85
86
|
asChild: true,
|
|
86
87
|
...props,
|
|
87
88
|
children: /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
|
|
88
|
-
|
|
89
|
+
size: 15,
|
|
89
90
|
color: color.colors.textSecondary,
|
|
90
91
|
weight: "medium",
|
|
91
92
|
children: children
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var reactIcons = require('@cocso-ui/react-icons');
|
|
3
4
|
var clsx = require('clsx');
|
|
4
5
|
var react = require('react');
|
|
5
6
|
var Pagination_module = require('./Pagination.module.css.js');
|
|
@@ -48,13 +49,13 @@ const Pagination = /*#__PURE__*/react.forwardRef(({
|
|
|
48
49
|
}), totalPages <= maxVisible + 2 ? Array(totalPages).fill(0).map((_, index) => renderPageButton(index + 1)) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
49
50
|
children: [renderPageButton(1), page > 1 + halfVisible && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
50
51
|
className: Pagination_module.trunc,
|
|
51
|
-
children:
|
|
52
|
+
children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.MoreHorizIcon, {})
|
|
52
53
|
}), Array(maxVisible).fill(0).map((_, index) => {
|
|
53
54
|
const pageNumber = page - halfVisible + index + 1;
|
|
54
55
|
return pageNumber > 1 && pageNumber < totalPages ? renderPageButton(pageNumber) : '';
|
|
55
56
|
}), page < totalPages - halfVisible && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
56
57
|
className: Pagination_module.trunc,
|
|
57
|
-
children:
|
|
58
|
+
children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.MoreHorizIcon, {})
|
|
58
59
|
}), renderPageButton(totalPages)]
|
|
59
60
|
}), totalPages > 1 && /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
60
61
|
className: Pagination_module.arrow,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = ".Pagination-module_pagination__viYLy{align-items:center;display:flex;gap:var(--ds-spacing-2);justify-content:center;margin-inline:auto}.Pagination-module_arrow__YYkob,.Pagination-module_item__uVIra{--cocso-pagination-font-color:var(--ds-color-
|
|
5
|
+
var css_248z = ".Pagination-module_pagination__viYLy{align-items:center;display:flex;gap:var(--ds-spacing-2);justify-content:center;margin-inline:auto}.Pagination-module_arrow__YYkob,.Pagination-module_item__uVIra{--cocso-pagination-font-color:var(--ds-color-text-primary);--cocso-pagination-font-weight:inherit;--cocso-pagination-bg-color:inherit;align-items:center;background-color:var(--cocso-pagination-bg-color);border-radius:var(--ds-spacing-4);color:var(--cocso-pagination-font-color);cursor:pointer;display:inline-flex;font-size:16px;font-weight:var(--cocso-pagination-font-weight);height:var(--ds-spacing-13);justify-content:center;transition:background-color .15s ease-in-out;width:var(--ds-spacing-13)}.Pagination-module_arrow__YYkob:disabled{cursor:not-allowed;opacity:.4}.Pagination-module_arrow__YYkob:not([disabled]):hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_arrow__YYkob:not([disabled]):active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_arrow__YYkob>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Pagination-module_item__uVIra[data-active=true]{--cocso-pagination-font-color:var(--ds-color-white);--cocso-pagination-bg-color:var(--ds-color-primary-500);--cocso-pagination-font-weight:600}.Pagination-module_item__uVIra[data-active=false]:hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_item__uVIra[data-active=false]:active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_trunc__-ZgYQ{align-items:center;color:var(--ds-color-text-primary);display:inline-flex;font-size:16px;height:var(--ds-spacing-13);justify-content:center;width:var(--ds-spacing-13)}";
|
|
6
6
|
var styles = {"pagination":"Pagination-module_pagination__viYLy","arrow":"Pagination-module_arrow__YYkob","item":"Pagination-module_item__uVIra","trunc":"Pagination-module_trunc__-ZgYQ"};
|
|
7
7
|
styleInject_es(css_248z);
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = "@keyframes Popover-module_slide-up-and-fade__adQar{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-right-and-fade__br3DV{0%{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes Popover-module_slide-down-and-fade__Lkl4N{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-left-and-fade__yHinG{0%{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}.Popover-module_content__ry9PF{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:var(--ds-white);border:1px solid var(--ds-neutral-100);border-radius:var(--ds-spacing-4);box-shadow:var(--shadow-
|
|
5
|
+
var css_248z = "@keyframes Popover-module_slide-up-and-fade__adQar{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-right-and-fade__br3DV{0%{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes Popover-module_slide-down-and-fade__Lkl4N{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-left-and-fade__yHinG{0%{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}.Popover-module_content__ry9PF{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-white);border:1px solid var(--ds-color-neutral-100);border-radius:var(--ds-spacing-4);box-shadow:var(--ds-shadow-2);padding-block:var(--ds-spacing-6);padding-inline:var(--ds-spacing-8);will-change:transform,opacity}.Popover-module_content__ry9PF[data-state=open][data-side=top]{animation-name:Popover-module_slide-down-and-fade__Lkl4N}.Popover-module_content__ry9PF[data-state=open][data-side=right]{animation-name:Popover-module_slide-left-and-fade__yHinG}.Popover-module_content__ry9PF[data-state=open][data-side=bottom]{animation-name:Popover-module_slide-up-and-fade__adQar}.Popover-module_content__ry9PF[data-state=open][data-side=left]{animation-name:Popover-module_slide-right-and-fade__br3DV}";
|
|
6
6
|
var styles = {"content":"Popover-module_content__ry9PF"};
|
|
7
7
|
styleInject_es(css_248z);
|
|
8
8
|
|
|
@@ -32,7 +32,7 @@ const Spinner = /*#__PURE__*/react.forwardRef(({
|
|
|
32
32
|
...props
|
|
33
33
|
});
|
|
34
34
|
});
|
|
35
|
-
const getSize = size => tsPattern.match(size).with('xl', () => '40px').with('lg', () => '32px').with('md', () => '24px').with('sm', () => '
|
|
35
|
+
const getSize = size => tsPattern.match(size).with('xl', () => '40px').with('lg', () => '32px').with('md', () => '24px').with('sm', () => '16px').exhaustive();
|
|
36
36
|
const getBorderWidth = size => tsPattern.match(size).with('xl', () => '5px').with('lg', () => '4px').with('md', () => '3px').with('sm', () => '2px').exhaustive();
|
|
37
37
|
const getBorderColor = color$1 => tsPattern.match(color$1).with('primary', () => color.colors.primary500).with('neutral', () => color.colors.neutral600).with('white', () => color.colors.white).exhaustive();
|
|
38
38
|
const getBackgroundColor = color$1 => tsPattern.match(color$1).with('primary', () => color.colors.primary100).with('neutral', () => color.colors.neutral100).with('white', () => color.colors.whiteAlpha20).exhaustive();
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = "@keyframes Spinner-module_donut-spin__cBa-F{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Spinner-module_spinner__iIx6p{--cocso-spinner-size:inherit;--cocso-spinner-border-width:inherit;--cocso-spinner-border-color:inherit;--cocso-spinner-bg-color:inherit;animation:Spinner-module_donut-spin__cBa-F .
|
|
5
|
+
var css_248z = "@keyframes Spinner-module_donut-spin__cBa-F{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Spinner-module_spinner__iIx6p{--cocso-spinner-size:inherit;--cocso-spinner-border-width:inherit;--cocso-spinner-border-color:inherit;--cocso-spinner-bg-color:inherit;animation:Spinner-module_donut-spin__cBa-F .5s linear infinite;border:var(--cocso-spinner-border-width) solid var(--cocso-spinner-bg-color);border-radius:50%;border-top-color:var(--cocso-spinner-border-color);display:inline-block;height:var(--cocso-spinner-size);position:relative;transform-origin:center center;width:var(--cocso-spinner-size)}";
|
|
6
6
|
var styles = {"spinner":"Spinner-module_spinner__iIx6p"};
|
|
7
7
|
styleInject_es(css_248z);
|
|
8
8
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
|
|
4
|
+
type BadgeSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
type BadgeVariant = 'default' | 'danger' | 'primary' | 'success' | 'warning';
|
|
6
|
+
interface BadgeProps extends ComponentProps<'div'> {
|
|
7
|
+
size?: BadgeSize;
|
|
8
|
+
variant?: BadgeVariant;
|
|
9
|
+
}
|
|
10
|
+
declare const Badge: react.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
|
|
12
|
+
export { Badge };
|
|
13
|
+
export type { BadgeProps };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { clsx } from 'clsx';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { match } from 'ts-pattern';
|
|
4
|
+
import styles from './Badge.module.css.mjs';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
import { Typography } from '../typography/Typography.mjs';
|
|
7
|
+
import { colors } from '../token/color.mjs';
|
|
8
|
+
|
|
9
|
+
const Badge = /*#__PURE__*/forwardRef(({
|
|
10
|
+
className,
|
|
11
|
+
children,
|
|
12
|
+
size = 'md',
|
|
13
|
+
variant = 'default',
|
|
14
|
+
style: _style,
|
|
15
|
+
...props
|
|
16
|
+
}, ref) => {
|
|
17
|
+
const style = {
|
|
18
|
+
..._style,
|
|
19
|
+
'--cocso-badge-padding': getPadding(size),
|
|
20
|
+
'--cocso-badge-border-radius': '6px',
|
|
21
|
+
'--cocso-badge-bg-color': getBackgroundColor(variant)
|
|
22
|
+
};
|
|
23
|
+
const fontColor = getFontColor(variant);
|
|
24
|
+
const fontSize = getFontSize(size);
|
|
25
|
+
return /*#__PURE__*/jsx("div", {
|
|
26
|
+
ref: ref,
|
|
27
|
+
className: clsx(styles.badge, className),
|
|
28
|
+
style: style,
|
|
29
|
+
...props,
|
|
30
|
+
children: /*#__PURE__*/jsx(Typography, {
|
|
31
|
+
color: fontColor,
|
|
32
|
+
size: fontSize,
|
|
33
|
+
weight: "medium",
|
|
34
|
+
lineHeight: "tight",
|
|
35
|
+
asChild: true,
|
|
36
|
+
children: /*#__PURE__*/jsx("span", {
|
|
37
|
+
children: children
|
|
38
|
+
})
|
|
39
|
+
})
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
const getPadding = size => match(size).with('sm', () => '4px 8px').with('md', () => '6px 12px').with('lg', () => '8px 16px').exhaustive();
|
|
43
|
+
const getFontSize = size => match(size).with('sm', () => 12).with('md', () => 14).with('lg', () => 16).exhaustive();
|
|
44
|
+
const getFontColor = variant => match(variant).with('default', () => colors.neutral600).with('danger', () => colors.danger600).with('primary', () => colors.primary600).with('success', () => colors.success600).with('warning', () => colors.warning600).exhaustive();
|
|
45
|
+
const getBackgroundColor = variant => match(variant).with('default', () => colors.neutral50).with('danger', () => colors.danger50).with('primary', () => colors.primary50).with('success', () => colors.success50).with('warning', () => colors.warning50).exhaustive();
|
|
46
|
+
|
|
47
|
+
export { Badge };
|
|
@@ -4,8 +4,8 @@ import { forwardRef, isValidElement, cloneElement } from 'react';
|
|
|
4
4
|
import { match } from 'ts-pattern';
|
|
5
5
|
import styles from './Button.module.css.mjs';
|
|
6
6
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
7
|
-
import { fontWeight } from '../token/typography.mjs';
|
|
8
7
|
import { Spinner } from '../spinner/Spinner.mjs';
|
|
8
|
+
import { fontWeight } from '../token/typography.mjs';
|
|
9
9
|
import { colors } from '../token/color.mjs';
|
|
10
10
|
|
|
11
11
|
const Button = /*#__PURE__*/forwardRef(({
|
|
@@ -5,9 +5,9 @@ import { forwardRef, useId } from 'react';
|
|
|
5
5
|
import { match } from 'ts-pattern';
|
|
6
6
|
import styles from './Checkbox.module.css.mjs';
|
|
7
7
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
|
-
import { Typography } from '../typography/Typography.mjs';
|
|
9
8
|
import { spacing } from '../token/spacing.mjs';
|
|
10
9
|
import { colors } from '../token/color.mjs';
|
|
10
|
+
import { Typography } from '../typography/Typography.mjs';
|
|
11
11
|
|
|
12
12
|
const Checkbox = /*#__PURE__*/forwardRef(({
|
|
13
13
|
id: _id,
|
package/dist/esm/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.Accordion-module_content__V9Ftc,.Accordion-module_item__iE3dq{overflow:hidden}.Accordion-module_content__V9Ftc[data-state=open]{animation:Accordion-module_slide-down__88c3a .3s cubic-bezier(.87,0,.13,1)}.Accordion-module_content__V9Ftc[data-state=closed]{animation:Accordion-module_slide-up__hbYw7 .3s cubic-bezier(.87,0,.13,1)}.Accordion-module_trigger__6nu7o{cursor:pointer;display:flex;justify-content:space-between;width:100%}.Accordion-module_chevron__oFGVg{display:inline-block;height:var(--ds-spacing-10);transition:transform .2s ease-in-out;width:var(--ds-spacing-10)}.Accordion-module_trigger__6nu7o[data-state=closed]>.Accordion-module_chevron__oFGVg{transform:rotate(0deg)}.Accordion-module_trigger__6nu7o[data-state=open]>.Accordion-module_chevron__oFGVg{transform:rotate(180deg)}@keyframes Accordion-module_slide-up__hbYw7{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes Accordion-module_slide-down__88c3a{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes Spinner-module_donut-spin__cBa-F{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Spinner-module_spinner__iIx6p{--cocso-spinner-size:inherit;--cocso-spinner-border-width:inherit;--cocso-spinner-border-color:inherit;--cocso-spinner-bg-color:inherit;animation:Spinner-module_donut-spin__cBa-F .75s linear infinite;border:var(--cocso-spinner-border-width) solid var(--cocso-spinner-bg-color);border-radius:50%;border-top-color:var(--cocso-spinner-border-color);display:inline-block;height:var(--cocso-spinner-size);position:relative;transform-origin:center center;width:var(--cocso-spinner-size)}.Button-module_button__eiKKZ{--cocso-button-height:inherit;--cocso-button-padding-inline:inherit;--cocso-button-font-color:inherit;--cocso-button-font-size:inherit;--cocso-button-font-weight:inherit;--cocso-button-border:inherit;--cocso-button-border-radius:inherit;--cocso-button-bg-color:inherit;align-items:center;background-color:var(--cocso-button-bg-color);border:var(--cocso-button-border);border-radius:var(--cocso-button-border-radius);color:var(--cocso-button-font-color);cursor:pointer;display:inline-flex;font-size:var(--cocso-button-font-size);font-weight:var(--cocso-button-font-weight);height:var(--cocso-button-height);justify-content:center;opacity:1;padding-inline:var(--cocso-button-padding-inline);position:relative;transform:translateZ(0);transition:background-color .15s ease-in-out}.Button-module_button__eiKKZ:not(.Button-module_disabled__M6r1w):hover{--cocso-button-bg-color-hover:inherit;background-color:var(--cocso-button-bg-color-hover)}.Button-module_button__eiKKZ:not(.Button-module_disabled__M6r1w):active{--cocso-button-bg-color-active:inherit;background-color:var(--cocso-button-bg-color-active)}.Button-module_content__SVjwi{padding:0 6px}.Button-module_prefix__d7ljt{margin-right:2px}.Button-module_prefix__d7ljt,.Button-module_suffix__9oysT{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;min-width:20px}.Button-module_suffix__9oysT{margin-left:2px}.Button-module_disabled__M6r1w{cursor:not-allowed;opacity:.4}.Button-module_svgOnly__8RcZ7{aspect-ratio:1/1;padding:0}.Typography-module_typography__45lnt{--cocso-typography-font-color:inherit;--cocso-typography-font-size:inherit;--cocso-typography-font-weight:inherit;--cocso-typography-line-height:inherit;color:var(--cocso-typography-font-color);font-size:var(--cocso-typography-font-size);font-weight:var(--cocso-typography-font-weight);line-height:var(--cocso-typography-line-height)}.Typography-module_typography__45lnt[aria-disabled=true]{cursor:not-allowed;opacity:.4}@media (min-width:768px){.Typography-module_typography__45lnt{font-size:var(--cocso-tablet-typography-font-size,var(--cocso-typography-font-size))}}@media (min-width:1024px){.Typography-module_typography__45lnt{font-size:var(--cocso-desktop-typography-font-size,var(--cocso-tablet-typography-font-size,var(--cocso-typography-font-size)))}}.Checkbox-module_wrapper__5uqJp{align-items:center;display:flex;gap:var(--ds-spacing-5)}.Checkbox-module_checkbox__05Z5t{--cocso-checkbox-size:inherit;--cocso-checkbox-color:inherit;--cocso-checkbox-border-color:inherit;--cocso-checkbox-bg-color:inherit;align-items:center;background-color:var(--cocso-checkbox-bg-color);border:1px solid var(--cocso-checkbox-border-color);border-radius:4px;color:var(--cocso-checkbox-color);cursor:pointer;display:inline-flex;height:var(--cocso-checkbox-size);justify-content:center;opacity:1;position:relative;transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out;width:var(--cocso-checkbox-size)}.Checkbox-module_checkbox__05Z5t>svg{stroke:var(--cocso-checkbox-color);display:block;height:auto;max-width:100%;transition:stroke .15s ease-in-out}.Checkbox-module_checkbox__05Z5t input[type=checkbox]{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.Checkbox-module_indicator__MLpNt{bottom:var(--number-1);left:var(--number-1);position:absolute;right:var(--number-1);top:var(--number-1);transition:opacity .15s ease-in-out}.Checkbox-module_label__ubb5U{cursor:pointer;opacity:1}.Checkbox-module_checkbox__05Z5t[disabled],.Checkbox-module_label__ubb5U[aria-disabled=true]{cursor:not-allowed;opacity:.5}@keyframes Dropdown-module_dropdown-slide-up__2uVH3{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Dropdown-module_dropdown-slide-down__T5LLc{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.Dropdown-module_content__S3TRi{background-color:var(--color-background-white);border-radius:var(--ds-spacing-3);box-shadow:var(--shadow-1);display:flex;flex-direction:column;will-change:transform,opacity;z-index:var(--z-index-overlay)}.Dropdown-module_content__S3TRi[data-side=top]{animation:Dropdown-module_dropdown-slide-up__2uVH3 .4s cubic-bezier(.16,1,.3,1)}.Dropdown-module_content__S3TRi[data-side=bottom]{animation:Dropdown-module_dropdown-slide-down__T5LLc .4s cubic-bezier(.16,1,.3,1)}.Dropdown-module_item__MIltz{display:flex;flex-direction:column}.Link-module_link__J9CFb{align-items:center;cursor:pointer;display:inline-flex;gap:var(--ds-spacing-2);justify-content:center;text-decoration:none;transition:color .15s ease-in-out;width:fit-content}.Link-module_link__J9CFb>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Link-module_indicator__DIUaW{text-decoration:underline}@keyframes Modal-module_overlay-show__zyvAx{0%{opacity:0}to{opacity:1}}.Modal-module_overlay__7ZBDB{animation:Modal-module_overlay-show__zyvAx .15s cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-black-alpha-30);inset:0;position:fixed;z-index:var(--z-index-overlay)}@keyframes Modal-module_content-show__anq3d{0%{opacity:0;transform:translate(-50%,-48%) scale(.997)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.Modal-module_content__M1b6Q{animation:Modal-module_content-show__anq3d .15s cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-white);border-radius:8px;display:flex;flex-direction:column;left:50%;max-height:85vh;max-width:380px;padding:var(--ds-spacing-9);position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw;z-index:var(--z-index-modal)}.Modal-module_close__UbAF7{align-items:center;align-self:flex-end;cursor:pointer;display:flex;height:var(--ds-spacing-10);justify-content:center;width:var(--ds-spacing-10)}.Modal-module_title__oTluo{word-break:keep-all}.Modal-module_description__RgMC5{margin-top:var(--ds-spacing-5)}.OneTimePasswordField-module_otp__zoWO7{align-items:center;display:flex;gap:var(--ds-spacing-5)}.OneTimePasswordField-module_input__owV9H{align-items:center;background-color:var(--ds-color-neutral-50);border:none;border-radius:var(--ds-spacing-2);box-shadow:0 0 0 var(--ds-spacing-1,1px) var(--ds-color-neutral-50);color:var(--ds-color-neutral-950);display:inline-flex;flex:1;font-size:16px;font-weight:500;height:100%;justify-content:center;line-height:1;outline:none;text-align:center;text-transform:uppercase;transition:background-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.OneTimePasswordField-module_input__owV9H:focus,.OneTimePasswordField-module_input__owV9H:hover{box-shadow:0 0 0 var(--ds-spacing-1,1px) var(--ds-color-neutral-200)}.OneTimePasswordField-module_input__owV9H::selection{background-color:var(--ds-color-neutral-400)}.Pagination-module_pagination__viYLy{align-items:center;display:flex;gap:var(--ds-spacing-2);justify-content:center;margin-inline:auto}.Pagination-module_arrow__YYkob,.Pagination-module_item__uVIra{--cocso-pagination-font-color:var(--ds-color-neutral-950);--cocso-pagination-font-weight:inherit;--cocso-pagination-bg-color:inherit;align-items:center;background-color:var(--cocso-pagination-bg-color);border-radius:var(--ds-spacing-4);color:var(--cocso-pagination-font-color);cursor:pointer;display:inline-flex;font-size:16px;font-weight:var(--cocso-pagination-font-weight);height:var(--ds-spacing-13);justify-content:center;transition:background-color .15s ease-in-out;width:var(--ds-spacing-13)}.Pagination-module_arrow__YYkob:disabled{cursor:not-allowed;opacity:.4}.Pagination-module_arrow__YYkob:not([disabled]):hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_arrow__YYkob:not([disabled]):active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_arrow__YYkob>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Pagination-module_item__uVIra[data-active=true]{--cocso-pagination-font-color:var(--ds-color-white);--cocso-pagination-bg-color:var(--ds-color-primary-500);--cocso-pagination-font-weight:600}.Pagination-module_item__uVIra[data-active=false]:hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_item__uVIra[data-active=false]:active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_trunc__-ZgYQ{align-items:center;color:var(--ds-color-neutral-950);display:inline-flex;font-size:16px;height:var(--ds-spacing-13);justify-content:center;width:var(--ds-spacing-13)}@keyframes Popover-module_slide-up-and-fade__adQar{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-right-and-fade__br3DV{0%{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes Popover-module_slide-down-and-fade__Lkl4N{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-left-and-fade__yHinG{0%{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}.Popover-module_content__ry9PF{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:var(--ds-white);border:1px solid var(--ds-neutral-100);border-radius:var(--ds-spacing-4);box-shadow:var(--shadow-3);padding-block:var(--ds-spacing-6);padding-inline:var(--ds-spacing-8);will-change:transform,opacity}.Popover-module_content__ry9PF[data-state=open][data-side=top]{animation-name:Popover-module_slide-down-and-fade__Lkl4N}.Popover-module_content__ry9PF[data-state=open][data-side=right]{animation-name:Popover-module_slide-left-and-fade__yHinG}.Popover-module_content__ry9PF[data-state=open][data-side=bottom]{animation-name:Popover-module_slide-up-and-fade__adQar}.Popover-module_content__ry9PF[data-state=open][data-side=left]{animation-name:Popover-module_slide-right-and-fade__br3DV}.Select-module_wrapper__4k8By{cursor:pointer;position:relative;width:fit-content}.Select-module_select__MUUdH{--cocso-select-min-width:inherit;--cocso-select-height:inherit;--cocso-select-padding-left:inherit;--cocso-select-padding-right:inherit;--cocso-select-font-size:inherit;--cocso-select-border-radius:inherit;--cocso-select-bg-color:var(--ds-color-white);appearance:none;-o-appearance:none;-moz-appearance:none;-webkit-appearance:none;background-color:var(--cocso-select-bg-color);border:1px solid var(--ds-color-neutral-100);border-radius:var(--cocso-select-border-radius);color:var(--ds-color-neutral-950);font-size:var(--cocso-select-font-size);height:var(--cocso-select-height);min-width:var(--cocso-select-min-width);padding-left:var(--cocso-select-padding-left);padding-right:var(--cocso-select-padding-right)}.Select-module_select__MUUdH[disabled]{cursor:not-allowed}.Select-module_icon__EuBJI{color:var(--ds-color-neutral-500);pointer-events:none;position:absolute;right:var(--ds-spacing-5);top:50%;transform:translateY(-50%)}.Select-module_icon__EuBJI[disabled]{cursor:not-allowed}.StockQuantityStatus-module_stock__mWbqI{--cocso-stock-quantity-status-color:inherit;align-items:center;color:var(--cocso-stock-quantity-status-color);display:inline-flex;gap:var(--ds-spacing-2)}.StockQuantityStatus-module_indicator__inaKv{--cocso-stock-quantity-status-indicator-width:inherit;flex-shrink:0;height:auto;width:var(--cocso-stock-quantity-status-indicator-width)}.StockQuantityStatus-module_indicator__inaKv>svg{height:100%;width:100%}.Switch-module_wrapper__qcI9-{align-items:center;display:flex;gap:var(--ds-spacing-5)}.Switch-module_wrapper__qcI9-[aria-disabled=true]{cursor:not-allowed;opacity:.4}.Switch-module_switch__pwmft{--cocso-switch-width:inherit;--cocso-switch-height:inherit;--cocso-switch-bg-color:inherit;background-color:var(--cocso-switch-bg-color);border-radius:var(--ds-spacing-max);cursor:pointer;height:var(--cocso-switch-height);opacity:1;position:relative;width:var(--cocso-switch-width)}.Switch-module_switch__pwmft[data-disabled=true],.Switch-module_switch__pwmft[disabled]{cursor:not-allowed;opacity:.4}.Switch-module_switch__pwmft[data-state=checked]{--cocso-switch-bg-color:var(--ds-color-primary-500)}.Switch-module_thumb__pQGDy{--cocso-switch-thumb-width:inherit;--cocso-switch-thumb-height:inherit;background-color:var(--ds-color-white);border-radius:var(--ds-spacing-max);display:block;height:var(--cocso-switch-thumb-width);transform:translateX(var(--ds-spacing-2));transition:transform .15s ease;width:var(--cocso-switch-thumb-width);will-change:transform}.Switch-module_thumb__pQGDy[data-state=checked]{transform:translateX(calc(var(--cocso-switch-width) - var(--cocso-switch-thumb-width) - var(--ds-spacing-2)))}
|
|
1
|
+
.Accordion-module_content__V9Ftc,.Accordion-module_item__iE3dq{overflow:hidden}.Accordion-module_content__V9Ftc[data-state=open]{animation:Accordion-module_slide-down__88c3a .3s cubic-bezier(.87,0,.13,1)}.Accordion-module_content__V9Ftc[data-state=closed]{animation:Accordion-module_slide-up__hbYw7 .3s cubic-bezier(.87,0,.13,1)}.Accordion-module_trigger__6nu7o{cursor:pointer;display:flex;justify-content:space-between;width:100%}.Accordion-module_chevron__oFGVg{display:inline-block;height:var(--ds-spacing-10);transition:transform .2s ease-in-out;width:var(--ds-spacing-10)}.Accordion-module_trigger__6nu7o[data-state=closed]>.Accordion-module_chevron__oFGVg{transform:rotate(0deg)}.Accordion-module_trigger__6nu7o[data-state=open]>.Accordion-module_chevron__oFGVg{transform:rotate(180deg)}@keyframes Accordion-module_slide-up__hbYw7{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes Accordion-module_slide-down__88c3a{0%{height:0}to{height:var(--radix-accordion-content-height)}}.Typography-module_typography__45lnt{--cocso-typography-font-color:inherit;--cocso-typography-font-size:inherit;--cocso-typography-font-weight:inherit;--cocso-typography-line-height:inherit;color:var(--cocso-typography-font-color);font-size:var(--cocso-typography-font-size);font-weight:var(--cocso-typography-font-weight);line-height:var(--cocso-typography-line-height)}.Typography-module_typography__45lnt[aria-disabled=true]{cursor:not-allowed;opacity:.4}@media (min-width:768px){.Typography-module_typography__45lnt{font-size:var(--cocso-tablet-typography-font-size,var(--cocso-typography-font-size))}}@media (min-width:1024px){.Typography-module_typography__45lnt{font-size:var(--cocso-desktop-typography-font-size,var(--cocso-tablet-typography-font-size,var(--cocso-typography-font-size)))}}.Badge-module_badge__ikDSa{--cocso-badge-padding:inherit;--cocso-badge-border-radius:inherit;--cocso-badge-bg-color:inherit;background-color:var(--cocso-badge-bg-color);border-radius:var(--cocso-badge-border-radius);display:inline-flex;padding:var(--cocso-badge-padding);user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}@keyframes Spinner-module_donut-spin__cBa-F{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Spinner-module_spinner__iIx6p{--cocso-spinner-size:inherit;--cocso-spinner-border-width:inherit;--cocso-spinner-border-color:inherit;--cocso-spinner-bg-color:inherit;animation:Spinner-module_donut-spin__cBa-F .5s linear infinite;border:var(--cocso-spinner-border-width) solid var(--cocso-spinner-bg-color);border-radius:50%;border-top-color:var(--cocso-spinner-border-color);display:inline-block;height:var(--cocso-spinner-size);position:relative;transform-origin:center center;width:var(--cocso-spinner-size)}.Button-module_button__eiKKZ{--cocso-button-height:inherit;--cocso-button-padding-inline:inherit;--cocso-button-font-color:inherit;--cocso-button-font-size:inherit;--cocso-button-font-weight:inherit;--cocso-button-border:inherit;--cocso-button-border-radius:inherit;--cocso-button-bg-color:inherit;align-items:center;background-color:var(--cocso-button-bg-color);border:var(--cocso-button-border);border-radius:var(--cocso-button-border-radius);color:var(--cocso-button-font-color);cursor:pointer;display:inline-flex;font-size:var(--cocso-button-font-size);font-weight:var(--cocso-button-font-weight);height:var(--cocso-button-height);justify-content:center;opacity:1;padding-inline:var(--cocso-button-padding-inline);position:relative;transform:translateZ(0);transition:background-color .15s ease-in-out}.Button-module_button__eiKKZ:not(.Button-module_disabled__M6r1w):hover{--cocso-button-bg-color-hover:inherit;background-color:var(--cocso-button-bg-color-hover)}.Button-module_button__eiKKZ:not(.Button-module_disabled__M6r1w):active{--cocso-button-bg-color-active:inherit;background-color:var(--cocso-button-bg-color-active)}.Button-module_content__SVjwi{padding:0 6px}.Button-module_prefix__d7ljt{margin-right:2px}.Button-module_prefix__d7ljt,.Button-module_suffix__9oysT{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;min-width:20px}.Button-module_suffix__9oysT{margin-left:2px}.Button-module_disabled__M6r1w{cursor:not-allowed;opacity:.4}.Button-module_svgOnly__8RcZ7{aspect-ratio:1/1;padding:0}.Checkbox-module_wrapper__5uqJp{align-items:center;display:flex;gap:var(--ds-spacing-5)}.Checkbox-module_checkbox__05Z5t{--cocso-checkbox-size:inherit;--cocso-checkbox-color:inherit;--cocso-checkbox-border-color:inherit;--cocso-checkbox-bg-color:inherit;align-items:center;background-color:var(--cocso-checkbox-bg-color);border:1px solid var(--cocso-checkbox-border-color);border-radius:4px;color:var(--cocso-checkbox-color);cursor:pointer;display:inline-flex;height:var(--cocso-checkbox-size);justify-content:center;opacity:1;position:relative;transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out;width:var(--cocso-checkbox-size)}.Checkbox-module_checkbox__05Z5t>svg{stroke:var(--cocso-checkbox-color);display:block;height:auto;max-width:100%;transition:stroke .15s ease-in-out}.Checkbox-module_checkbox__05Z5t input[type=checkbox]{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.Checkbox-module_indicator__MLpNt{bottom:var(--number-1);left:var(--number-1);position:absolute;right:var(--number-1);top:var(--number-1);transition:opacity .15s ease-in-out}.Checkbox-module_label__ubb5U{cursor:pointer;opacity:1}.Checkbox-module_checkbox__05Z5t[disabled],.Checkbox-module_label__ubb5U[aria-disabled=true]{cursor:not-allowed;opacity:.5}@keyframes Dropdown-module_dropdown-slide-up__2uVH3{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Dropdown-module_dropdown-slide-down__T5LLc{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.Dropdown-module_content__S3TRi{background-color:var(--color-background-white);border-radius:var(--ds-spacing-3);box-shadow:var(--shadow-1);display:flex;flex-direction:column;will-change:transform,opacity;z-index:var(--z-index-overlay)}.Dropdown-module_content__S3TRi[data-side=top]{animation:Dropdown-module_dropdown-slide-up__2uVH3 .4s cubic-bezier(.16,1,.3,1)}.Dropdown-module_content__S3TRi[data-side=bottom]{animation:Dropdown-module_dropdown-slide-down__T5LLc .4s cubic-bezier(.16,1,.3,1)}.Dropdown-module_item__MIltz{display:flex;flex-direction:column}.Link-module_link__J9CFb{align-items:center;cursor:pointer;display:inline-flex;gap:var(--ds-spacing-2);justify-content:center;text-decoration:none;transition:color .15s ease-in-out;width:fit-content}.Link-module_link__J9CFb>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Link-module_indicator__DIUaW{text-decoration:underline}@keyframes Modal-module_overlay-show__zyvAx{0%{opacity:0}to{opacity:1}}.Modal-module_overlay__7ZBDB{animation:Modal-module_overlay-show__zyvAx .15s cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-black-alpha-30);inset:0;position:fixed;z-index:var(--z-index-overlay)}@keyframes Modal-module_content-show__anq3d{0%{opacity:0;transform:translate(-50%,-48%) scale(.997)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.Modal-module_content__M1b6Q{animation:Modal-module_content-show__anq3d .15s cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-white);border-radius:8px;display:flex;flex-direction:column;left:50%;max-height:85vh;max-width:380px;padding:var(--ds-spacing-9);position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw;z-index:var(--z-index-modal)}.Modal-module_close__UbAF7{align-items:center;align-self:flex-end;cursor:pointer;display:flex;height:var(--ds-spacing-10);justify-content:center;width:var(--ds-spacing-10)}.Modal-module_title__oTluo{word-break:keep-all}.Modal-module_description__RgMC5{margin-top:var(--ds-spacing-5)}.OneTimePasswordField-module_otp__zoWO7{align-items:center;display:flex;gap:var(--ds-spacing-5)}.OneTimePasswordField-module_input__owV9H{align-items:center;background-color:var(--ds-color-neutral-50);border:none;border-radius:var(--ds-spacing-2);box-shadow:0 0 0 var(--ds-spacing-1,1px) var(--ds-color-neutral-50);color:var(--ds-color-neutral-950);display:inline-flex;flex:1;font-size:16px;font-weight:500;height:100%;justify-content:center;line-height:1;outline:none;text-align:center;text-transform:uppercase;transition:background-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.OneTimePasswordField-module_input__owV9H:focus,.OneTimePasswordField-module_input__owV9H:hover{box-shadow:0 0 0 var(--ds-spacing-1,1px) var(--ds-color-neutral-200)}.OneTimePasswordField-module_input__owV9H::selection{background-color:var(--ds-color-neutral-400)}.Pagination-module_pagination__viYLy{align-items:center;display:flex;gap:var(--ds-spacing-2);justify-content:center;margin-inline:auto}.Pagination-module_arrow__YYkob,.Pagination-module_item__uVIra{--cocso-pagination-font-color:var(--ds-color-text-primary);--cocso-pagination-font-weight:inherit;--cocso-pagination-bg-color:inherit;align-items:center;background-color:var(--cocso-pagination-bg-color);border-radius:var(--ds-spacing-4);color:var(--cocso-pagination-font-color);cursor:pointer;display:inline-flex;font-size:16px;font-weight:var(--cocso-pagination-font-weight);height:var(--ds-spacing-13);justify-content:center;transition:background-color .15s ease-in-out;width:var(--ds-spacing-13)}.Pagination-module_arrow__YYkob:disabled{cursor:not-allowed;opacity:.4}.Pagination-module_arrow__YYkob:not([disabled]):hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_arrow__YYkob:not([disabled]):active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_arrow__YYkob>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Pagination-module_item__uVIra[data-active=true]{--cocso-pagination-font-color:var(--ds-color-white);--cocso-pagination-bg-color:var(--ds-color-primary-500);--cocso-pagination-font-weight:600}.Pagination-module_item__uVIra[data-active=false]:hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_item__uVIra[data-active=false]:active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_trunc__-ZgYQ{align-items:center;color:var(--ds-color-text-primary);display:inline-flex;font-size:16px;height:var(--ds-spacing-13);justify-content:center;width:var(--ds-spacing-13)}@keyframes Popover-module_slide-up-and-fade__adQar{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-right-and-fade__br3DV{0%{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes Popover-module_slide-down-and-fade__Lkl4N{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-left-and-fade__yHinG{0%{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}.Popover-module_content__ry9PF{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-white);border:1px solid var(--ds-color-neutral-100);border-radius:var(--ds-spacing-4);box-shadow:var(--ds-shadow-2);padding-block:var(--ds-spacing-6);padding-inline:var(--ds-spacing-8);will-change:transform,opacity}.Popover-module_content__ry9PF[data-state=open][data-side=top]{animation-name:Popover-module_slide-down-and-fade__Lkl4N}.Popover-module_content__ry9PF[data-state=open][data-side=right]{animation-name:Popover-module_slide-left-and-fade__yHinG}.Popover-module_content__ry9PF[data-state=open][data-side=bottom]{animation-name:Popover-module_slide-up-and-fade__adQar}.Popover-module_content__ry9PF[data-state=open][data-side=left]{animation-name:Popover-module_slide-right-and-fade__br3DV}.Select-module_wrapper__4k8By{cursor:pointer;position:relative;width:fit-content}.Select-module_select__MUUdH{--cocso-select-min-width:inherit;--cocso-select-height:inherit;--cocso-select-padding-left:inherit;--cocso-select-padding-right:inherit;--cocso-select-font-size:inherit;--cocso-select-border-radius:inherit;--cocso-select-bg-color:var(--ds-color-white);appearance:none;-o-appearance:none;-moz-appearance:none;-webkit-appearance:none;background-color:var(--cocso-select-bg-color);border:1px solid var(--ds-color-neutral-100);border-radius:var(--cocso-select-border-radius);color:var(--ds-color-neutral-950);font-size:var(--cocso-select-font-size);height:var(--cocso-select-height);min-width:var(--cocso-select-min-width);padding-left:var(--cocso-select-padding-left);padding-right:var(--cocso-select-padding-right)}.Select-module_select__MUUdH[disabled]{cursor:not-allowed}.Select-module_icon__EuBJI{color:var(--ds-color-neutral-500);pointer-events:none;position:absolute;right:var(--ds-spacing-5);top:50%;transform:translateY(-50%)}.Select-module_icon__EuBJI[disabled]{cursor:not-allowed}.StockQuantityStatus-module_stock__mWbqI{--cocso-stock-quantity-status-color:inherit;align-items:center;color:var(--cocso-stock-quantity-status-color);display:inline-flex;gap:var(--ds-spacing-2)}.StockQuantityStatus-module_indicator__inaKv{--cocso-stock-quantity-status-indicator-width:inherit;flex-shrink:0;height:auto;width:var(--cocso-stock-quantity-status-indicator-width)}.StockQuantityStatus-module_indicator__inaKv>svg{height:100%;width:100%}.Switch-module_wrapper__qcI9-{align-items:center;display:flex;gap:var(--ds-spacing-5)}.Switch-module_wrapper__qcI9-[aria-disabled=true]{cursor:not-allowed;opacity:.4}.Switch-module_switch__pwmft{--cocso-switch-width:inherit;--cocso-switch-height:inherit;--cocso-switch-bg-color:inherit;background-color:var(--cocso-switch-bg-color);border-radius:var(--ds-spacing-max);cursor:pointer;height:var(--cocso-switch-height);opacity:1;position:relative;width:var(--cocso-switch-width)}.Switch-module_switch__pwmft[data-disabled=true],.Switch-module_switch__pwmft[disabled]{cursor:not-allowed;opacity:.4}.Switch-module_switch__pwmft[data-state=checked]{--cocso-switch-bg-color:var(--ds-color-primary-500)}.Switch-module_thumb__pQGDy{--cocso-switch-thumb-width:inherit;--cocso-switch-thumb-height:inherit;background-color:var(--ds-color-white);border-radius:var(--ds-spacing-max);display:block;height:var(--cocso-switch-thumb-width);transform:translateX(var(--ds-spacing-2));transition:transform .15s ease;width:var(--cocso-switch-thumb-width);will-change:transform}.Switch-module_thumb__pQGDy[data-state=checked]{transform:translateX(calc(var(--cocso-switch-width) - var(--cocso-switch-thumb-width) - var(--ds-spacing-2)))}
|
package/dist/esm/index.d.mts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { Accordion } from './accordion/Accordion.mjs';
|
|
2
|
+
export { Badge, BadgeProps } from './badge/Badge.mjs';
|
|
2
3
|
export { Button, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './button/Button.mjs';
|
|
3
4
|
export { Checkbox, CheckboxProps, CheckboxSize, CheckboxStatus } from './checkbox/Checkbox.mjs';
|
|
4
5
|
export { Dropdown } from './dropdown/Dropdown.mjs';
|
package/dist/esm/index.mjs
CHANGED
package/dist/esm/modal/Modal.mjs
CHANGED
|
@@ -49,6 +49,7 @@ const ModalTitle = /*#__PURE__*/forwardRef(({
|
|
|
49
49
|
...props,
|
|
50
50
|
children: /*#__PURE__*/jsx(Typography, {
|
|
51
51
|
type: "heading",
|
|
52
|
+
size: "sm",
|
|
52
53
|
children: children
|
|
53
54
|
})
|
|
54
55
|
});
|
|
@@ -64,7 +65,7 @@ const ModalDescription = /*#__PURE__*/forwardRef(({
|
|
|
64
65
|
asChild: true,
|
|
65
66
|
...props,
|
|
66
67
|
children: /*#__PURE__*/jsx(Typography, {
|
|
67
|
-
|
|
68
|
+
size: 15,
|
|
68
69
|
color: colors.textSecondary,
|
|
69
70
|
weight: "medium",
|
|
70
71
|
children: children
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { MoreHorizIcon } from '@cocso-ui/react-icons';
|
|
1
2
|
import { clsx } from 'clsx';
|
|
2
3
|
import { forwardRef } from 'react';
|
|
3
4
|
import styles from './Pagination.module.css.mjs';
|
|
@@ -46,13 +47,13 @@ const Pagination = /*#__PURE__*/forwardRef(({
|
|
|
46
47
|
}), totalPages <= maxVisible + 2 ? Array(totalPages).fill(0).map((_, index) => renderPageButton(index + 1)) : /*#__PURE__*/jsxs(Fragment, {
|
|
47
48
|
children: [renderPageButton(1), page > 1 + halfVisible && /*#__PURE__*/jsx("span", {
|
|
48
49
|
className: styles.trunc,
|
|
49
|
-
children:
|
|
50
|
+
children: /*#__PURE__*/jsx(MoreHorizIcon, {})
|
|
50
51
|
}), Array(maxVisible).fill(0).map((_, index) => {
|
|
51
52
|
const pageNumber = page - halfVisible + index + 1;
|
|
52
53
|
return pageNumber > 1 && pageNumber < totalPages ? renderPageButton(pageNumber) : '';
|
|
53
54
|
}), page < totalPages - halfVisible && /*#__PURE__*/jsx("span", {
|
|
54
55
|
className: styles.trunc,
|
|
55
|
-
children:
|
|
56
|
+
children: /*#__PURE__*/jsx(MoreHorizIcon, {})
|
|
56
57
|
}), renderPageButton(totalPages)]
|
|
57
58
|
}), totalPages > 1 && /*#__PURE__*/jsx("button", {
|
|
58
59
|
className: styles.arrow,
|
|
@@ -30,7 +30,7 @@ const Spinner = /*#__PURE__*/forwardRef(({
|
|
|
30
30
|
...props
|
|
31
31
|
});
|
|
32
32
|
});
|
|
33
|
-
const getSize = size => match(size).with('xl', () => '40px').with('lg', () => '32px').with('md', () => '24px').with('sm', () => '
|
|
33
|
+
const getSize = size => match(size).with('xl', () => '40px').with('lg', () => '32px').with('md', () => '24px').with('sm', () => '16px').exhaustive();
|
|
34
34
|
const getBorderWidth = size => match(size).with('xl', () => '5px').with('lg', () => '4px').with('md', () => '3px').with('sm', () => '2px').exhaustive();
|
|
35
35
|
const getBorderColor = color => match(color).with('primary', () => colors.primary500).with('neutral', () => colors.neutral600).with('white', () => colors.white).exhaustive();
|
|
36
36
|
const getBackgroundColor = color => match(color).with('primary', () => colors.primary100).with('neutral', () => colors.neutral100).with('white', () => colors.whiteAlpha20).exhaustive();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocso-ui/react",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/cocso/cocso-ui.git",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"clsx": "^2.1.1",
|
|
40
40
|
"sonner": "^2.0.7",
|
|
41
41
|
"ts-pattern": "^5.8.0",
|
|
42
|
-
"@cocso-ui/react-icons": "^0.1.
|
|
42
|
+
"@cocso-ui/react-icons": "^0.1.1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@babel/preset-react": "^7.27.1",
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
"@rollup/plugin-babel": "^6.0.4",
|
|
48
48
|
"@rollup/plugin-commonjs": "^28.0.6",
|
|
49
49
|
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
50
|
+
"@storybook/react": "^9.1.4",
|
|
50
51
|
"@types/react": "^19.1.12",
|
|
51
52
|
"@types/react-dom": "^19.1.9",
|
|
52
53
|
"react": "^19.1.1",
|