pentatrion-design 0.0.5 → 0.0.6

package/components/button/Button.tsx

@@ -182,7 +182,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           className,
           buttonVariants.size(icon, size),
           buttonVariants.variant[variant](color),
-          icon && "justify-center [&_:last-child:not(i,img)]:pr-4",
+          icon && "justify-center [&_:last-child:not(i,img,svg)]:pr-4",
           fullWidth && "w-full",
           selected && "active",
           notClickable && "disabled",

package/components/button/LinkButton.tsx

@@ -0,0 +1,89 @@
+import {
+  ComponentPropsWithRef,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import clsx from "clsx";
+import { ThemeColor } from "../../types.d";
+import { useRipple } from "../../hooks";
+import { buttonVariants } from "./Button";
+
+export interface LinkButtonProps extends ComponentPropsWithRef<"a"> {
+  href: string;
+
+  withRipple?: boolean;
+
+  variant?: "contained" | "light" | "outlined" | "text" | "ghost";
+
+  size?: "small" | "medium" | "large" | "custom";
+
+  color?: ThemeColor;
+
+  children?: React.ReactNode;
+
+  fullWidth?: boolean;
+
+  focusable?: boolean;
+
+  /**
+   * For a selected item inside a group.
+   */
+  selected?: boolean;
+
+  icon?: boolean;
+}
+
+export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
+  function LinkButton(
+    {
+      withRipple = true,
+      variant = "contained",
+      color = "yellow",
+      size = "medium",
+      focusable = true,
+      fullWidth,
+      className,
+      children,
+      selected = false,
+      icon = false,
+      href,
+      ...props
+    },
+    ref,
+  ) {
+    const anchorRef = useRef<HTMLAnchorElement>(null);
+
+    useImperativeHandle<HTMLAnchorElement | null, HTMLAnchorElement | null>(
+      ref,
+      () => anchorRef.current,
+    );
+
+    const ripples = useRipple(anchorRef);
+
+    // check if overflow-clip-margin: 1px; is needed ?
+    return (
+      <a
+        tabIndex={focusable ? 0 : -1}
+        role="button"
+        href={href}
+        ref={anchorRef}
+        className={clsx(
+          "relative inline-flex cursor-pointer items-center overflow-clip border-0 text-center leading-5 no-underline duration-300 focus-visible:outline focus-visible:outline-2 motion-safe:transition-color-shadow",
+          icon ? "rounded-full" : "rounded-2xl",
+          className,
+          buttonVariants.size(icon, size),
+          buttonVariants.variant[variant](color),
+          icon && "justify-center [&_:last-child:not(i,img)]:pr-4",
+          fullWidth && "w-full",
+          selected && "active",
+        )}
+        data-variant={variant}
+        {...props}
+      >
+        {withRipple && ripples}
+        {children}
+      </a>
+    );
+  },
+);

package/components/button/index.ts

@@ -1,2 +1,3 @@
 export { Button, type ButtonProps, buttonVariants } from "./Button";
 export { ButtonGroup } from "./ButtonGroup";
+export { LinkButton } from "./LinkButton";

package/components/input/Toggle.tsx

@@ -35,7 +35,7 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
           disabled={disabled}
           type="checkbox"
           className={clsx(
-            "p8n-input-toggle ll-toggle p8n-input-checkbox relative mr-1 box-border inline-block h-[18px] w-[30px] appearance-none rounded-xl bg-gray-1 after:absolute after:left-[3px] after:top-[3px] after:h-[12px] after:w-[12px] after:rounded-full after:bg-gray-2 after:outline after:outline-1 after:outline-gray-3 after:transition-all after:duration-100 checked:bg-gray-2 checked:after:translate-x-[12px] checked:after:bg-current checked:after:outline-current",
+            "p8n-input-toggle ll-toggle p8n-input-checkbox relative mr-1 box-border inline-block h-[18px] w-[30px] cursor-pointer appearance-none rounded-xl bg-gray-1 after:absolute after:left-[3px] after:top-[3px] after:h-[12px] after:w-[12px] after:rounded-full after:bg-gray-2 after:outline after:outline-1 after:outline-gray-3 after:transition-all after:duration-100 checked:bg-gray-2 checked:after:translate-x-[12px] checked:after:bg-current checked:after:outline-current",
             className,
           )}
           checked={checked}

