@zonos/amino 5.3.15 → 5.3.17
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/all.d.ts +1 -0
- package/components/input/MultiInput.d.ts +10 -0
- package/components/input/MultiInput.js +1 -0
- package/components/tag/Tag.d.ts +6 -3
- package/components/tag/Tag.js +1 -1
- package/components/text-avatar/TextAvatar.d.ts +3 -1
- package/components/text-avatar/TextAvatar.js +1 -1
- package/package.json +1 -1
package/all.d.ts
CHANGED
|
@@ -48,6 +48,7 @@ import './components/glow/GlowWrapper';
|
|
|
48
48
|
import './components/graph-matrix/GraphMatrix';
|
|
49
49
|
import './components/help-text/HelpText';
|
|
50
50
|
import './components/input/Input';
|
|
51
|
+
import './components/input/MultiInput';
|
|
51
52
|
import './components/input/SearchInput';
|
|
52
53
|
import './components/layout/Layout';
|
|
53
54
|
import './components/layout/NavigationGroup';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export type MultiInputProps = {
|
|
2
|
+
className?: string;
|
|
3
|
+
placeholder?: string;
|
|
4
|
+
style?: React.CSSProperties;
|
|
5
|
+
tags: string[];
|
|
6
|
+
setHasValidationError?: (hasValidationError: boolean) => void;
|
|
7
|
+
setTags: (tags: string[]) => void;
|
|
8
|
+
tagValidation?: (tag: string) => boolean;
|
|
9
|
+
};
|
|
10
|
+
export declare const MultiInput: ({ className, placeholder, setHasValidationError, setTags, style, tags, tagValidation, }: MultiInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("../../_tslib-bd4862e8.js"),t=require("react/jsx-runtime"),n=require("react"),r=require("clsx"),u=require("../flex/Flex.js"),l=require("../tag/Tag.js"),a=require("../../style-inject.es-d4ddeae4.js");function i(e){return e&&e.__esModule?e:{default:e}}require("../../icons/RemoveIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../styles/constants/theme.js");var o=i(r),s="Amino_MultiInput-module__tagInputWrapper--FTdAL",c="Amino_MultiInput-module__tagInput--cBsz8";a.styleInject(".Amino_MultiInput-module__tagInputWrapper--FTdAL.Amino_MultiInput-module__tagInputWrapper--FTdAL{border:1px solid #ccc;border-radius:4px;overflow-x:auto;padding:5px}.Amino_MultiInput-module__tagInputWrapper--FTdAL.Amino_MultiInput-module__tagInputWrapper--FTdAL .Amino_MultiInput-module__tagInput--cBsz8{border:none;flex:1 1 auto;flex-grow:1;font-size:var(--amino-font-size-base);font-weight:500;min-width:100px;min-width:50px;outline:none;padding:5px}");exports.MultiInput=function(r){var a=r.className,i=r.placeholder,p=void 0===i?"":i,d=r.setHasValidationError,g=r.setTags,_=r.style,f=r.tags,m=r.tagValidation,h=e.__read(n.useState(""),2),x=h[0],I=h[1],v=n.useRef(null),A=e.__read(n.useState(null),2),j=A[0],y=A[1];n.useEffect((function(){if(d&&m){var e=f.some((function(e){return!m(e)}));d(e)}}),[f,m,d]);var q=function(e){g(f.filter((function(t,n){return n!==e})))};return t.jsxs(u.Flex,{alignItems:"center",className:o.default([a,s]),flexWrap:"wrap",gap:4,style:_,children:[f.map((function(e,n){var r=!(!m||m(e)),a=j===n,i=r?"error":"default";return t.jsx(u.Flex,{alignItems:"center",gap:0,children:t.jsx(l.Tag,{highlighted:a,intent:i,onClick:function(){return y(n)},onClose:function(){return q(n)},size:"lg",children:e})},e)})),t.jsx("input",{ref:v,className:c,onChange:function(e){I(e.target.value)},onFocus:function(){v.current&&(v.current.selectionStart=v.current.value.length,v.current.selectionEnd=v.current.value.length)},onKeyDown:function(t){var n;"Enter"!==t.key&&","!==t.key&&" "!==t.key||!x?"Backspace"===t.key?""===x&&f.length>0&&(null===j?y(f.length-1):(q(j),y(null))):"ArrowLeft"===t.key?null===j&&f.length>0?y(f.length-1):null!==j&&j>0&&y(j-1):"ArrowRight"===t.key&&null!==j&&j<f.length-1?y(j+1):y(null):(t.preventDefault(),(n=x.trim())&&(g(e.__spreadArray(e.__spreadArray([],e.__read(f),!1),[n],!1)),I("")))},placeholder:f.length?"":p,value:x})]})};
|
package/components/tag/Tag.d.ts
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import type { BaseProps } from "../../types/BaseProps";
|
|
3
3
|
type TagSize = 'base' | 'lg';
|
|
4
|
-
|
|
4
|
+
type TagIntent = 'default' | 'error';
|
|
5
|
+
export type TagProps = BaseProps & HTMLAttributes<HTMLDivElement> & {
|
|
5
6
|
children?: ReactNode | string;
|
|
7
|
+
highlighted?: boolean;
|
|
6
8
|
icon?: ReactNode;
|
|
7
9
|
iconRight?: boolean;
|
|
10
|
+
intent?: TagIntent;
|
|
8
11
|
size?: TagSize;
|
|
9
12
|
onClick?: () => void;
|
|
10
13
|
onClose: () => void;
|
|
11
14
|
};
|
|
12
|
-
export declare const Tag: ({ children, className, icon, iconRight, onClick, onClose, size, style, }: TagProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const Tag: ({ children, className, highlighted, icon, iconRight, intent, onClick, onClose, size, style, }: TagProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
16
|
export {};
|
package/components/tag/Tag.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),o=require("clsx"),a=require("../../icons/RemoveIcon.js"),i=require("../../style-inject.es-d4ddeae4.js");function r(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../../icons/icon-base/_IconBase.js"),require("../../styles/constants/theme.js");var l=r(o),n={tagWrapper:"Amino_Tag-module__tagWrapper--5McNK",base:"Amino_Tag-module__base--z0-9-",highlight:"Amino_Tag-module__highlight--b9lSD",error:"Amino_Tag-module__error--JytAu",styledTagRight:"Amino_Tag-module__styledTagRight--5GHpr",styledTagLeft:"Amino_Tag-module__styledTagLeft--2XXDe",iconRight:"Amino_Tag-module__iconRight--LHvji",styledRemoveBtn:"Amino_Tag-module__styledRemoveBtn--nSh7A"};i.styleInject(".Amino_Tag-module__tagWrapper--5McNK{background-color:var(--amino-gray-50);border:1px solid var(--amino-gray-200);border-radius:var(--amino-radius-6);color:var(--amino-text-color);display:inline-flex}.Amino_Tag-module__tagWrapper--5McNK.Amino_Tag-module__base--z0-9-{height:20px}.Amino_Tag-module__tagWrapper--5McNK.Amino_Tag-module__highlight--b9lSD{background-color:var(--amino-blue-50);border:1px solid var(--amino-blue-600);color:var(--amino-blue-800)}.Amino_Tag-module__tagWrapper--5McNK.Amino_Tag-module__error--JytAu{background-color:var(--amino-red-50);border:1px solid var(--amino-red-200);color:var(--amino-red-800)}.Amino_Tag-module__tagWrapper--5McNK.Amino_Tag-module__error--JytAu.Amino_Tag-module__highlight--b9lSD{border:1px solid var(--amino-red-600)}.Amino_Tag-module__tagWrapper--5McNK:hover,.Amino_Tag-module__tagWrapper--5McNK:hover .Amino_Tag-module__styledTagRight--5GHpr{background-color:var(--amino-gray-100)}.Amino_Tag-module__tagWrapper--5McNK:hover.Amino_Tag-module__highlight--b9lSD,.Amino_Tag-module__tagWrapper--5McNK:hover.Amino_Tag-module__highlight--b9lSD .Amino_Tag-module__styledTagRight--5GHpr{background-color:var(--amino-blue-100)}.Amino_Tag-module__tagWrapper--5McNK:hover.Amino_Tag-module__error--JytAu,.Amino_Tag-module__tagWrapper--5McNK:hover.Amino_Tag-module__error--JytAu .Amino_Tag-module__styledTagRight--5GHpr{background-color:var(--amino-red-100)}.Amino_Tag-module__styledTagLeft--2XXDe{align-items:center;border-radius:var(--amino-radius-6) 0 0 var(--amino-radius-6);display:inline-flex;font-size:var(--amino-font-size-base);font-weight:400;font-weight:500;gap:4px;padding:4px 4px 4px 8px;text-align:center}.Amino_Tag-module__styledTagLeft--2XXDe:focus{outline:none}.Amino_Tag-module__styledTagLeft--2XXDe p{margin:0}.Amino_Tag-module__styledTagLeft--2XXDe.Amino_Tag-module__iconRight--LHvji svg{order:2}.Amino_Tag-module__base--z0-9- .Amino_Tag-module__styledTagLeft--2XXDe{padding:2px 4px}.Amino_Tag-module__styledTagRight--5GHpr{align-items:center;border-radius:var(--amino-radius-6);display:inline-flex;padding:4px 5px}.Amino_Tag-module__base--z0-9- .Amino_Tag-module__styledTagRight--5GHpr{padding:2px 3px}.Amino_Tag-module__styledRemoveBtn--nSh7A{display:flex}");exports.Tag=function(o){var i=o.children,r=o.className,_=o.highlighted,t=void 0!==_&&_,g=o.icon,d=o.iconRight,m=o.intent,s=void 0===m?"default":m,u=o.onClick,c=o.onClose,p=o.size,T=void 0===p?"base":p,h=o.style;return e.jsxs("div",{className:l.default(r,n.tagWrapper,"base"===T&&n.base,"default"!==s?n[s]:"",t&&n.highlight),style:h,children:[e.jsxs("button",{className:l.default(n.styledTagLeft,d&&n.iconRight),onClick:u,type:"button",children:[g,e.jsx("p",{children:i})]}),e.jsx("button",{className:n.styledTagRight,onClick:c,type:"button",children:e.jsx("div",{className:n.styledRemoveBtn,children:e.jsx(a.RemoveIcon,{size:14})})})]})};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export type TextAvatarProps = {
|
|
2
|
+
className?: string;
|
|
2
3
|
label: string;
|
|
4
|
+
style?: React.CSSProperties;
|
|
3
5
|
};
|
|
4
|
-
export declare const TextAvatar: ({ label }: TextAvatarProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const TextAvatar: ({ className, label, style }: TextAvatarProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var a=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var e=require("../../_tslib-bd4862e8.js"),a=require("react/jsx-runtime"),t=require("clsx"),r=require("../../style-inject.es-d4ddeae4.js");function n(e){return e&&e.__esModule?e:{default:e}}var i=n(t),o="Amino_TextAvatar-module__gradientSquare--XZznH";r.styleInject(".Amino_TextAvatar-module__gradientSquare--XZznH{align-items:center;background:linear-gradient(137deg,var(--amino-text-avatar-gradient-start),var(--amino-text-avatar-gradient-end));border-radius:var(--amino-radius-6);color:var(--amino-gray-0);display:flex;font-weight:500;height:32px;justify-content:center;width:32px}[data-theme=night] .Amino_TextAvatar-module__gradientSquare--XZznH{color:var(--amino-gray-1000)}");var s=function(e,a){var t=Array.from(e).reduce((function(e,a){return a.charCodeAt(0)+((e<<5)-e)}),0);return"hsl(".concat(t%360,", 80%, ").concat(a,"%)")};exports.TextAvatar=function(t){var r,n=t.className,l=t.label,d=t.style,u={"--amino-text-avatar-gradient-end":s(l&&l.split("").reverse().join("")||"default label",40),"--amino-text-avatar-gradient-start":s(l||"default label",45)};return a.jsx("div",{className:i.default([o,n]),style:e.__assign(e.__assign({},u),d),children:l&&(null===(r=l[0])||void 0===r?void 0:r.toUpperCase())||"D"})};
|