pentatrion-design 0.0.13 → 0.0.14

package/README.md

@@ -1,4 +1,4 @@
-# [Pentatrion Design System](https://storybook.lonlat.pentatrion.com)
+# [Pentatrion Design System](https://design.pentatrion.com)
 
 <a href="https://design.pentatrion.com">
 <img src="https://raw.githubusercontent.com/lhapaipai/pentatrion-design/main/screenshot.png" alt="Pentatrion design system" />

package/components/autocomplete/Autocomplete.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import type { OptionLike, Option } from "../select";
 import { AutocompleteOptionProps } from "./AutocompleteOption";
 import { Placement } from "@floating-ui/react";
-import { ThemeColor } from "../../types.d";
+import { ThemeColor } from "../../types";
 export interface AutocompleteProps<O extends OptionLike = Option> {
     className?: string;
     icon?: boolean | ReactNode;

package/components/badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { ThemeColor } from "../../types.d";
+import { ThemeColor } from "../../types";
 interface Props {
     children: ReactNode;
     className?: string;

package/components/button/Button.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import { ThemeColor } from "../../types.d";
+import { ThemeColor } from "../../types";
 export interface ButtonProps extends ComponentPropsWithRef<"button"> {
     withRipple?: boolean;
     variant?: "contained" | "light" | "outlined" | "text" | "ghost";

package/components/button/Button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef, } from "react";
+import { forwardRef, useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
 import { Loader } from "../loader";
 import { useRipple } from "../../hooks";

package/components/button/LinkButton.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import { ThemeColor } from "../../types.d";
+import { ThemeColor } from "../../types";
 export interface LinkButtonProps extends ComponentPropsWithRef<"a"> {
     href: string;
     withRipple?: boolean;

package/components/button/LinkButton.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef, } from "react";
+import { forwardRef, useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
 import { useRipple } from "../../hooks";
 import { buttonVariants } from "./Button";

package/components/dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
 import { Placement } from "@floating-ui/react";
 import { ComponentProps, ReactNode } from "react";
-import type { ThemeColor } from "../../types.d";
+import type { ThemeColor } from "../../types";
 interface Props extends ComponentProps<"div"> {
     color?: ThemeColor;
     placement?: Placement;

package/components/dialog/Dialog.js

@@ -16,5 +16,5 @@ export const dialogVariants = {
     },
 };
 export function Dialog({ placement, color, children, className, ...rest }) {
-    return (_jsx("div", { className: clsx("rounded-2xl relative shadow dark:shadow-dark", dialogVariants.color(color), className), "data-placement": placement, "data-color": color, ...rest, children: children }));
+    return (_jsx("div", { className: clsx("relative rounded-2xl shadow dark:shadow-dark", dialogVariants.color(color), className), "data-placement": placement, "data-color": color, ...rest, children: children }));
 }

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

@@ -0,0 +1,10 @@
+import { Placement } from "@floating-ui/react";
+import { ThemeColor } from "../../types";
+export interface DropdownMenuOptions {
+    initialOpen?: boolean;
+    placement?: Placement;
+    open?: boolean;
+    onOpen?: (open: boolean) => void;
+    color?: ThemeColor | "default";
+    modal?: boolean;
+}

package/components/dropdown-menu/interface.js

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

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

@@ -2,7 +2,7 @@ import type { DropdownMenuOptions } from "./interface";
 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("./interface").ThemeColor | "default";
+    color: import("../..").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(".").ThemeColor | "default";
+    color: import("../..").ThemeColor | "default";
     modal: boolean;
     activeIndex: number | null;
     handleSelect: () => void;

package/components/flash/Flash.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { ThemeColor } from "../../types.d";
+import { ThemeColor } from "../../types";
 interface Props {
     color?: ThemeColor;
     children?: ReactNode;

package/components/input/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import { type ThemeColor } from "../../types.d";
+import { type ThemeColor } from "../../types";
 export interface CheckboxProps extends ComponentPropsWithRef<"input"> {
     indeterminate?: boolean;
     disabled?: boolean;

package/components/input/Color.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import type { ThemeColor } from "../../types.d";
+import type { ThemeColor } from "../../types";
 export interface ColorProps extends ComponentProps<"button"> {
     withRipple?: boolean;
     value?: string;

package/components/input/Input.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from "react";
-import type { ThemeColor } from "../../types.d";
+import type { ThemeColor } from "../../types";
 export interface InputProps extends Omit<ComponentPropsWithRef<"input">, "prefix"> {
     variant?: "normal" | "ghost";
     disabled?: boolean;

package/components/input/Input.js

@@ -7,10 +7,10 @@ export const inputConfig = {
 };
 export const Input = forwardRef(({ variant = "normal", color = "yellow", disabled = false, prefix, suffix, className, ...rest }, ref) => {
     return (_jsxs("div", { "data-color": color, "data-variant": variant, className: clsx(inputConfig.container, disabled && "disabled", className), children: [prefix && (_jsx("div", { className: clsx([
-                    "flex-center relative",
+                    "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"), ...rest, disabled: disabled }), suffix && (_jsx("div", { className: clsx([
-                    "flex-center relative",
+                    "relative flex-center",
                     typeof suffix === "string" && "mx-2 select-none text-gray-6",
                 ]), children: suffix }))] }));
 });

package/components/input/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import { type ThemeColor } from "../../types.d";
+import { type ThemeColor } from "../../types";
 interface RadioProps extends ComponentPropsWithRef<"input"> {
     disabled?: boolean;
     color?: ThemeColor;

package/components/input/RadioGroup.js

@@ -5,7 +5,7 @@ import clsx from "clsx";
 export const Radio = forwardRef(({ disabled = false, color = "yellow", checked, children, name, className, ...rest }, ref) => {
     const inputRef = useRef(null);
     const combinedRef = useCombinedRefs(inputRef, ref);
-    return (_jsxs("label", { className: clsx("flex items-center cursor-pointer", disabled && "disabled"), children: [_jsx("input", { "data-color": color, ref: combinedRef, disabled: disabled, type: "radio", className: clsx("p8n-input-radio", "appearance-none p-0 inline-block bg-origin-border select-none shrink-0 cursor-pointer h-5 w-5 bg-gray-0 my-0 mr-1 rounded-full", className), checked: checked, name: name, ...rest }), children] }));
+    return (_jsxs("label", { className: clsx("flex cursor-pointer items-center", disabled && "disabled"), children: [_jsx("input", { "data-color": color, ref: combinedRef, disabled: disabled, type: "radio", className: clsx("p8n-input-radio", "my-0 mr-1 inline-block h-5 w-5 shrink-0 cursor-pointer select-none appearance-none rounded-full bg-gray-0 bg-origin-border p-0", className), checked: checked, name: name, ...rest }), children] }));
 });
 const placementVariants = {
     inline: "flex gap-2",

package/components/input/Range.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import { ThemeColor } from "../../types.d";
+import { ThemeColor } from "../../types";
 export interface RangeProps extends Omit<ComponentPropsWithRef<"input">, "value" | "min" | "max" | "step"> {
     value: number;
     min?: number;

package/components/input/Toggle.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import { type ThemeColor } from "../../types.d";
+import { type ThemeColor } from "../../types";
 export interface ToggleProps extends ComponentPropsWithRef<"input"> {
     disabled?: boolean;
     color?: ThemeColor;

package/components/input-field/InputField.js

@@ -6,7 +6,7 @@ const InputFieldBase = ({ label, hint, help, error, warning, as, ...rest }, ref)
     const id = useId();
     const Element = as || defaultElement;
     const labelElement = label && _jsx("span", { className: "font-bold", children: label });
-    const hintElement = hint && (_jsx("span", { className: "ml-auto text-sm text-gray-6", children: hint }));
+    const hintElement = hint && _jsx("span", { className: "ml-auto text-sm text-gray-6", children: hint });
     const errorElement = error && typeof error !== "boolean" && (_jsxs("span", { className: "font-medium text-red-4 dark:text-red-2", children: [_jsx("i", { className: "fe-circle-exclamation" }), _jsx("span", { children: error })] }));
     const warningElement = warning && typeof warning !== "boolean" && (_jsxs("span", { className: "font-medium text-orange-4 dark:text-orange-2", children: [_jsx("i", { className: "fe-circle-exclamation" }), _jsx("span", { children: warning })] }));
     const color = error ? "red" : warning ? "orange" : "yellow";

package/components/loader/Loader.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from "react";
-import { ThemeColor } from "../../types.d";
+import { ThemeColor } from "../../types";
 interface Props extends ComponentPropsWithoutRef<"svg"> {
     size?: "small" | "medium" | "large";
     color?: ThemeColor;

package/components/loader/Loader.js

@@ -24,5 +24,5 @@ const circleStyle = {
 };
 export function Loader({ size = "medium", color = "blue", className, ...rest }) {
     const id = useId();
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: clsx("inline-block", sizeConfig[size], colorVariants[color].text, className), viewBox: "0 0 16 16", ...rest, children: [_jsx("defs", { children: _jsx("circle", { id: id, cx: "8", cy: "8", r: "7" }) }), _jsx("use", { href: `#${id}`, className: "opacity-25 fill-none stroke-current", style: trackStyle }), _jsx("use", { href: `#${id}`, className: "fill-none stroke-current animate-loader-stroke", style: circleStyle })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: clsx("inline-block", sizeConfig[size], colorVariants[color].text, className), viewBox: "0 0 16 16", ...rest, children: [_jsx("defs", { children: _jsx("circle", { id: id, cx: "8", cy: "8", r: "7" }) }), _jsx("use", { href: `#${id}`, className: "fill-none stroke-current opacity-25", style: trackStyle }), _jsx("use", { href: `#${id}`, className: "animate-loader-stroke fill-none stroke-current", style: circleStyle })] }));
 }

package/components/modal/interface.d.ts

@@ -0,0 +1,7 @@
+import { type ThemeColor } from "../../types";
+export interface ModalOptions {
+    initialOpen?: boolean;
+    open?: boolean;
+    onOpen?: (open: boolean) => void;
+    color?: ThemeColor | "default";
+}

package/components/modal/interface.js

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

package/components/modal/useModal.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { ModalOptions } from "./interface";
 export declare function useModal({ initialOpen, open: controlledOpen, onOpen: setControlledOpen, color, }?: ModalOptions): {
-    color: import("./interface").ThemeColor | "default";
+    color: import("../..").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";
 type ContextType = ReturnType<typeof useModal> | null;
 export declare const ModalContext: import("react").Context<ContextType>;
 export declare function useModalContext(): {
-    color: import("./interface").ThemeColor | "default";
+    color: import("../..").ThemeColor | "default";
     labelId: string | undefined;
     descriptionId: string | undefined;
     setLabelId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;

package/components/notification/NotificationsContext.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
-import { Message, MessageOptions } from "../../types.d";
+import { Message, MessageOptions } from "../../types";
 export declare function createNotificationsManager(setNotifications: Dispatch<SetStateAction<Message[]>>): {
     addNotification: (content?: string, { expiration, color, canClose, withLoader, }?: MessageOptions) => string;
     removeNotification: (id: string) => void;

package/components/popover/interface.d.ts

@@ -0,0 +1,10 @@
+import { Placement } from "@floating-ui/react";
+import { ThemeColor } from "../../types";
+export interface PopoverOptions {
+    initialOpen?: boolean;
+    placement?: Placement;
+    open?: boolean;
+    onOpen?: (open: boolean) => void;
+    color?: ThemeColor;
+    modal?: boolean;
+}

package/components/popover/interface.js

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

package/components/popover/usePopover.d.ts

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

package/components/select/interface.d.ts

@@ -0,0 +1,30 @@
+import { BBox, Geometry } from "geojson";
+export type OptionLike = Option | GeoOption;
+export type Option = {
+    type?: "Option";
+    value: string | number;
+    label: string;
+};
+export type NoDataOption = {
+    id: string;
+    type: "nodata";
+};
+/** For compatibility with OptionLike. get original types from pentatrion-geo */
+type GeoOption<G extends Geometry | null = Geometry, T extends string = string> = {
+    id: string;
+    type: "Feature";
+    properties: FeatureProperties<T>;
+    geometry: G;
+    bbox?: BBox | undefined;
+};
+type FeatureProperties<T extends string = string> = {
+    id: string;
+    /** computed name + short context for input string */
+    label: string;
+    name: string;
+    context: string | null;
+    score: number;
+    type: T;
+    originalProperties?: any;
+};
+export {};

package/components/select/interface.js

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

package/components/snack/Snack.d.ts

@@ -1,4 +1,4 @@
-import { Message } from "../../types.d";
+import { Message } from "../../types";
 export type SnackProps = Partial<Message> & {
     onRemove?: () => void;
 };

package/components/sortable/index.d.ts

@@ -1,2 +1,2 @@
-export type * from "./types.d";
+export type * from "./interface";
 export { Sortable } from "./Sortable";

package/components/sortable/interface.d.ts

@@ -0,0 +1,11 @@
+export interface SortableItem<I> {
+    /** The unique id associated with your item. It's recommended this is the same as the key prop for your list item. */
+    id: string | number;
+    /** When true, the item is selected using MultiDrag */
+    selected?: boolean;
+    /** When true, the item is deemed "chosen", which basically just a mousedown event. */
+    chosen?: boolean;
+    /** When true, it will not be possible to pick this item up in the list. */
+    filtered?: boolean;
+    data: I;
+}

package/components/sortable/interface.js

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

package/components/textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import type { ThemeColor } from "../../types.d";
+import type { ThemeColor } from "../../types";
 export interface TextareaProps extends ComponentProps<"textarea"> {
     variant?: "normal" | "ghost";
     color?: ThemeColor;

package/components/tooltip/interface.d.ts

@@ -0,0 +1,12 @@
+import { Placement } from "@floating-ui/react";
+import { ThemeColor } from "../../types";
+export interface TooltipOptions {
+    initialOpen?: boolean;
+    placement?: Placement;
+    open?: boolean;
+    onOpen?: (open: boolean) => void;
+    openDelay?: number;
+    closeDelay?: number;
+    color?: ThemeColor;
+    contentClassName?: string;
+}

package/components/tooltip/interface.js

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

package/components/tooltip/useTooltip.d.ts

@@ -1,7 +1,7 @@
 import { TooltipOptions } from "./interface";
 export declare function useTooltip({ initialOpen, placement, open: controlledOpen, onOpen: setControlledOpen, openDelay, closeDelay, color, }?: TooltipOptions): {
     arrowRef: import("react").RefObject<HTMLDivElement>;
-    color: import("./interface").ThemeColor;
+    color: import("../..").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("./interface").ThemeColor;
+    color: import("../..").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,4 +1,4 @@
-export type { ThemeColor } from "./types.d";
+export type { ThemeColor } from "./types";
 export * from "./components/autocomplete";
 export * from "./components/badge";
 export * from "./components/button";

package/lib/error.d.ts

@@ -1,3 +1,3 @@
-import { MessageOptions } from "../types.d";
+import { MessageOptions } from "../types";
 export declare function isErrorLike(err: any): err is Error;
 export declare function parseError(err: any): [string, MessageOptions] | null;

package/lib/tailwindVariants.d.ts

@@ -1,4 +1,4 @@
-import { ThemeColor } from "../types.d";
+import { ThemeColor } from "../types";
 type Variant = {
     border: string;
     text: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pentatrion-design",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "",
   "keywords": [],
   "author": "Hugues Tavernier",

package/redux/notification/notificationSlice.d.ts

@@ -1,18 +1,18 @@
-import { Message } from "../../types.d";
+import { Message } from "../../types";
 declare const _default: Reducer<State>;
 export default _default;
 export declare const messageAdded: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[content: string, options?: Partial<Omit<Message, "content" | "id">> | undefined], {
     id: string;
     content: string;
     expiration: number;
-    color: import("../../types.d").ThemeColor;
+    color: import("../../types").ThemeColor;
     canClose: boolean;
     withLoader: boolean;
 }, "notification/messageAdded", never, never>, messageRemoved: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "notification/messageRemoved">, errorAdded: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[err: any], {
     id: string;
     content: string;
     expiration: number;
-    color: import("../../types.d").ThemeColor;
+    color: import("../../types").ThemeColor;
     canClose: boolean;
     withLoader: boolean;
 }, "notification/errorAdded", never, never>;

package/redux/notification/useReduxNotifications.d.ts

@@ -1,4 +1,4 @@
-import { MessageOptions } from "../../types.d";
+import { MessageOptions } from "../../types";
 export declare function useReduxNotifications(): {
     notify: (content: string, options?: MessageOptions) => void;
     notifyError: (err: unknown) => void;

package/types.d.ts

@@ -0,0 +1,10 @@
+export type ThemeColor = "yellow" | "gray" | "red" | "orange" | "green" | "blue";
+export type MessageOptions = Partial<Omit<Message, "content" | "id">>;
+export interface Message {
+    id: string;
+    content: string;
+    expiration: number;
+    color: ThemeColor;
+    canClose: boolean;
+    withLoader: boolean;
+}

package/types.js

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