pentatrion-design 1.0.2 → 1.0.4

package/README.md

@@ -19,7 +19,7 @@ cd my-app
 # dépendances
 pnpm add -D tailwindcss @tailwindcss/vite prettier-plugin-tailwindcss
 
-pnpm add pentatrion-design
+pnpm add pentatrion-design clsx class-variance-authority
 ```
 Supprimer les fichiers inutiles
 
@@ -52,7 +52,8 @@ Configuration recommandée
 /* src/index.css */
 @import "tailwindcss";
 
-@source "./node_modules/pentatrion-design/dist/components";
+@source "../node_modules/pentatrion-design/dist/components";
+@source "../node_modules/pentatrion-design/dist/hooks";
 
 @import "pentatrion-design/tailwind";
 

package/dist/components/accordion/AccordionItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAccordion } from "./useAccordion";
+import { useAccordion } from "./useAccordion.js";
 import clsx from "clsx";
 export function AccordionItem({ name, children, ...rest }) {
     const { value } = useAccordion();

package/dist/components/button/LinkButton.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, RefObject } from "react";
-import { ButtonProps } from "./Button";
+import { ButtonProps } from "./Button.js";
 export type HrefButtonProps = ComponentProps<"a"> & Pick<ButtonProps, "withRipple" | "variant" | "size" | "color" | "selected" | "icon" | "disabled" | "width"> & {
     ref?: RefObject<HTMLAnchorElement>;
 };

package/dist/components/button/LinkButton.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
-import { useRipple } from "../../hooks/useRipple";
-import { buttonVariants } from "./Button";
+import { useRipple } from "../../hooks/useRipple.js";
+import { buttonVariants } from "./Button.js";
 export function HrefButton({ withRipple = true, variant = "contained", color = "yellow", size = "medium", width = "fit", className, disabled, children, selected = false, icon = false, href, ref, ...props }) {
     const anchorRef = useRef(null);
     useImperativeHandle(ref, () => anchorRef.current);

package/dist/components/dialog/Dialog.d.ts

@@ -3,13 +3,16 @@ import { ComponentProps, ReactNode } from "react";
 import type { ThemeColor } from "../../types";
 interface Props extends ComponentProps<"div"> {
     color?: ThemeColor;
+    shadow?: boolean;
+    rounded?: boolean;
     placement?: Placement;
     children: ReactNode;
 }
 export declare const dialogVariants: (props?: ({
     color?: "yellow" | "gray" | "red" | "orange" | "green" | "blue" | "default" | null | undefined;
     shadow?: boolean | null | undefined;
+    rounded?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare function Dialog({ placement, color, children, className, role, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ placement, color, rounded, shadow, children, className, role, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/components/dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,UAAU,KAAM,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc;;;8EAoBzB,CAAC;AAEH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAYhG"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,UAAU,KAAM,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc;;;;8EAyBzB,CAAC;AAEH,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAe,EACf,GAAG,IAAI,EACR,EAAE,KAAK,2CAYP"}

package/dist/components/dialog/Dialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { cva } from "class-variance-authority";
-export const dialogVariants = cva("relative rounded-2xl ", {
+export const dialogVariants = cva("relative", {
     variants: {
         color: {
             yellow: "border-t-4 border-t-yellow-3 bg-gray-0",
@@ -16,12 +16,17 @@ export const dialogVariants = cva("relative rounded-2xl ", {
             true: "shadow-sm dark:shadow-dark",
             false: "border border-gray-2",
         },
+        rounded: {
+            true: "rounded-2xl",
+            false: "",
+        },
     },
     defaultVariants: {
         color: "default",
         shadow: true,
+        rounded: true,
     },
 });
-export function Dialog({ placement, color, children, className, role = "dialog", ...rest }) {
-    return (_jsx("div", { role: role, className: clsx(dialogVariants({ color }), className), "data-placement": placement, "data-color": color ?? "gray", ...rest, children: children }));
+export function Dialog({ placement, color, rounded, shadow, children, className, role = "dialog", ...rest }) {
+    return (_jsx("div", { role: role, className: clsx(dialogVariants({ color, rounded, shadow }), className), "data-placement": placement, "data-color": color ?? "gray", ...rest, children: children }));
 }

package/dist/components/modal/Components.d.ts

@@ -4,9 +4,9 @@ interface ModalHeaderProps extends ComponentProps<"h2"> {
 }
 export declare function ModalHeader({ children, className, closeButton, ...props }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
 interface ModalDescriptionProps extends ComponentProps<"div"> {
-    height?: number;
+    scrollable?: boolean;
 }
-export declare function ModalDescription({ children, className, height, ...props }: ModalDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModalDescription({ children, className, scrollable, ...props }: ModalDescriptionProps): import("react/jsx-runtime").JSX.Element;
 export declare function ModalFooter({ children, className, ...props }: ComponentProps<"footer">): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Components.d.ts.map

package/dist/components/modal/Components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Components.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,gBAAiB,SAAQ,cAAc,CAAC,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AACD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiBlB;AAED,UAAU,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AACD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAahG;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAMtF"}
+{"version":3,"file":"Components.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,gBAAiB,SAAQ,cAAc,CAAC,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AACD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiBlB;AAED,UAAU,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAavB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAMtF"}

package/dist/components/modal/Components.js

@@ -5,13 +5,13 @@ import { Button } from "../button/Button";
 import { Scroll } from "../scroll/Scroll";
 export function ModalHeader({ children, className, closeButton = true, ...props }) {
     const { setOpen } = useModalContext();
-    return (_jsxs(_Fragment, { children: [closeButton && (_jsx("div", { className: "float-right p-1", children: _jsx(Button, { icon: true, variant: "text", color: "gray", onClick: () => setOpen(false), children: _jsx("i", { className: "fe-cancel" }) }) })), _jsx("header", { className: clsx("flex items-center px-2 pt-2", className), ...props, children: _jsx("h4", { className: "font-semibold leading-6", children: children }) })] }));
+    return (_jsxs(_Fragment, { children: [closeButton && (_jsx("div", { className: "float-right p-1", children: _jsx(Button, { icon: true, variant: "text", color: "gray", onClick: () => setOpen(false), children: _jsx("i", { className: "fe-cancel" }) }) })), _jsx("header", { className: clsx("flex items-center px-2 pt-2", className), ...props, children: _jsx("h4", { className: "leading-6 font-semibold", children: children }) })] }));
 }
-export function ModalDescription({ children, className, height, ...props }) {
-    if (!height) {
+export function ModalDescription({ children, className, scrollable = false, ...props }) {
+    if (!scrollable) {
         return (_jsx("div", { className: clsx("p-2", className), ...props, children: children }));
     }
-    return (_jsx("div", { className: clsx("py-2", className), ...props, children: _jsx(Scroll, { style: { height: `${height}px` }, children: children }) }));
+    return (_jsx(Scroll, { className: clsx("flex flex-col", className), ...props, children: children }));
 }
 export function ModalFooter({ children, className, ...props }) {
     return (_jsx("footer", { className: clsx("relative z-10 px-2 pb-2", className), ...props, children: children }));

package/dist/components/select/Select.d.ts

@@ -13,11 +13,13 @@ export type SelectProps<O extends Option = Option> = {
     variant?: "normal" | "ghost";
     showArrow?: boolean;
     selectionClassName?: string;
+    dialogClassName?: string;
     width?: number | string;
     floatingMinWidth?: number;
     placement?: Placement;
     options: O[];
     color?: ThemeColor;
+    size?: "small" | "medium" | "large" | "custom";
     placeholder?: string;
     getSearchableValue?: (matchReg: RegExp, option: O) => string;
     searchable?: boolean;
@@ -28,7 +30,7 @@ export type SelectProps<O extends Option = Option> = {
     onChange?: ((e: ChangeEventLike) => void) | null;
     zIndex?: number;
     ref?: RefObject<HTMLDivElement>;
-} & Omit<ComponentProps<"select">, "onChange" | "value" | "defaultValue" | "multiple">;
-export declare function Select<O extends Option>({ id, variant, disabled, showArrow, selectionClassName, width, floatingMinWidth, placement, searchable, required, defaultValue, name, value: controlledValue, onChange, placeholder, getSearchableValue, selectSelectionComponent: SelectSelectionCustomComponent, selectOptionComponent: SelectOptionCustomComponent, options, zIndex, color, ref, onFocus, onBlur, }: SelectProps<O>): import("react/jsx-runtime").JSX.Element;
+} & Omit<ComponentProps<"select">, "onChange" | "value" | "defaultValue" | "multiple" | "size">;
+export declare function Select<O extends Option>({ id, variant, disabled, showArrow, selectionClassName, dialogClassName, width, floatingMinWidth, placement, searchable, required, defaultValue, name, value: controlledValue, onChange, placeholder, getSearchableValue, selectSelectionComponent: SelectSelectionCustomComponent, selectOptionComponent: SelectOptionCustomComponent, options, zIndex, color, size, ref, onFocus, onBlur, }: SelectProps<O>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Select.d.ts.map

package/dist/components/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,SAAS,EACT,SAAS,EAMV,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,SAAS,EAaV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAM1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAKzC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;AACrE,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE;QACN,KAAK,EAAE,WAAW,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACnD,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC;IAChD,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACzE,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;AAMvF,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EACvC,EAAE,EACF,OAAkB,EAClB,QAAgB,EAChB,SAAgB,EAChB,kBAAkB,EAClB,KAAc,EACd,gBAAsB,EACtB,SAAoB,EACpB,UAAkB,EAClB,QAAe,EACf,YAAY,EACZ,IAAS,EACT,KAAK,EAAE,eAAe,EACtB,QAAe,EACf,WAA0B,EAC1B,kBAAkB,EAClB,wBAAwB,EAAE,8BAA8B,EACxD,qBAAqB,EAAE,2BAA2B,EAClD,OAAY,EACZ,MAAM,EACN,KAAgB,EAChB,GAAG,EACH,OAAO,EACP,MAAM,GACP,EAAE,WAAW,CAAC,CAAC,CAAC,2CAiShB"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,SAAS,EACT,SAAS,EAMV,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,SAAS,EAaV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAM1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAKzC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;AACrE,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE;QACN,KAAK,EAAE,WAAW,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACnD,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC;IAChD,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACzE,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAMhG,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EACvC,EAAE,EACF,OAAkB,EAClB,QAAgB,EAChB,SAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,KAAc,EACd,gBAAsB,EACtB,SAAoB,EACpB,UAAkB,EAClB,QAAe,EACf,YAAY,EACZ,IAAS,EACT,KAAK,EAAE,eAAe,EACtB,QAAe,EACf,WAA0B,EAC1B,kBAAkB,EAClB,wBAAwB,EAAE,8BAA8B,EACxD,qBAAqB,EAAE,2BAA2B,EAClD,OAAY,EACZ,MAAM,EACN,KAAgB,EAChB,IAAe,EACf,GAAG,EACH,OAAO,EACP,MAAM,GACP,EAAE,WAAW,CAAC,CAAC,CAAC,2CAuShB"}

package/dist/components/select/Select.js

@@ -1,18 +1,18 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import { FloatingFocusManager, FloatingList, FloatingPortal, autoUpdate, flip, offset, size, useClick, useDismiss, useFloating, useInteractions, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
+import { FloatingFocusManager, FloatingList, FloatingPortal, autoUpdate, flip, offset, size as floatingUiSize, useClick, useDismiss, useFloating, useInteractions, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
 import { SelectSelection } from "./SelectSelection";
 import { SelectContext } from "./useSelectContext";
 import clsx from "clsx";
-import { Input } from "../input/Input";
+import { Input, sizeVariant } from "../input/Input";
 import { Button } from "../button/Button";
 import { useEffectEvent } from "../../hooks/useEffectEvent";
 import { Dialog } from "../dialog/Dialog";
 function defaultGetSearchableValue(matchReg, option) {
     return matchReg.test(option.label.toLowerCase().trim());
 }
-export function Select({ id, variant = "normal", disabled = false, showArrow = true, selectionClassName, width = "100%", floatingMinWidth = 130, placement = "bottom", searchable = false, required = true, defaultValue, name = "", value: controlledValue, onChange = null, placeholder = "Select ...", getSearchableValue, selectSelectionComponent: SelectSelectionCustomComponent, selectOptionComponent: SelectOptionCustomComponent, options = [], zIndex, color = "yellow", ref, onFocus, onBlur, }) {
+export function Select({ id, variant = "normal", disabled = false, showArrow = true, selectionClassName, dialogClassName, width = "100%", floatingMinWidth = 130, placement = "bottom", searchable = false, required = true, defaultValue, name = "", value: controlledValue, onChange = null, placeholder = "Select ...", getSearchableValue, selectSelectionComponent: SelectSelectionCustomComponent, selectOptionComponent: SelectOptionCustomComponent, options = [], zIndex, color = "yellow", size = "medium", ref, onFocus, onBlur, }) {
     const isControlled = typeof controlledValue !== "undefined";
     const divSelectionRef = useRef(null);
     const onChangeStable = useEffectEvent(onChange);
@@ -60,7 +60,7 @@ export function Select({ id, variant = "normal", disabled = false, showArrow = t
         middleware: [
             offset(5),
             flip({ padding: 10 }),
-            size({
+            floatingUiSize({
                 apply({ rects, elements, availableHeight }) {
                     Object.assign(elements.floating.style, {
                         width: `${Math.max(floatingMinWidth, rects.reference.width)}px`,
@@ -134,17 +134,17 @@ export function Select({ id, variant = "normal", disabled = false, showArrow = t
         handleSelect,
     }), [activeIndex, selectedIndex, getItemProps, handleSelect]);
     const showCancelButton = !required && selectedIndex !== null;
-    return (_jsxs("div", { children: [_jsx("input", { className: "hidden-focusable", tabIndex: -1, id: id, name: name, value: selectedIndex !== null ? filteredOptions[selectedIndex].value : "", onFocus: () => void divSelectionRef.current.focus(), readOnly: true }), _jsxs("div", { "data-color": color, "aria-disabled": disabled, className: clsx("p8n-input-text box-border flex cursor-pointer rounded-2xl outline-offset-[-1px]", selectionClassName, isOpen && "focus"), "data-variant": variant, ref: mergedRef, tabIndex: 0, style: {
+    return (_jsxs("div", { children: [_jsx("input", { className: "hidden-focusable", tabIndex: -1, id: id, name: name, value: selectedIndex !== null ? filteredOptions[selectedIndex].value : "", onFocus: () => void divSelectionRef.current.focus(), readOnly: true }), _jsxs("div", { "data-color": color, "aria-disabled": disabled, className: clsx("p8n-input-text box-border flex cursor-pointer rounded-[calc(var(--h-input)/2)] outline-offset-[-1px]", selectionClassName, sizeVariant[size], isOpen && "focus"), "data-variant": variant, ref: mergedRef, tabIndex: 0, style: {
                     width: typeof width === "number" ? `${width}px` : width,
-                }, ...getReferenceProps({ onFocus, onBlur }), children: [_jsx("span", { className: "flex h-8 flex-1 items-center truncate px-2", children: selectedIndex !== null ? (_createElement(SelectSelectionComponent, { ...filteredOptions[selectedIndex], key: selectedIndex })) : (placeholder) }), showCancelButton && (_jsx(Button, { withRipple: false, type: "button", icon: true, variant: "text", color: "gray", onMouseDown: (e) => {
+                }, ...getReferenceProps({ onFocus, onBlur }), children: [_jsx("span", { className: "flex flex-1 items-center truncate px-2", children: selectedIndex !== null ? (_createElement(SelectSelectionComponent, { ...filteredOptions[selectedIndex], key: selectedIndex })) : (placeholder) }), showCancelButton && (_jsx(Button, { withRipple: false, type: "button", icon: true, variant: "text", color: "gray", onMouseDown: (e) => {
                             // we don't want dropdown to open
                             e.stopPropagation();
                         }, onClick: () => {
                             handleSelect(null);
-                        }, children: _jsx("i", { className: "fe-cancel" }) })), !showCancelButton && showArrow && (_jsx(Button, { color: "gray", withRipple: false, icon: true, variant: "text", focusable: false, type: "button", children: _jsx("i", { className: isOpen ? "fe-angle-up" : "fe-angle-down" }) }))] }), _jsx(FloatingPortal, { children: _jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (_jsx(FloatingFocusManager, { context: context, modal: false, children: _jsx("div", { className: "z-dialog outline-hidden", "data-testid": "select-list", ref: refs.setFloating, style: {
+                        }, children: _jsx("i", { className: "fe-cancel" }) })), !showCancelButton && showArrow && (_jsx(Button, { color: "gray", withRipple: false, icon: true, variant: "text", focusable: false, type: "button", size: "input", children: _jsx("i", { className: isOpen ? "fe-angle-up" : "fe-angle-down" }) }))] }), _jsx(FloatingPortal, { children: _jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (_jsx(FloatingFocusManager, { context: context, modal: false, children: _jsx("div", { className: "z-dialog outline-hidden", "data-testid": "select-list", ref: refs.setFloating, style: {
                                 ...floatingStyles,
                                 zIndex,
-                            }, ...getFloatingProps(), children: _jsxs(Dialog, { placement: context.placement, className: "motion-safe:animate-fade-in-list max-h-80 overflow-auto", children: [searchable && (_jsx("div", { className: "p-2", children: _jsx(Input, { color: "gray", placeholder: "Search", tabIndex: selectedIndex === null ? 0 : -1, value: search, onChange: handleSearchChange, onFocus: () => setSearchHasFocus(true), onBlur: () => setSearchHasFocus(false) }) })), SelectOptionCustomComponent ? (_jsx(FloatingList, { elementsRef: listRef, labelsRef: labelsRef, children: filteredOptions.map((option) => (_createElement(SelectOptionCustomComponent, { ...option, key: option.value }))) })) : (filteredOptions.map((option, index) => {
+                            }, ...getFloatingProps(), children: _jsxs(Dialog, { placement: context.placement, className: clsx("motion-safe:animate-fade-in-list max-h-80 overflow-auto", dialogClassName), rounded: !dialogClassName, children: [searchable && (_jsx("div", { className: "p-2", children: _jsx(Input, { color: "gray", placeholder: "Search", tabIndex: selectedIndex === null ? 0 : -1, value: search, onChange: handleSearchChange, onFocus: () => setSearchHasFocus(true), onBlur: () => setSearchHasFocus(false) }) })), SelectOptionCustomComponent ? (_jsx(FloatingList, { elementsRef: listRef, labelsRef: labelsRef, children: filteredOptions.map((option) => (_createElement(SelectOptionCustomComponent, { ...option, key: option.value }))) })) : (filteredOptions.map((option, index) => {
                                         const isActive = activeIndex === index;
                                         const isSelected = selectedIndex === index;
                                         return (_jsx("button", { className: clsx("option", isSelected ? "bg-gray-2" : isActive && "bg-gray-1"), "data-presentation": "compact", role: "option", "aria-selected": isActive && isSelected, tabIndex: isActive ? 0 : -1, ref: (node) => {

package/dist/lib/tailwindVariants.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pentatrion-design",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "keywords": [],
   "author": "Hugues Tavernier",
@@ -24,6 +24,7 @@
     "@tailwindcss/vite": "^4.1.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/dom": "^10",
     "@testing-library/user-event": "^14.6.1",
     "@types/geojson": "^7946.0.16",
     "@types/react": "^19.1.8",
@@ -48,6 +49,7 @@
     "react-dom": "^19.1.0",
     "storybook": "^9.0.1",
     "tailwindcss": "^4.1.10",
+    "tsc-alias": "^1.8.16",
     "tsx": "^4.20.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.34.0",

package/src/components/dialog/Dialog.tsx

@@ -6,11 +6,13 @@ import { cva } from "class-variance-authority";
 
 interface Props extends ComponentProps<"div"> {
   color?: ThemeColor;
+  shadow?: boolean;
+  rounded?: boolean;
   placement?: Placement;
   children: ReactNode;
 }
 
-export const dialogVariants = cva("relative rounded-2xl ", {
+export const dialogVariants = cva("relative", {
   variants: {
     color: {
       yellow: "border-t-4 border-t-yellow-3 bg-gray-0",
@@ -25,18 +27,32 @@ export const dialogVariants = cva("relative rounded-2xl ", {
       true: "shadow-sm dark:shadow-dark",
       false: "border border-gray-2",
     },
+    rounded: {
+      true: "rounded-2xl",
+      false: "",
+    },
   },
   defaultVariants: {
     color: "default",
     shadow: true,
+    rounded: true,
   },
 });
 
-export function Dialog({ placement, color, children, className, role = "dialog", ...rest }: Props) {
+export function Dialog({
+  placement,
+  color,
+  rounded,
+  shadow,
+  children,
+  className,
+  role = "dialog",
+  ...rest
+}: Props) {
   return (
     <div
       role={role}
-      className={clsx(dialogVariants({ color }), className)}
+      className={clsx(dialogVariants({ color, rounded, shadow }), className)}
       data-placement={placement}
       data-color={color ?? "gray"}
       {...rest}

package/src/components/modal/Components.tsx

@@ -25,17 +25,22 @@ export function ModalHeader({
         </div>
       )}
       <header className={clsx("flex items-center px-2 pt-2", className)} {...props}>
-        <h4 className="font-semibold leading-6">{children}</h4>
+        <h4 className="leading-6 font-semibold">{children}</h4>
       </header>
     </>
   );
 }
 
 interface ModalDescriptionProps extends ComponentProps<"div"> {
-  height?: number;
+  scrollable?: boolean;
 }
-export function ModalDescription({ children, className, height, ...props }: ModalDescriptionProps) {
-  if (!height) {
+export function ModalDescription({
+  children,
+  className,
+  scrollable = false,
+  ...props
+}: ModalDescriptionProps) {
+  if (!scrollable) {
     return (
       <div className={clsx("p-2", className)} {...props}>
         {children}
@@ -43,9 +48,9 @@ export function ModalDescription({ children, className, height, ...props }: Moda
     );
   }
   return (
-    <div className={clsx("py-2", className)} {...props}>
-      <Scroll style={{ height: `${height}px` }}>{children}</Scroll>
-    </div>
+    <Scroll className={clsx("flex flex-col", className)} {...props}>
+      {children}
+    </Scroll>
   );
 }
 

package/src/components/modal/Modal.stories.tsx

@@ -153,7 +153,7 @@ export const Scrollable = () => {
       <ModalTrigger>open scrollable modal</ModalTrigger>
       <ModalContent>
         <ModalHeader>Header</ModalHeader>
-        <ModalDescription height={160}>
+        <ModalDescription className="max-h-[80vh]" scrollable={true}>
           <div className="px-4 text-justify">
             <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis

package/src/components/select/Select.stories.tsx

@@ -24,18 +24,49 @@ const meta = {
 export default meta;
 
 export const Basic = () => {
+  const [value, setValue] = useState<SelectValue>(null);
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-2">
+        <div>UnControlled</div>
+        <Select
+          searchable={false}
+          defaultValue="aixenprovence"
+          placeholder="Select your town..."
+          options={options}
+        ></Select>
+        <div>Controlled</div>
+        <Select
+          searchable={false}
+          placeholder="Select your town..."
+          options={options}
+          value={value}
+          onChange={(o) => {
+            onChangeAction(o);
+            setValue(o.target.value);
+          }}
+        ></Select>
+      </div>
+    </>
+  );
+};
+
+export const Variants = () => {
   const [value, setValue] = useState<SelectValue>(null);
   return (
     <div className="grid grid-cols-1 gap-2">
-      <div>UnControlled</div>
       <Select
         searchable={false}
-        defaultValue="aixenprovence"
         placeholder="Select your town..."
         options={options}
+        value={value}
+        onChange={(o) => {
+          onChangeAction(o);
+          setValue(o.target.value);
+        }}
       ></Select>
-      <div>Controlled</div>
       <Select
+        variant="ghost"
         searchable={false}
         placeholder="Select your town..."
         options={options}
@@ -45,40 +76,36 @@ export const Basic = () => {
           setValue(o.target.value);
         }}
       ></Select>
-    </div>
-  );
-};
-
-export const Variants = () => {
-  const [value, setValue] = useState<SelectValue>(null);
-  return (
-    <div className="grid grid-cols-1 gap-2">
       <Select
-        searchable={false}
         placeholder="Select your town..."
         options={options}
-        value={value}
+        disabled={true}
+        value={"aixenprovence"}
         onChange={(o) => {
           onChangeAction(o);
           setValue(o.target.value);
         }}
       ></Select>
+
       <Select
-        variant="ghost"
-        searchable={false}
         placeholder="Select your town..."
         options={options}
+        size="large"
+        dialogClassName="[--h-input:48px] rounded-[calc(var(--h-input)/2)]"
         value={value}
         onChange={(o) => {
           onChangeAction(o);
           setValue(o.target.value);
         }}
       ></Select>
+
       <Select
         placeholder="Select your town..."
         options={options}
-        disabled={true}
-        value={"aixenprovence"}
+        size="custom"
+        selectionClassName="[--h-input:128px] h-(--h-input)"
+        dialogClassName="[--h-input:128px] rounded-[calc(var(--h-input)/2)]"
+        value={value}
         onChange={(o) => {
           onChangeAction(o);
           setValue(o.target.value);

package/src/components/select/Select.tsx

@@ -17,7 +17,7 @@ import {
   autoUpdate,
   flip,
   offset,
-  size,
+  size as floatingUiSize,
   useClick,
   useDismiss,
   useFloating,
@@ -32,7 +32,7 @@ import { SelectContext } from "./useSelectContext";
 
 import type { Option } from "./interface";
 import clsx from "clsx";
-import { Input } from "../input/Input";
+import { Input, sizeVariant } from "../input/Input";
 import { Button } from "../button/Button";
 import { useEffectEvent } from "../../hooks/useEffectEvent";
 import { Dialog } from "../dialog/Dialog";
@@ -52,11 +52,13 @@ export type SelectProps<O extends Option = Option> = {
   variant?: "normal" | "ghost";
   showArrow?: boolean;
   selectionClassName?: string;
+  dialogClassName?: string;
   width?: number | string;
   floatingMinWidth?: number;
   placement?: Placement;
   options: O[];
   color?: ThemeColor;
+  size?: "small" | "medium" | "large" | "custom";
   placeholder?: string;
   getSearchableValue?: (matchReg: RegExp, option: O) => string;
   searchable?: boolean;
@@ -67,7 +69,7 @@ export type SelectProps<O extends Option = Option> = {
   onChange?: ((e: ChangeEventLike) => void) | null;
   zIndex?: number;
   ref?: RefObject<HTMLDivElement>;
-} & Omit<ComponentProps<"select">, "onChange" | "value" | "defaultValue" | "multiple">;
+} & Omit<ComponentProps<"select">, "onChange" | "value" | "defaultValue" | "multiple" | "size">;
 
 function defaultGetSearchableValue(matchReg: RegExp, option: Option) {
   return matchReg.test(option.label.toLowerCase().trim());
@@ -79,6 +81,7 @@ export function Select<O extends Option>({
   disabled = false,
   showArrow = true,
   selectionClassName,
+  dialogClassName,
   width = "100%",
   floatingMinWidth = 130,
   placement = "bottom",
@@ -95,6 +98,7 @@ export function Select<O extends Option>({
   options = [],
   zIndex,
   color = "yellow",
+  size = "medium",
   ref,
   onFocus,
   onBlur,
@@ -157,7 +161,7 @@ export function Select<O extends Option>({
     middleware: [
       offset(5),
       flip({ padding: 10 }),
-      size({
+      floatingUiSize({
         apply({ rects, elements, availableHeight }) {
           Object.assign(elements.floating.style, {
             width: `${Math.max(floatingMinWidth, rects.reference.width)}px`,
@@ -264,8 +268,9 @@ export function Select<O extends Option>({
         data-color={color}
         aria-disabled={disabled}
         className={clsx(
-          "p8n-input-text box-border flex cursor-pointer rounded-2xl outline-offset-[-1px]",
+          "p8n-input-text box-border flex cursor-pointer rounded-[calc(var(--h-input)/2)] outline-offset-[-1px]",
           selectionClassName,
+          sizeVariant[size],
           isOpen && "focus",
         )}
         data-variant={variant}
@@ -276,7 +281,7 @@ export function Select<O extends Option>({
         }}
         {...getReferenceProps({ onFocus, onBlur })}
       >
-        <span className="flex h-8 flex-1 items-center truncate px-2">
+        <span className="flex flex-1 items-center truncate px-2">
           {selectedIndex !== null ? (
             <SelectSelectionComponent {...filteredOptions[selectedIndex]} key={selectedIndex} />
           ) : (
@@ -309,6 +314,7 @@ export function Select<O extends Option>({
             variant="text"
             focusable={false}
             type="button"
+            size="input"
           >
             <i className={isOpen ? "fe-angle-up" : "fe-angle-down"}></i>
           </Button>
@@ -330,7 +336,11 @@ export function Select<O extends Option>({
               >
                 <Dialog
                   placement={context.placement}
-                  className="motion-safe:animate-fade-in-list max-h-80 overflow-auto"
+                  className={clsx(
+                    "motion-safe:animate-fade-in-list max-h-80 overflow-auto",
+                    dialogClassName,
+                  )}
+                  rounded={!dialogClassName}
                 >
                   {searchable && (
                     <div className="p-2">

package/tsconfig.build.json

@@ -4,5 +4,8 @@
   "exclude": ["**/node_modules", "**/*.stories.ts", "**/*.stories.tsx", "**/*.test.ts"],
   "compilerOptions": {
     "noEmit": false
+  },
+  "tsc-alias": {
+    "resolveFullPaths": true
   }
 }