@bouko/react 2.6.5 → 2.6.7
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/colors/core.d.ts +10 -10
- package/dist/colors/core.js +25 -25
- package/dist/colors/index.d.ts +26 -26
- package/dist/colors/index.js +43 -43
- package/dist/colors/types.d.ts +11 -11
- package/dist/colors/types.js +7 -7
- package/dist/components/animate/configs.d.ts +136 -136
- package/dist/components/animate/configs.js +62 -62
- package/dist/components/animate/index.d.ts +54 -54
- package/dist/components/animate/index.js +33 -33
- package/dist/components/attachment.d.ts +2 -2
- package/dist/components/attachment.js +18 -18
- package/dist/components/audio/timestamp.d.ts +12 -0
- package/dist/components/audio/timestamp.js +9 -0
- package/dist/components/button/icon.d.ts +10 -10
- package/dist/components/button/icon.js +19 -19
- package/dist/components/button/normal.d.ts +11 -11
- package/dist/components/button/normal.js +39 -39
- package/dist/components/carousel/index.d.ts +11 -11
- package/dist/components/carousel/index.js +19 -19
- package/dist/components/checkbox.d.ts +8 -8
- package/dist/components/checkbox.js +13 -13
- package/dist/components/dropdown/normal.d.ts +10 -10
- package/dist/components/dropdown/normal.js +19 -19
- package/dist/components/fade-carousel.d.ts +4 -4
- package/dist/components/fade-carousel.js +14 -14
- package/dist/components/field.d.ts +10 -10
- package/dist/components/field.js +10 -10
- package/dist/components/form/functions.d.ts +1 -1
- package/dist/components/form/functions.js +28 -28
- package/dist/components/form/types.d.ts +38 -38
- package/dist/components/form/types.js +1 -1
- package/dist/components/heading/normal.d.ts +29 -29
- package/dist/components/heading/normal.js +22 -22
- package/dist/components/heading/page.d.ts +25 -25
- package/dist/components/heading/page.js +23 -23
- package/dist/components/index.d.ts +14 -14
- package/dist/components/index.js +14 -14
- package/dist/components/input.d.ts +37 -37
- package/dist/components/input.js +40 -40
- package/dist/components/layout/absolute.d.ts +9 -9
- package/dist/components/layout/absolute.js +9 -9
- package/dist/components/layout/fade.d.ts +7 -7
- package/dist/components/layout/fade.js +15 -15
- package/dist/components/layout/flex.d.ts +16 -16
- package/dist/components/layout/flex.js +42 -42
- package/dist/components/layout/separator.d.ts +3 -3
- package/dist/components/layout/separator.js +5 -5
- package/dist/components/list/index.d.ts +2 -2
- package/dist/components/list/index.js +2 -2
- package/dist/components/list/item.d.ts +9 -9
- package/dist/components/list/item.js +7 -7
- package/dist/components/list/variants/bullet.d.ts +9 -9
- package/dist/components/list/variants/bullet.js +16 -16
- package/dist/components/list/variants/number.d.ts +10 -10
- package/dist/components/list/variants/number.js +18 -18
- package/dist/components/multiple-choice.d.ts +2 -2
- package/dist/components/multiple-choice.js +12 -12
- package/dist/components/search-bar.d.ts +13 -14
- package/dist/components/search-bar.js +22 -22
- package/dist/components/select.d.ts +6 -6
- package/dist/components/select.js +24 -24
- package/dist/components/text/badge.d.ts +17 -16
- package/dist/components/text/badge.js +35 -28
- package/dist/components/textarea.d.ts +7 -7
- package/dist/components/textarea.js +11 -11
- package/dist/components/upload/file.d.ts +8 -8
- package/dist/components/upload/file.js +23 -23
- package/dist/components/waveform/index.d.ts +8 -8
- package/dist/components/waveform/index.js +11 -11
- package/dist/components/waveform/patterns.d.ts +1 -1
- package/dist/components/waveform/patterns.js +27 -27
- package/dist/core/classes.js +1 -1
- package/dist/core/format.d.ts +3 -3
- package/dist/core/format.js +34 -34
- package/dist/core/functions.d.ts +10 -13
- package/dist/core/functions.js +76 -79
- package/dist/core/types.d.ts +15 -15
- package/dist/core/types.js +2 -2
- package/dist/core/variants.d.ts +5 -5
- package/dist/core/variants.js +6 -6
- package/dist/format/index.d.ts +2 -2
- package/dist/format/index.js +33 -33
- package/dist/hooks/audio/sound.d.ts +1 -1
- package/dist/hooks/audio/sound.js +6 -6
- package/dist/hooks/clock/interval.d.ts +8 -8
- package/dist/hooks/clock/interval.js +25 -25
- package/dist/hooks/element/container.d.ts +4 -5
- package/dist/hooks/element/container.js +7 -7
- package/dist/hooks/element/index.d.ts +4 -5
- package/dist/hooks/element/index.js +9 -9
- package/dist/hooks/element/resize.d.ts +1 -1
- package/dist/hooks/element/resize.js +12 -12
- package/dist/hooks/index.d.ts +5 -5
- package/dist/hooks/index.js +5 -5
- package/dist/index.d.ts +14 -14
- package/dist/index.js +14 -14
- package/package.json +5 -2
|
@@ -1,28 +1,35 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { opacitize } from "@bouko/style";
|
|
3
|
-
/**
|
|
4
|
-
* Color-themed badge component.
|
|
5
|
-
*
|
|
6
|
-
* To use a CSS variable it must exist and be passed in the
|
|
7
|
-
* form `--variable-name`. Any other format may cause unexpected
|
|
8
|
-
* results. CSS variables use 'color-mix' which is not supported in
|
|
9
|
-
* some old browsers such as Safari 15.3 and Internet Explorer.
|
|
10
|
-
*
|
|
11
|
-
* @param {string} color - Color of badge. (optional, default = accent)
|
|
12
|
-
**/
|
|
13
|
-
export function Badge({ style, color = "--color-accent", children }) {
|
|
14
|
-
if (!children)
|
|
15
|
-
return null;
|
|
16
|
-
return (_jsx("span", { className: style, style: styles(color), children: children }
|
|
17
|
-
}
|
|
18
|
-
const styles = (color) => ({
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { opacitize, cn, tv } from "@bouko/style";
|
|
3
|
+
/**
|
|
4
|
+
* Color-themed badge component.
|
|
5
|
+
*
|
|
6
|
+
* To use a CSS variable it must exist and be passed in the
|
|
7
|
+
* form `--variable-name`. Any other format may cause unexpected
|
|
8
|
+
* results. CSS variables use 'color-mix' which is not supported in
|
|
9
|
+
* some old browsers such as Safari 15.3 and Internet Explorer.
|
|
10
|
+
*
|
|
11
|
+
* @param {string} color - Color of badge. (optional, default = accent)
|
|
12
|
+
**/
|
|
13
|
+
export function Badge({ style, color = "--color-accent", size = "md", children }) {
|
|
14
|
+
if (!children)
|
|
15
|
+
return null;
|
|
16
|
+
return (_jsx("span", { className: cn(base({ size }), style), style: styles(color), children: children }));
|
|
17
|
+
}
|
|
18
|
+
const styles = (color) => ({
|
|
19
|
+
background: opacitize(color),
|
|
20
|
+
border: `1px solid var(${color})`,
|
|
21
|
+
borderRadius: "calc(infinity * 1px)",
|
|
22
|
+
textAlign: "center",
|
|
23
|
+
fontWeight: "600",
|
|
24
|
+
color: "var(--color-primary)"
|
|
25
|
+
});
|
|
26
|
+
const base = tv({
|
|
27
|
+
base: "w-min",
|
|
28
|
+
variants: {
|
|
29
|
+
size: {
|
|
30
|
+
sm: "px-1 py-px text-[0.5rem]",
|
|
31
|
+
md: "px-2 py-1 text-sm"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
export default Badge;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { type Field as FieldProps } from "./form/types";
|
|
2
|
-
|
|
3
|
-
rows?: number;
|
|
4
|
-
placeholder?: string;
|
|
5
|
-
};
|
|
6
|
-
export default function TextArea({ id, style, label, required, note, value, update, ...props }: Props<string>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
|
1
|
+
import { type Field as FieldProps } from "./form/types";
|
|
2
|
+
type Props<T> = FieldProps<T> & {
|
|
3
|
+
rows?: number;
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
};
|
|
6
|
+
export default function TextArea({ id, style, label, required, note, value, update, ...props }: Props<string>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import Field from "./field";
|
|
3
|
-
export default function TextArea({ id, style, label, required = true, note, value, update, ...props }) {
|
|
4
|
-
return (_jsx(Field, { style: style, label: label, required: required, note: note, children: _jsx("textarea", { className: styles.textarea, onChange: ({ target: { value } }) => update(value), value: value ?? "", ...props }
|
|
5
|
-
}
|
|
6
|
-
const styles = {
|
|
7
|
-
container: "flex flex-col gap-1 overflow-hidden",
|
|
8
|
-
label: "text-xs text-slate-600",
|
|
9
|
-
textarea: "px-3 py-2 bg-input border border-outline focus:border-outline-light rounded text-sm resize-none",
|
|
10
|
-
note: "mt-1 text-xs text-slate-500"
|
|
11
|
-
};
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import Field from "./field";
|
|
3
|
+
export default function TextArea({ id, style, label, required = true, note, value, update, ...props }) {
|
|
4
|
+
return (_jsx(Field, { style: style, label: label, required: required, note: note, children: _jsx("textarea", { className: styles.textarea, onChange: ({ target: { value } }) => update(value), value: value ?? "", ...props }) }));
|
|
5
|
+
}
|
|
6
|
+
const styles = {
|
|
7
|
+
container: "flex flex-col gap-1 overflow-hidden",
|
|
8
|
+
label: "text-xs text-slate-600",
|
|
9
|
+
textarea: "px-3 py-2 bg-input border border-outline focus:border-outline-light rounded text-sm resize-none",
|
|
10
|
+
note: "mt-1 text-xs text-slate-500"
|
|
11
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { SetState } from "@bouko/form";
|
|
2
|
-
|
|
3
|
-
style?: string;
|
|
4
|
-
accept?: string[];
|
|
5
|
-
update: SetState<File>;
|
|
6
|
-
};
|
|
7
|
-
export declare function FileUploader({ style, accept, update }: Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export default FileUploader;
|
|
1
|
+
import type { SetState } from "@bouko/form";
|
|
2
|
+
type Props = {
|
|
3
|
+
style?: string;
|
|
4
|
+
accept?: string[];
|
|
5
|
+
update: SetState<File>;
|
|
6
|
+
};
|
|
7
|
+
export declare function FileUploader({ style, accept, update }: Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default FileUploader;
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback } from "react";
|
|
3
|
-
import { useDropzone } from "react-dropzone";
|
|
4
|
-
import { cn } from "@bouko/style";
|
|
5
|
-
import PaperClip from "../../assets/icons/paperclip.svg";
|
|
6
|
-
export function FileUploader({ style, accept = [], update }) {
|
|
7
|
-
const onDrop = useCallback((files) => {
|
|
8
|
-
if (files.length > 0)
|
|
9
|
-
update(files[0]);
|
|
10
|
-
}, []);
|
|
11
|
-
const { getRootProps, getInputProps, isDragActive, inputRef } = useDropzone({
|
|
12
|
-
onDrop
|
|
13
|
-
});
|
|
14
|
-
const upload = () => inputRef.current?.click();
|
|
15
|
-
const save = (e) => update((e.target.files ?? [])[0]);
|
|
16
|
-
return (_jsxs("div", { className: cn(styles.container, isDragActive && "bg-background-light/40 border-border-light", style), onClick: upload, ...getRootProps(), children: [_jsxs("span", { className: styles.title, children: [_jsx(PaperClip, {}
|
|
17
|
-
}
|
|
18
|
-
const styles = {
|
|
19
|
-
container: "flex flex-col justify-center items-center gap-1 w-full py-3 hover:bg-background-light/40 border-2 border-dashed border-border hover:border-border-light rounded overflow-hidden duration-200 cursor-pointer",
|
|
20
|
-
title: "flex gap-2 items-center font-semibold text-sm",
|
|
21
|
-
subtitle: "text-xs text-primary-darker"
|
|
22
|
-
};
|
|
23
|
-
export default FileUploader;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
import { useDropzone } from "react-dropzone";
|
|
4
|
+
import { cn } from "@bouko/style";
|
|
5
|
+
import PaperClip from "../../assets/icons/paperclip.svg";
|
|
6
|
+
export function FileUploader({ style, accept = [], update }) {
|
|
7
|
+
const onDrop = useCallback((files) => {
|
|
8
|
+
if (files.length > 0)
|
|
9
|
+
update(files[0]);
|
|
10
|
+
}, []);
|
|
11
|
+
const { getRootProps, getInputProps, isDragActive, inputRef } = useDropzone({
|
|
12
|
+
onDrop
|
|
13
|
+
});
|
|
14
|
+
const upload = () => inputRef.current?.click();
|
|
15
|
+
const save = (e) => update((e.target.files ?? [])[0]);
|
|
16
|
+
return (_jsxs("div", { className: cn(styles.container, isDragActive && "bg-background-light/40 border-border-light", style), onClick: upload, ...getRootProps(), children: [_jsxs("span", { className: styles.title, children: [_jsx(PaperClip, {}), "Drag and drop a file, or"] }), _jsx("span", { className: styles.subtitle, children: "browse" }), _jsx("input", { type: "file", className: "hidden", onChange: save, accept: accept.join(","), multiple: false, ...getInputProps() })] }));
|
|
17
|
+
}
|
|
18
|
+
const styles = {
|
|
19
|
+
container: "flex flex-col justify-center items-center gap-1 w-full py-3 hover:bg-background-light/40 border-2 border-dashed border-border hover:border-border-light rounded overflow-hidden duration-200 cursor-pointer",
|
|
20
|
+
title: "flex gap-2 items-center font-semibold text-sm",
|
|
21
|
+
subtitle: "text-xs text-primary-darker"
|
|
22
|
+
};
|
|
23
|
+
export default FileUploader;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { type GenericPlugin } from "wavesurfer.js/dist/base-plugin";
|
|
2
|
-
|
|
3
|
-
file: File;
|
|
4
|
-
height: number;
|
|
5
|
-
plugins: GenericPlugin[];
|
|
6
|
-
};
|
|
7
|
-
export default function Waveform({ file, height, plugins }: Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export {};
|
|
1
|
+
import { type GenericPlugin } from "wavesurfer.js/dist/base-plugin";
|
|
2
|
+
type Props = {
|
|
3
|
+
file: File;
|
|
4
|
+
height: number;
|
|
5
|
+
plugins: GenericPlugin[];
|
|
6
|
+
};
|
|
7
|
+
export default function Waveform({ file, height, plugins }: Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useMemo } from "react";
|
|
4
|
-
import { squiggly } from "./patterns";
|
|
5
|
-
import { default as Player } from "@wavesurfer/react";
|
|
6
|
-
export default function Waveform({ file, height, plugins }) {
|
|
7
|
-
const url = useMemo(() => URL.createObjectURL(file), [file]);
|
|
8
|
-
const plugins2 = useMemo(() => plugins, [plugins]);
|
|
9
|
-
const waves = useMemo(() => squiggly, []);
|
|
10
|
-
return (_jsx(Player, { height: height, url: url, waveColor: "#1c1d23", progressColor: "#0085e4", cursorWidth: 2, renderFunction: waves, plugins: plugins2 }
|
|
11
|
-
}
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { squiggly } from "./patterns";
|
|
5
|
+
import { default as Player } from "@wavesurfer/react";
|
|
6
|
+
export default function Waveform({ file, height, plugins }) {
|
|
7
|
+
const url = useMemo(() => URL.createObjectURL(file), [file]);
|
|
8
|
+
const plugins2 = useMemo(() => plugins, [plugins]);
|
|
9
|
+
const waves = useMemo(() => squiggly, []);
|
|
10
|
+
return (_jsx(Player, { height: height, url: url, waveColor: "#1c1d23", progressColor: "#0085e4", cursorWidth: 2, renderFunction: waves, plugins: plugins2 }));
|
|
11
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function squiggly(channels: (Float32Array | number[])[], ctx: CanvasRenderingContext2D): void;
|
|
1
|
+
export declare function squiggly(channels: (Float32Array | number[])[], ctx: CanvasRenderingContext2D): void;
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
export function squiggly(channels, ctx) {
|
|
2
|
-
const { width, height } = ctx.canvas;
|
|
3
|
-
const scale = channels[0].length / width;
|
|
4
|
-
const step = 12;
|
|
5
|
-
ctx.translate(0, height / 2);
|
|
6
|
-
ctx.strokeStyle = ctx.fillStyle;
|
|
7
|
-
ctx.lineWidth = 3;
|
|
8
|
-
ctx.beginPath();
|
|
9
|
-
for (let i = 0; i < width; i += step * 2) {
|
|
10
|
-
const index = Math.floor(i * scale);
|
|
11
|
-
const value = Math.abs(channels[0][index]);
|
|
12
|
-
let x = i;
|
|
13
|
-
let y = value * height;
|
|
14
|
-
ctx.moveTo(x, 0);
|
|
15
|
-
ctx.lineTo(x, y);
|
|
16
|
-
ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true);
|
|
17
|
-
ctx.lineTo(x + step, 0);
|
|
18
|
-
x = x + step;
|
|
19
|
-
y = -y;
|
|
20
|
-
ctx.moveTo(x, 0);
|
|
21
|
-
ctx.lineTo(x, y);
|
|
22
|
-
ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false);
|
|
23
|
-
ctx.lineTo(x + step, 0);
|
|
24
|
-
}
|
|
25
|
-
ctx.stroke();
|
|
26
|
-
ctx.closePath();
|
|
27
|
-
}
|
|
1
|
+
export function squiggly(channels, ctx) {
|
|
2
|
+
const { width, height } = ctx.canvas;
|
|
3
|
+
const scale = channels[0].length / width;
|
|
4
|
+
const step = 12;
|
|
5
|
+
ctx.translate(0, height / 2);
|
|
6
|
+
ctx.strokeStyle = ctx.fillStyle;
|
|
7
|
+
ctx.lineWidth = 3;
|
|
8
|
+
ctx.beginPath();
|
|
9
|
+
for (let i = 0; i < width; i += step * 2) {
|
|
10
|
+
const index = Math.floor(i * scale);
|
|
11
|
+
const value = Math.abs(channels[0][index]);
|
|
12
|
+
let x = i;
|
|
13
|
+
let y = value * height;
|
|
14
|
+
ctx.moveTo(x, 0);
|
|
15
|
+
ctx.lineTo(x, y);
|
|
16
|
+
ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true);
|
|
17
|
+
ctx.lineTo(x + step, 0);
|
|
18
|
+
x = x + step;
|
|
19
|
+
y = -y;
|
|
20
|
+
ctx.moveTo(x, 0);
|
|
21
|
+
ctx.lineTo(x, y);
|
|
22
|
+
ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false);
|
|
23
|
+
ctx.lineTo(x + step, 0);
|
|
24
|
+
}
|
|
25
|
+
ctx.stroke();
|
|
26
|
+
ctx.closePath();
|
|
27
|
+
}
|
package/dist/core/classes.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
package/dist/core/format.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
export declare const rn: (...elements: ReactNode[]) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
export declare const rn: (...elements: ReactNode[]) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;
|
package/dist/core/format.js
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Fragment } from "react";
|
|
3
|
-
const delimiterConfig = [
|
|
4
|
-
{ delimiter: "**", render: (text, key) => _jsx("span", { className: "font-bold", children: text }, key) },
|
|
5
|
-
{ delimiter: "~~", render: (text, key) => _jsx("span", { className: "font-semibold", children: text }, key) },
|
|
6
|
-
{ delimiter: "^^", render: (text, key) => _jsx("span", { className: "text-accent", children: text }, key) },
|
|
7
|
-
];
|
|
8
|
-
const escapeRegex = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
|
|
9
|
-
const delimiters = delimiterConfig.map(({ delimiter }) => escapeRegex(delimiter) + ".*?" + escapeRegex(delimiter)).join("|");
|
|
10
|
-
const WRAPPED_TEXT_REGEX = new RegExp(`(${delimiters})`, "g");
|
|
11
|
-
export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }
|
|
12
|
-
const isWrapped = (x, wrapper) => x.startsWith(wrapper) && x.endsWith(wrapper);
|
|
13
|
-
export const formatText = (text) => {
|
|
14
|
-
const parts = text
|
|
15
|
-
.split(WRAPPED_TEXT_REGEX)
|
|
16
|
-
.filter(Boolean);
|
|
17
|
-
const formatted = parts.map((x, i) => {
|
|
18
|
-
if (isWrapped(x, "**")) {
|
|
19
|
-
// Remove only the first and last occurrence of the delimiter
|
|
20
|
-
const content = x.slice(2, -2);
|
|
21
|
-
return _jsx("span", { className: "font-bold", children: content }, i);
|
|
22
|
-
}
|
|
23
|
-
else if (isWrapped(x, "~~")) {
|
|
24
|
-
const content = x.slice(2, -2);
|
|
25
|
-
return _jsx("span", { className: "font-semibold", children: content }, i);
|
|
26
|
-
}
|
|
27
|
-
else if (isWrapped(x, "^^")) {
|
|
28
|
-
const content = x.slice(2, -2);
|
|
29
|
-
return _jsx("span", { className: "text-accent", children: content }, i);
|
|
30
|
-
}
|
|
31
|
-
return x;
|
|
32
|
-
});
|
|
33
|
-
return _jsx("span", { children: formatted }
|
|
34
|
-
};
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment } from "react";
|
|
3
|
+
const delimiterConfig = [
|
|
4
|
+
{ delimiter: "**", render: (text, key) => _jsx("span", { className: "font-bold", children: text }, key) },
|
|
5
|
+
{ delimiter: "~~", render: (text, key) => _jsx("span", { className: "font-semibold", children: text }, key) },
|
|
6
|
+
{ delimiter: "^^", render: (text, key) => _jsx("span", { className: "text-accent", children: text }, key) },
|
|
7
|
+
];
|
|
8
|
+
const escapeRegex = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
|
|
9
|
+
const delimiters = delimiterConfig.map(({ delimiter }) => escapeRegex(delimiter) + ".*?" + escapeRegex(delimiter)).join("|");
|
|
10
|
+
const WRAPPED_TEXT_REGEX = new RegExp(`(${delimiters})`, "g");
|
|
11
|
+
export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }));
|
|
12
|
+
const isWrapped = (x, wrapper) => x.startsWith(wrapper) && x.endsWith(wrapper);
|
|
13
|
+
export const formatText = (text) => {
|
|
14
|
+
const parts = text
|
|
15
|
+
.split(WRAPPED_TEXT_REGEX)
|
|
16
|
+
.filter(Boolean);
|
|
17
|
+
const formatted = parts.map((x, i) => {
|
|
18
|
+
if (isWrapped(x, "**")) {
|
|
19
|
+
// Remove only the first and last occurrence of the delimiter
|
|
20
|
+
const content = x.slice(2, -2);
|
|
21
|
+
return _jsx("span", { className: "font-bold", children: content }, i);
|
|
22
|
+
}
|
|
23
|
+
else if (isWrapped(x, "~~")) {
|
|
24
|
+
const content = x.slice(2, -2);
|
|
25
|
+
return _jsx("span", { className: "font-semibold", children: content }, i);
|
|
26
|
+
}
|
|
27
|
+
else if (isWrapped(x, "^^")) {
|
|
28
|
+
const content = x.slice(2, -2);
|
|
29
|
+
return _jsx("span", { className: "text-accent", children: content }, i);
|
|
30
|
+
}
|
|
31
|
+
return x;
|
|
32
|
+
});
|
|
33
|
+
return _jsx("span", { children: formatted });
|
|
34
|
+
};
|
package/dist/core/functions.d.ts
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
export declare const getFilesData: (files: File[]) => Promise<{
|
|
2
|
-
filename: string;
|
|
3
|
-
mimetype: string;
|
|
4
|
-
data?: string
|
|
5
|
-
}[]>;
|
|
6
|
-
export declare
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
export declare const bufferToFile: (buffer: ArrayBuffer, name?: string | undefined) => Promise<File>;
|
|
12
|
-
export declare const getAudioDuration: (file: File) => Promise<number>;
|
|
13
|
-
export declare function getBase64(image: string): Promise<string>;
|
|
1
|
+
export declare const getFilesData: (files: File[]) => Promise<{
|
|
2
|
+
filename: string;
|
|
3
|
+
mimetype: string;
|
|
4
|
+
data?: string;
|
|
5
|
+
}[]>;
|
|
6
|
+
export declare function getFileData(file: File): Promise<string>;
|
|
7
|
+
export declare function getFileData(file: File | undefined): Promise<string | undefined>;
|
|
8
|
+
export declare const bufferToFile: (buffer: ArrayBuffer, name?: string) => Promise<File>;
|
|
9
|
+
export declare const getAudioDuration: (file: File) => Promise<number>;
|
|
10
|
+
export declare function getBase64(image: string): Promise<string>;
|
package/dist/core/functions.js
CHANGED
|
@@ -1,79 +1,76 @@
|
|
|
1
|
-
import { fileTypeFromBuffer } from "file-type";
|
|
2
|
-
export const getFilesData = (files) => Promise.all(files.map((file) => {
|
|
3
|
-
return new Promise((resolve, reject) => {
|
|
4
|
-
const reader = new FileReader();
|
|
5
|
-
reader.onload = () => {
|
|
6
|
-
const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
|
|
7
|
-
return resolve({
|
|
8
|
-
filename: file.name,
|
|
9
|
-
mimetype: file.type,
|
|
10
|
-
data: base64,
|
|
11
|
-
});
|
|
12
|
-
};
|
|
13
|
-
reader.onerror = reject;
|
|
14
|
-
reader.readAsDataURL(file);
|
|
15
|
-
});
|
|
16
|
-
}));
|
|
17
|
-
export
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
reader.readAsDataURL(blob);
|
|
78
|
-
});
|
|
79
|
-
}
|
|
1
|
+
import { fileTypeFromBuffer } from "file-type";
|
|
2
|
+
export const getFilesData = (files) => Promise.all(files.map((file) => {
|
|
3
|
+
return new Promise((resolve, reject) => {
|
|
4
|
+
const reader = new FileReader();
|
|
5
|
+
reader.onload = () => {
|
|
6
|
+
const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
|
|
7
|
+
return resolve({
|
|
8
|
+
filename: file.name,
|
|
9
|
+
mimetype: file.type,
|
|
10
|
+
data: base64,
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
reader.onerror = reject;
|
|
14
|
+
reader.readAsDataURL(file);
|
|
15
|
+
});
|
|
16
|
+
}));
|
|
17
|
+
export async function getFileData(file) {
|
|
18
|
+
if (!file)
|
|
19
|
+
return;
|
|
20
|
+
return new Promise((resolve, reject) => {
|
|
21
|
+
const reader = new FileReader();
|
|
22
|
+
reader.onload = () => resolve(reader.result);
|
|
23
|
+
reader.onerror = reject;
|
|
24
|
+
reader.readAsDataURL(file);
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
async function detectFileExtension(buffer) {
|
|
28
|
+
const type = await fileTypeFromBuffer(buffer);
|
|
29
|
+
if (!type)
|
|
30
|
+
return null;
|
|
31
|
+
return type;
|
|
32
|
+
}
|
|
33
|
+
export const bufferToFile = async (buffer, name) => {
|
|
34
|
+
const type = await detectFileExtension(buffer);
|
|
35
|
+
if (!type)
|
|
36
|
+
throw new Error("Couldn't get type from buffer");
|
|
37
|
+
return new File([buffer], `${name ?? "file"}.${type.ext}`, {
|
|
38
|
+
type: type.mime,
|
|
39
|
+
lastModified: Date.now()
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
export const getAudioDuration = (file) => {
|
|
43
|
+
return new Promise((resolve, reject) => {
|
|
44
|
+
const url = URL.createObjectURL(file);
|
|
45
|
+
const audio = new Audio(url);
|
|
46
|
+
audio.addEventListener("loadedmetadata", () => {
|
|
47
|
+
const durationMs = audio.duration * 1000;
|
|
48
|
+
URL.revokeObjectURL(url);
|
|
49
|
+
resolve(durationMs);
|
|
50
|
+
});
|
|
51
|
+
audio.addEventListener("error", (e) => {
|
|
52
|
+
URL.revokeObjectURL(url);
|
|
53
|
+
reject(new Error("Failed to load audio metadata"));
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
export async function getBase64(image) {
|
|
58
|
+
if (image.startsWith("data:")) {
|
|
59
|
+
return image; // already a base64 data URL
|
|
60
|
+
}
|
|
61
|
+
const res = await fetch(image);
|
|
62
|
+
const blob = await res.blob();
|
|
63
|
+
return new Promise((resolve, reject) => {
|
|
64
|
+
const reader = new FileReader();
|
|
65
|
+
reader.onloadend = () => {
|
|
66
|
+
if (typeof reader.result === "string") {
|
|
67
|
+
resolve(reader.result);
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
reject(new Error("Failed to read image as base64"));
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
reader.onerror = reject;
|
|
74
|
+
reader.readAsDataURL(blob);
|
|
75
|
+
});
|
|
76
|
+
}
|
package/dist/core/types.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import type { ReactNode } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Common props for React components.
|
|
4
|
-
*
|
|
5
|
-
* @property `Component` - Component with Tailwind style(s) and children.
|
|
6
|
-
* @property `Clickable` - Component that executes a callback when clicked.
|
|
7
|
-
**/
|
|
8
|
-
export
|
|
9
|
-
style?: string;
|
|
10
|
-
children?: ReactNode;
|
|
11
|
-
};
|
|
12
|
-
export
|
|
13
|
-
action?: () => void;
|
|
14
|
-
disabled?: boolean;
|
|
15
|
-
};
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Common props for React components.
|
|
4
|
+
*
|
|
5
|
+
* @property `Component` - Component with Tailwind style(s) and children.
|
|
6
|
+
* @property `Clickable` - Component that executes a callback when clicked.
|
|
7
|
+
**/
|
|
8
|
+
export type Component = {
|
|
9
|
+
style?: string;
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
};
|
|
12
|
+
export type Clickable = {
|
|
13
|
+
action?: () => void;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
};
|
package/dist/core/types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
// clean
|
|
1
|
+
export {};
|
|
2
|
+
// clean
|
package/dist/core/variants.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Creates a highly customizable variant config
|
|
3
|
-
* for Tailwind styles using `tailwind-variants`.
|
|
4
|
-
**/
|
|
5
|
-
export { tv } from "tailwind-variants";
|
|
1
|
+
/**
|
|
2
|
+
* Creates a highly customizable variant config
|
|
3
|
+
* for Tailwind styles using `tailwind-variants`.
|
|
4
|
+
**/
|
|
5
|
+
export { tv } from "tailwind-variants";
|
package/dist/core/variants.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Creates a highly customizable variant config
|
|
3
|
-
* for Tailwind styles using `tailwind-variants`.
|
|
4
|
-
**/
|
|
5
|
-
export { tv } from "tailwind-variants";
|
|
6
|
-
// clean
|
|
1
|
+
/**
|
|
2
|
+
* Creates a highly customizable variant config
|
|
3
|
+
* for Tailwind styles using `tailwind-variants`.
|
|
4
|
+
**/
|
|
5
|
+
export { tv } from "tailwind-variants";
|
|
6
|
+
// clean
|
package/dist/format/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const cap: (x: string) => string;
|
|
2
|
-
export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
export declare const cap: (x: string) => string;
|
|
2
|
+
export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;
|