@ttoss/components 2.14.25 → 2.14.26

package/dist/InstallPwa/index.mjs

@@ -1,64 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from "react";
-import { Button, Flex, Text } from "@ttoss/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/InstallPwa/InstallPwa.tsx
-var InstallPwaUi = ({
-  onInstall
-}) => {
-  return /* @__PURE__ */jsx(Flex, {
-    sx: {
-      position: "absolute",
-      bottom: 4,
-      width: "100%",
-      justifyContent: "center"
-    },
-    children: /* @__PURE__ */jsxs(Flex, {
-      sx: {
-        backgroundColor: "background",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: 3,
-        width: "auto",
-        border: "1px solid",
-        borderColor: "muted",
-        borderRadius: 1,
-        padding: 4
-      },
-      children: [/* @__PURE__ */jsx(Text, {
-        children: "Deseja instalar o nosso aplicativo?"
-      }), /* @__PURE__ */jsx(Button, {
-        onClick: onInstall,
-        children: "Instalar"
-      })]
-    })
-  });
-};
-var InstallPwa = () => {
-  const [supportsPwa, setSupportsPwa] = React.useState(false);
-  const [promptInstall, setPromptInstall] = React.useState(null);
-  React.useEffect(() => {
-    const handler = e => {
-      e.preventDefault();
-      setSupportsPwa(true);
-      setPromptInstall(e);
-    };
-    window.addEventListener("beforeinstallprompt", handler);
-    return () => {
-      return window.removeEventListener("transitionend", handler);
-    };
-  }, []);
-  const onInstall = e => {
-    e.preventDefault();
-    if (!promptInstall) return;
-    promptInstall.prompt();
-  };
-  if (!supportsPwa) return null;
-  return /* @__PURE__ */jsx(InstallPwaUi, {
-    onInstall
-  });
-};
-
-//#endregion
-export { InstallPwa, InstallPwaUi };

package/dist/JsonEditor/index.d.mts

@@ -1,3 +0,0 @@
-
-import { JsonEditor } from "json-edit-react";
-export { JsonEditor };

package/dist/JsonEditor/index.mjs

@@ -1,3 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { JsonEditor } from "json-edit-react";
-export { JsonEditor };

package/dist/JsonView/index.d.mts

@@ -1,3 +0,0 @@
-
-import { JsonView } from "react-json-view-lite";
-export { JsonView };

package/dist/JsonView/index.mjs

@@ -1,3 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { JsonView } from "react-json-view-lite";
-export { JsonView };

package/dist/List/index.d.mts

@@ -1,16 +0,0 @@
-
-import * as React from "react";
-
-//#region src/components/List/List.d.ts
-interface ListProps extends React.HTMLProps<HTMLUListElement> {
-  children: React.ReactNode;
-}
-declare const List: React.ForwardRefExoticComponent<Omit<ListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
-//#endregion
-//#region src/components/List/ListItem.d.ts
-interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
-  children: React.ReactNode;
-}
-declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
-//#endregion
-export { List, ListItem, ListItemProps, ListProps };

package/dist/List/index.mjs

