deploy

dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { CheckBoxIndicatorProps, CheckBoxLabelProps, CheckBoxRootProps } from "./checkbox.type";
+declare function CheckBoxRoot(props: CheckBoxRootProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckBoxIndicator(props: CheckBoxIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckBoxLabel(props: CheckBoxLabelProps): import("react/jsx-runtime").JSX.Element;
+declare const CheckBox: typeof CheckBoxRoot & {
+    Indicator: typeof CheckBoxIndicator;
+    Label: typeof CheckBoxLabel;
+};
+export default CheckBox;

dist/components/checkbox/Checkbox.js

@@ -0,0 +1,93 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from "../../utils/createContext";
+import { getNarrowTypedProps, getCustomElement } from "../../utils/dom";
+import { useExternalState } from "../../hooks/useExternalState";
+var checkboxDefaultValue = {
+    checked: false,
+    toggleCheckBox: function () { },
+    id: null,
+};
+var _a = createContext({
+    defaultValue: checkboxDefaultValue,
+    contextName: "CheckBox",
+}), CheckBoxProvider = _a.CheckBoxProvider, CheckBoxUseContext = _a.CheckBoxUseContext;
+function CheckBoxRoot(props) {
+    var children = props.children, externalCheck = props.externalCheck, _a = props.defaultCheck, defaultCheck = _a === void 0 ? false : _a, onCheckChange = props.onCheckChange, id = props.id;
+    var _b = useExternalState({
+        prop: externalCheck,
+        defaultProp: defaultCheck,
+        handler: onCheckChange,
+    }), _c = _b[0], checked = _c === void 0 ? false : _c, setChecked = _b[1];
+    var toggleCheckBox = function () {
+        console.log(checked);
+        checked ? setChecked(false) : setChecked(true);
+    };
+    return (_jsx(CheckBoxProvider, __assign({ contextValues: { checked: checked, toggleCheckBox: toggleCheckBox, id: id } }, { children: children })));
+}
+function CheckBoxIndicator(props) {
+    var _a = getNarrowTypedProps(props), children = _a.children, asChild = _a.asChild, restProps = __rest(_a, ["children", "asChild"]);
+    var _b = CheckBoxUseContext(), checked = _b.checked, toggleCheckBox = _b.toggleCheckBox, id = _b.id;
+    var handleClick = function (e) {
+        var _a;
+        if (asChild) {
+            (_a = restProps.onIndicatorClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+        }
+        toggleCheckBox();
+    };
+    if (asChild) {
+        return getCustomElement(children, {
+            className: restProps.className,
+            checked: checked,
+            onClick: handleClick,
+            type: "checkbox",
+            id: id,
+        });
+    }
+    return (_jsx("input", __assign({ type: "checkbox", id: "checkbox-".concat(id), onClick: toggleCheckBox, checked: checked, className: restProps.className }, { children: children })));
+}
+function CheckBoxLabel(props) {
+    var _a = getNarrowTypedProps(props), children = _a.children, asChild = _a.asChild, restProps = __rest(_a, ["children", "asChild"]);
+    var _b = CheckBoxUseContext(), checked = _b.checked, id = _b.id;
+    var handleClick = function (e) {
+        var _a;
+        if (asChild) {
+            (_a = restProps.onLabelClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+        }
+    };
+    if (asChild) {
+        return getCustomElement(children, {
+            className: restProps.className,
+            htmlFor: "checkbox-".concat(id),
+            checked: checked,
+            onClick: handleClick,
+        });
+    }
+    return (_jsx("label", __assign({ htmlFor: "checkbox-".concat(id), className: restProps.className }, { children: children })));
+}
+var CheckBox = Object.assign(CheckBoxRoot, {
+    Indicator: CheckBoxIndicator,
+    Label: CheckBoxLabel,
+});
+export default CheckBox;

dist/components/checkbox/checkbox.type.d.ts

@@ -0,0 +1,20 @@
+import { DefaultProps } from "../common/type";
+export type CheckBoxContextType = {
+    checked: boolean;
+    toggleCheckBox: () => void;
+    id: string | null;
+};
+export type CheckBoxRootProps = DefaultProps & {
+    id: string;
+    externalCheck?: boolean;
+    defaultCheck?: boolean;
+    onCheckChange?: (state?: boolean) => void;
+};
+export type CheckBoxIndicatorProps = DefaultProps & {
+    className?: string;
+    onIndicatorClick?: (e: MouseEvent) => void;
+};
+export type CheckBoxLabelProps = DefaultProps & {
+    className?: string;
+    onLabelClick?: (e: MouseEvent) => void;
+};

dist/components/checkbox/checkbox.type.js

@@ -0,0 +1 @@
+export {};

dist/components/common/type.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from "react";
+type PropsWithAsChildType = {
+    asChild: true;
+    children: ReactElement;
+};
+type PropsWhithoutAsChildType = {
+    asChild?: false;
+    children?: ReactElement | ReactElement[] | undefined;
+};
+export type DefaultProps = PropsWithAsChildType | PropsWhithoutAsChildType;
+export {};

dist/components/common/type.js

@@ -0,0 +1 @@
+export {};

dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,11 @@
+import { DialogBackDropProps, DialogContentProps, DialogRootProps, DialogTriggerProps } from "./dialog.type";
+declare function DialogRoot(props: DialogRootProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger(props: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogBackDrop(props: DialogBackDropProps): import("react/jsx-runtime").JSX.Element | null;
+declare function DialogContent(props: DialogContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare const Dialog: typeof DialogRoot & {
+    Trigger: typeof DialogTrigger;
+    BackDrop: typeof DialogBackDrop;
+    Content: typeof DialogContent;
+};
+export default Dialog;

dist/components/dialog/Dialog.js

@@ -0,0 +1,129 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createContext } from "../../utils/createContext";
+import { useExternalState } from "../../hooks/useExternalState";
+import { getCustomElement, getNarrowTypedProps } from "../../utils/dom";
+var dialogDefalutValues = {
+    open: false,
+    toggleDialog: function () { },
+    openDialog: function () { },
+    closeDialog: function () { },
+};
+var _a = createContext({
+    defaultValue: dialogDefalutValues,
+    contextName: "Dialog",
+}), DialogProvider = _a.DialogProvider, DialogUseContext = _a.DialogUseContext;
+function DialogRoot(props) {
+    var children = props.children, externalOpen = props.externalOpen, onOpenChange = props.onOpenChange, _a = props.defaultOpen, defaultOpen = _a === void 0 ? false : _a;
+    var _b = useExternalState({
+        prop: externalOpen,
+        defaultProp: defaultOpen,
+        handler: onOpenChange,
+    }), _c = _b[0], open = _c === void 0 ? false : _c, setOpen = _b[1];
+    var toggleDialog = function () {
+        open ? setOpen(false) : setOpen(true);
+    };
+    var openDialog = function () {
+        setOpen(true);
+    };
+    var closeDialog = function () {
+        setOpen(false);
+    };
+    return (_jsx(DialogProvider, __assign({ contextValues: { open: open, toggleDialog: toggleDialog, openDialog: openDialog, closeDialog: closeDialog } }, { children: children })));
+}
+function DialogTrigger(props) {
+    var _a = getNarrowTypedProps(props), asChild = _a.asChild, children = _a.children, restProps = __rest(_a, ["asChild", "children"]);
+    var toggleDialog = DialogUseContext().toggleDialog;
+    var handleClick = function (e) {
+        var _a;
+        if (asChild) {
+            (_a = restProps.onTriggerClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+        }
+        toggleDialog();
+    };
+    if (asChild) {
+        return getCustomElement(children, {
+            className: restProps.className,
+            onClick: handleClick,
+        });
+    }
+    return (_jsx("button", __assign({ onClick: toggleDialog, className: restProps.className }, { children: children })));
+}
+function DialogBackDrop(props) {
+    var _a = getNarrowTypedProps(props), asChild = _a.asChild, children = _a.children, restProps = __rest(_a, ["asChild", "children"]);
+    var _b = DialogUseContext(), open = _b.open, closeDialog = _b.closeDialog;
+    useEffect(function () {
+        var _a;
+        (_a = document
+            .getElementById("navrary-dialog-backdrop")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", closeDialog);
+        return function () {
+            window.removeEventListener("click", closeDialog);
+        };
+    });
+    var handleClick = function (e) {
+        var _a;
+        (_a = restProps.onBackDropClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+        closeDialog();
+    };
+    if (asChild) {
+        return open
+            ? getCustomElement(children, {
+                className: restProps.className,
+                onClick: handleClick,
+                id: "navrary-dialog-backdrop",
+            })
+            : null;
+    }
+    return (_jsx("button", __assign({ id: "navrary-dialog-backdrop", onClick: closeDialog, className: restProps.className }, { children: children })));
+}
+function DialogContent(props) {
+    var _a = getNarrowTypedProps(props), asChild = _a.asChild, children = _a.children, restProps = __rest(_a, ["asChild", "children"]);
+    var _b = DialogUseContext(), open = _b.open, closeDialog = _b.closeDialog;
+    var closeWithEscapeKey = function (e) {
+        if (!restProps.closeOnEsc || e.key !== "Escape")
+            return;
+        closeDialog();
+    };
+    useEffect(function () {
+        window.addEventListener("keydown", closeWithEscapeKey);
+        return function () {
+            window.removeEventListener("keydown", closeWithEscapeKey);
+        };
+    });
+    if (asChild) {
+        return open
+            ? getCustomElement(children, {
+                className: restProps.className,
+            })
+            : null;
+    }
+    return open ? (_jsx("article", __assign({ className: restProps.className }, { children: children }))) : null;
+}
+var Dialog = Object.assign(DialogRoot, {
+    Trigger: DialogTrigger,
+    BackDrop: DialogBackDrop,
+    Content: DialogContent,
+});
+export default Dialog;

dist/components/dialog/dialog.type.d.ts

@@ -0,0 +1,24 @@
+import { DefaultProps } from "../common/type";
+export type DialogDefalutValuesType = {
+    open: boolean;
+    toggleDialog: () => void;
+    openDialog: () => void;
+    closeDialog: () => void;
+};
+export type DialogRootProps = {
+    externalOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (state?: boolean) => void;
+} & DefaultProps;
+export type DialogTriggerProps = DefaultProps & {
+    className?: string;
+    onTriggerClick?: (e: MouseEvent) => void;
+};
+export type DialogBackDropProps = DefaultProps & {
+    onBackDropClick?: (e: MouseEvent) => void;
+    className?: string;
+};
+export type DialogContentProps = DefaultProps & {
+    closeOnEsc?: boolean;
+    className?: string;
+};

dist/components/dialog/dialog.type.js

@@ -0,0 +1 @@
+export {};

dist/components/select/Select.d.ts

@@ -0,0 +1,13 @@
+import { SelecOptionProps, SelectOptionGroupProps, SelectRootProps, SelectTriggerProps, SelectValueProps } from "./select.type";
+declare function SelectRoot(props: SelectRootProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger(props: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectOptionGroup(props: SelectOptionGroupProps): import("react/jsx-runtime").JSX.Element | null;
+declare function SelectOption<T extends number | string>(props: SelecOptionProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue<T extends string = string>(props: SelectValueProps<T>): import("react/jsx-runtime").JSX.Element;
+declare const Select: typeof SelectRoot & {
+    Trigger: typeof SelectTrigger;
+    OptionGroup: typeof SelectOptionGroup;
+    Option: typeof SelectOption;
+    Value: typeof SelectValue;
+};
+export default Select;