@regardio/react 0.5.5 → 0.6.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/dist/background-slideshow/index.d.mts +36 -0
- package/dist/background-slideshow/index.mjs +110 -0
- package/dist/blurry-gradient/index.d.mts +17 -0
- package/dist/blurry-gradient/index.mjs +93 -0
- package/dist/button/index.d.mts +2 -0
- package/dist/button/index.mjs +3 -0
- package/dist/button-BiSQpBbc.mjs +129 -0
- package/dist/carousel/index.d.mts +40 -0
- package/dist/carousel/index.mjs +141 -0
- package/dist/checkbox/index.d.mts +37 -0
- package/dist/checkbox/index.mjs +70 -0
- package/dist/checkbox-group/index.d.mts +17 -0
- package/dist/checkbox-group/index.mjs +29 -0
- package/dist/chunk-BTpB_u-K.mjs +18 -0
- package/dist/countdown/index.d.mts +6 -0
- package/dist/countdown/index.mjs +58 -0
- package/dist/field/index.d.mts +66 -0
- package/dist/field/index.mjs +115 -0
- package/dist/fieldset/index.d.mts +33 -0
- package/dist/fieldset/index.mjs +61 -0
- package/dist/form/index.d.mts +22 -0
- package/dist/form/index.mjs +31 -0
- package/dist/generic-error/{index.d.ts → index.d.mts} +22 -18
- package/dist/generic-error/index.mjs +57 -0
- package/dist/grid/index.d.mts +1197 -0
- package/dist/grid/index.mjs +221 -0
- package/dist/heading/index.d.mts +31 -0
- package/dist/heading/index.mjs +29 -0
- package/dist/highlight/index.d.mts +18 -0
- package/dist/highlight/index.mjs +35 -0
- package/dist/hooks/{use-current-route-data.d.ts → use-current-route-data.d.mts} +3 -2
- package/dist/hooks/use-current-route-data.mjs +20 -0
- package/dist/hooks/{use-focus-search.d.ts → use-focus-search.d.mts} +4 -3
- package/dist/hooks/use-focus-search.mjs +21 -0
- package/dist/hooks/{use-matches-data.d.ts → use-matches-data.d.mts} +3 -2
- package/dist/hooks/use-matches-data.mjs +21 -0
- package/dist/hooks/{use-media-query.d.ts → use-media-query.d.mts} +3 -2
- package/dist/hooks/use-media-query.mjs +26 -0
- package/dist/hooks/use-mobile.d.mts +4 -0
- package/dist/hooks/use-mobile.mjs +20 -0
- package/dist/hooks/use-nonce.d.mts +8 -0
- package/dist/hooks/use-nonce.mjs +13 -0
- package/dist/hooks/{use-orientation.d.ts → use-orientation.d.mts} +3 -2
- package/dist/hooks/use-orientation.mjs +30 -0
- package/dist/hooks/use-user.d.mts +55 -0
- package/dist/hooks/use-user.mjs +39 -0
- package/dist/icon-button/index.d.mts +29 -0
- package/dist/icon-button/index.mjs +36 -0
- package/dist/if/index.d.mts +15 -0
- package/dist/if/index.mjs +21 -0
- package/dist/iframe/index.d.mts +11 -0
- package/dist/iframe/index.mjs +15 -0
- package/dist/index-Bm-tWhsb.d.mts +30 -0
- package/dist/index-YT2CkvL6.d.mts +36 -0
- package/dist/input/index.d.mts +2 -0
- package/dist/input/index.mjs +3 -0
- package/dist/input-CtR6aRVi.mjs +73 -0
- package/dist/link/index.d.mts +73 -0
- package/dist/link/index.mjs +129 -0
- package/dist/list/index.d.mts +71 -0
- package/dist/list/index.mjs +54 -0
- package/dist/markdown-container/index.d.mts +23 -0
- package/dist/markdown-container/index.mjs +71 -0
- package/dist/password-input/index.d.mts +24 -0
- package/dist/password-input/index.mjs +92 -0
- package/dist/picture/{index.d.ts → index.d.mts} +21 -20
- package/dist/picture/index.mjs +3 -0
- package/dist/picture-DkX3W5zl.mjs +69 -0
- package/dist/protected-email/{index.d.ts → index.d.mts} +14 -8
- package/dist/protected-email/index.mjs +37 -0
- package/dist/radio/index.d.mts +37 -0
- package/dist/radio/index.mjs +72 -0
- package/dist/radio-group/index.d.mts +17 -0
- package/dist/radio-group/index.mjs +29 -0
- package/dist/slider/index.d.mts +85 -0
- package/dist/slider/index.mjs +133 -0
- package/dist/switch/index.d.mts +38 -0
- package/dist/switch/index.mjs +87 -0
- package/dist/text/index.d.mts +26 -0
- package/dist/text/index.mjs +32 -0
- package/dist/text-CPlUND-Z.mjs +58 -0
- package/dist/toggle/index.d.mts +59 -0
- package/dist/toggle/index.mjs +82 -0
- package/dist/utils/author/index.d.mts +4 -0
- package/dist/utils/author/index.mjs +26 -0
- package/dist/utils/text/{index.d.ts → index.d.mts} +4 -3
- package/dist/utils/text/index.mjs +3 -0
- package/package.json +17 -129
- package/src/button/button.stories.tsx +161 -0
- package/src/button/button.test.tsx +73 -0
- package/src/button/button.tsx +112 -0
- package/src/button/index.ts +2 -0
- package/src/carousel/carousel-next.tsx +2 -2
- package/src/carousel/carousel-previous.tsx +2 -2
- package/src/checkbox/checkbox.stories.tsx +118 -0
- package/src/checkbox/checkbox.tsx +91 -0
- package/src/checkbox/index.ts +2 -0
- package/src/checkbox-group/checkbox-group.tsx +40 -0
- package/src/checkbox-group/index.ts +2 -0
- package/src/field/field.stories.tsx +105 -0
- package/src/field/field.test.tsx +61 -0
- package/src/field/field.tsx +165 -0
- package/src/field/index.ts +12 -0
- package/src/fieldset/fieldset.stories.tsx +204 -0
- package/src/fieldset/fieldset.test.tsx +63 -0
- package/src/fieldset/fieldset.tsx +75 -0
- package/src/fieldset/index.ts +7 -0
- package/src/form/form.stories.tsx +230 -0
- package/src/form/form.test.tsx +68 -0
- package/src/form/form.tsx +38 -0
- package/src/form/index.ts +2 -0
- package/src/icon-button/icon-button.stories.tsx +128 -7
- package/src/icon-button/icon-button.test.tsx +152 -0
- package/src/icon-button/icon-button.tsx +43 -9
- package/src/input/index.ts +2 -0
- package/src/input/input.stories.tsx +151 -0
- package/src/input/input.test.tsx +65 -0
- package/src/input/input.tsx +113 -0
- package/src/link/link.test.tsx +169 -0
- package/src/password-input/index.ts +1 -1
- package/src/password-input/password-input.tsx +104 -27
- package/src/radio/index.ts +2 -0
- package/src/radio/radio.tsx +92 -0
- package/src/radio-group/index.ts +2 -0
- package/src/radio-group/radio-group.tsx +36 -0
- package/src/slider/index.ts +18 -0
- package/src/slider/slider.tsx +179 -0
- package/src/switch/index.ts +2 -0
- package/src/switch/switch.stories.tsx +118 -0
- package/src/switch/switch.tsx +101 -0
- package/src/toggle/index.ts +2 -0
- package/src/toggle/toggle.stories.tsx +232 -0
- package/src/toggle/toggle.test.tsx +149 -0
- package/src/toggle/toggle.tsx +88 -0
- package/src/utils/text/text.test.tsx +110 -0
- package/dist/background-slideshow/index.d.ts +0 -24
- package/dist/background-slideshow/index.js +0 -165
- package/dist/blurry-gradient/index.d.ts +0 -16
- package/dist/blurry-gradient/index.js +0 -128
- package/dist/carousel/index.d.ts +0 -36
- package/dist/carousel/index.js +0 -171
- package/dist/countdown/index.d.ts +0 -5
- package/dist/countdown/index.js +0 -73
- package/dist/generic-error/index.js +0 -47
- package/dist/grid/index.d.ts +0 -1196
- package/dist/grid/index.js +0 -239
- package/dist/heading/index.d.ts +0 -24
- package/dist/heading/index.js +0 -99
- package/dist/highlight/index.d.ts +0 -13
- package/dist/highlight/index.js +0 -59
- package/dist/hooks/use-current-route-data.js +0 -16
- package/dist/hooks/use-focus-search.js +0 -19
- package/dist/hooks/use-matches-data.js +0 -15
- package/dist/hooks/use-media-query.js +0 -20
- package/dist/hooks/use-mobile.d.ts +0 -3
- package/dist/hooks/use-mobile.js +0 -19
- package/dist/hooks/use-nonce.d.ts +0 -7
- package/dist/hooks/use-nonce.js +0 -8
- package/dist/hooks/use-orientation.js +0 -29
- package/dist/hooks/use-user.d.ts +0 -50
- package/dist/hooks/use-user.js +0 -25
- package/dist/icon-button/index.d.ts +0 -9
- package/dist/icon-button/index.js +0 -17
- package/dist/if/index.d.ts +0 -10
- package/dist/if/index.js +0 -24
- package/dist/iframe/index.d.ts +0 -10
- package/dist/iframe/index.js +0 -17
- package/dist/link/index.d.ts +0 -55
- package/dist/link/index.js +0 -195
- package/dist/list/index.d.ts +0 -69
- package/dist/list/index.js +0 -65
- package/dist/markdown-container/index.d.ts +0 -22
- package/dist/markdown-container/index.js +0 -128
- package/dist/password-input/index.d.ts +0 -11
- package/dist/password-input/index.js +0 -46
- package/dist/picture/index.js +0 -68
- package/dist/protected-email/index.js +0 -30
- package/dist/text/index.d.ts +0 -20
- package/dist/text/index.js +0 -38
- package/dist/utils/author/index.d.ts +0 -3
- package/dist/utils/author/index.js +0 -33
- package/dist/utils/text/index.js +0 -73
package/dist/picture/index.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { cn } from '@regardio/tailwind/utils';
|
|
2
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
-
|
|
4
|
-
// src/picture/picture.tsx
|
|
5
|
-
var screenSizeVariants = {
|
|
6
|
-
lg: 1280,
|
|
7
|
-
max: 1920,
|
|
8
|
-
md: 960,
|
|
9
|
-
min: 360,
|
|
10
|
-
sm: 640,
|
|
11
|
-
xl: 1600,
|
|
12
|
-
xs: 480
|
|
13
|
-
};
|
|
14
|
-
var Picture = ({
|
|
15
|
-
alt,
|
|
16
|
-
baseUrl,
|
|
17
|
-
className,
|
|
18
|
-
formats,
|
|
19
|
-
imgClassName,
|
|
20
|
-
placeholder = "{format}",
|
|
21
|
-
sizes = "(max-width: 480px) 480px, (max-width: 768px) 600px, (max-width: 1200px) 1024px, 1920px"
|
|
22
|
-
}) => {
|
|
23
|
-
const imageFormats = formats || [
|
|
24
|
-
{ size: "480x360", width: 480 },
|
|
25
|
-
{ size: "600x600", width: 600 },
|
|
26
|
-
{ size: "1024x768", width: 1024 },
|
|
27
|
-
{ size: "1920x1440", width: 1920 }
|
|
28
|
-
];
|
|
29
|
-
if (imageFormats.length === 0) {
|
|
30
|
-
return null;
|
|
31
|
-
}
|
|
32
|
-
const isSimpleImage = imageFormats.length === 1 && imageFormats[0]?.size === "" || !baseUrl.includes(placeholder);
|
|
33
|
-
if (isSimpleImage) {
|
|
34
|
-
return /* @__PURE__ */ jsx(
|
|
35
|
-
"img",
|
|
36
|
-
{
|
|
37
|
-
alt,
|
|
38
|
-
className: cn(className, imgClassName),
|
|
39
|
-
src: baseUrl
|
|
40
|
-
}
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
const srcSet = imageFormats.map(({ size, width }) => {
|
|
44
|
-
const url = baseUrl.replace(placeholder, size);
|
|
45
|
-
return `${url} ${width}w`;
|
|
46
|
-
}).join(", ");
|
|
47
|
-
const defaultFormat = imageFormats[0];
|
|
48
|
-
const defaultSrc = defaultFormat ? baseUrl.replace(placeholder, defaultFormat.size) : baseUrl;
|
|
49
|
-
return /* @__PURE__ */ jsxs("picture", { className, children: [
|
|
50
|
-
/* @__PURE__ */ jsx(
|
|
51
|
-
"source",
|
|
52
|
-
{
|
|
53
|
-
sizes,
|
|
54
|
-
srcSet
|
|
55
|
-
}
|
|
56
|
-
),
|
|
57
|
-
/* @__PURE__ */ jsx(
|
|
58
|
-
"img",
|
|
59
|
-
{
|
|
60
|
-
alt,
|
|
61
|
-
className: cn(imgClassName),
|
|
62
|
-
src: defaultSrc
|
|
63
|
-
}
|
|
64
|
-
)
|
|
65
|
-
] });
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
export { Picture, screenSizeVariants };
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
|
|
4
|
-
// src/protected-email/protected-email.tsx
|
|
5
|
-
function ProtectedEmail({ username, domain, text, className }) {
|
|
6
|
-
const [mounted, setMounted] = useState(false);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
setMounted(true);
|
|
9
|
-
}, []);
|
|
10
|
-
const fallbackText = text || `${username}(at)${domain}`;
|
|
11
|
-
const handleClick = (e) => {
|
|
12
|
-
if (mounted) {
|
|
13
|
-
window.location.href = `mailto:${username}@${domain}`;
|
|
14
|
-
e.preventDefault();
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
return /* @__PURE__ */ jsx(
|
|
18
|
-
"a",
|
|
19
|
-
{
|
|
20
|
-
"aria-label": `Email address: ${username} at ${domain}`,
|
|
21
|
-
className,
|
|
22
|
-
"data-email-protected": "true",
|
|
23
|
-
href: mounted ? "#email-protected" : void 0,
|
|
24
|
-
onClick: handleClick,
|
|
25
|
-
children: fallbackText
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export { ProtectedEmail };
|
package/dist/text/index.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ComponentProps } from 'react';
|
|
3
|
-
|
|
4
|
-
declare const themeColorVariants: {
|
|
5
|
-
readonly primary: readonly [];
|
|
6
|
-
};
|
|
7
|
-
declare const textVariants: {
|
|
8
|
-
readonly code: readonly ["font-light", "font-monospace"];
|
|
9
|
-
readonly primary: readonly [];
|
|
10
|
-
readonly subtitle: readonly ["text-lg"];
|
|
11
|
-
};
|
|
12
|
-
type TextThemeColor = keyof typeof themeColorVariants;
|
|
13
|
-
type TextVariant = keyof typeof textVariants;
|
|
14
|
-
interface TextProps extends ComponentProps<'p'> {
|
|
15
|
-
themeColor?: TextThemeColor;
|
|
16
|
-
variant?: TextVariant;
|
|
17
|
-
}
|
|
18
|
-
declare const Text: ({ children, className, variant, themeColor }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
19
|
-
|
|
20
|
-
export { Text, type TextProps };
|
package/dist/text/index.js
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { tv } from '@regardio/tailwind/utils';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
|
|
4
|
-
// src/text/text.tsx
|
|
5
|
-
var themeColorVariants = {
|
|
6
|
-
primary: []
|
|
7
|
-
};
|
|
8
|
-
var textVariants = {
|
|
9
|
-
code: ["font-light", "font-monospace"],
|
|
10
|
-
primary: [],
|
|
11
|
-
subtitle: ["text-lg"]
|
|
12
|
-
};
|
|
13
|
-
var text = tv({
|
|
14
|
-
base: ["relative", "block"],
|
|
15
|
-
defaultVariants: {
|
|
16
|
-
themeColor: "primary",
|
|
17
|
-
variant: "primary"
|
|
18
|
-
},
|
|
19
|
-
variants: {
|
|
20
|
-
themeColor: themeColorVariants,
|
|
21
|
-
variant: textVariants
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
var Text = ({ children, className, variant, themeColor }) => {
|
|
25
|
-
return /* @__PURE__ */ jsx(
|
|
26
|
-
"div",
|
|
27
|
-
{
|
|
28
|
-
className: text({
|
|
29
|
-
className,
|
|
30
|
-
themeColor,
|
|
31
|
-
variant
|
|
32
|
-
}),
|
|
33
|
-
children
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export { Text };
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { parseAuthorString } from '@regardio/js/text';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
|
|
4
|
-
// src/utils/author/author.tsx
|
|
5
|
-
function generateLinkFromAuthorString(input) {
|
|
6
|
-
const match = parseAuthorString(input);
|
|
7
|
-
if (match.name) {
|
|
8
|
-
if (match.email) {
|
|
9
|
-
return /* @__PURE__ */ jsx(
|
|
10
|
-
"a",
|
|
11
|
-
{
|
|
12
|
-
className: "u-email p-name",
|
|
13
|
-
href: `mailto:${match.email}`,
|
|
14
|
-
children: match.name
|
|
15
|
-
}
|
|
16
|
-
);
|
|
17
|
-
}
|
|
18
|
-
if (match.url && (match.url.startsWith("/") || match.url.startsWith("http"))) {
|
|
19
|
-
return /* @__PURE__ */ jsx(
|
|
20
|
-
"a",
|
|
21
|
-
{
|
|
22
|
-
className: "u-url p-name",
|
|
23
|
-
href: match.url,
|
|
24
|
-
children: match.name
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
return /* @__PURE__ */ jsx("span", { className: "p-name", children: match.name });
|
|
29
|
-
}
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export { generateLinkFromAuthorString };
|
package/dist/utils/text/index.js
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { replaceShyInString, typographicQuotes, splitIntoSentences } from '@regardio/js/text';
|
|
2
|
-
import React, { isValidElement, cloneElement } from 'react';
|
|
3
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
// src/utils/text/text.tsx
|
|
6
|
-
var lowerCaseSzett = (text, _returnType) => {
|
|
7
|
-
const processString = (str) => {
|
|
8
|
-
const parts = str.split(/(ß)/g);
|
|
9
|
-
return parts.map(
|
|
10
|
-
(part, index) => part === "\xDF" ? /* @__PURE__ */ jsx(
|
|
11
|
-
"span",
|
|
12
|
-
{
|
|
13
|
-
className: "lowercase",
|
|
14
|
-
children: part
|
|
15
|
-
},
|
|
16
|
-
index.toString()
|
|
17
|
-
) : part
|
|
18
|
-
);
|
|
19
|
-
};
|
|
20
|
-
if (typeof text === "string") {
|
|
21
|
-
return processString(text);
|
|
22
|
-
}
|
|
23
|
-
if (isValidElement(text)) {
|
|
24
|
-
const element = text;
|
|
25
|
-
const { children, ...props } = element.props;
|
|
26
|
-
return cloneElement(element, {
|
|
27
|
-
...props,
|
|
28
|
-
children: lowerCaseSzett(children)
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
if (Array.isArray(text)) {
|
|
32
|
-
return text.map((child, index) => /* @__PURE__ */ jsx(React.Fragment, { children: lowerCaseSzett(child) }, index.toString()));
|
|
33
|
-
}
|
|
34
|
-
return text;
|
|
35
|
-
};
|
|
36
|
-
function replaceShyInReactNode(node) {
|
|
37
|
-
if (typeof node === "string") {
|
|
38
|
-
return node.replace(/\u00AD/g, "");
|
|
39
|
-
}
|
|
40
|
-
if (isValidElement(node)) {
|
|
41
|
-
const element = node;
|
|
42
|
-
const { children, ...props } = element.props;
|
|
43
|
-
return cloneElement(element, {
|
|
44
|
-
...props,
|
|
45
|
-
children: replaceShyInReactNode(children)
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
if (Array.isArray(node)) {
|
|
49
|
-
return node.map((child, index) => /* @__PURE__ */ jsx(React.Fragment, { children: replaceShyInReactNode(child) }, index.toString()));
|
|
50
|
-
}
|
|
51
|
-
return node;
|
|
52
|
-
}
|
|
53
|
-
function shy(input) {
|
|
54
|
-
if (input === null) {
|
|
55
|
-
return null;
|
|
56
|
-
}
|
|
57
|
-
if (typeof input === "string") {
|
|
58
|
-
return replaceShyInString(input);
|
|
59
|
-
}
|
|
60
|
-
return replaceShyInReactNode(input);
|
|
61
|
-
}
|
|
62
|
-
function replaceSpecialChars(text, locale) {
|
|
63
|
-
return shy(typographicQuotes(text, locale));
|
|
64
|
-
}
|
|
65
|
-
function wrapSentences(text) {
|
|
66
|
-
const sentences = splitIntoSentences(text);
|
|
67
|
-
return sentences.map((sentence, index) => /* @__PURE__ */ jsxs("span", { children: [
|
|
68
|
-
sentence,
|
|
69
|
-
" "
|
|
70
|
-
] }, index.toString()));
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export { lowerCaseSzett, replaceSpecialChars, shy, wrapSentences };
|