@seedgrid/fe-components 0.2.8 → 0.2.10

package/dist/inputs/SgToggleSwitch.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Controller } from "react-hook-form";
+import { t, useComponentsI18n } from "../i18n";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function toBoolean(value, fallback = false) {
+    if (typeof value === "boolean")
+        return value;
+    if (typeof value === "number")
+        return value !== 0;
+    if (typeof value === "string") {
+        const normalized = value.trim().toLowerCase();
+        return normalized === "true" || normalized === "1" || normalized === "on" || normalized === "yes";
+    }
+    return fallback;
+}
+function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (!ref)
+                continue;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (typeof ref === "object" && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function ErrorText(props) {
+    if (!props.message)
+        return null;
+    return (_jsx("p", { id: props.id, "data-sg-error": true, className: "text-xs text-red-600", children: props.message }));
+}
+function mergeInputPropsWithField(inputProps, field) {
+    return {
+        ...inputProps,
+        checked: toBoolean(field.value, false),
+        onChange: (event) => {
+            field.onChange(event.currentTarget.checked);
+            inputProps?.onChange?.(event);
+        },
+        onBlur: (event) => {
+            field.onBlur();
+            inputProps?.onBlur?.(event);
+        },
+        ref: (node) => {
+            field.ref(node);
+            const ref = inputProps?.ref;
+            if (!ref)
+                return;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && typeof ref === "object" && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function SgToggleSwitchBase(props) {
+    const i18n = useComponentsI18n();
+    const inputProps = props.inputProps ?? {};
+    const { checked: inputChecked, defaultChecked: inputDefaultChecked, onChange: inputOnChange, onBlur: inputOnBlur, onClick: inputOnClick, disabled: inputDisabled, readOnly: inputReadOnly, className: inputClassName, ref: inputRef, style: inputStyle, ...restInputProps } = inputProps;
+    const isControlled = props.checked !== undefined || inputChecked !== undefined;
+    const [internalChecked, setInternalChecked] = React.useState(() => toBoolean(props.defaultChecked ?? inputDefaultChecked, false));
+    const [internalError, setInternalError] = React.useState(null);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    const inputNodeRef = React.useRef(null);
+    const errorId = `${props.id}-error`;
+    const checked = isControlled ? toBoolean(props.checked ?? inputChecked, false) : internalChecked;
+    const isReadOnly = Boolean(props.readOnly ?? inputReadOnly);
+    const isDisabled = props.enabled === false || Boolean(inputDisabled);
+    const setRefs = React.useMemo(() => mergeRefs((node) => {
+        inputNodeRef.current = node;
+    }, inputRef), [inputRef]);
+    React.useEffect(() => {
+        if (isControlled)
+            return;
+        const domChecked = inputNodeRef.current?.checked ?? false;
+        setInternalChecked((prev) => (prev === domChecked ? prev : domChecked));
+    }, [isControlled]);
+    const runValidation = React.useCallback((nextChecked) => {
+        if ((props.required ?? false) && !nextChecked) {
+            const message = props.requiredMessage ?? t(i18n, "components.inputs.required");
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.validation) {
+            const message = props.validation(nextChecked);
+            setInternalError(message);
+            props.onValidation?.(message ?? null);
+            return;
+        }
+        setInternalError(null);
+        props.onValidation?.(null);
+    }, [i18n, props]);
+    const handleChange = (event) => {
+        if (isReadOnly) {
+            event.preventDefault();
+            event.currentTarget.checked = checked;
+            return;
+        }
+        const nextChecked = event.currentTarget.checked;
+        if (!isControlled)
+            setInternalChecked(nextChecked);
+        setHasInteracted(true);
+        if (props.validateOnBlur === false) {
+            runValidation(nextChecked);
+        }
+        inputOnChange?.(event);
+        props.onChange?.(nextChecked);
+    };
+    const handleBlur = (event) => {
+        if ((props.validateOnBlur ?? true) || hasInteracted) {
+            runValidation(event.currentTarget.checked);
+        }
+        inputOnBlur?.(event);
+    };
+    const handleClick = (event) => {
+        if (isReadOnly) {
+            event.preventDefault();
+            return;
+        }
+        inputOnClick?.(event);
+    };
+    const hasError = Boolean(props.error ?? internalError);
+    const resolvedBorderRadius = 9999;
+    const switchWidth = props.width
+        ? typeof props.width === "number"
+            ? `${props.width}px`
+            : props.width
+        : undefined;
+    return (_jsxs("div", { className: cn("space-y-1", props.className), style: switchWidth ? { width: switchWidth } : undefined, children: [_jsxs("label", { htmlFor: props.id, className: cn("inline-flex items-start gap-3 select-none", isDisabled
+                    ? "cursor-not-allowed opacity-70"
+                    : isReadOnly
+                        ? "cursor-default"
+                        : "cursor-pointer"), children: [_jsx("input", { id: props.id, type: "checkbox", role: "switch", "aria-invalid": hasError, "aria-describedby": hasError ? errorId : undefined, "aria-label": props.label ? undefined : props.id, checked: isControlled ? checked : undefined, defaultChecked: isControlled ? undefined : toBoolean(props.defaultChecked ?? inputDefaultChecked, false), disabled: isDisabled, readOnly: isReadOnly, ...restInputProps, className: cn("peer sr-only", inputClassName), style: inputStyle, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onClick: handleClick }), _jsxs("span", { className: cn("relative inline-flex h-6 w-11 items-center", props.switchClassName), children: [_jsx("span", { "aria-hidden": "true", className: cn("absolute inset-0 rounded-full border transition-colors duration-200", checked
+                                    ? hasError
+                                        ? "border-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.2)]"
+                                        : "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]"
+                                    : hasError
+                                        ? "border-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.05)]"
+                                        : "border-border bg-muted", "peer-focus-visible:ring-2 peer-focus-visible:ring-[hsl(var(--primary)/0.25)]", hasError ? "peer-focus-visible:ring-[hsl(var(--destructive)/0.25)]" : undefined, props.trackClassName), style: { borderRadius: resolvedBorderRadius } }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none relative z-10 inline-flex size-5 items-center justify-center rounded-full bg-white text-[11px] text-foreground/70 shadow-sm transition-transform duration-200", checked ? "translate-x-5" : "translate-x-0", props.thumbClassName), children: checked ? props.onIcon ?? null : props.offIcon ?? null })] }), props.label ? (_jsxs("span", { className: cn("pt-0.5 text-sm text-foreground", props.labelClassName), children: [props.label, props.required ? _jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", children: "*" }) : null, props.description ? (_jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: props.description })) : null] })) : null] }), _jsx(ErrorText, { id: errorId, message: props.error ?? internalError ?? undefined })] }));
+}
+export function SgToggleSwitch(props) {
+    const { control, name, register, rules, ...rest } = props;
+    if (name && register) {
+        const reg = register(name, rules);
+        return (_jsx(SgToggleSwitchBase, { ...rest, inputProps: {
+                ...rest.inputProps,
+                name,
+                onChange: (event) => {
+                    reg.onChange(event);
+                    rest.inputProps?.onChange?.(event);
+                },
+                onBlur: (event) => {
+                    reg.onBlur(event);
+                    rest.inputProps?.onBlur?.(event);
+                },
+                ref: mergeRefs(reg.ref, rest.inputProps?.ref)
+            } }));
+    }
+    if (control && name) {
+        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgToggleSwitchBase, { ...rest, error: rest.error ?? fieldState.error?.message, inputProps: mergeInputPropsWithField(rest.inputProps, field) })) }));
+    }
+    return _jsx(SgToggleSwitchBase, { ...rest });
+}
+export const SgSwitch = SgToggleSwitch;

