analytica-frontend-lib 1.0.21 → 1.0.23

package/dist/Toast/utils/Toaster.js

@@ -0,0 +1,145 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Toast/utils/Toaster.tsx
+var Toaster_exports = {};
+__export(Toaster_exports, {
+  Toaster: () => Toaster,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(Toaster_exports);
+
+// src/components/Toast/utils/ToastStore.ts
+var import_zustand = require("zustand");
+var useToastStore = (0, import_zustand.create)((set) => ({
+  toasts: [],
+  addToast: (toast) => {
+    const id = crypto.randomUUID();
+    set((state) => ({
+      toasts: [...state.toasts, { id, ...toast }]
+    }));
+  },
+  removeToast: (id) => {
+    set((state) => ({
+      toasts: state.toasts.filter((t) => t.id !== id)
+    }));
+  }
+}));
+
+// src/components/Toast/Toast.tsx
+var import_phosphor_react = require("phosphor-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var VARIANT_ACTION_CLASSES = {
+  solid: {
+    warning: "bg-warning text-warning-800 border-none focus-visible:outline-none",
+    success: "bg-success text-success-800 border-none focus-visible:outline-none",
+    info: "bg-info text-info-800 border-none focus-visible:outline-none"
+  },
+  outlined: {
+    warning: "bg-warning text-warning-800 border border-warning-200 focus-visible:outline-none",
+    success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
+    info: "bg-info text-info-800 border border-info-200 focus-visible:outline-none"
+  }
+};
+var iconMap = {
+  success: import_phosphor_react.CheckCircle,
+  info: import_phosphor_react.Info,
+  warning: import_phosphor_react.WarningCircle
+};
+var Toast = ({
+  variant = "outlined",
+  action = "success",
+  className = "",
+  onClose,
+  title,
+  description,
+  position = "default",
+  ...props
+}) => {
+  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
+  const positionClasses = {
+    "top-left": "fixed top-4 left-4",
+    "top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
+    "top-right": "fixed top-4 right-4",
+    "bottom-left": "fixed bottom-4 left-4",
+    "bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
+    "bottom-right": "fixed bottom-4 right-4",
+    default: ""
+  };
+  const IconAction = iconMap[action] || iconMap["success"];
+  const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconAction, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-start justify-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-semibold text-md", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-md text-text-900", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            onClick: onClose,
+            "aria-label": "Dismiss notification",
+            className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.X, {})
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Toast/utils/Toaster.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Toaster = () => {
+  const toasts = useToastStore((state) => state.toasts);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Toast,
+    {
+      title: toast.title,
+      description: toast.description,
+      variant: toast.variant,
+      action: toast.action,
+      position: toast.position,
+      onClose: () => removeToast(toast.id)
+    },
+    toast.id
+  )) });
+};
+var useToast = () => {
+  const addToast = useToastStore((state) => state.addToast);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return { addToast, removeToast };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toaster,
+  useToast
+});

package/dist/Toast/utils/Toaster.mjs

@@ -0,0 +1,35 @@
+"use client";
+import {
+  Toast
+} from "../../chunk-MI5FIRHM.mjs";
+import {
+  useToastStore
+} from "../../chunk-WIOCQOM7.mjs";
+
+// src/components/Toast/utils/Toaster.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var Toaster = () => {
+  const toasts = useToastStore((state) => state.toasts);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return /* @__PURE__ */ jsx(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx(
+    Toast,
+    {
+      title: toast.title,
+      description: toast.description,
+      variant: toast.variant,
+      action: toast.action,
+      position: toast.position,
+      onClose: () => removeToast(toast.id)
+    },
+    toast.id
+  )) });
+};
+var useToast = () => {
+  const addToast = useToastStore((state) => state.addToast);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return { addToast, removeToast };
+};
+export {
+  Toaster,
+  useToast
+};

package/dist/chunk-MI5FIRHM.mjs

