analytica-frontend-lib 1.0.22 → 1.0.23

package/dist/Table/Table.js

@@ -0,0 +1,139 @@
+"use strict";
+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/Table/Table.tsx
+var Table_exports = {};
+__export(Table_exports, {
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow
+});
+module.exports = __toCommonJS(Table_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Table = (0, import_react.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "table",
+    {
+      ref,
+      className: `w-full caption-bottom text-sm ${className ?? ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { className: "sr-only", children: "My Table" }),
+        children
+      ]
+    }
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "thead",
+  {
+    ref,
+    className: `[&_tr:first-child]:border-0 ${className}`,
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "tbody",
+  {
+    ref,
+    className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "tfoot",
+  {
+    ref,
+    className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var VARIANT_STATES_ROW = {
+  default: "border-b border-border-200",
+  selected: "border-b-2 border-indicator-primary",
+  invalid: "border-b-2 border-indicator-error",
+  disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
+};
+var TableRow = (0, import_react.forwardRef)(
+  ({ state = "default", className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "tr",
+      {
+        ref,
+        className: `
+        transition-colors
+        ${state !== "disabled" ? "hover:bg-muted/50" : ""}
+        ${VARIANT_STATES_ROW[state]}
+        ${className}
+      `,
+        "aria-disabled": state === "disabled",
+        ...props
+      }
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+var TableHead = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "th",
+  {
+    ref,
+    className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "td",
+  {
+    ref,
+    className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "caption",
+  {
+    ref,
+    className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+});

package/dist/Table/Table.mjs

@@ -0,0 +1,107 @@
+// src/components/Table/Table.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Table = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      ref,
+      className: `w-full caption-bottom text-sm ${className ?? ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("caption", { className: "sr-only", children: "My Table" }),
+        children
+      ]
+    }
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: `[&_tr:first-child]:border-0 ${className}`,
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var VARIANT_STATES_ROW = {
+  default: "border-b border-border-200",
+  selected: "border-b-2 border-indicator-primary",
+  invalid: "border-b-2 border-indicator-error",
+  disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
+};
+var TableRow = forwardRef(
+  ({ state = "default", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "tr",
+      {
+        ref,
+        className: `
+        transition-colors
+        ${state !== "disabled" ? "hover:bg-muted/50" : ""}
+        ${VARIANT_STATES_ROW[state]}
+        ${className}
+      `,
+        "aria-disabled": state === "disabled",
+        ...props
+      }
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+var TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};

package/dist/Text/Text.d.mts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+/**
+ * Base text component props
+ */
+type BaseTextProps = {
+    /** Content to be displayed */
+    children?: ReactNode;
+    /** Text size variant */
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+    /** Font weight variant */
+    weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+    /** Color variant - white for light backgrounds, black for dark backgrounds */
+    color?: string;
+    /** Additional CSS classes to apply */
+    className?: string;
+};
+/**
+ * Polymorphic text component props that ensures type safety based on the 'as' prop
+ */
+type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
+    /** HTML tag to render */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;
+/**
+ * Text component for Analytica Ensino platforms
+ *
+ * A flexible polymorphic text component with multiple sizes, weights, and colors.
+ * Automatically adapts to dark and light themes with full type safety.
+ * Fully compatible with Next.js 15 and React 19.
+ *
+ * @param children - The content to display
+ * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
+ * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
+ * @param color - The color variant - adapts to theme
+ * @param as - The HTML tag to render - determines allowed attributes via TypeScript
+ * @param className - Additional CSS classes
+ * @param props - HTML attributes valid for the chosen tag only
+ * @returns A styled text element with type-safe attributes
+ *
+ * @example
+ * ```tsx
+ * <Text size="lg" weight="bold" color="text-info-800">
+ *   This is a large, bold text
+ * </Text>
+ *
+ * <Text as="a" href="/link" target="_blank">
+ *   Link with type-safe anchor attributes
+ * </Text>
+ *
+ * <Text as="button" onClick={handleClick} disabled>
+ *   Button with type-safe button attributes
+ * </Text>
+ * ```
+ */
+declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
+
+export { Text };

package/dist/Text/Text.d.ts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+/**
+ * Base text component props
+ */
+type BaseTextProps = {
+    /** Content to be displayed */
+    children?: ReactNode;
+    /** Text size variant */
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+    /** Font weight variant */
+    weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+    /** Color variant - white for light backgrounds, black for dark backgrounds */
+    color?: string;
+    /** Additional CSS classes to apply */
+    className?: string;
+};
+/**
+ * Polymorphic text component props that ensures type safety based on the 'as' prop
+ */
+type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
+    /** HTML tag to render */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;
+/**
+ * Text component for Analytica Ensino platforms
+ *
+ * A flexible polymorphic text component with multiple sizes, weights, and colors.
+ * Automatically adapts to dark and light themes with full type safety.
+ * Fully compatible with Next.js 15 and React 19.
+ *
+ * @param children - The content to display
+ * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
+ * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
+ * @param color - The color variant - adapts to theme
+ * @param as - The HTML tag to render - determines allowed attributes via TypeScript
+ * @param className - Additional CSS classes
+ * @param props - HTML attributes valid for the chosen tag only
+ * @returns A styled text element with type-safe attributes
+ *
+ * @example
+ * ```tsx
+ * <Text size="lg" weight="bold" color="text-info-800">
+ *   This is a large, bold text
+ * </Text>
+ *
+ * <Text as="a" href="/link" target="_blank">
+ *   Link with type-safe anchor attributes
+ * </Text>
+ *
+ * <Text as="button" onClick={handleClick} disabled>
+ *   Button with type-safe button attributes
+ * </Text>
+ * ```
+ */
+declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
+
+export { Text };

package/dist/Text/Text.js

@@ -0,0 +1,77 @@
+"use strict";
+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/Text/Text.tsx
+var Text_exports = {};
+__export(Text_exports, {
+  Text: () => Text
+});
+module.exports = __toCommonJS(Text_exports);
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      ...props,
+      children
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Text
+});

package/dist/Text/Text.mjs

@@ -0,0 +1,6 @@
+import {
+  Text
+} from "../chunk-TT3VCQGR.mjs";
+export {
+  Text
+};

package/dist/TextArea/TextArea.d.mts

@@ -0,0 +1,69 @@
+import react__default, { ReactNode, TextareaHTMLAttributes } from 'react';
+
+/**
+ * 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>>;
+
+export { TextArea, type TextAreaProps };

package/dist/TextArea/TextArea.d.ts

@@ -0,0 +1,69 @@
+import react__default, { ReactNode, TextareaHTMLAttributes } from 'react';
+
+/**
+ * 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>>;
+
+export { TextArea, type TextAreaProps };