package/dist/others/SgPlayground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAoVF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoMtE"}
+{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAqVF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoMtE"}

package/dist/others/SgPlayground.js

@@ -7,8 +7,9 @@ import { SgCard } from "../layout/SgCard";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
-const DEFAULT_SEEDGRID_DEPENDENCY = "0.2.6";
+const DEFAULT_SEEDGRID_DEPENDENCY = "0.2.9";
 const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
+    "@codesandbox/sandpack-react": "^2.20.0",
     "react-hook-form": "^7.0.0",
     "lucide-react": "^0.468.0",
     "@tiptap/react": "^2.9.1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seedgrid/fe-components",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -38,6 +38,8 @@
     "@tiptap/extension-font-family": "^2.9.1"
   },
   "devDependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-hook-form": "^7.0.0",
     "@codesandbox/sandpack-react": "^2.20.0",
     "lucide-react": "^0.468.0",
@@ -52,6 +54,10 @@
     "@tiptap/extension-highlight": "^2.9.1",
     "@tiptap/extension-subscript": "^2.9.1",
     "@tiptap/extension-superscript": "^2.9.1",
-    "@tiptap/extension-font-family": "^2.9.1"
+    "@tiptap/extension-font-family": "^2.9.1",
+    "@types/qrcode": "^1.5.6"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.4"
   }
 }