@@ -0,0 +1,75 @@
+// src/components/Toast/Toast.tsx
+import { CheckCircle, WarningCircle, Info, X } from "phosphor-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VARIANT_ACTION_CLASSES = {
+  solid: {
+    warning: "bg-warning text-warning-800 border-none focus-visible:outline-none",
+    success: "bg-success text-success-800 border-none focus-visible:outline-none",
+    info: "bg-info text-info-800 border-none focus-visible:outline-none"
+  },
+  outlined: {
+    warning: "bg-warning text-warning-800 border border-warning-200 focus-visible:outline-none",
+    success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
+    info: "bg-info text-info-800 border border-info-200 focus-visible:outline-none"
+  }
+};
+var iconMap = {
+  success: CheckCircle,
+  info: Info,
+  warning: WarningCircle
+};
+var Toast = ({
+  variant = "outlined",
+  action = "success",
+  className = "",
+  onClose,
+  title,
+  description,
+  position = "default",
+  ...props
+}) => {
+  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
+  const positionClasses = {
+    "top-left": "fixed top-4 left-4",
+    "top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
+    "top-right": "fixed top-4 right-4",
+    "bottom-left": "fixed bottom-4 left-4",
+    "bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
+    "bottom-right": "fixed bottom-4 right-4",
+    default: ""
+  };
+  const IconAction = iconMap[action] || iconMap["success"];
+  const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-start gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx(IconAction, {}) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-start", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold text-md", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-md text-text-900", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            "aria-label": "Dismiss notification",
+            className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
+            children: /* @__PURE__ */ jsx(X, {})
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  Toast
+};

package/dist/chunk-TT3VCQGR.mjs

@@ -0,0 +1,53 @@
+// src/components/Text/Text.tsx
+import { jsx } from "react/jsx-runtime";
+var Text = ({
+  children,
+  size = "md",
+  weight = "normal",
+  color = "text-text-950",
+  as,
+  className = "",
+  ...props
+}) => {
+  let sizeClasses = "";
+  let weightClasses = "";
+  const sizeClassMap = {
+    "2xs": "text-2xs",
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl",
+    "6xl": "text-6xl"
+  };
+  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
+  const weightClassMap = {
+    hairline: "font-hairline",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
+  };
+  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
+  const baseClasses = "font-primary";
+  const Component = as ?? "p";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      ...props,
+      children
+    }
+  );
+};
+
+export {
+  Text
+};

package/dist/chunk-WIOCQOM7.mjs

@@ -0,0 +1,20 @@
+// src/components/Toast/utils/ToastStore.ts
+import { create } from "zustand";
+var useToastStore = create((set) => ({
+  toasts: [],
+  addToast: (toast) => {
+    const id = crypto.randomUUID();
+    set((state) => ({
+      toasts: [...state.toasts, { id, ...toast }]
+    }));
+  },
+  removeToast: (id) => {
+    set((state) => ({
+      toasts: state.toasts.filter((t) => t.id !== id)
+    }));
+  }
+}));
+
+export {
+  useToastStore
+};

package/dist/index.css

@@ -22,8 +22,12 @@
       "Liberation Mono",
       "Courier New",
       monospace;
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-md: 28rem;
+    --container-4xl: 56rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -433,6 +437,9 @@
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -451,6 +458,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .box-border {
+    box-sizing: border-box;
+  }
   .block {
     display: block;
   }
@@ -496,6 +506,9 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
   .h-\[21px\] {
     height: 21px;
   }
@@ -523,15 +536,24 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-72 {
+    width: calc(var(--spacing) * 72);
+  }
   .w-\[384px\] {
     width: 384px;
   }
   .w-full {
     width: 100%;
   }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
   .max-w-\[390px\] {
     max-width: 390px;
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .min-w-\[210px\] {
     min-width: 210px;
   }
@@ -551,6 +573,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize-none {
+    resize: none;
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -611,6 +636,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -657,6 +685,10 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
   .border-background-200 {
     border-color: var(--color-background-200);
   }
@@ -711,6 +743,9 @@
   .border-primary-950 {
     border-color: var(--color-primary-950);
   }
+  .border-red-700 {
+    border-color: var(--color-red-700);
+  }
   .border-success-200 {
     border-color: var(--color-success-200);
   }
@@ -792,6 +827,9 @@
   .bg-warning {
     background-color: var(--color-warning);
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -966,6 +1004,9 @@
   .text-error-800 {
     color: var(--color-error-800);
   }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
   .text-info-200 {
     color: var(--color-info-200);
   }
@@ -1100,6 +1141,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1145,6 +1190,21 @@
       }
     }
   }
