@openameba/spindle-ui 2.6.3 → 2.9.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/CHANGELOG.md +27 -0
- package/Dialog/Dialog.css +1 -1
- package/Dialog/Dialog.d.ts.map +1 -1
- package/Dialog/Dialog.js +3 -30
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.mjs +3 -28
- package/Modal/AppealModal.css +2 -2
- package/Modal/AppealModal.d.ts.map +1 -1
- package/Modal/AppealModal.js +9 -32
- package/Modal/AppealModal.js.map +1 -1
- package/Modal/AppealModal.mjs +9 -30
- package/Modal/SemiModal.css +1 -1
- package/Modal/SemiModal.d.ts.map +1 -1
- package/Modal/SemiModal.js +9 -32
- package/Modal/SemiModal.js.map +1 -1
- package/Modal/SemiModal.mjs +9 -30
- package/Modal/index.css +2 -2
- package/Rating/Rating.css +1 -0
- package/Rating/Rating.d.ts +11 -0
- package/Rating/Rating.d.ts.map +1 -0
- package/Rating/Rating.js +60 -0
- package/Rating/Rating.js.map +1 -0
- package/Rating/Rating.mjs +30 -0
- package/Rating/StarBack.d.ts +6 -0
- package/Rating/StarBack.d.ts.map +1 -0
- package/Rating/StarBack.js +25 -0
- package/Rating/StarBack.js.map +1 -0
- package/Rating/StarBack.mjs +6 -0
- package/Rating/StarFront.d.ts +6 -0
- package/Rating/StarFront.d.ts.map +1 -0
- package/Rating/StarFront.js +26 -0
- package/Rating/StarFront.js.map +1 -0
- package/Rating/StarFront.mjs +7 -0
- package/Rating/index.d.ts +2 -0
- package/Rating/index.d.ts.map +1 -0
- package/Rating/index.js +6 -0
- package/Rating/index.js.map +1 -0
- package/Rating/index.mjs +1 -0
- package/index.css +3 -3
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +3 -1
- package/index.js.map +1 -1
- package/index.mjs +1 -0
- package/package.json +4 -4
package/Modal/SemiModal.mjs
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import React, { forwardRef,
|
|
1
|
+
import React, { forwardRef, useEffect, useRef } from 'react';
|
|
2
2
|
import { useMergeRefs } from 'use-callback-ref';
|
|
3
3
|
import CrossBold from "../Icon/CrossBold.mjs";
|
|
4
4
|
import { IconButton } from "../IconButton/index.mjs";
|
|
5
5
|
const BLOCK_NAME = 'spui-SemiModal';
|
|
6
|
-
const ANIMATION_NAME_LIST = [
|
|
7
|
-
`${BLOCK_NAME}-fade-out`,
|
|
8
|
-
`${BLOCK_NAME}-slide-out`,
|
|
9
|
-
];
|
|
10
6
|
const Frame = forwardRef(function SemiModal({ children, open, size = 'medium', type = 'popup', onClose, ...rest }, ref) {
|
|
11
|
-
const [closing, setClosing] = useState(false);
|
|
12
7
|
const dialogEl = useRef(null);
|
|
13
8
|
// 閉じるアイコンを押した時
|
|
14
9
|
const handleFormSubmit = (event) => {
|
|
@@ -27,41 +22,20 @@ const Frame = forwardRef(function SemiModal({ children, open, size = 'medium', t
|
|
|
27
22
|
// Detect escape key type
|
|
28
23
|
if (event.target === dialogEl.current) {
|
|
29
24
|
onClose?.(event);
|
|
30
|
-
setClosing(false);
|
|
31
25
|
}
|
|
32
26
|
};
|
|
33
|
-
// modalアニメーション終了時
|
|
34
|
-
const handleAnimationEnd = useCallback((event) => {
|
|
35
|
-
if (dialogEl.current &&
|
|
36
|
-
ANIMATION_NAME_LIST.includes(event.animationName) &&
|
|
37
|
-
!event.pseudoElement // To exclude ::backdrop
|
|
38
|
-
) {
|
|
39
|
-
dialogEl.current?.close?.();
|
|
40
|
-
}
|
|
41
|
-
}, [dialogEl]);
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
dialogEl.current?.addEventListener('animationend', handleAnimationEnd, false);
|
|
44
|
-
}, [handleAnimationEnd]);
|
|
45
27
|
useEffect(() => {
|
|
46
28
|
if (!dialogEl.current) {
|
|
47
29
|
return;
|
|
48
30
|
}
|
|
49
|
-
// Remove this when browsers support :has() pseudo-class
|
|
50
|
-
const classNameToStopScrollBehindDialog = `${BLOCK_NAME}--open`;
|
|
51
31
|
if (open) {
|
|
52
32
|
dialogEl.current?.showModal?.();
|
|
53
|
-
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
54
33
|
}
|
|
55
34
|
else {
|
|
56
|
-
dialogEl.current?.
|
|
57
|
-
// Always remove this class to avoid unexpected scroll stopping
|
|
58
|
-
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
35
|
+
dialogEl.current?.close?.();
|
|
59
36
|
}
|
|
60
37
|
}, [open, dialogEl]);
|
|
61
|
-
return (React.createElement("dialog", { role: "dialog", className:
|
|
62
|
-
.filter(Boolean)
|
|
63
|
-
.join(' ')
|
|
64
|
-
.trim(), ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size, ...rest },
|
|
38
|
+
return (React.createElement("dialog", { role: "dialog", className: BLOCK_NAME, ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size, ...rest },
|
|
65
39
|
React.createElement("form", { className: `${BLOCK_NAME}-frame`, method: "dialog", onSubmit: handleFormSubmit }, children)));
|
|
66
40
|
});
|
|
67
41
|
const Header = ({ children, ...rest }) => {
|
|
@@ -81,7 +55,12 @@ const Footer = ({ children, ...rest }) => {
|
|
|
81
55
|
return (React.createElement("div", { className: `${BLOCK_NAME}-footer`, ...rest }, children));
|
|
82
56
|
};
|
|
83
57
|
const StyleOnly = ({ className, children, size = 'medium', type = 'popup', ...rest }) => {
|
|
84
|
-
return (React.createElement("div", { className: [
|
|
58
|
+
return (React.createElement("div", { className: [
|
|
59
|
+
BLOCK_NAME,
|
|
60
|
+
`${BLOCK_NAME}--styleOnly`,
|
|
61
|
+
`${BLOCK_NAME}--${size}`,
|
|
62
|
+
className,
|
|
63
|
+
]
|
|
85
64
|
.filter(Boolean)
|
|
86
65
|
.join(' ')
|
|
87
66
|
.trim(), ...rest, "data-type": type, "data-size": size },
|
package/Modal/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(
|
|
2
2
|
--color-surface-accent-primary-light
|
|
3
|
-
);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);padding:0;
|
|
3
|
+
);--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);opacity:0;padding:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s;width:400px}.spui-AppealModal--styleOnly,.spui-AppealModal[open],.spui-AppealModal[open]::backdrop{opacity:1}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s}@starting-style{.spui-AppealModal[open]{opacity:0}.spui-AppealModal[open]::backdrop{opacity:0}}@media (prefers-reduced-motion:reduce){.spui-AppealModal,.spui-AppealModal::backdrop{transition-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0;grid-auto-flow:row;grid-template:"Image" "Title" "Body" "ButtonGroup" "CloseButton"/1fr;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup"/1fr 72px;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(
|
|
4
4
|
--color-surface-tertiary
|
|
5
|
-
);display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}
|
|
5
|
+
);display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}:root{--SemiModal-footer-justifyContent:right;--SemiModal-footer-button-minWidth:160px;--SemiModal-sp-footer-justifyContent:center}.spui-SemiModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);height:-moz-fit-content;height:fit-content;opacity:0;padding:0;position:fixed;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;width:-moz-fit-content;width:fit-content}.spui-SemiModal[data-type=sheet]{border-radius:20px 20px 0 0;bottom:0;margin:auto auto 0;transform:translateY(100%);transition:opacity .35s cubic-bezier(0,0,0,1),transform .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;will-change:translate}.spui-SemiModal--styleOnly,.spui-SemiModal[open],.spui-SemiModal[open]::backdrop{opacity:1}.spui-SemiModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s}.spui-SemiModal[data-type=sheet][open]{transform:translateY(0)}@starting-style{.spui-SemiModal[open]{opacity:0}.spui-SemiModal[open]::backdrop{opacity:0}.spui-SemiModal[data-type=sheet][open]{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.spui-SemiModal,.spui-SemiModal::backdrop{transition-duration:.01s}}html:has(.spui-SemiModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-SemiModal{width:calc(100% - 40px)}}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 2px var(--color-focus-clarity);outline:none}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-SemiModal-frame{box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;flex-direction:column;padding:0 16px 36px 36px}.spui-SemiModal-header{align-items:center;display:grid;gap:16px;grid-template-columns:1fr auto;justify-content:space-between;overflow-wrap:break-word;padding:32px 8px 32px 0}.spui-SemiModal-closeIconButton{height:48px;width:48px;--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary)}.spui-SemiModal-headerTitle{-webkit-box-orient:vertical;color:var(--color-text-high-emphasis);display:-webkit-box;font-size:1.25em;font-weight:600;height:-moz-fit-content;height:fit-content;-webkit-line-clamp:3;line-height:1.4;margin:0;overflow:hidden;width:100%}.spui-SemiModal-contents{line-height:1.6;overflow:hidden scroll}.spui-SemiModal-contents::-webkit-scrollbar{border-radius:4px;width:8px}.spui-SemiModal-contents::-webkit-scrollbar-thumb{background:var(--color-object-low-emphasis);border-radius:4px}.spui-SemiModal-contents::-webkit-scrollbar-track:enabled{background-color:var(--color-surface-secondary);border-radius:4px}.spui-SemiModal-footer{background-color:var(--color-surface-primary);bottom:0;display:flex;padding:24px 20px 0 0}.spui-SemiModal-footer:empty{padding:0 0 36px}@media screen and (min-width:768px){.spui-SemiModal[data-type=popup][data-size=small] .spui-SemiModal-frame{max-height:400px;max-width:480px}.spui-SemiModal[data-type=popup][data-size=medium] .spui-SemiModal-frame{max-height:700px;max-width:840px}.spui-SemiModal[data-type=popup][data-size=large] .spui-SemiModal-frame{max-height:840px;max-width:1024px}.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 200px)}.spui-SemiModal[data-type=sheet][data-size=small] .spui-SemiModal-frame{max-width:480px}.spui-SemiModal[data-type=sheet][data-size=medium] .spui-SemiModal-frame{max-width:840px}.spui-SemiModal[data-type=sheet][data-size=large] .spui-SemiModal-frame{max-width:1024px}.spui-SemiModal-footer{justify-content:var(--SemiModal-footer-justifyContent)}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){min-width:var(--SemiModal-footer-button-minWidth)}}@media screen and (max-width:768px){.spui-SemiModal[data-type=sheet]{margin:auto 0 0;max-width:100%;width:100%}.spui-SemiModal[data-type=popup] .spui-SemiModal-frame,.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 40px)}.spui-SemiModal[data-type=popup]{margin:auto 20px}.spui-SemiModal-contents{max-height:100%}.spui-SemiModal-header{padding:24px 0}.spui-SemiModal-closeIconButton{height:24px;width:24px;--IconButton--neutral-onHover-backgroundColor:transparent}.spui-SemiModal-frame{padding:0 20px 24px}.spui-SemiModal-footer{justify-content:var(--SemiModal-sp-footer-justifyContent);padding:16px 0 0}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){max-width:360px;width:100%}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.spui-Rating{align-items:center;display:flex;gap:8px}.spui-Rating-image{display:flex;gap:2px;line-height:0}.spui-Rating-text{color:var(--color-text-high-emphasis);font-weight:700;line-height:1.4;margin:0}.spui-Rating--large .spui-Rating-text{font-size:1.25em}.spui-Rating--medium .spui-Rating-text{font-size:1em}.spui-Rating--small .spui-Rating-text{font-size:.8125em}.spui-Rating-item--active{display:block;position:relative}.spui-Rating-icon{color:var(--color-border-high-emphasis)}.spui-Rating-item--front{height:100%;overflow:hidden}.spui-Rating-item--front,.spui-Rating-item--front .spui-Rating-icon{left:0;position:absolute;top:0}.spui-Rating-item--active .spui-Rating-icon{color:transparent}.spui-Rating-item--active .spui-Rating-item--front .spui-Rating-icon,.spui-Rating-item--full .spui-Rating-icon{color:var(--color-object-rating)}.spui-Rating--large .spui-Rating-icon{font-size:1.25em}.spui-Rating--medium .spui-Rating-icon{font-size:1em}.spui-Rating--small .spui-Rating-icon{font-size:.8125em}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type Size = 'large' | 'medium' | 'small';
|
|
3
|
+
interface Props extends React.HTMLAttributes<HTMLElement> {
|
|
4
|
+
max: number;
|
|
5
|
+
value: number;
|
|
6
|
+
size: Size;
|
|
7
|
+
showText?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const Rating: (props: Props) => React.JSX.Element;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=Rating.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../src/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAYD,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,sBAkDlC,CAAC"}
|
package/Rating/Rating.js
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
exports.Rating = void 0;
|
|
29
|
+
var react_1 = __importDefault(require("react"));
|
|
30
|
+
var Star_1 = __importDefault(require("../Icon/Star"));
|
|
31
|
+
var StarBack_1 = __importDefault(require("./StarBack"));
|
|
32
|
+
var StarFront_1 = __importDefault(require("./StarFront"));
|
|
33
|
+
var BLOCK_NAME = 'spui-Rating';
|
|
34
|
+
var convertToValue = function (num) {
|
|
35
|
+
return Math.round(num * 10) / 10;
|
|
36
|
+
};
|
|
37
|
+
var clamp = function (num, min, max) {
|
|
38
|
+
return Math.max(min, Math.min(num, max));
|
|
39
|
+
};
|
|
40
|
+
var Rating = function (props) {
|
|
41
|
+
var max = props.max, value = props.value, size = props.size, _a = props.showText, showText = _a === void 0 ? false : _a, rest = __rest(props, ["max", "value", "size", "showText"]);
|
|
42
|
+
var convertedValue = convertToValue(value);
|
|
43
|
+
var clampedValue = clamp(convertedValue, 0, max);
|
|
44
|
+
var ariaLabel = "".concat(max, "\u3064\u661F\u4E2D").concat(clampedValue, "\u306E\u8A55\u4FA1");
|
|
45
|
+
return (react_1.default.createElement("div", __assign({ className: "".concat(BLOCK_NAME, " ").concat(BLOCK_NAME, "--").concat(size) }, rest),
|
|
46
|
+
showText && react_1.default.createElement("p", { className: "".concat(BLOCK_NAME, "-text") }, clampedValue),
|
|
47
|
+
react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-image"), role: "img", "aria-label": ariaLabel }, Array.from({ length: max }, function (_, index) {
|
|
48
|
+
var itemValue = index + 1;
|
|
49
|
+
var isFull = clampedValue >= itemValue;
|
|
50
|
+
var fillRatio = clamp(clampedValue - (itemValue - 1), 0, 1);
|
|
51
|
+
var isActive = fillRatio > 0 && fillRatio < 1;
|
|
52
|
+
return (react_1.default.createElement("span", { key: itemValue, className: "".concat(BLOCK_NAME, "-item") }, isFull ? (react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-item--full") },
|
|
53
|
+
react_1.default.createElement(StarFront_1.default, { className: "".concat(BLOCK_NAME, "-icon"), "aria-hidden": "true" }))) : isActive ? (react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-item--active") },
|
|
54
|
+
react_1.default.createElement(StarBack_1.default, { className: "".concat(BLOCK_NAME, "-icon"), "aria-hidden": "true" }),
|
|
55
|
+
react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-item--front"), style: { width: "".concat(fillRatio * 100, "%") } },
|
|
56
|
+
react_1.default.createElement(StarFront_1.default, { className: "".concat(BLOCK_NAME, "-icon"), "aria-hidden": "true" })))) : (react_1.default.createElement(Star_1.default, { className: "".concat(BLOCK_NAME, "-icon"), "aria-hidden": "true" }))));
|
|
57
|
+
}))));
|
|
58
|
+
};
|
|
59
|
+
exports.Rating = Rating;
|
|
60
|
+
//# sourceMappingURL=Rating.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../src/Rating/Rating.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,sDAAgC;AAChC,wDAAkC;AAClC,0DAAoC;AAWpC,IAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,IAAM,cAAc,GAAG,UAAC,GAAW;IACjC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;AACnC,CAAC,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,GAAW,EAAE,GAAW,EAAE,GAAW;IAClD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEK,IAAM,MAAM,GAAG,UAAC,KAAY;IACzB,IAAA,GAAG,GAA6C,KAAK,IAAlD,EAAE,KAAK,GAAsC,KAAK,MAA3C,EAAE,IAAI,GAAgC,KAAK,KAArC,EAAE,KAA8B,KAAK,SAAnB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAK,IAAI,UAAK,KAAK,EAAvD,oCAA+C,CAAF,CAAW;IAC9D,IAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAC7C,IAAM,YAAY,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;IACnD,IAAM,SAAS,GAAG,UAAG,GAAG,+BAAM,YAAY,uBAAK,CAAC;IAEhD,OAAO,CACL,gDAAK,SAAS,EAAE,UAAG,UAAU,cAAI,UAAU,eAAK,IAAI,CAAE,IAAM,IAAI;QAC7D,QAAQ,IAAI,qCAAG,SAAS,EAAE,UAAG,UAAU,UAAO,IAAG,YAAY,CAAK;QACnE,uCAAK,SAAS,EAAE,UAAG,UAAU,WAAQ,EAAE,IAAI,EAAC,KAAK,gBAAa,SAAS,IACpE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,UAAC,CAAC,EAAE,KAAa;YAC5C,IAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;YAC5B,IAAM,MAAM,GAAG,YAAY,IAAI,SAAS,CAAC;YACzC,IAAM,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAC9D,IAAM,QAAQ,GAAG,SAAS,GAAG,CAAC,IAAI,SAAS,GAAG,CAAC,CAAC;YAEhD,OAAO,CACL,wCAAM,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,UAAG,UAAU,UAAO,IAClD,MAAM,CAAC,CAAC,CAAC,CACR,wCAAM,SAAS,EAAE,UAAG,UAAU,gBAAa;gBACzC,8BAAC,mBAAS,IACR,SAAS,EAAE,UAAG,UAAU,UAAO,iBACnB,MAAM,GAClB,CACG,CACR,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,wCAAM,SAAS,EAAE,UAAG,UAAU,kBAAe;gBAC3C,8BAAC,kBAAQ,IACP,SAAS,EAAE,UAAG,UAAU,UAAO,iBACnB,MAAM,GAClB;gBACF,wCACE,SAAS,EAAE,UAAG,UAAU,iBAAc,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAG,SAAS,GAAG,GAAG,MAAG,EAAE;oBAEvC,8BAAC,mBAAS,IACR,SAAS,EAAE,UAAG,UAAU,UAAO,iBACnB,MAAM,GAClB,CACG,CACF,CACR,CAAC,CAAC,CAAC,CACF,8BAAC,cAAI,IAAC,SAAS,EAAE,UAAG,UAAU,UAAO,iBAAc,MAAM,GAAG,CAC7D,CACI,CACR,CAAC;QACJ,CAAC,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,MAAM,UAkDjB"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Star from "../Icon/Star.mjs";
|
|
3
|
+
import StarBack from "./StarBack.mjs";
|
|
4
|
+
import StarFront from "./StarFront.mjs";
|
|
5
|
+
const BLOCK_NAME = 'spui-Rating';
|
|
6
|
+
const convertToValue = (num) => {
|
|
7
|
+
return Math.round(num * 10) / 10;
|
|
8
|
+
};
|
|
9
|
+
const clamp = (num, min, max) => {
|
|
10
|
+
return Math.max(min, Math.min(num, max));
|
|
11
|
+
};
|
|
12
|
+
export const Rating = (props) => {
|
|
13
|
+
const { max, value, size, showText = false, ...rest } = props;
|
|
14
|
+
const convertedValue = convertToValue(value);
|
|
15
|
+
const clampedValue = clamp(convertedValue, 0, max);
|
|
16
|
+
const ariaLabel = `${max}つ星中${clampedValue}の評価`;
|
|
17
|
+
return (React.createElement("div", { className: `${BLOCK_NAME} ${BLOCK_NAME}--${size}`, ...rest },
|
|
18
|
+
showText && React.createElement("p", { className: `${BLOCK_NAME}-text` }, clampedValue),
|
|
19
|
+
React.createElement("div", { className: `${BLOCK_NAME}-image`, role: "img", "aria-label": ariaLabel }, Array.from({ length: max }, (_, index) => {
|
|
20
|
+
const itemValue = index + 1;
|
|
21
|
+
const isFull = clampedValue >= itemValue;
|
|
22
|
+
const fillRatio = clamp(clampedValue - (itemValue - 1), 0, 1);
|
|
23
|
+
const isActive = fillRatio > 0 && fillRatio < 1;
|
|
24
|
+
return (React.createElement("span", { key: itemValue, className: `${BLOCK_NAME}-item` }, isFull ? (React.createElement("span", { className: `${BLOCK_NAME}-item--full` },
|
|
25
|
+
React.createElement(StarFront, { className: `${BLOCK_NAME}-icon`, "aria-hidden": "true" }))) : isActive ? (React.createElement("span", { className: `${BLOCK_NAME}-item--active` },
|
|
26
|
+
React.createElement(StarBack, { className: `${BLOCK_NAME}-icon`, "aria-hidden": "true" }),
|
|
27
|
+
React.createElement("span", { className: `${BLOCK_NAME}-item--front`, style: { width: `${fillRatio * 100}%` } },
|
|
28
|
+
React.createElement(StarFront, { className: `${BLOCK_NAME}-icon`, "aria-hidden": "true" })))) : (React.createElement(Star, { className: `${BLOCK_NAME}-icon`, "aria-hidden": "true" }))));
|
|
29
|
+
}))));
|
|
30
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarBack.d.ts","sourceRoot":"","sources":["../../src/Rating/StarBack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAM,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;CAAG;AAExD,eAAO,MAAM,QAAQ,GAAI,OAAO,KAAK,sBAiBpC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.StarBack = void 0;
|
|
18
|
+
var react_1 = __importDefault(require("react"));
|
|
19
|
+
var StarBack = function (props) {
|
|
20
|
+
return (react_1.default.createElement("svg", __assign({ fill: "currentColor", height: "1em", viewBox: "0 0 16 16", width: "1em", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
21
|
+
react_1.default.createElement("path", { d: "m7.99976 2.32129c.20919 0 .38925.113.47949.31152l1.30664 2.87305.1582.34863.37991.04297 3.1338.35352c.2122.02395.3761.15758.4404.35644.0654.20211.0104.40434-.1445.54492l-.003.00293-2.3271 2.13379-.2813.25782.0762.375.6328 3.08882v.001c.0419.2095-.0358.4095-.2051.5332-.1029.074-.2129.1064-.3125.1065-.0612 0-.1286-.0122-.1943-.0391l-.0644-.0322-2.74028-1.5664-.33399-.1905-.33398.1895-2.74707 1.5605-.00098.001c-.08551.0489-.17721.0703-.25879.0703-.07484 0-.15524-.0181-.23437-.0586l-.07813-.0478c-.16849-.1231-.24652-.321-.20605-.5293l.63281-3.09376.07715-.37402-.28223-.25879-2.32617-2.13282-.00293-.00293-.05371-.05566c-.11358-.1357-.14809-.31321-.09082-.49023.06442-.19874.22827-.33254.44043-.35645l3.13281-.35352.38086-.04296.1582-.34864 1.30176-2.8623c.09632-.20159.28109-.31537.49024-.31543z", stroke: "#83898e", strokeWidth: "1.35" })));
|
|
22
|
+
};
|
|
23
|
+
exports.StarBack = StarBack;
|
|
24
|
+
exports.default = exports.StarBack;
|
|
25
|
+
//# sourceMappingURL=StarBack.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarBack.js","sourceRoot":"","sources":["../../src/Rating/StarBack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAInB,IAAM,QAAQ,GAAG,UAAC,KAAY;IACnC,OAAO,CACL,gDACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,IAC9B,KAAK;QAET,wCACE,CAAC,EAAC,gyBAAgyB,EAClyB,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,MAAM,GAClB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,QAAQ,YAiBnB;AAEF,kBAAe,gBAAQ,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const StarBack = (props) => {
|
|
3
|
+
return (React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 16 16", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...props },
|
|
4
|
+
React.createElement("path", { d: "m7.99976 2.32129c.20919 0 .38925.113.47949.31152l1.30664 2.87305.1582.34863.37991.04297 3.1338.35352c.2122.02395.3761.15758.4404.35644.0654.20211.0104.40434-.1445.54492l-.003.00293-2.3271 2.13379-.2813.25782.0762.375.6328 3.08882v.001c.0419.2095-.0358.4095-.2051.5332-.1029.074-.2129.1064-.3125.1065-.0612 0-.1286-.0122-.1943-.0391l-.0644-.0322-2.74028-1.5664-.33399-.1905-.33398.1895-2.74707 1.5605-.00098.001c-.08551.0489-.17721.0703-.25879.0703-.07484 0-.15524-.0181-.23437-.0586l-.07813-.0478c-.16849-.1231-.24652-.321-.20605-.5293l.63281-3.09376.07715-.37402-.28223-.25879-2.32617-2.13282-.00293-.00293-.05371-.05566c-.11358-.1357-.14809-.31321-.09082-.49023.06442-.19874.22827-.33254.44043-.35645l3.13281-.35352.38086-.04296.1582-.34864 1.30176-2.8623c.09632-.20159.28109-.31537.49024-.31543z", stroke: "#83898e", strokeWidth: "1.35" })));
|
|
5
|
+
};
|
|
6
|
+
export default StarBack;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarFront.d.ts","sourceRoot":"","sources":["../../src/Rating/StarFront.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAM,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;CAAG;AAExD,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,sBAmBrC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.StarFront = void 0;
|
|
18
|
+
var react_1 = __importDefault(require("react"));
|
|
19
|
+
var StarFront = function (props) {
|
|
20
|
+
return (react_1.default.createElement("svg", __assign({ fill: "currentColor", height: "1em", viewBox: "0 0 16 16", width: "1em", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
21
|
+
react_1.default.createElement("path", { d: "m14.2066 7.65315-2.3267 2.13333.6334 3.09332c.0933.4667-.0867.9334-.4734 1.2134-.2133.1533-.46.2333-.7066.2333-.2 0-.4067-.0533-.5934-.16l-2.73997-1.5667-2.74666 1.56c-.18667.1067-.39334.16-.59334.16-.24666 0-.49333-.08-.70666-.2333-.38667-.28-.56667-.7467-.47334-1.2133l.63334-3.09338-2.32667-2.13334c-.35333-.32-.48-.8-.33333-1.25333s.53333-.76667 1.00667-.82l3.13333-.35333 1.30667-2.87334c.20666-.43333.62666-.7 1.09999-.7.47334 0 .89334.26667 1.09334.70667l1.30663 2.87333 3.1334.35334c.4733.05333.86.36666 1.0066.82.1467.45333.02.93333-.3333 1.25333z" }),
|
|
22
|
+
react_1.default.createElement("path", { d: "m7.99976 2.02148c.32659 0 .61293.18147.75195.48731l1.30659 2.87305.0879.19336.212.02441 3.1328.35254c.3283.03699.5914.25149.6923.56347.1014.3137.0146.63915-.2285.85938l-.0019.00195-2.3262 2.13282-.1572.14355.043.20801.6328 3.09077v.001c.0567.2837-.031.563-.2325.7578l-.0927.0782c-.1518.1088-.3218.162-.4864.1621-.134 0-.2768-.036-.4072-.1104l-2.74022-1.5664-.18555-.1064-.18554.1054-2.74707 1.5606h-.00098c-.13047.0745-.27302.1103-.40723.1103-.12364 0-.25032-.0297-.37012-.0908l-.11718-.0713c-.26583-.1928-.3893-.5105-.3252-.834l.63281-3.09273.04297-.20899-.15625-.14355-2.32715-2.13281-.00097-.00196-.08399-.08691c-.17825-.21424-.23335-.4978-.14453-.77246.10092-.31194.36319-.52644.69141-.56348l3.13379-.35254.21094-.02441.08789-.19336 1.30371-2.86719c.14532-.3047.43511-.48626.76172-.48633z", stroke: "#08121a", strokeOpacity: ".08", strokeWidth: ".75" })));
|
|
23
|
+
};
|
|
24
|
+
exports.StarFront = StarFront;
|
|
25
|
+
exports.default = exports.StarFront;
|
|
26
|
+
//# sourceMappingURL=StarFront.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarFront.js","sourceRoot":"","sources":["../../src/Rating/StarFront.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAInB,IAAM,SAAS,GAAG,UAAC,KAAY;IACpC,OAAO,CACL,gDACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,IAC9B,KAAK;QAET,wCAAM,CAAC,EAAC,8iBAA8iB,GAAG;QACzjB,wCACE,CAAC,EAAC,0xBAA0xB,EAC5xB,MAAM,EAAC,SAAS,EAChB,aAAa,EAAC,KAAK,EACnB,WAAW,EAAC,KAAK,GACjB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,SAAS,aAmBpB;AAEF,kBAAe,iBAAS,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const StarFront = (props) => {
|
|
3
|
+
return (React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 16 16", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...props },
|
|
4
|
+
React.createElement("path", { d: "m14.2066 7.65315-2.3267 2.13333.6334 3.09332c.0933.4667-.0867.9334-.4734 1.2134-.2133.1533-.46.2333-.7066.2333-.2 0-.4067-.0533-.5934-.16l-2.73997-1.5667-2.74666 1.56c-.18667.1067-.39334.16-.59334.16-.24666 0-.49333-.08-.70666-.2333-.38667-.28-.56667-.7467-.47334-1.2133l.63334-3.09338-2.32667-2.13334c-.35333-.32-.48-.8-.33333-1.25333s.53333-.76667 1.00667-.82l3.13333-.35333 1.30667-2.87334c.20666-.43333.62666-.7 1.09999-.7.47334 0 .89334.26667 1.09334.70667l1.30663 2.87333 3.1334.35334c.4733.05333.86.36666 1.0066.82.1467.45333.02.93333-.3333 1.25333z" }),
|
|
5
|
+
React.createElement("path", { d: "m7.99976 2.02148c.32659 0 .61293.18147.75195.48731l1.30659 2.87305.0879.19336.212.02441 3.1328.35254c.3283.03699.5914.25149.6923.56347.1014.3137.0146.63915-.2285.85938l-.0019.00195-2.3262 2.13282-.1572.14355.043.20801.6328 3.09077v.001c.0567.2837-.031.563-.2325.7578l-.0927.0782c-.1518.1088-.3218.162-.4864.1621-.134 0-.2768-.036-.4072-.1104l-2.74022-1.5664-.18555-.1064-.18554.1054-2.74707 1.5606h-.00098c-.13047.0745-.27302.1103-.40723.1103-.12364 0-.25032-.0297-.37012-.0908l-.11718-.0713c-.26583-.1928-.3893-.5105-.3252-.834l.63281-3.09273.04297-.20899-.15625-.14355-2.32715-2.13281-.00097-.00196-.08399-.08691c-.17825-.21424-.23335-.4978-.14453-.77246.10092-.31194.36319-.52644.69141-.56348l3.13379-.35254.21094-.02441.08789-.19336 1.30371-2.86719c.14532-.3047.43511-.48626.76172-.48633z", stroke: "#08121a", strokeOpacity: ".08", strokeWidth: ".75" })));
|
|
6
|
+
};
|
|
7
|
+
export default StarFront;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Rating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
package/Rating/index.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Rating = void 0;
|
|
4
|
+
var Rating_1 = require("./Rating");
|
|
5
|
+
Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return Rating_1.Rating; } });
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Rating/index.ts"],"names":[],"mappings":";;;AAAA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}
|
package/Rating/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Rating } from "./Rating.mjs";
|