pentatrion-design 1.0.1 → 1.0.3

package/README.md

@@ -46,19 +46,27 @@ export default defineConfig({
 
 Mettre à jour le fichier `src/index.css`
 
+Configuration recommandée
+
 ```css
 /* src/index.css */
 @import "tailwindcss";
 
-@source "./node_modules/pentatrion-design/dist/lib";
 @source "./node_modules/pentatrion-design/dist/components";
-@source "./node_modules/pentatrion-design/dist/hooks";
-@source "./node_modules/pentatrion-design/dist/redux";
 
-@import "pentatrion-design/tailwind/index.css";
+@import "pentatrion-design/tailwind";
 
 /* facultatif */
 @import "pentatrion-design/tailwind/prose.css";
+
+html {
+  font-size: 16px;
+  line-height: 24px;
+  color-scheme: normal;
+}
+body {
+  @apply bg-gray-0 text-gray-7 font-sans;
+}
 ```
 
 si on désire plus de contrôle sur nos imports
@@ -67,24 +75,13 @@ si on désire plus de contrôle sur nos imports
 /* src/index.css */
 @import "tailwindcss";
 
-@source "./node_modules/pentatrion-design/dist/lib";
 @source "./node_modules/pentatrion-design/dist/components";
-@source "./node_modules/pentatrion-design/dist/hooks";
-@source "./node_modules/pentatrion-design/dist/redux";
 
+@import "pentatrion-design/tailwind/theme.css";
 @import "pentatrion-design/tailwind/variants.css";
-
-@import "pentatrion-design/tailwind/theme.css" layer(theme);
-@import "pentatrion-design/tailwind/base.css" layer(base);
-
-@import "pentatrion-design/tailwind/components-input-outline.css" layer(components);
-@import "pentatrion-design/tailwind/components-range.css" layer(components);
-@import "pentatrion-design/tailwind/components-resize-area.css" layer(components);
-@import "pentatrion-design/tailwind/components-step.css" layer(components);
-@import "pentatrion-design/tailwind/components.css" layer(components);
-
 @import "pentatrion-design/tailwind/utilities.css";
-@import "pentatrion-design/tailwind/utilities-dialog.css" layer(utilities);
+@import "pentatrion-design/tailwind/base.css" layer(base);
+@import "pentatrion-design/tailwind/components/index.css" layer(components);
 
 @import "pentatrion-design/tailwind/prose.css";
 ```
@@ -132,19 +129,6 @@ Create a `.vscode/settings.json` file
 }
 ```
 
-## Développement avec watch
-
-anciennement dans le `package.json`. plus nécessaire pour le moment
-
-```json
-{
-  "scripts": {
-    "dev:tsc": "tsc -w -p tsconfig.build.json",
-    "dev:alias": "tsc-alias -w -p tsconfig.build.json",
-    "dev": "run-p dev:tsc dev:alias",
-  }
-}
-```
 
 ## Inclure le design-system dans un autre projet sans dépendance npm
 

package/dist/components/accordion/Accordion.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { AccordionContext } from "./useAccordion";
-import { useEffectEvent } from "../../hooks";
+import { AccordionContext } from "./useAccordion.js";
+import { useEffectEvent } from "../../hooks/index.js";
 const noop = () => { };
 export function Accordion({ value: controlledValue, defaultValue, onChange = noop, children, }) {
     const isControlled = typeof controlledValue !== "undefined";

package/dist/components/accordion/AccordionContent.js

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

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/accordion/AccordionTrigger.js

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

package/dist/components/accordion/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion } from "./Accordion";
-export { AccordionTrigger } from "./AccordionTrigger";
-export { AccordionContent } from "./AccordionContent";
+export { Accordion } from "./Accordion.js";
+export { AccordionTrigger } from "./AccordionTrigger.js";
+export { AccordionContent } from "./AccordionContent.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.js

@@ -1,3 +1,3 @@
-export { Accordion } from "./Accordion";
-export { AccordionTrigger } from "./AccordionTrigger";
-export { AccordionContent } from "./AccordionContent";
+export { Accordion } from "./Accordion.js";
+export { AccordionTrigger } from "./AccordionTrigger.js";
+export { AccordionContent } from "./AccordionContent.js";

package/dist/components/autocomplete/Autocomplete.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode, ComponentProps, RefObject } from "react";
-import type { OptionLike, Option } from "../select";
-import { AutocompleteOptionProps } from "./AutocompleteOption";
+import type { OptionLike, Option } from "../select/index.js";
+import { AutocompleteOptionProps } from "./AutocompleteOption.js";
 import { Placement } from "@floating-ui/react";
-import { ThemeColor } from "../../types";
+import { ThemeColor } from "../../types.js";
 export interface AutocompleteProps<O extends OptionLike = Option> extends ComponentProps<"input"> {
     icon?: boolean | ReactNode;
     color?: ThemeColor;

package/dist/components/autocomplete/Autocomplete.js

@@ -1,16 +1,16 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState, } from "react";
-import { AutocompleteOption } from "./AutocompleteOption";
+import { AutocompleteOption } from "./AutocompleteOption.js";
 import { FloatingFocusManager, FloatingList, FloatingPortal, autoUpdate, flip, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, } from "@floating-ui/react";
-import { AutocompleteContext } from "./useAutocompleteContext";
+import { AutocompleteContext } from "./useAutocompleteContext.js";
 import clsx from "clsx";
-import { useEffectEvent } from "../../hooks";
-import { getOptionLabel, getOptionValue } from "./util";
-import { Button } from "../button";
-import { Dialog } from "../dialog";
-import { Loader } from "../loader";
-import { inputConfig, sizeVariant } from "../input/Input";
+import { useEffectEvent } from "../../hooks/index.js";
+import { getOptionLabel, getOptionValue } from "./util.js";
+import { Button } from "../button/index.js";
+import { Dialog } from "../dialog/index.js";
+import { Loader } from "../loader/index.js";
+import { inputConfig, sizeVariant } from "../input/Input.js";
 export 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, ref, ...rest }) {
     const [isOpen, setIsOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);

package/dist/components/autocomplete/AutocompleteOption.d.ts

@@ -1,4 +1,4 @@
-import { OptionLike } from "../select";
+import { OptionLike } from "../select/index.js";
 export type AutocompleteOptionProps<O extends OptionLike> = O;
 export declare const AutocompleteOption: import("react").MemoExoticComponent<(<O extends OptionLike>(props: AutocompleteOptionProps<O>) => import("react/jsx-runtime").JSX.Element)>;
 //# sourceMappingURL=AutocompleteOption.d.ts.map

package/dist/components/autocomplete/AutocompleteOption.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useId } from "react";
 import { useListItem } from "@floating-ui/react";
