@remember-web/primitive 0.2.4 → 0.2.6
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/src/Avatars/Avatar/index.cjs.js +14 -2
- package/dist/src/Avatars/Avatar/index.cjs.js.map +1 -1
- package/dist/src/Avatars/Avatar/index.d.ts.map +1 -1
- package/dist/src/Avatars/Avatar/index.esm.js +11 -3
- package/dist/src/Avatars/Avatar/index.esm.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.cjs.js +1 -0
- package/dist/src/Inputs/Select/NativeSelect/index.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.d.ts.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/index.esm.js +1 -0
- package/dist/src/Inputs/Select/NativeSelect/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/Avatars/Avatar/Avatar.stories.tsx +9 -0
- package/src/Avatars/Avatar/index.tsx +19 -16
- package/src/Inputs/Select/NativeSelect/index.tsx +5 -1
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
4
5
|
var icon = require('@remember-web/icon');
|
|
5
6
|
var mixin = require('@remember-web/mixin');
|
|
6
7
|
var react = require('react');
|
|
7
8
|
var styles = require('./styles.cjs.js');
|
|
8
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
10
|
|
|
11
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
|
|
13
|
+
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
|
|
14
|
+
|
|
10
15
|
var Avatar = function Avatar(_ref, ref) {
|
|
11
16
|
var _ref$size = _ref.size,
|
|
12
17
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
@@ -21,16 +26,23 @@ var Avatar = function Avatar(_ref, ref) {
|
|
|
21
26
|
rounded = _ref$rounded === void 0 ? true : _ref$rounded,
|
|
22
27
|
imageUrl = _ref.imageUrl,
|
|
23
28
|
children = _ref.children;
|
|
29
|
+
var _useState = react.useState(false),
|
|
30
|
+
_useState2 = _slicedToArray__default.default(_useState, 2),
|
|
31
|
+
imageError = _useState2[0],
|
|
32
|
+
setImageError = _useState2[1];
|
|
24
33
|
return /*#__PURE__*/jsxRuntime.jsx(styles.StyledAvatar, {
|
|
25
34
|
ref: ref,
|
|
26
35
|
$size: size,
|
|
27
36
|
$backgroundColor: backgroundColor,
|
|
28
37
|
$border: border,
|
|
29
38
|
$rounded: rounded,
|
|
30
|
-
children: imageUrl ? /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
39
|
+
children: !imageError && imageUrl ? /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
31
40
|
src: imageUrl,
|
|
32
41
|
loading: "lazy",
|
|
33
|
-
alt: "avatar"
|
|
42
|
+
alt: "avatar",
|
|
43
|
+
onError: function onError() {
|
|
44
|
+
return setImageError(true);
|
|
45
|
+
}
|
|
34
46
|
}) : children !== null && children !== void 0 ? children : /*#__PURE__*/jsxRuntime.jsx(icon.IconAvatarEmpty, {
|
|
35
47
|
size: "100%"
|
|
36
48
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n {\n size = 'medium',\n backgroundColor = bg200,\n border = { color: divider, width: '1px' },\n rounded = true,\n imageUrl,\n children,\n }: AvatarProps,\n ref\n) => (\n
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport { forwardRef, useState } from 'react';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n {\n size = 'medium',\n backgroundColor = bg200,\n border = { color: divider, width: '1px' },\n rounded = true,\n imageUrl,\n children,\n }: AvatarProps,\n ref\n) => {\n const [imageError, setImageError] = useState(false);\n return (\n <StyledAvatar\n ref={ref}\n $size={size}\n $backgroundColor={backgroundColor}\n $border={border}\n $rounded={rounded}\n >\n {!imageError && imageUrl ? (\n <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" onError={() => setImageError(true)} />\n ) : (\n children ?? <IconAvatarEmpty size=\"100%\" />\n )}\n </StyledAvatar>\n )\n};\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","imageError","setImageError","ref","$size","$backgroundColor","$border","$rounded","children","src","loading","alt"],"mappings":";;;;;;;;;;;;;;AAcA;AAUK;AARDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;AAMF;;AAAOC;AAAYC;;AAGfC;AACAC;AACAC;AACAC;AACAC;AAAkBC;AAGXC;AAAeC;AAAeC;;;AAA+C;;AAErDf;;AAC9B;AAGP;AAEA;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,KAAK,EAAE,wBAAwB,EAA4B,MAAM,OAAO,CAAC;AAEhF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,GACzE,wBAAwB,CAAC,KAAK,CAAC,CAAC;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,KAAK,EAAE,wBAAwB,EAA4B,MAAM,OAAO,CAAC;AAEhF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,GACzE,wBAAwB,CAAC,KAAK,CAAC,CAAC;;AA+BlC,wBAAkC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
2
3
|
import { IconAvatarEmpty } from '@remember-web/icon';
|
|
3
4
|
import { bg200, divider } from '@remember-web/mixin';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
5
|
+
import { forwardRef, useState } from 'react';
|
|
5
6
|
import { StyledAvatar } from './styles.esm.js';
|
|
6
7
|
import { jsx } from 'react/jsx-runtime';
|
|
7
8
|
|
|
@@ -19,16 +20,23 @@ var Avatar = function Avatar(_ref, ref) {
|
|
|
19
20
|
rounded = _ref$rounded === void 0 ? true : _ref$rounded,
|
|
20
21
|
imageUrl = _ref.imageUrl,
|
|
21
22
|
children = _ref.children;
|
|
23
|
+
var _useState = useState(false),
|
|
24
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
25
|
+
imageError = _useState2[0],
|
|
26
|
+
setImageError = _useState2[1];
|
|
22
27
|
return /*#__PURE__*/jsx(StyledAvatar, {
|
|
23
28
|
ref: ref,
|
|
24
29
|
$size: size,
|
|
25
30
|
$backgroundColor: backgroundColor,
|
|
26
31
|
$border: border,
|
|
27
32
|
$rounded: rounded,
|
|
28
|
-
children: imageUrl ? /*#__PURE__*/jsx("img", {
|
|
33
|
+
children: !imageError && imageUrl ? /*#__PURE__*/jsx("img", {
|
|
29
34
|
src: imageUrl,
|
|
30
35
|
loading: "lazy",
|
|
31
|
-
alt: "avatar"
|
|
36
|
+
alt: "avatar",
|
|
37
|
+
onError: function onError() {
|
|
38
|
+
return setImageError(true);
|
|
39
|
+
}
|
|
32
40
|
}) : children !== null && children !== void 0 ? children : /*#__PURE__*/jsx(IconAvatarEmpty, {
|
|
33
41
|
size: "100%"
|
|
34
42
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n {\n size = 'medium',\n backgroundColor = bg200,\n border = { color: divider, width: '1px' },\n rounded = true,\n imageUrl,\n children,\n }: AvatarProps,\n ref\n) => (\n
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport { forwardRef, useState } from 'react';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n {\n size = 'medium',\n backgroundColor = bg200,\n border = { color: divider, width: '1px' },\n rounded = true,\n imageUrl,\n children,\n }: AvatarProps,\n ref\n) => {\n const [imageError, setImageError] = useState(false);\n return (\n <StyledAvatar\n ref={ref}\n $size={size}\n $backgroundColor={backgroundColor}\n $border={border}\n $rounded={rounded}\n >\n {!imageError && imageUrl ? (\n <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" onError={() => setImageError(true)} />\n ) : (\n children ?? <IconAvatarEmpty size=\"100%\" />\n )}\n </StyledAvatar>\n )\n};\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","imageError","setImageError","ref","$size","$backgroundColor","$border","$rounded","children","src","loading","alt"],"mappings":";;;;;;;;AAcA;AAUK;AARDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;AAMF;;AAAOC;AAAYC;;AAGfC;AACAC;AACAC;AACAC;AACAC;AAAkBC;AAGXC;AAAeC;AAAeC;;;AAA+C;;AAErDf;;AAC9B;AAGP;AAEA;;"}
|
|
@@ -30,6 +30,7 @@ var NativeSelect = function NativeSelect(_ref, ref) {
|
|
|
30
30
|
return /*#__PURE__*/jsxRuntime.jsxs(styles.SelectContainer, {
|
|
31
31
|
"aria-disabled": disabled,
|
|
32
32
|
className: className,
|
|
33
|
+
$width: width,
|
|
33
34
|
children: [/*#__PURE__*/jsxRuntime.jsxs(styles$1.StyledSelect, _objectSpread(_objectSpread({}, props), {}, {
|
|
34
35
|
value: value,
|
|
35
36
|
$width: width,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { SelectContainer } from '../styles';\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\n\nconst NativeSelect: ForwardRefRenderFunction<\n HTMLSelectElement,\n NativeSelectInternalProps\n> = (\n {\n children,\n className,\n width,\n placeholder,\n value,\n disabled,\n onClick,\n ...props\n },\n ref\n) => {\n const showPlaceholder = !value && !!placeholder;\n\n return (\n <SelectContainer
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { SelectContainer } from '../styles';\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\n\nconst NativeSelect: ForwardRefRenderFunction<\n HTMLSelectElement,\n NativeSelectInternalProps\n> = (\n {\n children,\n className,\n width,\n placeholder,\n value,\n disabled,\n onClick,\n ...props\n },\n ref\n) => {\n const showPlaceholder = !value && !!placeholder;\n\n return (\n <SelectContainer\n aria-disabled={disabled}\n className={className}\n $width={width}\n >\n <StyledSelect\n {...props}\n value={value}\n $width={width}\n ref={ref}\n isPlaceholder={showPlaceholder}\n disabled={disabled}\n onClick={onClick}\n >\n {!value && (\n <option value=\"\" selected>\n {placeholder || 'ㅤ'}\n </option>\n )}\n {children}\n </StyledSelect>\n <SelectDownIcon>\n <IconArrow2Down size=\"small\" />\n </SelectDownIcon>\n </SelectContainer>\n );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","$width","value","ref","isPlaceholder","disabled","onClick","children","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAUb;AAeK;;;;;;;AAHEA;AAIL;;AAII;AACAC;AACAC;;AAIEC;AACAD;AACAE;AACAC;AACAC;AACAC;AAAiBC;AAGPL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"names":[],"mappings":";;;;;;AAyDA,wBAAwC"}
|
|
@@ -23,6 +23,7 @@ var NativeSelect = function NativeSelect(_ref, ref) {
|
|
|
23
23
|
return /*#__PURE__*/jsxs(SelectContainer, {
|
|
24
24
|
"aria-disabled": disabled,
|
|
25
25
|
className: className,
|
|
26
|
+
$width: width,
|
|
26
27
|
children: [/*#__PURE__*/jsxs(StyledSelect, _objectSpread(_objectSpread({}, props), {}, {
|
|
27
28
|
value: value,
|
|
28
29
|
$width: width,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { SelectContainer } from '../styles';\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\n\nconst NativeSelect: ForwardRefRenderFunction<\n HTMLSelectElement,\n NativeSelectInternalProps\n> = (\n {\n children,\n className,\n width,\n placeholder,\n value,\n disabled,\n onClick,\n ...props\n },\n ref\n) => {\n const showPlaceholder = !value && !!placeholder;\n\n return (\n <SelectContainer
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { SelectContainer } from '../styles';\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\n\nconst NativeSelect: ForwardRefRenderFunction<\n HTMLSelectElement,\n NativeSelectInternalProps\n> = (\n {\n children,\n className,\n width,\n placeholder,\n value,\n disabled,\n onClick,\n ...props\n },\n ref\n) => {\n const showPlaceholder = !value && !!placeholder;\n\n return (\n <SelectContainer\n aria-disabled={disabled}\n className={className}\n $width={width}\n >\n <StyledSelect\n {...props}\n value={value}\n $width={width}\n ref={ref}\n isPlaceholder={showPlaceholder}\n disabled={disabled}\n onClick={onClick}\n >\n {!value && (\n <option value=\"\" selected>\n {placeholder || 'ㅤ'}\n </option>\n )}\n {children}\n </StyledSelect>\n <SelectDownIcon>\n <IconArrow2Down size=\"small\" />\n </SelectDownIcon>\n </SelectContainer>\n );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","$width","value","ref","isPlaceholder","disabled","onClick","children","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAUb;AAeK;;;;;;;AAHEA;AAIL;;AAII;AACAC;AACAC;;AAIEC;AACAD;AACAE;AACAC;AACAC;AACAC;AAAiBC;AAGPL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { IconAvatarEmpty } from '@remember-web/icon';
|
|
4
4
|
import { bg200, divider } from '@remember-web/mixin';
|
|
5
5
|
import type { ConvertTransientProps } from '@remember-web/shared';
|
|
6
|
-
import { forwardRef } from 'react';
|
|
6
|
+
import { forwardRef, useState } from 'react';
|
|
7
7
|
import type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';
|
|
8
8
|
|
|
9
9
|
import type { StyledAvatarProps } from '@/Avatars/Avatar/styles';
|
|
@@ -22,20 +22,23 @@ const Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (
|
|
|
22
22
|
children,
|
|
23
23
|
}: AvatarProps,
|
|
24
24
|
ref
|
|
25
|
-
) =>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
)
|
|
25
|
+
) => {
|
|
26
|
+
const [imageError, setImageError] = useState(false);
|
|
27
|
+
return (
|
|
28
|
+
<StyledAvatar
|
|
29
|
+
ref={ref}
|
|
30
|
+
$size={size}
|
|
31
|
+
$backgroundColor={backgroundColor}
|
|
32
|
+
$border={border}
|
|
33
|
+
$rounded={rounded}
|
|
34
|
+
>
|
|
35
|
+
{!imageError && imageUrl ? (
|
|
36
|
+
<img src={imageUrl} loading="lazy" alt="avatar" onError={() => setImageError(true)} />
|
|
37
|
+
) : (
|
|
38
|
+
children ?? <IconAvatarEmpty size="100%" />
|
|
39
|
+
)}
|
|
40
|
+
</StyledAvatar>
|
|
41
|
+
)
|
|
42
|
+
};
|
|
40
43
|
|
|
41
44
|
export default forwardRef(Avatar);
|
|
@@ -27,7 +27,11 @@ const NativeSelect: ForwardRefRenderFunction<
|
|
|
27
27
|
const showPlaceholder = !value && !!placeholder;
|
|
28
28
|
|
|
29
29
|
return (
|
|
30
|
-
<SelectContainer
|
|
30
|
+
<SelectContainer
|
|
31
|
+
aria-disabled={disabled}
|
|
32
|
+
className={className}
|
|
33
|
+
$width={width}
|
|
34
|
+
>
|
|
31
35
|
<StyledSelect
|
|
32
36
|
{...props}
|
|
33
37
|
value={value}
|