package/components/resize-area/ResizeArea.tsx

@@ -1,17 +1,26 @@
-import { useCallback, useEffect } from "react";
+import { ComponentProps, useCallback, useEffect } from "react";
 import clsx from "clsx";
 
-interface Props {
+interface Props extends ComponentProps<"div"> {
   name: string;
   position: "top" | "bottom" | "left" | "right";
   initialValue?: number;
 }
 
-export function ResizeArea({ name, position, initialValue }: Props) {
+export function ResizeArea({
+  name,
+  position,
+  initialValue,
+  className,
+  ...rest
+}: Props) {
   useEffect(() => {
     const cssVarName = `--sidebar-${name}-${["top", "bottom"].includes(position) ? "height" : "width"}`;
     if (initialValue) {
-      document.documentElement.style.setProperty(cssVarName, `${initialValue}px`);
+      document.documentElement.style.setProperty(
+        cssVarName,
+        `${initialValue}px`,
+      );
     }
     // we want to set the initial value, we don't want this value to be updated after
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -43,7 +52,10 @@ export function ResizeArea({ name, position, initialValue }: Props) {
           cssVarValue = e.pageY;
           break;
       }
-      document.documentElement.style.setProperty(cssVarName, `${cssVarValue}px`);
+      document.documentElement.style.setProperty(
+        cssVarName,
+        `${cssVarValue}px`,
+      );
       return () => {
         document.documentElement.style.removeProperty(cssVarName);
       };
@@ -54,7 +66,10 @@ export function ResizeArea({ name, position, initialValue }: Props) {
   const handlePointerUp = useCallback(() => {
     const handler = handlePointerMove;
     document.removeEventListener("pointermove", handler);
-    document.documentElement.classList.remove("cursor-row-resize", "cursor-col-resize");
+    document.documentElement.classList.remove(
+      "cursor-row-resize",
+      "cursor-col-resize",
+    );
 
     return () => {
       document.removeEventListener("pointermove", handler);
@@ -72,8 +87,12 @@ export function ResizeArea({ name, position, initialValue }: Props) {
   }
 
   return (
-    <div className={clsx(["p8n-resize-area", position])}>
-      <button className="area-button" type="button" onPointerDown={handlePointerDown}></button>
+    <div className={clsx(["p8n-resize-area", position, className])} {...rest}>
+      <button
+        className="area-button"
+        type="button"
+        onPointerDown={handlePointerDown}
+      ></button>
     </div>
   );
 }

package/dist/index.d.ts

@@ -217,6 +217,23 @@ interface Props$A extends ComponentProps<"div"> {
 }
 declare function ButtonGroup({ children, className, direction }: Props$A): react_jsx_runtime.JSX.Element;
 
+interface LinkButtonProps extends ComponentPropsWithRef<"a"> {
+    href: string;
+    withRipple?: boolean;
+    variant?: "contained" | "light" | "outlined" | "text" | "ghost";
+    size?: "small" | "medium" | "large" | "custom";
+    color?: ThemeColor;
+    children?: React.ReactNode;
+    fullWidth?: boolean;
+    focusable?: boolean;
+    /**
+     * For a selected item inside a group.
+     */
+    selected?: boolean;
+    icon?: boolean;
+}
+declare const LinkButton: (props: LinkButtonProps & react.RefAttributes<HTMLAnchorElement>) => react.ReactElement<any, string | react.JSXElementConstructor<any>> | null;
+
 declare const cardConfig: {
     item: string;
     group: string;
@@ -862,12 +879,12 @@ interface Props$f {
 }
 declare const Portal: ({ children }: Props$f) => react.ReactPortal;
 
-interface Props$e {
+interface Props$e extends ComponentProps<"div"> {
     name: string;
     position: "top" | "bottom" | "left" | "right";
     initialValue?: number;
 }
-declare function ResizeArea({ name, position, initialValue }: Props$e): react_jsx_runtime.JSX.Element;
+declare function ResizeArea({ name, position, initialValue, className, ...rest }: Props$e): react_jsx_runtime.JSX.Element;
 
 interface Props$d extends ComponentPropsWithoutRef<"div"> {
     horizontal?: boolean;
@@ -1166,4 +1183,4 @@ declare const pentatrionTw: {
     __isOptionsFunction: true;
 };
 
-export { _default as Autocomplete, _default$1 as AutocompleteOption, type AutocompleteProps, Badge, Button, ButtonGroup, type ButtonProps, Checkbox, Code, ContextMenu, ContextMenuItem, type ContextMenuItemMouseEvent, type CustomFetchOptions, Dialog, DropdownMenu, DropdownMenuContent, DropdownMenuContext, DropdownMenuItem, DropdownMenuNested, type DropdownMenuOptions, DropdownMenuTrigger, FetchError, Flash, Highlight, Href, Input, InputField, LazyAutocomplete, Loader, MenuItem, MenuItemWithChildren, Modal, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, type ModalOptions, ModalTrigger, type NoDataOption, NotificationsContext, NotificationsProvider, type Option, type OptionLike, Popover, PopoverContent, PopoverContext, PopoverDescription, PopoverFooter, PopoverHeader, type PopoverOptions, PopoverTrigger, Portal, Radio, RadioGroup, Range, ResizeArea, Scroll, Select, SelectContext, SelectOption, SelectSelection, type SelectSelectionProps, SimpleAutocomplete, SimpleTooltip, Snack, Sortable, type SortableItem, Step, Steps, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs, type ThemeColor, Toggle, Tooltip, TooltipContent, TooltipContext, TooltipTrigger, arrayEquals, buttonVariants, cardConfig, colorVariants, createNotificationsManager, dialogVariants, fetchAPI, getIndexLetter, getOptionLabel, getOptionValue, inputConfig, isErrorLike, parseError, pentatrionTw, useAutocomplete, useCombinedRefs, useContextNotifications, useCopyToClipboard, useDebounce, useDropdownMenu, useDropdownMenuContext, useEventCallback, useEventListener, useFetch, useIsClosing, useIsMounted, useIsomorphicLayoutEffect, useModal, useModalContext, useOnClickOutside, usePopover, usePopoverContext, usePrevious, useRefDebounce, useRipple, useSelect, useStateDebounce, useTooltip, useTooltipContext };
+export { _default as Autocomplete, _default$1 as AutocompleteOption, type AutocompleteProps, Badge, Button, ButtonGroup, type ButtonProps, Checkbox, Code, ContextMenu, ContextMenuItem, type ContextMenuItemMouseEvent, type CustomFetchOptions, Dialog, DropdownMenu, DropdownMenuContent, DropdownMenuContext, DropdownMenuItem, DropdownMenuNested, type DropdownMenuOptions, DropdownMenuTrigger, FetchError, Flash, Highlight, Href, Input, InputField, LazyAutocomplete, LinkButton, Loader, MenuItem, MenuItemWithChildren, Modal, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, type ModalOptions, ModalTrigger, type NoDataOption, NotificationsContext, NotificationsProvider, type Option, type OptionLike, Popover, PopoverContent, PopoverContext, PopoverDescription, PopoverFooter, PopoverHeader, type PopoverOptions, PopoverTrigger, Portal, Radio, RadioGroup, Range, ResizeArea, Scroll, Select, SelectContext, SelectOption, SelectSelection, type SelectSelectionProps, SimpleAutocomplete, SimpleTooltip, Snack, Sortable, type SortableItem, Step, Steps, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs, type ThemeColor, Toggle, Tooltip, TooltipContent, TooltipContext, TooltipTrigger, arrayEquals, buttonVariants, cardConfig, colorVariants, createNotificationsManager, dialogVariants, fetchAPI, getIndexLetter, getOptionLabel, getOptionValue, inputConfig, isErrorLike, parseError, pentatrionTw, useAutocomplete, useCombinedRefs, useContextNotifications, useCopyToClipboard, useDebounce, useDropdownMenu, useDropdownMenuContext, useEventCallback, useEventListener, useFetch, useIsClosing, useIsMounted, useIsomorphicLayoutEffect, useModal, useModalContext, useOnClickOutside, usePopover, usePopoverContext, usePrevious, useRefDebounce, useRipple, useSelect, useStateDebounce, useTooltip, useTooltipContext };