ui-library-sorin 0.0.0 → 0.0.2
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/components/IconButton/IconButton.d.ts +2 -1
- package/dist/components/IconButton/IconButton2.cjs +1 -1
- package/dist/components/IconButton/IconButton2.js +6 -2
- package/dist/components/Input/Input.d.ts +2 -1
- package/dist/components/Input/Input2.cjs +1 -1
- package/dist/components/Input/Input2.js +42 -45
- package/dist/components/Select/Select.d.ts +2 -1
- package/dist/components/Select/Select2.cjs +1 -1
- package/dist/components/Select/Select2.js +32 -32
- package/dist/ui-library-sorin.css +1 -1
- package/package.json +1 -1
|
@@ -3,5 +3,6 @@ export interface IconButtonProps extends ComponentPropsWithRef<"button"> {
|
|
|
3
3
|
variant?: "main" | "secondary" | "danger";
|
|
4
4
|
icon: ReactNode;
|
|
5
5
|
rounded?: boolean;
|
|
6
|
+
size?: number;
|
|
6
7
|
}
|
|
7
|
-
export declare function IconButton({ icon, variant, rounded, ...props }: IconButtonProps): import("react").JSX.Element;
|
|
8
|
+
export declare function IconButton({ icon, variant, rounded, size, ...props }: IconButtonProps): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
;/* empty css */let e=require("react/jsx-runtime");function t({icon:t,variant:n=`main`,rounded:r=!1,...
|
|
1
|
+
;/* empty css */let e=require("react/jsx-runtime");function t({icon:t,variant:n=`main`,rounded:r=!1,size:i=32,...a}){return(0,e.jsx)(`button`,{style:{width:i,height:i},className:`ui-library-icon-button ui-library-icon-button__${n} ${r?`ui-library-icon-button__rounded`:``}`,...a,children:t})}exports.IconButton=t;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
/* empty css */
|
|
2
2
|
import { jsx as e } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/IconButton/IconButton.tsx
|
|
4
|
-
function t({ icon: t, variant: n = "main", rounded: r = !1,
|
|
4
|
+
function t({ icon: t, variant: n = "main", rounded: r = !1, size: i = 32, ...a }) {
|
|
5
5
|
return /* @__PURE__ */ e("button", {
|
|
6
|
+
style: {
|
|
7
|
+
width: i,
|
|
8
|
+
height: i
|
|
9
|
+
},
|
|
6
10
|
className: `ui-library-icon-button ui-library-icon-button__${n} ${r ? "ui-library-icon-button__rounded" : ""}`,
|
|
7
|
-
...
|
|
11
|
+
...a,
|
|
8
12
|
children: t
|
|
9
13
|
});
|
|
10
14
|
}
|
|
@@ -6,7 +6,8 @@ export interface Props extends Omit<InputProps, "render" | "placeholder"> {
|
|
|
6
6
|
icon?: ReactElement;
|
|
7
7
|
className?: string;
|
|
8
8
|
toggleIcon?: () => void;
|
|
9
|
+
hideError?: boolean;
|
|
9
10
|
showCounter?: boolean;
|
|
10
11
|
onInput?: any;
|
|
11
12
|
}
|
|
12
|
-
export declare function Input({ label, error, icon, className, toggleIcon, showCounter, onInput, ...props }: Props): import("react").JSX.Element;
|
|
13
|
+
export declare function Input({ label, error, icon, className, toggleIcon, showCounter, hideError, onInput, ...props }: Props): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use client";const e=require("../../assets/icons/ErrorIcon.cjs");;/* empty css */let t=require("react/jsx-runtime"),n=require("react"),r=require("@base-ui/react/input");function i({label:i,error:a,icon:o,className:s,toggleIcon:c,showCounter:l=!1,onInput:
|
|
1
|
+
"use client";"use client";const e=require("../../assets/icons/ErrorIcon.cjs");;/* empty css */let t=require("react/jsx-runtime"),n=require("react"),r=require("@base-ui/react/input");function i({label:i,error:a,icon:o,className:s,toggleIcon:c,showCounter:l=!1,hideError:u=!1,onInput:d,...f}){let p=(0,n.useRef)(null),m=e=>{if(l){let t=e.currentTarget.value.length;p.current&&(p.current.textContent=`${t}/${f.maxLength}`)}d?.(e)};return(0,t.jsxs)(`div`,{className:[`ui-library-input-wrapper`,s].filter(Boolean).join(` `),children:[(0,t.jsxs)(`label`,{className:`ui-library-input${a?` ui-library-input--error`:``}${o?` ui-library-input--has-icon`:``}`,children:[(0,t.jsx)(`span`,{className:`ui-library-input__span`,children:i}),(0,t.jsx)(r.Input,{...f,onInput:m,placeholder:` `}),o&&(0,t.jsx)(`div`,{className:`ui-library-input__icon`,onClick:c,children:o}),l&&f.maxLength&&(0,t.jsx)(`span`,{ref:p,className:`ui-library-input__counter`})]}),!u&&(0,t.jsx)(`div`,{className:`ui-library-input__error`,children:a&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`span`,{className:`ui-library-input__error-icon`,children:(0,t.jsx)(e.default,{})}),(0,t.jsx)(`span`,{className:`ui-library-input__error-text`,children:a})]})})]})}exports.Input=i;
|
|
@@ -2,56 +2,53 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import e from "../../assets/icons/ErrorIcon.js";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import {
|
|
6
|
-
import { useRef as
|
|
7
|
-
import { Input as
|
|
5
|
+
import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
6
|
+
import { useRef as i } from "react";
|
|
7
|
+
import { Input as a } from "@base-ui/react/input";
|
|
8
8
|
//#region src/components/Input/Input.tsx
|
|
9
|
-
function
|
|
10
|
-
let
|
|
11
|
-
if (
|
|
9
|
+
function o({ label: o, error: s, icon: c, className: l, toggleIcon: u, showCounter: d = !1, hideError: f = !1, onInput: p, ...m }) {
|
|
10
|
+
let h = i(null), g = (e) => {
|
|
11
|
+
if (d) {
|
|
12
12
|
let t = e.currentTarget.value.length;
|
|
13
|
-
|
|
13
|
+
h.current && (h.current.textContent = `${t}/${m.maxLength}`);
|
|
14
14
|
}
|
|
15
|
-
|
|
15
|
+
p?.(e);
|
|
16
16
|
};
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
-
className: ["ui-library-input-wrapper",
|
|
19
|
-
children: [
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
className: "ui-library-input__span",
|
|
25
|
-
children: a
|
|
26
|
-
}),
|
|
27
|
-
/* @__PURE__ */ t(i, {
|
|
28
|
-
...f,
|
|
29
|
-
onInput: m,
|
|
30
|
-
placeholder: " "
|
|
31
|
-
}),
|
|
32
|
-
s && /* @__PURE__ */ t("div", {
|
|
33
|
-
className: "ui-library-input__icon",
|
|
34
|
-
onClick: l,
|
|
35
|
-
children: s
|
|
36
|
-
})
|
|
37
|
-
]
|
|
38
|
-
}),
|
|
39
|
-
u && f.maxLength && /* @__PURE__ */ t("span", {
|
|
40
|
-
ref: p,
|
|
41
|
-
className: "ui-library-input__counter"
|
|
42
|
-
}),
|
|
43
|
-
o && /* @__PURE__ */ n("div", {
|
|
44
|
-
className: "ui-library-input__error",
|
|
45
|
-
children: [/* @__PURE__ */ t("span", {
|
|
46
|
-
className: "ui-library-input__error-icon",
|
|
47
|
-
children: /* @__PURE__ */ t(e, {})
|
|
48
|
-
}), /* @__PURE__ */ t("span", {
|
|
49
|
-
className: "ui-library-input__error-text",
|
|
17
|
+
return /* @__PURE__ */ r("div", {
|
|
18
|
+
className: ["ui-library-input-wrapper", l].filter(Boolean).join(" "),
|
|
19
|
+
children: [/* @__PURE__ */ r("label", {
|
|
20
|
+
className: `ui-library-input${s ? " ui-library-input--error" : ""}${c ? " ui-library-input--has-icon" : ""}`,
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ n("span", {
|
|
23
|
+
className: "ui-library-input__span",
|
|
50
24
|
children: o
|
|
51
|
-
})
|
|
52
|
-
|
|
53
|
-
|
|
25
|
+
}),
|
|
26
|
+
/* @__PURE__ */ n(a, {
|
|
27
|
+
...m,
|
|
28
|
+
onInput: g,
|
|
29
|
+
placeholder: " "
|
|
30
|
+
}),
|
|
31
|
+
c && /* @__PURE__ */ n("div", {
|
|
32
|
+
className: "ui-library-input__icon",
|
|
33
|
+
onClick: u,
|
|
34
|
+
children: c
|
|
35
|
+
}),
|
|
36
|
+
d && m.maxLength && /* @__PURE__ */ n("span", {
|
|
37
|
+
ref: h,
|
|
38
|
+
className: "ui-library-input__counter"
|
|
39
|
+
})
|
|
40
|
+
]
|
|
41
|
+
}), !f && /* @__PURE__ */ n("div", {
|
|
42
|
+
className: "ui-library-input__error",
|
|
43
|
+
children: s && /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("span", {
|
|
44
|
+
className: "ui-library-input__error-icon",
|
|
45
|
+
children: /* @__PURE__ */ n(e, {})
|
|
46
|
+
}), /* @__PURE__ */ n("span", {
|
|
47
|
+
className: "ui-library-input__error-text",
|
|
48
|
+
children: s
|
|
49
|
+
})] })
|
|
50
|
+
})]
|
|
54
51
|
});
|
|
55
52
|
}
|
|
56
53
|
//#endregion
|
|
57
|
-
export {
|
|
54
|
+
export { o as Input };
|
|
@@ -13,5 +13,6 @@ export interface SelectProps {
|
|
|
13
13
|
name?: string;
|
|
14
14
|
className?: string;
|
|
15
15
|
error?: string;
|
|
16
|
+
hideError?: boolean;
|
|
16
17
|
}
|
|
17
|
-
export declare function Select({ label, placeholder, options, className, onValueChange, error, ...props }: SelectProps): import("react").JSX.Element;
|
|
18
|
+
export declare function Select({ label, placeholder, options, className, onValueChange, error, hideError, ...props }: SelectProps): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use client";const e=require("../../assets/icons/ErrorIcon.cjs");;/* empty css */const t=require("../../assets/icons/ArrowIcon.cjs");let n=require("react/jsx-runtime"),r=require("@base-ui/react/select");function i({label:i,placeholder:a,options:o,className:s,onValueChange:c,error:l,...
|
|
1
|
+
"use client";"use client";const e=require("../../assets/icons/ErrorIcon.cjs");;/* empty css */const t=require("../../assets/icons/ArrowIcon.cjs");let n=require("react/jsx-runtime"),r=require("@base-ui/react/select");function i({label:i,placeholder:a,options:o,className:s,onValueChange:c,error:l,hideError:u=!1,...d}){return(0,n.jsxs)(r.Select.Root,{items:o,onValueChange:e=>{e&&c?.(e)},...d,children:[(0,n.jsxs)(`div`,{className:[`ui-library-select`,s].filter(Boolean).join(` `),children:[(0,n.jsx)(r.Select.Label,{className:`ui-library-select__label`,children:i}),(0,n.jsxs)(r.Select.Trigger,{"aria-invalid":!!l,className:({value:e})=>[`ui-library-select__trigger`,e&&!o.some(t=>t.value===e)?`ui-library-select__trigger--placeholder`:``,l?`ui-library-select__trigger--error`:``].filter(Boolean).join(` `),children:[(0,n.jsx)(r.Select.Value,{className:`ui-library-select__value`,children:e=>{if(!e)return a??null;let t=o.find(t=>t.value===e);return t?t.label:a??e}}),(0,n.jsx)(`span`,{className:`ui-library-select__icon`,children:(0,n.jsx)(t.default,{})})]}),!u&&(0,n.jsx)(`div`,{className:`ui-library-select__error`,children:l&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`span`,{className:`ui-library-select__error-icon`,children:(0,n.jsx)(e.default,{})}),(0,n.jsx)(`span`,{className:`ui-library-select__error-text`,children:l})]})})]}),(0,n.jsx)(r.Select.Portal,{children:(0,n.jsx)(r.Select.Positioner,{className:`ui-library-select__positioner`,side:`bottom`,sideOffset:4,alignItemWithTrigger:!1,children:(0,n.jsx)(r.Select.Popup,{className:`ui-library-select__popup`,children:(0,n.jsx)(r.Select.List,{children:o.map(e=>(0,n.jsx)(r.Select.Item,{value:e.value,className:`ui-library-select__item`,children:(0,n.jsx)(r.Select.ItemText,{children:e.label})},e.value))})})})})]})}exports.Select=i;
|
|
@@ -3,68 +3,68 @@
|
|
|
3
3
|
import e from "../../assets/icons/ErrorIcon.js";
|
|
4
4
|
/* empty css */
|
|
5
5
|
import t from "../../assets/icons/ArrowIcon.js";
|
|
6
|
-
import {
|
|
7
|
-
import { Select as
|
|
6
|
+
import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
7
|
+
import { Select as a } from "@base-ui/react/select";
|
|
8
8
|
//#region src/components/Select/Select.tsx
|
|
9
|
-
function
|
|
10
|
-
return /* @__PURE__ */
|
|
11
|
-
items:
|
|
9
|
+
function o({ label: o, placeholder: s, options: c, className: l, onValueChange: u, error: d, hideError: f = !1, ...p }) {
|
|
10
|
+
return /* @__PURE__ */ i(a.Root, {
|
|
11
|
+
items: c,
|
|
12
12
|
onValueChange: (e) => {
|
|
13
|
-
e &&
|
|
13
|
+
e && u?.(e);
|
|
14
14
|
},
|
|
15
|
-
...
|
|
16
|
-
children: [/* @__PURE__ */
|
|
17
|
-
className: ["ui-library-select",
|
|
15
|
+
...p,
|
|
16
|
+
children: [/* @__PURE__ */ i("div", {
|
|
17
|
+
className: ["ui-library-select", l].filter(Boolean).join(" "),
|
|
18
18
|
children: [
|
|
19
|
-
/* @__PURE__ */
|
|
19
|
+
/* @__PURE__ */ r(a.Label, {
|
|
20
20
|
className: "ui-library-select__label",
|
|
21
|
-
children:
|
|
21
|
+
children: o
|
|
22
22
|
}),
|
|
23
|
-
/* @__PURE__ */
|
|
24
|
-
"aria-invalid": !!
|
|
23
|
+
/* @__PURE__ */ i(a.Trigger, {
|
|
24
|
+
"aria-invalid": !!d,
|
|
25
25
|
className: ({ value: e }) => [
|
|
26
26
|
"ui-library-select__trigger",
|
|
27
|
-
e && !
|
|
28
|
-
|
|
27
|
+
e && !c.some((t) => t.value === e) ? "ui-library-select__trigger--placeholder" : "",
|
|
28
|
+
d ? "ui-library-select__trigger--error" : ""
|
|
29
29
|
].filter(Boolean).join(" "),
|
|
30
|
-
children: [/* @__PURE__ */
|
|
30
|
+
children: [/* @__PURE__ */ r(a.Value, {
|
|
31
31
|
className: "ui-library-select__value",
|
|
32
32
|
children: (e) => {
|
|
33
|
-
if (!e) return
|
|
34
|
-
let t =
|
|
35
|
-
return t ? t.label :
|
|
33
|
+
if (!e) return s ?? null;
|
|
34
|
+
let t = c.find((t) => t.value === e);
|
|
35
|
+
return t ? t.label : s ?? e;
|
|
36
36
|
}
|
|
37
|
-
}), /* @__PURE__ */
|
|
37
|
+
}), /* @__PURE__ */ r("span", {
|
|
38
38
|
className: "ui-library-select__icon",
|
|
39
|
-
children: /* @__PURE__ */
|
|
39
|
+
children: /* @__PURE__ */ r(t, {})
|
|
40
40
|
})]
|
|
41
41
|
}),
|
|
42
|
-
|
|
42
|
+
!f && /* @__PURE__ */ r("div", {
|
|
43
43
|
className: "ui-library-select__error",
|
|
44
|
-
children: [/* @__PURE__ */
|
|
44
|
+
children: d && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
|
|
45
45
|
className: "ui-library-select__error-icon",
|
|
46
|
-
children: /* @__PURE__ */
|
|
47
|
-
}), /* @__PURE__ */
|
|
46
|
+
children: /* @__PURE__ */ r(e, {})
|
|
47
|
+
}), /* @__PURE__ */ r("span", {
|
|
48
48
|
className: "ui-library-select__error-text",
|
|
49
|
-
children:
|
|
50
|
-
})]
|
|
49
|
+
children: d
|
|
50
|
+
})] })
|
|
51
51
|
})
|
|
52
52
|
]
|
|
53
|
-
}), /* @__PURE__ */
|
|
53
|
+
}), /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ r(a.Positioner, {
|
|
54
54
|
className: "ui-library-select__positioner",
|
|
55
55
|
side: "bottom",
|
|
56
56
|
sideOffset: 4,
|
|
57
57
|
alignItemWithTrigger: !1,
|
|
58
|
-
children: /* @__PURE__ */
|
|
58
|
+
children: /* @__PURE__ */ r(a.Popup, {
|
|
59
59
|
className: "ui-library-select__popup",
|
|
60
|
-
children: /* @__PURE__ */
|
|
60
|
+
children: /* @__PURE__ */ r(a.List, { children: c.map((e) => /* @__PURE__ */ r(a.Item, {
|
|
61
61
|
value: e.value,
|
|
62
62
|
className: "ui-library-select__item",
|
|
63
|
-
children: /* @__PURE__ */
|
|
63
|
+
children: /* @__PURE__ */ r(a.ItemText, { children: e.label })
|
|
64
64
|
}, e.value)) })
|
|
65
65
|
})
|
|
66
66
|
}) })]
|
|
67
67
|
});
|
|
68
68
|
}
|
|
69
69
|
//#endregion
|
|
70
|
-
export {
|
|
70
|
+
export { o as Select };
|