-import { useAutocomplete } from "./useAutocompleteContext";
+import { useAutocomplete } from "./useAutocompleteContext.js";
 import clsx from "clsx";
-import { getOptionLabel, getOptionValue } from "./util";
+import { getOptionLabel, getOptionValue } from "./util.js";
 export const AutocompleteOption = memo(function AutocompleteOption(props) {
     const label = getOptionLabel(props);
     const id = useId();

package/dist/components/autocomplete/LazyAutocomplete.d.ts

@@ -1,5 +1,5 @@
-import { AutocompleteProps } from "./Autocomplete";
-import { OptionLike, Option } from "../select";
+import { AutocompleteProps } from "./Autocomplete.js";
+import { OptionLike, Option } from "../select/index.js";
 interface Props<O extends OptionLike = Option> extends Omit<AutocompleteProps<O>, "searchValue" | "onChangeSearchValue" | "options" | "selectOnFocus"> {
     onChangeSearchValueCallback: (searchValue: string) => Promise<O[]>;
     debounce?: number;

package/dist/components/autocomplete/LazyAutocomplete.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Autocomplete } from "./Autocomplete";
-import { getOptionLabel } from "./util";
-import { useStateDebounce, useEffectEvent, useIsomorphicLayoutEffect } from "../../hooks";
+import { Autocomplete } from "./Autocomplete.js";
+import { getOptionLabel } from "./util.js";
+import { useStateDebounce, useEffectEvent, useIsomorphicLayoutEffect } from "../../hooks/index.js";
 export function LazyAutocomplete({ onChangeSearchValueCallback, debounce = 5000, selection = null, onChangeSelection, ...rest }) {
     const onChangeSelectionStable = useEffectEvent(onChangeSelection);
     const onChangeSearchValueCallbackStable = useEffectEvent(onChangeSearchValueCallback);

package/dist/components/autocomplete/SimpleAutocomplete.d.ts

@@ -1,5 +1,5 @@
-import { AutocompleteProps } from "./Autocomplete";
-import { Option, OptionLike } from "../select";
+import { AutocompleteProps } from "./Autocomplete.js";
+import { Option, OptionLike } from "../select/index.js";
 interface Props<O extends OptionLike = Option> extends Omit<AutocompleteProps<O>, "searchValue" | "onChangeSearchValue" | "loading" | "clearSearchButton" | "selectOnFocus"> {
 }
 export declare function SimpleAutocomplete<O extends OptionLike = Option>({ options, selection, onChangeSelection, ...rest }: Props<O>): import("react/jsx-runtime").JSX.Element;

package/dist/components/autocomplete/SimpleAutocomplete.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { Autocomplete } from "./Autocomplete";
-import { useEffectEvent, useIsomorphicLayoutEffect } from "../../hooks";
-import { getOptionLabel } from "./util";
+import { Autocomplete } from "./Autocomplete.js";
+import { useEffectEvent, useIsomorphicLayoutEffect } from "../../hooks/index.js";
+import { getOptionLabel } from "./util.js";
 export function SimpleAutocomplete({ options, selection = null, onChangeSelection, ...rest }) {
     const onChangeSelectionStable = useEffectEvent(onChangeSelection);
     const [searchValue, setSearchValue] = useState(selection ? getOptionLabel(selection) : "");

package/dist/components/autocomplete/index.d.ts

@@ -1,7 +1,7 @@
-export { Autocomplete, type AutocompleteProps } from "./Autocomplete";
-export { SimpleAutocomplete } from "./SimpleAutocomplete";
-export { AutocompleteOption } from "./AutocompleteOption";
-export { LazyAutocomplete } from "./LazyAutocomplete";
-export { useAutocomplete } from "./useAutocompleteContext";
-export { getOptionValue, getOptionLabel } from "./util";
+export { Autocomplete, type AutocompleteProps } from "./Autocomplete.js";
+export { SimpleAutocomplete } from "./SimpleAutocomplete.js";
+export { AutocompleteOption } from "./AutocompleteOption.js";
+export { LazyAutocomplete } from "./LazyAutocomplete.js";
+export { useAutocomplete } from "./useAutocompleteContext.js";
+export { getOptionValue, getOptionLabel } from "./util.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/autocomplete/index.js

@@ -1,6 +1,6 @@
-export { Autocomplete } from "./Autocomplete";
-export { SimpleAutocomplete } from "./SimpleAutocomplete";
-export { AutocompleteOption } from "./AutocompleteOption";
-export { LazyAutocomplete } from "./LazyAutocomplete";
-export { useAutocomplete } from "./useAutocompleteContext";
-export { getOptionValue, getOptionLabel } from "./util";
+export { Autocomplete } from "./Autocomplete.js";
+export { SimpleAutocomplete } from "./SimpleAutocomplete.js";
+export { AutocompleteOption } from "./AutocompleteOption.js";
+export { LazyAutocomplete } from "./LazyAutocomplete.js";
+export { useAutocomplete } from "./useAutocompleteContext.js";
+export { getOptionValue, getOptionLabel } from "./util.js";

package/dist/components/autocomplete/useAutocompleteContext.d.ts

@@ -1,5 +1,5 @@
 import { useInteractions } from "@floating-ui/react";
-import { OptionLike } from "../select";
+import { OptionLike } from "../select/index.js";
 interface AutocompleteContext {
     activeIndex: number | null;
     selection: OptionLike | null;

package/dist/components/autocomplete/util.d.ts

@@ -1,4 +1,4 @@
-import { OptionLike } from "../select";
+import { OptionLike } from "../select/index.js";
 export declare function getOptionLabel(option: OptionLike): string;
 export declare function getOptionValue(option: OptionLike): string | number;
 //# sourceMappingURL=util.d.ts.map

package/dist/components/badge/Badge.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from "react";
-import { ThemeColor } from "../../types";
+import { ThemeColor } from "../../types.js";
 interface Props {
     children: ReactNode;
     className?: string;
     tooltip?: string;
     url?: string;
-    color?: ThemeColor;
+    color?: ThemeColor | "yellow-alpha" | "gray-alpha";
     onClick?: () => void;
     onRemove?: () => void;
 }

package/dist/components/badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAOzC,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAO,EACP,GAAG,EACH,KAAgB,GACjB,EAAE,KAAK,2CA0CP"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMzC,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAO,EACP,GAAG,EACH,KAAgB,GACjB,EAAE,KAAK,2CAyCP"}

package/dist/components/badge/Badge.js

@@ -1,17 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { buttonVariants } from "../button/Button";
-import { Tooltip } from "../tooltip/Tooltip";
-import { TooltipContent } from "../tooltip/TooltipContent";
-import { TooltipTrigger } from "../tooltip/TooltipTrigger";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { TooltipContent } from "../tooltip/TooltipContent.js";
+import { TooltipTrigger } from "../tooltip/TooltipTrigger.js";
 export function Badge({ children, className, onRemove, onClick, tooltip, url, color = "yellow", }) {
-    const badge = (_jsxs("span", { "data-color": color, className: clsx("text-body-xs w-fit rounded-full", buttonVariants({
-            variant: "contained",
-            icon: null,
-            size: null,
-            clickable: onClick !== undefined,
-            width: "custom",
-        }), className), children: [onClick ? (_jsx("button", { className: "px-2", onClick: onClick, children: children })) : (_jsx("span", { className: "px-2", children: children })), onRemove && (_jsx("button", { className: "remove rounded-r-full pr-1 pl-0.5", onClick: onRemove, children: _jsx("i", { className: "fe-cancel" }) }))] }));
+    const clickable = onClick !== undefined || url !== undefined;
+    const badge = (_jsxs("span", { "data-color": color, className: clsx("bg-custom-2/50 text-gray-text relative box-border inline-flex h-(--h-button) items-center truncate leading-5 no-underline [--h-button:1.5rem]", clickable && "cursor-pointer active:translate-y-[1px]", "text-body-xs w-fit rounded-full", className), children: [onClick ? (_jsx("button", { className: "cursor-pointer px-2", onClick: onClick, children: children })) : (_jsx("span", { className: "px-2", children: children })), onRemove && (_jsx("button", { className: "remove cursor-pointer rounded-r-full pr-1 pl-0.5 active:translate-y-[1px]", onClick: onRemove, children: _jsx("i", { className: "fe-cancel" }) }))] }));
     const wrappedBadge = url ? _jsx("a", { href: url, children: badge }) : badge;
     if (!tooltip) {
         return wrappedBadge;

package/dist/components/badge/index.d.ts

@@ -1,2 +1,2 @@
-export { Badge } from "./Badge";
+export { Badge } from "./Badge.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.js

@@ -1 +1 @@
-export { Badge } from "./Badge";
+export { Badge } from "./Badge.js";

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

@@ -1,9 +1,9 @@
 import { ComponentProps, RefObject } from "react";
-import { ThemeColor } from "../../types";
+import { ThemeColor } from "../../types.js";
 export interface ButtonProps extends Omit<ComponentProps<"button">, "color"> {
     withRipple?: boolean;
     variant?: "contained" | "light" | "outlined" | "text" | "ghost";
-    size?: "small" | "medium" | "large" | "custom" | "input";
+    size?: "small" | "medium" | "large" | "custom" | "input" | "scalable";
     color?: ThemeColor | "yellow-alpha" | "gray-alpha";
     width?: "fit" | "full" | "custom";
     loading?: boolean;
@@ -19,10 +19,10 @@ export interface ButtonProps extends Omit<ComponentProps<"button">, "color"> {
 }
 export declare const buttonVariants: (props?: ({
     clickable?: boolean | null | undefined;
-    size?: "small" | "input" | "medium" | "large" | "custom" | null | undefined;
+    size?: "small" | "input" | "medium" | "large" | "custom" | "scalable" | null | undefined;
     icon?: boolean | "custom" | null | undefined;
     width?: "custom" | "fit" | "full" | null | undefined;
-    variant?: "light" | "text" | "contained" | "outlined" | "ghost" | null | undefined;
+    variant?: "light" | "text" | "ghost" | "contained" | "outlined" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare function Button({ withRipple, variant, loading, color, size, focusable, className, disabled, children, selected, icon, asChild, width, ref, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAM/E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAazC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IAEhE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEzD,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IAEnD,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IAElC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,cAAc;;;;;;8EAoD1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,UAAiB,EACjB,OAAqB,EACrB,OAAe,EACf,KAAgB,EAChB,IAAe,EACf,SAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,IAAY,EACZ,OAAe,EACf,KAAa,EACb,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,2CAyDb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAM/E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAazC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IAEhE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;IAEtE,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IAEnD,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IAElC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,cAAc;;;;;;8EAqD1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,UAAiB,EACjB,OAAqB,EACrB,OAAe,EACf,KAAgB,EAChB,IAAe,EACf,SAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,IAAY,EACZ,OAAe,EACf,KAAa,EACb,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,2CAyDb"}

package/dist/components/button/Button.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
-import { Loader } from "../loader";
-import { useRipple } from "../../hooks";
-import { Slot } from "../slot";
+import { Loader } from "../loader/index.js";
+import { useRipple } from "../../hooks/index.js";
+import { Slot } from "../slot/index.js";
 import { cva } from "class-variance-authority";
 function loaderColor(color) {
     switch (color) {
@@ -15,18 +15,19 @@ function loaderColor(color) {
             return color;
     }
 }
-export const buttonVariants = cva("relative box-border inline-flex items-center leading-5 no-underline focus-visible-has:outline-2 truncate", {
+export const buttonVariants = cva("relative box-border inline-flex items-center leading-5 no-underline focus-visible-has:outline-2", {
     variants: {
         clickable: {
             true: "cursor-pointer active:translate-y-[1px] focus-visible-has:z-10",
             false: "pointer-events-none",
         },
         size: {
-            small: "[--h-button:1.5rem] h-(--h-button)",
-            medium: "[--h-button:2rem] h-(--h-button)",
-            large: "[--h-button:3rem] h-(--h-button)",
-            input: "[--h-button:calc(var(--h-input)-2px)] h-(--h-button)",
-            custom: "",
+            small: "[--h-button:1.5rem] h-(--h-button) truncate",
+            medium: "[--h-button:2rem] h-(--h-button) truncate",
+            large: "[--h-button:3rem] h-(--h-button) truncate",
+            input: "[--h-button:calc(var(--h-input)-2px)] h-(--h-button) truncate",
+            custom: "truncate",
+            scalable: "",
         },
         icon: {
             true: "rounded-[calc(var(--h-button)/2)] min-w-(--h-button) [&_i,&_img,&_svg]:w-(--h-button) justify-center [&_:last-child:not(i,img,svg,strong)]:pr-4",

package/dist/components/button/HrefButton.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/HrefButton.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/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/button/index.d.ts

@@ -1,4 +1,4 @@
-export { Button, type ButtonProps, buttonVariants } from "./Button";
-export { ButtonGroup, buttonGroupVariants } from "./ButtonGroup";
-export { HrefButton } from "./HrefButton";
+export { Button, type ButtonProps, buttonVariants } from "./Button.js";
+export { ButtonGroup, buttonGroupVariants } from "./ButtonGroup.js";
+export { HrefButton } from "./HrefButton.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -1,3 +1,3 @@
-export { Button, buttonVariants } from "./Button";
-export { ButtonGroup, buttonGroupVariants } from "./ButtonGroup";
-export { HrefButton } from "./HrefButton";
+export { Button, buttonVariants } from "./Button.js";
+export { ButtonGroup, buttonGroupVariants } from "./ButtonGroup.js";
+export { HrefButton } from "./HrefButton.js";

package/dist/components/card/index.d.ts

@@ -1,2 +1,2 @@
-export { cardConfig } from "./config";
+export { cardConfig } from "./config.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.js

@@ -1 +1 @@
-export { cardConfig } from "./config";
+export { cardConfig } from "./config.js";

package/dist/components/code/index.d.ts

@@ -1,2 +1,2 @@
-export { Code } from "./Code";
+export { Code } from "./Code.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/code/index.js

@@ -1 +1 @@
-export { Code } from "./Code";
+export { Code } from "./Code.js";

package/dist/components/context-menu/ContextMenu.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useEffect, useRef, useState, } from "react";
 import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, shift, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTypeahead, } from "@floating-ui/react";
-import { Dialog } from "../dialog/Dialog";
-import { useEffectEvent, useRefDebounce } from "../../hooks";
+import { Dialog } from "../dialog/Dialog.js";
+import { useEffectEvent, useRefDebounce } from "../../hooks/index.js";
 export function ContextMenu({ targetRef, children, style, eventName = "contextmenu" }) {
     const [activeIndex, setActiveIndex] = useState(null);
     const [isOpen, setIsOpen] = useState(false);

package/dist/components/context-menu/index.d.ts

@@ -1,3 +1,3 @@
-export { ContextMenu } from "./ContextMenu";
-export { ContextMenuItem, type ContextMenuItemMouseEvent } from "./ContextMenuItem";
+export { ContextMenu } from "./ContextMenu.js";
+export { ContextMenuItem, type ContextMenuItemMouseEvent } from "./ContextMenuItem.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/context-menu/index.js

@@ -1,2 +1,2 @@
-export { ContextMenu } from "./ContextMenu";
-export { ContextMenuItem } from "./ContextMenuItem";
+export { ContextMenu } from "./ContextMenu.js";
+export { ContextMenuItem } from "./ContextMenuItem.js";

package/dist/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";
+import type { ThemeColor } from "../../types.js";
 interface Props extends ComponentProps<"div"> {
     color?: ThemeColor;
     placement?: Placement;

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

@@ -1,2 +1,2 @@
-export { Dialog, dialogVariants } from "./Dialog";
+export { Dialog, dialogVariants } from "./Dialog.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/dialog/index.js

@@ -1 +1 @@
-export { Dialog, dialogVariants } from "./Dialog";
+export { Dialog, dialogVariants } from "./Dialog.js";

package/dist/components/draggable/index.d.ts

@@ -1,7 +1,7 @@
-export { DropIndicator } from "./DropIndicator";
-export { useDraggableItem } from "./useDraggableItem";
-export { useDraggableMonitor } from "./useDraggableMonitor";
-export { useDraggableMonitorIndex } from "./useDraggableMonitorIndex";
-export { dragStateStyles, isItemData, getItemData, triggerPostMoveFlash } from "./util";
-export { draggableItemDataKey, type DraggableState, type DraggableItemData } from "./types";
+export { DropIndicator } from "./DropIndicator.js";
+export { useDraggableItem } from "./useDraggableItem.js";
+export { useDraggableMonitor } from "./useDraggableMonitor.js";
+export { useDraggableMonitorIndex } from "./useDraggableMonitorIndex.js";
+export { dragStateStyles, isItemData, getItemData, triggerPostMoveFlash } from "./util.js";
+export { draggableItemDataKey, type DraggableState, type DraggableItemData } from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/draggable/index.js

@@ -1,6 +1,6 @@
-export { DropIndicator } from "./DropIndicator";
-export { useDraggableItem } from "./useDraggableItem";
-export { useDraggableMonitor } from "./useDraggableMonitor";
-export { useDraggableMonitorIndex } from "./useDraggableMonitorIndex";
-export { dragStateStyles, isItemData, getItemData, triggerPostMoveFlash } from "./util";
-export { draggableItemDataKey } from "./types";
+export { DropIndicator } from "./DropIndicator.js";
+export { useDraggableItem } from "./useDraggableItem.js";
+export { useDraggableMonitor } from "./useDraggableMonitor.js";
+export { useDraggableMonitorIndex } from "./useDraggableMonitorIndex.js";
+export { dragStateStyles, isItemData, getItemData, triggerPostMoveFlash } from "./util.js";
+export { draggableItemDataKey } from "./types.js";

package/dist/components/draggable/useDraggableItem.d.ts

@@ -1,4 +1,4 @@
-import { DraggableState } from "./types";
+import { DraggableState } from "./types.js";
 type UseDraggableItemOptions = {
     id: string | number;
     customPreview?: boolean;

package/dist/components/draggable/useDraggableItem.js

@@ -4,7 +4,7 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { useEffect, useRef, useState } from "react";
-import { getItemData, isItemData } from "./util";
+import { getItemData, isItemData } from "./util.js";
 const idle = { type: "idle" };
 export const useDraggableItem = ({ id, customPreview = false }) => {
     const ref = useRef(null);

package/dist/components/draggable/useDraggableMonitor.js

@@ -3,8 +3,8 @@ import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/ad
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { reorderWithEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge";
 import { flushSync } from "react-dom";
-import { isItemData, triggerPostMoveFlash } from "./util";
-import { useEffectEvent } from "../../hooks";
+import { isItemData, triggerPostMoveFlash } from "./util.js";
+import { useEffectEvent } from "../../hooks/index.js";
 function defaultGetItemIndexById(list, id) {
     return list.findIndex((item) => item.id === id);
 }