@@ -1,34 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/List/List.tsx
-var List = React.forwardRef(({
-  children,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */jsx("ul", {
-    ...props,
-    ref,
-    children
-  });
-});
-List.displayName = "List";
-
-//#endregion
-//#region src/components/List/ListItem.tsx
-var ListItem = React.forwardRef((props, ref) => {
-  const {
-    children,
-    ...rest
-  } = props;
-  return /* @__PURE__ */jsx("li", {
-    ...rest,
-    ref,
-    children
-  });
-});
-ListItem.displayName = "ListItem";
-
-//#endregion
-export { List, ListItem };

package/dist/LockedOverlay/index.d.mts

@@ -1,162 +0,0 @@
-
-import * as React from "react";
-import { ButtonProps, Theme, ThemeUIStyleObject } from "@ttoss/ui";
-
-//#region src/components/LockedOverlay/LockedOverlay.d.ts
-type LockedOverlayAction = {
-  /**
-   * Label text for the button
-   */
-  label: string;
-  /**
-   * Icon identifier from @ttoss/react-icons
-   */
-  icon?: string;
-  /**
-   * Button variant
-   */
-  variant: 'primary' | 'accent' | 'secondary';
-  /**
-   * Click handler for the button
-   */
-  onClick: () => void;
-};
-type LockedOverlayProps = {
-  /**
-   * Controls the overlay visibility
-   */
-  isOpen: boolean;
-  /**
-   * Optional close handler. If not provided, overlay cannot be closed by user interaction
-   */
-  onRequestClose?: () => void;
-  /**
-   * Header configuration for the SpotlightCard
-   */
-  header: {
-    /**
-     * Icon identifier from @ttoss/react-icons
-     */
-    icon: string;
-    /**
-     * Title text for the header
-     */
-    title: string;
-    /**
-     * Description text for the header
-     */
-    description: string;
-    /**
-     * Visual variant for the SpotlightCard
-     * @default 'primary'
-     */
-    variant?: 'primary' | 'accent';
-  };
-  /**
-   * Optional first button to display in the SpotlightCard header
-   */
-  firstButton?: ButtonProps | React.ReactNode;
-  /**
-   * Optional second button to display in the SpotlightCard header
-   */
-  secondButton?: ButtonProps | React.ReactNode;
-  /**
-   * Content to be rendered in the overlay body
-   */
-  children: React.ReactNode;
-  /**
-   * Optional list of actions to render as buttons in the footer
-   */
-  actions?: LockedOverlayAction[];
-  /**
-   * Optional style overrides for the overlay and content container
-   */
-  sx?: ThemeUIStyleObject<Theme<object>>;
-  /**
-   * Optional z-index value to control overlay stacking order.
-   * The overlay will appear above the parent container content.
-   * @default 1
-   *
-   * zIndex hierarchy reference:
-   * - modal: 1400
-   * - overlay: 1300 (sidebar layouts use this value)
-   * - dropdown: 1000
-   * - sticky: 1100
-   * - banner: 1200
-   */
-  zIndex?: string | number;
-};
-/**
- * LockedOverlay is a component for blocking and displaying locked features or restricted content
- * within a specific container.
- *
- * This component renders as an absolutely positioned overlay that blocks the parent container's content.
- * The parent container must have `position: relative` for proper positioning.
- *
- * Unlike a modal, this component blocks only its parent container, not the entire viewport,
- * making it ideal for blocking specific sections like Layout.Main, Layout.Main.Body, etc.
- *
- * @example
- * ```tsx
- * // Parent container must have position: relative
- * <Layout.Main sx={{ position: 'relative' }}>
- *   <LockedOverlay
- *     isOpen={isOpen}
- *     onRequestClose={() => setIsOpen(false)}
- *     header={{
- *       icon: "fluent:lock-closed-24-filled",
- *       title: "Premium Feature",
- *       description: "Available in Pro plan only",
- *       variant: "primary"
- *     }}
- *     actions={[
- *       {
- *         label: "Upgrade Now",
- *         icon: "fluent-emoji-high-contrast:sparkles",
- *         variant: "primary",
- *         onClick: handleUpgrade
- *       },
- *       {
- *         label: "Learn More",
- *         icon: "fluent:arrow-right-16-regular",
- *         variant: "accent",
- *         onClick: handleLearnMore
- *       }
- *     ]}
- *   >
- *     <Text>This feature is only available for Pro users.</Text>
- *   </LockedOverlay>
- * </Layout.Main>
- * ```
- *
- * @example
- * ```tsx
- * // Blocking a specific section with custom zIndex
- * <Box sx={{ position: 'relative' }}>
- *   <LockedOverlay
- *     isOpen={isOpen}
- *     zIndex={10}
- *     header={{
- *       icon: "fluent:lock-closed-24-filled",
- *       title: "Feature Locked",
- *       description: "Unlock this feature"
- *     }}
- *   >
- *     <Text>Content here</Text>
- *   </LockedOverlay>
- * </Box>
- * ```
- */
-declare const LockedOverlay: ({
-  isOpen,
-  onRequestClose,
-  header,
-  firstButton,
-  secondButton,
-  children,
-  actions,
-  sx,
-  zIndex
-}: LockedOverlayProps) => import("react/jsx-runtime").JSX.Element | null;
-//#endregion
-export { LockedOverlay };

package/dist/LockedOverlay/index.mjs

@@ -1,386 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "@ttoss/react-icons";
-import { Box, Button, Card, Flex, Text, keyframes } from "@ttoss/ui";
-
-//#region src/components/SpotlightCard/SpotlightCard.tsx
-var SpotlightCard = ({
-  icon,
-  title,
-  badge,
-  description,
-  firstButton,
-  secondButton,
-  variant = "accent"
-}) => {
-  const gradientFlow = keyframes({
-    "0%": {
-      backgroundPosition: "0% 50%"
-    },
-    "50%": {
-      backgroundPosition: "100% 50%"
-    },
-    "100%": {
-      backgroundPosition: "0% 50%"
-    }
-  });
-  const hasButtons = !!firstButton || !!secondButton;
-  const isAccent = variant === "accent";
-  const textColorToken = isAccent ? "action.text.accent.default" : "action.text.primary.default";
-  const iconColorToken = isAccent ? "action.text.accent.default" : "display.text.accent.default";
-  const iconBgToken = isAccent ? "rgba(255,255,255,0.3)" : "action.background.secondary.default";
-  const badgeBgToken = isAccent ? "action.background.primary.default" : "action.background.accent.default";
-  const badgeTextToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
-  const btnPrimaryVariant = isAccent ? "primary" : "accent";
-  const btnPrimaryColorToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
-  const btnSecondaryColorToken = textColorToken;
-  const btnSecondaryBorderColorToken = isAccent ? "currentColor" : "display.border.muted.default";
-  const renderButton = (prop, config) => {
-    if (!prop) return null;
-    if (React.isValidElement(prop)) return prop;
-    if (typeof prop !== "object") return prop;
-    const {
-      sx,
-      ...rest
-    } = prop;
-    const {
-      variant: defaultVariant,
-      textColor,
-      styles = {}
-    } = config;
-    return /* @__PURE__ */jsx(Button, {
-      variant: defaultVariant,
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "2",
-        px: "6",
-        py: "3",
-        fontSize: "15px",
-        fontWeight: "bold",
-        whiteSpace: "nowrap",
-        transition: "all 0.2s",
-        color: textColor,
-        ...styles,
-        ...sx
-      },
-      ...rest
-    });
-  };
-  return /* @__PURE__ */jsxs(Card, {
-    sx: {
-      display: "flex",
-      flexDirection: ["row"],
-      flexWrap: "nowrap",
-      alignItems: "center",
-      justifyContent: "space-between",
-      background: t => {
-        const theme = t;
-        const bgStart = isAccent ? theme.colors?.action?.background?.accent?.default : theme.colors?.action?.background?.primary?.default;
-        const bgMiddle = isAccent ? theme.colors?.action?.background?.accent?.active : theme.colors?.action?.background?.secondary?.default;
-        if (isAccent) return `linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%), 
-                    linear-gradient(0deg, ${bgStart}, ${bgStart})`;
-        return `linear-gradient(270deg, ${bgStart}, ${bgMiddle}, ${bgStart})`;
-      },
-      backgroundSize: isAccent ? "200% 100%, auto" : "400% 400%",
-      animation: `${gradientFlow} 6s ease infinite`,
-      width: "100%",
-      minHeight: "104px",
-      borderRadius: "xl",
-      boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
-      py: "7",
-      px: "8",
-      gap: "5",
-      color: textColorToken,
-      overflow: "hidden",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      borderColor: isAccent ? "transparent" : "display.border.muted.default"
-    },
-    "data-testid": "spotlight-card",
-    children: [/* @__PURE__ */jsxs(Flex, {
-      sx: {
-        alignItems: "center",
-        gap: "5",
-        flex: 1,
-        minWidth: 0
-      },
-      children: [/* @__PURE__ */jsx(Box, {
-        sx: {
-          width: 64,
-          height: 64,
-          borderRadius: "2xl",
-          backgroundColor: iconBgToken,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flexShrink: 0,
-          color: iconColorToken
-        },
-        children: /* @__PURE__ */jsx(Icon, {
-          icon,
-          width: 32
-        })
-      }), /* @__PURE__ */jsxs(Box, {
-        sx: {
-          minWidth: 0
-        },
-        children: [/* @__PURE__ */jsxs(Text, {
-          as: "div",
-          sx: {
-            fontFamily: "mono",
-            fontSize: "32px",
-            lineHeight: 1.1,
-            color: "inherit",
-            whiteSpace: "nowrap",
-            display: "flex",
-            alignItems: "center",
-            gap: "3"
-          },
-          children: [title, badge && /* @__PURE__ */jsx(Box, {
-            as: "span",
-            sx: {
-              backgroundColor: badgeBgToken,
-              color: badgeTextToken,
-              fontFamily: "mono",
-              fontWeight: "bold",
-              fontSize: "11px",
-              lineHeight: 1,
-              paddingX: "6px",
-              paddingY: "3px",
-              borderRadius: "md",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              display: "inline-flex",
-              alignItems: "center",
-              boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-              transform: "translateY(3px)"
-            },
-            children: badge
-          })]
-        }), /* @__PURE__ */jsx(Text, {
-          as: "div",
-          sx: {
-            fontFamily: "body",
-            fontWeight: 400,
-            fontSize: "16px",
-            color: "inherit",
-            opacity: .9,
-            mt: "1",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            display: "-webkit-box",
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: "vertical"
-          },
-          children: description
-        })]
-      })]
-    }), hasButtons && /* @__PURE__ */jsxs(Flex, {
-      sx: {
-        gap: "4",
-        alignItems: "center",
-        flexShrink: 0,
-        ml: "auto"
-      },
-      children: [renderButton(firstButton, {
-        variant: btnPrimaryVariant,
-        textColor: btnPrimaryColorToken,
-        styles: {
-          ":hover": {
-            transform: "translateY(-1px)"
-          }
-        }
-      }), renderButton(secondButton, {
-        variant: "secondary",
-        textColor: btnSecondaryColorToken,
-        styles: {
-          backgroundColor: "transparent",
-          borderWidth: "1px",
-          borderStyle: "solid",
-          borderColor: btnSecondaryBorderColorToken,
-          opacity: isAccent ? .6 : 1,
-          cursor: "pointer",
-          ":hover": {
-            backgroundColor: "rgba(255,255,255,0.2)",
-            opacity: 1,
-            borderColor: btnSecondaryBorderColorToken
-          }
-        }
-      })]
-    })]
-  });
-};
-SpotlightCard.displayName = "SpotlightCard";
-
-//#endregion
-//#region src/components/LockedOverlay/LockedOverlay.tsx
-/**
-* LockedOverlay is a component for blocking and displaying locked features or restricted content
-* within a specific container.
-*
-* This component renders as an absolutely positioned overlay that blocks the parent container's content.
-* The parent container must have `position: relative` for proper positioning.
-*
-* Unlike a modal, this component blocks only its parent container, not the entire viewport,
-* making it ideal for blocking specific sections like Layout.Main, Layout.Main.Body, etc.
-*
-* @example
-* ```tsx
-* // Parent container must have position: relative
-* <Layout.Main sx={{ position: 'relative' }}>
-*   <LockedOverlay
-*     isOpen={isOpen}
-*     onRequestClose={() => setIsOpen(false)}
-*     header={{
-*       icon: "fluent:lock-closed-24-filled",
-*       title: "Premium Feature",
-*       description: "Available in Pro plan only",
-*       variant: "primary"
-*     }}
-*     actions={[
-*       {
-*         label: "Upgrade Now",
-*         icon: "fluent-emoji-high-contrast:sparkles",
-*         variant: "primary",
-*         onClick: handleUpgrade
-*       },
-*       {
-*         label: "Learn More",
-*         icon: "fluent:arrow-right-16-regular",
-*         variant: "accent",
-*         onClick: handleLearnMore
-*       }
-*     ]}
-*   >
-*     <Text>This feature is only available for Pro users.</Text>
-*   </LockedOverlay>
-* </Layout.Main>
-* ```
-*
-* @example
-* ```tsx
-* // Blocking a specific section with custom zIndex
-* <Box sx={{ position: 'relative' }}>
-*   <LockedOverlay
-*     isOpen={isOpen}
-*     zIndex={10}
-*     header={{
-*       icon: "fluent:lock-closed-24-filled",
-*       title: "Feature Locked",
-*       description: "Unlock this feature"
-*     }}
-*   >
-*     <Text>Content here</Text>
-*   </LockedOverlay>
-* </Box>
-* ```
-*/
-var LockedOverlay = ({
-  isOpen,
-  onRequestClose,
-  header,
-  firstButton,
-  secondButton,
-  children,
-  actions,
-  sx,
-  zIndex = 1
-}) => {
-  const content = /* @__PURE__ */jsxs(Card, {
-    className: "lockedoverlay-card",
-    role: "dialog",
-    "aria-modal": true,
-    sx: {
-      width: "full",
-      maxWidth: "620px",
-      borderRadius: "lg",
-      overflow: "auto",
-      border: "none",
-      boxShadow: "none"
-    },
-    children: [/* @__PURE__ */jsx(Flex, {
-      sx: {
-        width: "full",
-        paddingX: "6",
-        paddingY: "4"
-      },
-      children: /* @__PURE__ */jsx(SpotlightCard, {
-        icon: header.icon,
-        title: header.title,
-        description: header.description,
-        variant: header.variant || "primary",
-        firstButton,
-        secondButton
-      })
-    }), /* @__PURE__ */jsxs(Card.Body, {
-      sx: {
-        px: ["5", "7"],
-        py: ["6", "7"],
-        gap: "6",
-        width: "full"
-      },
-      children: [children, actions && actions.length > 0 && /* @__PURE__ */jsx(Card.Footer, {
-        children: /* @__PURE__ */jsx(Flex, {
-          className: "lockedoverlay-footer",
-          sx: {
-            flexDirection: "column",
-            gap: "4",
-            alignItems: "center",
-            width: "full",
-            paddingX: "6",
-            marginTop: "8"
-          },
-          children: actions.map((action, index) => {
-            return /* @__PURE__ */jsxs(Button, {
-              variant: action.variant,
-              onClick: action.onClick,
-              sx: {
-                width: "full",
-                justifyContent: "center"
-              },
-              children: [action.icon && /* @__PURE__ */jsx(Icon, {
-                icon: action.icon
-              }), action.label]
-            }, index);
-          })
-        })
-      })]
-    })]
-  });
-  if (!isOpen) return null;
-  return /* @__PURE__ */jsx(Flex, {
-    "data-testid": "lockedoverlay-overlay",
-    onClick: () => {
-      return onRequestClose?.();
-    },
-    sx: {
-      position: "absolute",
-      inset: 0,
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      zIndex,
-      ...sx
-    },
-    children: /* @__PURE__ */jsx(Flex, {
-      onClick: event => {
-        event.stopPropagation();
-      },
-      sx: {
-        width: "full",
-        maxWidth: ["95%", "90%", "620px"],
-        maxHeight: "90%",
-        justifyContent: "center",
-        overflow: "auto"
-      },
-      children: content
-    })
-  });
-};
-
-//#endregion
-export { LockedOverlay };

package/dist/Markdown/index.d.mts

@@ -1,16 +0,0 @@
-
-import { FlexProps } from "@ttoss/ui";
-import { Options } from "react-markdown";
-
-//#region src/components/Markdown/Markdown.d.ts
-type MarkdownProps = Options & {
-  children: string;
-  sx?: FlexProps['sx'];
-};
-declare const Markdown: ({
-  children,
-  sx,
-  ...props
-}: MarkdownProps) => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { Markdown, MarkdownProps };