+  .placeholder\:text-text-600 {
+    &::-moz-placeholder {
+      color: var(--color-text-600);
+    }
+    &::placeholder {
+      color: var(--color-text-600);
+    }
+  }
+  .hover\:border-border-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-400);
+      }
+    }
+  }
   .hover\:border-border-500 {
     &:hover {
       @media (hover: hover) {
@@ -1180,6 +1240,13 @@
       }
     }
   }
+  .hover\:border-red-700 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-red-700);
+      }
+    }
+  }
   .hover\:border-success-400 {
     &:hover {
       @media (hover: hover) {
@@ -1291,6 +1358,16 @@
       }
     }
   }
+  .focus\:border-border-500 {
+    &:focus {
+      border-color: var(--color-border-500);
+    }
+  }
+  .focus\:border-red-700 {
+    &:focus {
+      border-color: var(--color-red-700);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -1909,6 +1986,19 @@
 @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
 @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-blur { syntax: "*"; inherits: false; }
+@property --tw-brightness { syntax: "*"; inherits: false; }
+@property --tw-contrast { syntax: "*"; inherits: false; }
+@property --tw-grayscale { syntax: "*"; inherits: false; }
+@property --tw-hue-rotate { syntax: "*"; inherits: false; }
+@property --tw-invert { syntax: "*"; inherits: false; }
+@property --tw-opacity { syntax: "*"; inherits: false; }
+@property --tw-saturate { syntax: "*"; inherits: false; }
+@property --tw-sepia { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
 @property --tw-duration { syntax: "*"; inherits: false; }
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
@@ -1942,6 +2032,19 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-duration: initial;
     }
   }

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, InputHTMLAttributes, TdHTMLAttributes } from 'react';
+import react__default, { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, TextareaHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TdHTMLAttributes } from 'react';
 import * as zustand from 'zustand';
 
 /**
@@ -185,6 +185,72 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
+/**
+ * TextArea size variants
+ */
+type TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';
+/**
+ * TextArea visual state
+ */
+type TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
+/**
+ * TextArea component props interface
+ */
+type TextAreaProps = {
+    /** Label text to display above the textarea */
+    label?: ReactNode;
+    /** Size variant of the textarea */
+    size?: TextAreaSize;
+    /** Visual state of the textarea */
+    state?: TextAreaState;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperMessage?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
+/**
+ * TextArea component for Analytica Ensino platforms
+ *
+ * A textarea component with essential states, sizes and themes.
+ * Uses exact design specifications with 288px width, 96px height, and specific
+ * color values. Includes Text component integration for consistent typography.
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <TextArea label="Description" placeholder="Enter description..." />
+ *
+ * // Small size
+ * <TextArea size="small" label="Comment" />
+ *
+ * // Invalid state
+ * <TextArea state="invalid" label="Required field" errorMessage="This field is required" />
+ *
+ * // Disabled state
+ * <TextArea disabled label="Read-only field" />
+ * ```
+ */
+declare const TextArea: react__default.ForwardRefExoticComponent<{
+    /** Label text to display above the textarea */
+    label?: ReactNode;
+    /** Size variant of the textarea */
+    size?: TextAreaSize;
+    /** Visual state of the textarea */
+    state?: TextAreaState;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperMessage?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+} & Omit<react__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & react__default.RefAttributes<HTMLTextAreaElement>>;
+
 /**
  * Badge component props interface
  */
@@ -497,4 +563,4 @@ declare const useToast: () => {
     removeToast: (id: string) => void;
 };
 
-export { Badge, Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text, Toast, type ToastData, Toaster, useToast, useToastStore };
+export { Badge, Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text, TextArea, type TextAreaProps, Toast, type ToastData, Toaster, useToast, useToastStore };