pentatrion-design 0.1.2 → 0.2.0

package/README.md

@@ -78,6 +78,13 @@ Mettre à jour le fichier `src/index.css`
 @import "tailwindcss/utilities";
 ```
 
+```json
+// .prettierrc
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
+```
+
 ## Installation
 
 
@@ -96,13 +103,13 @@ const config = {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
-+   "./node_modules/pentatrion-design/lib/**/*.{ts,tsx}",
-+   "./node_modules/pentatrion-design/components/**/*.{ts,tsx}",
-+   "./node_modules/pentatrion-design/hooks/**/*.{ts,tsx}",
-+   "./node_modules/pentatrion-design/redux/**/*.{ts,tsx}",
++   "./node_modules/pentatrion-design/lib/**/*.js",
++   "./node_modules/pentatrion-design/components/**/*.js",
++   "./node_modules/pentatrion-design/hooks/**/*.js",
++   "./node_modules/pentatrion-design/redux/**/*.js",
   ],
   darkMode: ["class"],
-+  plugins: [pentatrionTw],
++  plugins: [pentatrionTw()],
 };
 
 export default config;

package/components/autocomplete/Autocomplete.d.ts

@@ -5,6 +5,7 @@ import { Placement } from "@floating-ui/react";
 import { ThemeColor } from "../../types.js";
 export interface AutocompleteProps<O extends OptionLike = Option> {
     className?: string;
+    autoFocus?: boolean;
     icon?: boolean | ReactNode;
     color?: ThemeColor;
     /**

package/components/autocomplete/Autocomplete.js

@@ -11,7 +11,7 @@ import { Button } from "../button/index.js";
 import { Dialog } from "../dialog/index.js";
 import { Loader } from "../loader/index.js";
 import { inputConfig } from "../input/Input.js";
-export const Autocomplete = forwardRef(function Autocomplete({ className, icon = true, color = "yellow", noSearchSuffix, suffix, placement = "bottom", placeholder = "Search...", selection = null, onChangeSelection, autocompleteOptionComponent, loading = false, clearSearchButton = false, searchValue, onChangeSearchValue, options, selectOnFocus = true, readOnly = false, }, inputRef) {
+export const Autocomplete = forwardRef(function Autocomplete({ className, autoFocus = false, icon = true, color = "yellow", noSearchSuffix, suffix, placement = "bottom", placeholder = "Search...", selection = null, onChangeSelection, autocompleteOptionComponent, loading = false, clearSearchButton = false, searchValue, onChangeSearchValue, options, selectOnFocus = true, readOnly = false, }, inputRef) {
     const [isOpen, setIsOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);
     const onChangeSearchValueStable = useEventCallback(onChangeSearchValue);
@@ -95,7 +95,7 @@ export const Autocomplete = forwardRef(function Autocomplete({ className, icon =
         handleSelect,
     }), [activeIndex, selection, getItemProps, handleSelect]);
     const showClearSearchButton = clearSearchButton && (searchValue.trim() !== "" || selection !== null);
-    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: clsx(inputConfig.container, readOnly && "readonly"), ref: refs.setReference, "data-color": color, children: [icon !== false && (_jsxs("div", { className: "relative flex-center", children: [loading && _jsx(Loader, { size: "medium", color: "gray", className: "absolute left-0 top-0" }), icon === true ? (_jsx("span", { className: "h-8 w-8 flex-center", children: _jsx("i", { className: "fe-search" }) })) : (icon)] })), _jsx("input", { spellCheck: "false", className: clsx(inputConfig.input, icon === false && "pl-4"), ref: inputRef, type: "search", readOnly: readOnly, value: searchValue, placeholder: placeholder, "aria-autocomplete": "list", ...getReferenceProps({
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: clsx(inputConfig.container, readOnly && "readonly"), ref: refs.setReference, "data-color": color, children: [icon !== false && (_jsxs("div", { className: "relative flex-center", children: [loading && _jsx(Loader, { size: "medium", color: "gray", className: "absolute left-0 top-0" }), icon === true ? (_jsx("span", { className: "h-8 w-8 flex-center", children: _jsx("i", { className: "fe-search" }) })) : (icon)] })), _jsx("input", { autoFocus: autoFocus, spellCheck: "false", className: clsx(inputConfig.input, icon === false && "pl-4"), ref: inputRef, type: "search", readOnly: readOnly, value: searchValue, placeholder: placeholder, "aria-autocomplete": "list", ...getReferenceProps({
                             onClick() {
                                 if (selectOnFocus) {
                                     // it's better to listen onClick instead of onFocus. the event is triggered later and there

package/components/autocomplete/LazyAutocomplete.d.ts

@@ -1,6 +1,6 @@
 import { AutocompleteProps } from "./Autocomplete.js";
 import { OptionLike, Option } from "../select/index.js";
-interface Props<O extends OptionLike = Option> extends Pick<AutocompleteProps<O>, "className" | "icon" | "color" | "suffix" | "noSearchSuffix" | "placement" | "placeholder" | "selection" | "onChangeSelection" | "autocompleteOptionComponent" | "loading" | "clearSearchButton" | "readOnly"> {
+interface Props<O extends OptionLike = Option> extends Pick<AutocompleteProps<O>, "autoFocus" | "className" | "icon" | "color" | "suffix" | "noSearchSuffix" | "placement" | "placeholder" | "selection" | "onChangeSelection" | "autocompleteOptionComponent" | "loading" | "clearSearchButton" | "readOnly"> {
     onChangeSearchValueCallback: (searchValue: string) => Promise<O[]>;
     debounce?: number;
 }

package/components/autocomplete/SimpleAutocomplete.d.ts

@@ -1,6 +1,6 @@
 import { AutocompleteProps } from "./Autocomplete.js";
 import { Option, OptionLike } from "../select/index.js";
-interface Props<O extends OptionLike = Option> extends Pick<AutocompleteProps<O>, "className" | "icon" | "color" | "suffix" | "noSearchSuffix" | "placement" | "placeholder" | "selection" | "onChangeSelection" | "autocompleteOptionComponent" | "options" | "selection" | "readOnly"> {
+interface Props<O extends OptionLike = Option> extends Pick<AutocompleteProps<O>, "autoFocus" | "className" | "icon" | "color" | "suffix" | "noSearchSuffix" | "placement" | "placeholder" | "selection" | "onChangeSelection" | "autocompleteOptionComponent" | "options" | "selection" | "readOnly"> {
 }
 export declare function SimpleAutocomplete<O extends OptionLike = Option>({ options, selection, onChangeSelection, ...rest }: Props<O>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/dropdown-menu/useDropdownMenu.d.ts

@@ -2,7 +2,7 @@ import type { DropdownMenuOptions } from "./interface.js";
 export declare function useDropdownMenu({ initialOpen, placement, open: controlledOpen, onOpen: setControlledOpen, color, modal, }: DropdownMenuOptions): {
     elementsRef: import("react").MutableRefObject<(HTMLElement | null)[]>;
     labelsRef: import("react").MutableRefObject<(string | null)[]>;
-    color: import("../../index.js").ThemeColor | "default";
+    color: import("../../types.js").ThemeColor | "default";
     modal: boolean;
     activeIndex: number | null;
     handleSelect: () => void;

package/components/dropdown-menu/useDropdownMenuContext.d.ts

@@ -4,7 +4,7 @@ export declare const DropdownMenuContext: import("react").Context<ContextType>;
 export declare function useDropdownMenuContext(): {
     elementsRef: import("react").MutableRefObject<(HTMLElement | null)[]>;
     labelsRef: import("react").MutableRefObject<(string | null)[]>;
-    color: import("../../index.js").ThemeColor | "default";
+    color: import("../../types.js").ThemeColor | "default";
     modal: boolean;
     activeIndex: number | null;
     handleSelect: () => void;

package/components/input/Input.js

@@ -9,7 +9,7 @@ export const Input = forwardRef(({ variant = "normal", color = "yellow", disable
     return (_jsxs("div", { "data-color": color, "data-variant": variant, className: clsx(inputConfig.container, disabled && "disabled", readOnly && "readonly", className), children: [prefix && (_jsx("div", { className: clsx([
                     "relative flex-center",
                     typeof prefix === "string" && "mx-2 select-none text-gray-6",
-                ]), children: prefix })), _jsx("input", { ref: ref, className: clsx(inputConfig.input, !prefix && "pl-4", !suffix && "pr-4"), disabled: disabled, readOnly: readOnly, onClick: (e) => {
+                ]), children: prefix })), _jsx("input", { autoFocus: true, ref: ref, className: clsx(inputConfig.input, !prefix && "pl-4", !suffix && "pr-4"), disabled: disabled, readOnly: readOnly, onClick: (e) => {
                     if (readOnly) {
                         e.target?.select();
                     }

package/components/modal/useModal.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { ModalOptions } from "./interface.js";
 export declare function useModal({ initialOpen, open: controlledOpen, onOpen: setControlledOpen, color, }?: ModalOptions): {
-    color: import("../../index.js").ThemeColor | "default";
+    color: import("../../types.js").ThemeColor | "default";
     labelId: string | undefined;
     descriptionId: string | undefined;
     setLabelId: Dispatch<SetStateAction<string | undefined>>;

package/components/modal/useModalContext.d.ts

@@ -2,7 +2,7 @@ import { useModal } from "./useModal.js";
 type ContextType = ReturnType<typeof useModal> | null;
 export declare const ModalContext: import("react").Context<ContextType>;
 export declare function useModalContext(): {
-    color: import("../../index.js").ThemeColor | "default";
+    color: import("../../types.js").ThemeColor | "default";
     labelId: string | undefined;
     descriptionId: string | undefined;
     setLabelId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;

package/components/popover/usePopover.d.ts

@@ -1,7 +1,7 @@
 import { PopoverOptions } from "./interface.js";
 export declare function usePopover({ initialOpen, placement, open: controlledOpen, onOpen: setControlledOpen, color, modal, }: PopoverOptions): {
     arrowRef: import("react").RefObject<HTMLDivElement>;
-    color: import("../../index.js").ThemeColor | undefined;
+    color: import("../../types.js").ThemeColor | undefined;
     modal: boolean;
     labelId: string | undefined;
     descriptionId: string | undefined;

package/components/popover/usePopoverContext.d.ts

@@ -3,7 +3,7 @@ type ContextType = ReturnType<typeof usePopover> | null;
 export declare const PopoverContext: import("react").Context<ContextType>;
 export declare function usePopoverContext(): {
     arrowRef: import("react").RefObject<HTMLDivElement>;
-    color: import("../../index.js").ThemeColor | undefined;
+    color: import("../../types.js").ThemeColor | undefined;
     modal: boolean;
     labelId: string | undefined;
     descriptionId: string | undefined;

package/components/tooltip/useTooltip.d.ts

@@ -1,7 +1,7 @@
 import { TooltipOptions } from "./interface.js";
 export declare function useTooltip({ initialOpen, placement, open: controlledOpen, onOpen: setControlledOpen, openDelay, closeDelay, color, }?: TooltipOptions): {
     arrowRef: import("react").RefObject<HTMLDivElement>;
-    color: import("../../index.js").ThemeColor;
+    color: import("../../types.js").ThemeColor;
     placement: import("@floating-ui/react").Placement;
     strategy: import("@floating-ui/react").Strategy;
     middlewareData: import("@floating-ui/react").MiddlewareData;

package/components/tooltip/useTooltipContext.d.ts

@@ -3,7 +3,7 @@ type ContextType = ReturnType<typeof useTooltip> | null;
 export declare const TooltipContext: import("react").Context<ContextType>;
 export declare function useTooltipContext(): {
     arrowRef: import("react").RefObject<HTMLDivElement>;
-    color: import("../../index.js").ThemeColor;
+    color: import("../../types.js").ThemeColor;
     placement: import("@floating-ui/react-dom").Placement;
     strategy: import("@floating-ui/react-dom").Strategy;
     middlewareData: import("@floating-ui/react-dom").MiddlewareData;

package/index.d.ts

@@ -1,33 +1,2 @@
-export type { ThemeColor } from "./types.js";
-export * from "./components/autocomplete/index.js";
-export * from "./components/badge/index.js";
-export * from "./components/button/index.js";
-export * from "./components/card/index.js";
-export * from "./components/code/index.js";
-export * from "./components/context-menu/index.js";
-export * from "./components/dialog/index.js";
-export * from "./components/dropdown-menu/index.js";
-export * from "./components/dropdown-menu-nested/index.js";
-export * from "./components/flash/index.js";
-export * from "./components/highlight/index.js";
-export * from "./components/href/index.js";
-export * from "./components/input/index.js";
-export * from "./components/input-field/index.js";
-export * from "./components/loader/index.js";
-export * from "./components/modal/index.js";
-export * from "./components/notification/index.js";
-export * from "./components/popover/index.js";
-export * from "./components/portal/index.js";
-export * from "./components/resize-area/index.js";
-export * from "./components/scroll/index.js";
-export * from "./components/select/index.js";
-export * from "./components/snack/index.js";
-export * from "./components/sortable/index.js";
-export * from "./components/steps/index.js";
-export * from "./components/table/index.js";
-export * from "./components/tabs/index.js";
-export * from "./components/textarea/index.js";
-export * from "./components/tooltip/index.js";
-export * from "./hooks/index.js";
-export * from "./lib/index.js";
-export { pentatrionTw } from "./tailwind/index.js";
+declare const _default: {};
+export default _default;

package/index.js

@@ -1,32 +1,5 @@
-export * from "./components/autocomplete/index.js";
-export * from "./components/badge/index.js";
-export * from "./components/button/index.js";
-export * from "./components/card/index.js";
-export * from "./components/code/index.js";
-export * from "./components/context-menu/index.js";
-export * from "./components/dialog/index.js";
-export * from "./components/dropdown-menu/index.js";
-export * from "./components/dropdown-menu-nested/index.js";
-export * from "./components/flash/index.js";
-export * from "./components/highlight/index.js";
-export * from "./components/href/index.js";
-export * from "./components/input/index.js";
-export * from "./components/input-field/index.js";
-export * from "./components/loader/index.js";
-export * from "./components/modal/index.js";
-export * from "./components/notification/index.js";
-export * from "./components/popover/index.js";
-export * from "./components/portal/index.js";
-export * from "./components/resize-area/index.js";
-export * from "./components/scroll/index.js";
-export * from "./components/select/index.js";
-export * from "./components/snack/index.js";
-export * from "./components/sortable/index.js";
-export * from "./components/steps/index.js";
-export * from "./components/table/index.js";
-export * from "./components/tabs/index.js";
-export * from "./components/textarea/index.js";
-export * from "./components/tooltip/index.js";
-export * from "./hooks/index.js";
-export * from "./lib/index.js";
-export { pentatrionTw } from "./tailwind/index.js";
+// This file exists for module resolution purposes.
+// Not exporting anything from the root entry point
+// Please use individual entry points in order to always
+// obtain minimum kbs.
+export default {};

package/package.json

@@ -1,14 +1,52 @@
 {
   "name": "pentatrion-design",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "",
   "keywords": [],
   "author": "Hugues Tavernier",
   "license": "ISC",
+  "exports": {
+    ".": "./index.js",
+    "./types": "./types.js",
+    "./components/autocomplete": "./components/autocomplete.js",
+    "./components/badge": "./components/badge.js",
+    "./components/button": "./components/button.js",
+    "./components/card": "./components/card.js",
+    "./components/code": "./components/code.js",
+    "./components/context-menu": "./components/context.js",
+    "./components/dialog": "./components/dialog.js",
+    "./components/dropdown-menu": "./components/dropdown.js",
+    "./components/dropdown-menu-nested": "./components/dropdown.js",
+    "./components/flash": "./components/flash.js",
+    "./components/highlight": "./components/highlight.js",
+    "./components/href": "./components/href.js",
+    "./components/input": "./components/input.js",
+    "./components/input-field": "./components/input.js",
+    "./components/loader": "./components/loader.js",
+    "./components/modal": "./components/modal.js",
+    "./components/notification": "./components/notification.js",
+    "./components/popover": "./components/popover.js",
+    "./components/portal": "./components/portal.js",
+    "./components/resize-area": "./components/resize.js",
+    "./components/scroll": "./components/scroll.js",
+    "./components/select": "./components/select.js",
+    "./components/snack": "./components/snack.js",
+    "./components/sortable": "./components/sortable.js",
+    "./components/steps": "./components/steps.js",
+    "./components/table": "./components/table.js",
+    "./components/tabs": "./components/tabs.js",
+    "./components/textarea": "./components/textarea.js",
+    "./components/tooltip": "./components/tooltip.js",
+    "./hooks": "./hooks/index.js",
+    "./lib": "./lib/index.js",
+    "./redux/notification": "./redux/notification/index.js",
+    "./tailwind": "./tailwind/index.js"
+  },
   "type": "module",
   "dependencies": {
     "@floating-ui/react": "^0.26.17",
     "clsx": "^2.1.1",
+    "pentatrion-design": "link:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-polymorphic-types": "^2.0.0",

package/redux/notification/notificationSlice.d.ts

@@ -1,5 +1,8 @@
 import { Message } from "../../types.js";
-declare const _default: Reducer<State>;
+type NotificationState = {
+    messages: Message[];
+};
+declare const _default: import("@reduxjs/toolkit").Reducer<NotificationState>;
 export default _default;
 export declare const messageAdded: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[content: string, options?: Partial<Omit<Message, "content" | "id">> | undefined], {
     id: string;