@dimasbaguspm/versaur 0.0.59 → 0.0.61

package/dist/js/{tooltip-Dpx3TpR6.js → tooltip-C1TbSbNF.js}

@@ -2,7 +2,7 @@ import { j as r } from "./jsx-runtime-C5mzlN2N.js";
 import g, { useState as y, useEffect as v, createContext as V, useContext as T, forwardRef as p, useRef as S, useId as k, useMemo as _, cloneElement as $ } from "react";
 import { c as h, a as u } from "./index-BDtz_hQY.js";
 import { XIcon as R } from "lucide-react";
-import { n as D, l as H, H as G, t as U } from "./image-rectangle-CCvXv24a.js";
+import { p as D, l as H, H as G, v as U } from "./image-rectangle-CLLXF8w_.js";
 import "./snackbar-CTq4MLir.js";
 import X from "react-dom";
 function q() {

package/dist/js/{top-bar-B2nzldfs.js → top-bar-BGJufFzt.js}

@@ -2,7 +2,7 @@ import { j as s } from "./jsx-runtime-C5mzlN2N.js";
 import * as j from "react";
 import { forwardRef as l, createContext as S, useContext as C, useState as w } from "react";
 import { c as n, a as d } from "./index-BDtz_hQY.js";
-import { n as x, I as N } from "./image-rectangle-CCvXv24a.js";
+import { p as x, I as N } from "./image-rectangle-CLLXF8w_.js";
 import "./snackbar-CTq4MLir.js";
 import { L as V } from "./skeleton-BRwIW26B.js";
 import { ChevronDown as z, ChevronRight as B, ChevronLeft as H } from "lucide-react";
@@ -17,14 +17,16 @@ const T = n(
     variants: {},
     defaultVariants: {}
   }
-), P = n("[grid-area:top] z-30 sticky top-0"), A = n(
+), P = n(
+  "[grid-area:top] z-30 sticky top-0 border-b border-border"
+), A = n(
   "[grid-area:left] z-20 border-r border-border bg-white"
 ), _ = n(
   "[grid-area:right] z-20 border-l border-border bg-white"
 ), I = n(
   "[grid-area:bottom] z-30 border-t border-border bg-white"
 ), k = n(
-  "[grid-area:main] overflow-y-auto min-h-0"
+  "[grid-area:main] overflow-y-auto min-h-0 [scrollbar-gutter:stable]"
 ), G = l(function({ children: t, className: e, ...a }, o) {
   return /* @__PURE__ */ s.jsx(
     "div",
@@ -84,7 +86,7 @@ const T = n(
   BottomRegion: O,
   MainRegion: E
 }), D = n(
-  "sticky bottom-0 w-full flex justify-around items-center bg-white border-t border-border shadow-xs z-40 safe-bottom gap-4 select-none px-8",
+  "sticky bottom-0 w-full flex justify-around items-center bg-white z-40 safe-bottom gap-4 select-none px-8",
   {
     variants: {
       variant: {
@@ -582,6 +584,8 @@ const T = n(
 ), ve = n(
   [
     "grid",
+    "h-full",
+    "min-h-0",
     "grid-rows-[auto_1fr]",
     '[grid-template-areas:"header"_"content"]'
   ].join(" "),
@@ -607,7 +611,7 @@ const T = n(
     backgroundColor: "white"
   }
 }), be = n(
-  "[grid-area:content] overflow-y-auto min-h-0",
+  "[grid-area:content] min-h-0",
   {
     variants: {
       backgroundColor: {
@@ -1002,7 +1006,7 @@ const T = n(
   Item: Ae,
   Group: _e
 }), ke = n(
-  "w-full flex items-center px-6 py-4 border-b border-border shadow-xs bg-white",
+  "w-full flex items-center px-6 py-4 bg-white",
   {
     variants: {},
     defaultVariants: {}

package/dist/types/forms/textarea-input/index.d.ts

@@ -1,2 +1,2 @@
 export { TextAreaInput } from './textarea-input';
-export type { TextAreaInputProps } from './types';
+export type { TextAreaInputProps, FormatType, FormatState } from './types';

package/dist/types/forms/textarea-input/textarea-input.atoms.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { FormatType } from './types';
+import { IconProps } from '../../primitive/icon';
+/**
+ * Props for the TextAreaInputToolbarButton component
+ */
+export interface TextAreaInputToolbarButtonProps {
+    /**
+     * The format type this button applies
+     */
+    format: FormatType;
+    /**
+     * Whether this format is currently active
+     */
+    isActive: boolean;
+    /**
+     * Icon component to render
+     */
+    icon: IconProps['as'];
+    /**
+     * Accessible label for the button
+     */
+    label: string;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick: (format: FormatType) => void;
+}
+/**
+ * Individual toolbar button for formatting actions
+ */
+export declare const TextAreaInputToolbarButton: React.ForwardRefExoticComponent<TextAreaInputToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the TextAreaInputToolbar component
+ */
+export interface TextAreaInputToolbarProps {
+    /**
+     * Child toolbar buttons
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Container for formatting toolbar buttons
+ */
+export declare const TextAreaInputToolbar: React.ForwardRefExoticComponent<TextAreaInputToolbarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/forms/textarea-input/textarea-input.d.ts

@@ -5,6 +5,7 @@ import { TextAreaInputProps } from './types';
  *
  * Uses contentEditable div for robust multi-line text input with better control
  * Provides error states, disabled, and readOnly support
+ * Supports rich text formatting with an optional toolbar
  * Follows browser standards and accessibility best practices
  */
 export declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/forms/textarea-input/types.d.ts

@@ -1,4 +1,23 @@
 import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Available formatting options for rich text editing
+ */
+export type FormatType = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'h1' | 'h2' | 'h3' | 'orderedList' | 'unorderedList' | 'link';
+/**
+ * State of active formats in the current selection
+ */
+export interface FormatState {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    h1: boolean;
+    h2: boolean;
+    h3: boolean;
+    orderedList: boolean;
+    unorderedList: boolean;
+    link: boolean;
+}
 /**
  * Props for the TextAreaInput component
  */
@@ -52,4 +71,13 @@ export interface TextAreaInputProps extends Omit<HTMLAttributes<HTMLDivElement>,
      * Whether the textarea is required
      */
     required?: boolean;
+    /**
+     * Whether to show the formatting toolbar
+     * @default false
+     */
+    showToolbar?: boolean;
+    /**
+     * Allowed formatting options (if not specified, all are allowed)
+     */
+    allowedFormats?: FormatType[];
 }

package/dist/types/forms/textarea-input/use-textarea-formatting.d.ts

@@ -0,0 +1,21 @@
+import { FormatType } from './types';
+/**
+ * Custom hook for managing rich text formatting in TextAreaInput
+ *
+ * Handles toolbar state, format application, and selection tracking
+ */
+export declare const useTextAreaFormatting: (enabled: boolean, contentRef: React.RefObject<HTMLDivElement | null>) => {
+    formatState: {
+        bold: boolean;
+        italic: boolean;
+        underline: boolean;
+        strikethrough: boolean;
+        h1: boolean;
+        h2: boolean;
+        h3: boolean;
+        orderedList: boolean;
+        unorderedList: boolean;
+        link: boolean;
+    };
+    handleFormatClick: (format: FormatType) => void;
+};

package/dist/types/helpers/match-media/built-in/components/index.d.ts

@@ -1,3 +1,9 @@
 export * from './mobile-breakpoint';
 export * from './tablet-breakpoint';
 export * from './desktop-breakpoint';
+export * from './mobile-and-tablet-breakpoint';
+export * from './tablet-and-desktop-breakpoint';
+export * from './mobile-portrait-breakpoint';
+export * from './mobile-landscape-breakpoint';
+export * from './tablet-portrait-breakpoint';
+export * from './tablet-landscape-breakpoint';

package/dist/types/helpers/match-media/built-in/components/mobile-and-tablet-breakpoint.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for breakpoint components
+ */
+interface BreakpointComponentProps {
+    children: React.ReactNode;
+}
+/**
+ * Component that only renders children on mobile and tablet viewports
+ *
+ * @example
+ * ```tsx
+ * <MobileAndTabletBreakpoint>
+ *   <MobileAndTabletContent />
+ * </MobileAndTabletBreakpoint>
+ * ```
+ */
+export declare function MobileAndTabletBreakpoint({ children, }: BreakpointComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/helpers/match-media/built-in/components/mobile-landscape-breakpoint.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for breakpoint components
+ */
+interface BreakpointComponentProps {
+    children: React.ReactNode;
+}
+/**
+ * Component that only renders children on mobile landscape viewports
+ *
+ * @example
+ * ```tsx
+ * <MobileLandscapeBreakpoint>
+ *   <MobileLandscapeContent />
+ * </MobileLandscapeBreakpoint>
+ * ```
+ */
+export declare function MobileLandscapeBreakpoint({ children, }: BreakpointComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/helpers/match-media/built-in/components/mobile-portrait-breakpoint.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for breakpoint components
+ */
+interface BreakpointComponentProps {
+    children: React.ReactNode;
+}
+/**
+ * Component that only renders children on mobile portrait viewports
+ *
+ * @example
+ * ```tsx
+ * <MobilePortraitBreakpoint>
+ *   <MobilePortraitContent />
+ * </MobilePortraitBreakpoint>
+ * ```
+ */
+export declare function MobilePortraitBreakpoint({ children, }: BreakpointComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/helpers/match-media/built-in/components/tablet-and-desktop-breakpoint.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for breakpoint components
+ */
+interface BreakpointComponentProps {
+    children: React.ReactNode;
+}
+/**
+ * Component that only renders children on tablet and desktop viewports
+ *
+ * @example
+ * ```tsx
+ * <TabletAndDesktopBreakpoint>
+ *   <TabletAndDesktopContent />
+ * </TabletAndDesktopBreakpoint>
+ * ```
+ */
+export declare function TabletAndDesktopBreakpoint({ children, }: BreakpointComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/helpers/match-media/built-in/components/tablet-landscape-breakpoint.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for breakpoint components
+ */
+interface BreakpointComponentProps {
+    children: React.ReactNode;
+}
+/**
+ * Component that only renders children on tablet landscape viewports
+ *
+ * @example
+ * ```tsx
+ * <TabletLandscapeBreakpoint>
+ *   <TabletLandscapeContent />
+ * </TabletLandscapeBreakpoint>
+ * ```
+ */
+export declare function TabletLandscapeBreakpoint({ children, }: BreakpointComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/helpers/match-media/built-in/components/tablet-portrait-breakpoint.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for breakpoint components
+ */
+interface BreakpointComponentProps {
+    children: React.ReactNode;
+}
+/**
+ * Component that only renders children on tablet portrait viewports
+ *
+ * @example
+ * ```tsx
+ * <TabletPortraitBreakpoint>
+ *   <TabletPortraitContent />
+ * </TabletPortraitBreakpoint>
+ * ```
+ */
+export declare function TabletPortraitBreakpoint({ children, }: BreakpointComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/helpers/match-media/built-in/hooks/index.d.ts

@@ -1,3 +1,9 @@
 export * from './use-mobile-breakpoint';
 export * from './use-tablet-breakpoint';
 export * from './use-desktop-breakpoint';
+export * from './use-mobile-and-tablet-breakpoint';
+export * from './use-tablet-and-desktop-breakpoint';
+export * from './use-mobile-portrait-breakpoint';
+export * from './use-mobile-landscape-breakpoint';
+export * from './use-tablet-portrait-breakpoint';
+export * from './use-tablet-landscape-breakpoint';

package/dist/types/helpers/match-media/built-in/hooks/use-mobile-and-tablet-breakpoint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect if the current viewport is mobile or tablet
+ *
+ * @returns boolean indicating if viewport is mobile or tablet (max-width: 1023px)
+ *
+ * @example
+ * ```tsx
+ * const isMobileOrTablet = useMobileAndTabletBreakpoint()
+ * ```
+ */
+export declare function useMobileAndTabletBreakpoint(): boolean;

package/dist/types/helpers/match-media/built-in/hooks/use-mobile-landscape-breakpoint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect if the current viewport is mobile in landscape orientation
+ *
+ * @returns boolean indicating if viewport is mobile landscape
+ *
+ * @example
+ * ```tsx
+ * const isMobileLandscape = useMobileLandscapeBreakpoint()
+ * ```
+ */
+export declare function useMobileLandscapeBreakpoint(): boolean;

package/dist/types/helpers/match-media/built-in/hooks/use-mobile-portrait-breakpoint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect if the current viewport is mobile in portrait orientation
+ *
+ * @returns boolean indicating if viewport is mobile portrait
+ *
+ * @example
+ * ```tsx
+ * const isMobilePortrait = useMobilePortraitBreakpoint()
+ * ```
+ */
+export declare function useMobilePortraitBreakpoint(): boolean;

package/dist/types/helpers/match-media/built-in/hooks/use-tablet-and-desktop-breakpoint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect if the current viewport is tablet or desktop
+ *
+ * @returns boolean indicating if viewport is tablet or desktop (min-width: 768px)
+ *
+ * @example
+ * ```tsx
+ * const isTabletOrDesktop = useTabletAndDesktopBreakpoint()
+ * ```
+ */
+export declare function useTabletAndDesktopBreakpoint(): boolean;

package/dist/types/helpers/match-media/built-in/hooks/use-tablet-landscape-breakpoint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect if the current viewport is tablet in landscape orientation
+ *
+ * @returns boolean indicating if viewport is tablet landscape
+ *
+ * @example
+ * ```tsx
+ * const isTabletLandscape = useTabletLandscapeBreakpoint()
+ * ```
+ */
+export declare function useTabletLandscapeBreakpoint(): boolean;

package/dist/types/helpers/match-media/built-in/hooks/use-tablet-portrait-breakpoint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect if the current viewport is tablet in portrait orientation
+ *
+ * @returns boolean indicating if viewport is tablet portrait
+ *
+ * @example
+ * ```tsx
+ * const isTabletPortrait = useTabletPortraitBreakpoint()
+ * ```
+ */
+export declare function useTabletPortraitBreakpoint(): boolean;

package/dist/types/helpers/match-media/constants.d.ts

@@ -5,3 +5,15 @@
 export declare const BREAKPOINT_MOBILE = "(max-width: 767px)";
 export declare const BREAKPOINT_TABLET = "(min-width: 768px) and (max-width: 1023px)";
 export declare const BREAKPOINT_DESKTOP = "(min-width: 1024px)";
+/**
+ * Combined breakpoint definitions
+ */
+export declare const BREAKPOINT_MOBILE_AND_TABLET = "(max-width: 1023px)";
+export declare const BREAKPOINT_TABLET_AND_DESKTOP = "(min-width: 768px)";
+/**
+ * Orientation-specific breakpoint definitions
+ */
+export declare const BREAKPOINT_MOBILE_PORTRAIT = "(max-width: 767px) and (orientation: portrait)";
+export declare const BREAKPOINT_MOBILE_LANDSCAPE = "(max-width: 767px) and (orientation: landscape)";
+export declare const BREAKPOINT_TABLET_PORTRAIT = "(min-width: 768px) and (max-width: 1023px) and (orientation: portrait)";
+export declare const BREAKPOINT_TABLET_LANDSCAPE = "(min-width: 768px) and (max-width: 1023px) and (orientation: landscape)";

package/dist/types/primitive/formatted-text/formatted-text.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { FormattedTextProps } from './types';
+/**
+ * FormattedText component for Versaur UI
+ *
+ * Displays rich HTML content with consistent formatting styles
+ * Matches the styling used in TextAreaInput with toolbar formatting
+ * Should be used with sanitized HTML content to prevent XSS attacks
+ */
+export declare const FormattedText: React.ForwardRefExoticComponent<FormattedTextProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/primitive/formatted-text/index.d.ts

@@ -0,0 +1,3 @@
+export { FormattedText } from './formatted-text';
+export { formattedContentStyles } from './helpers';
+export type { FormattedTextProps } from './types';

package/dist/types/primitive/formatted-text/types.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Props for the FormattedText component
+ */
+export interface FormattedTextProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The HTML content to display (should be sanitized if from user input)
+     */
+    content: string;
+    /**
+     * Whether to allow the content to be scrollable
+     * @default false
+     */
+    scrollable?: boolean;
+    /**
+     * Maximum height for scrollable content (in rem units)
+     */
+    maxHeight?: number;
+}

package/dist/types/primitive/index.d.ts

@@ -14,6 +14,7 @@ export * from './button-menu-icon';
 export * from './button-icon';
 export * from './card';
 export * from './filter-chip';
+export * from './formatted-text';
 export * from './heading';
 export * from './hr';
 export * from './icon';

package/dist/utils/enforce-subpath-import.js

@@ -59,6 +59,8 @@ const symbolToSubpath = {
   "ButtonMenuIcon": "primitive",
   "Card": "primitive",
   "FilterChip": "primitive",
+  "FormattedText": "primitive",
+  "formattedContentStyles": "primitive",
   "Heading": "primitive",
   "Hr": "primitive",
   "Icon": "primitive",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",

package/dist/js/desktop-breakpoint-CuSom-sN.js

@@ -1,47 +0,0 @@
-import { j as t } from "./jsx-runtime-C5mzlN2N.js";
-import { useState as m, useEffect as h } from "react";
-const u = "(max-width: 767px)", c = "(min-width: 768px) and (max-width: 1023px)", d = "(min-width: 1024px)";
-function n(e) {
-  const [a, s] = m(() => typeof window > "u" ? !1 : window.matchMedia(e).matches);
-  return h(() => {
-    if (typeof window > "u") return;
-    const r = window.matchMedia(e), o = (f) => s(f.matches);
-    return s(r.matches), r.addEventListener("change", o), () => {
-      r.removeEventListener("change", o);
-    };
-  }, [e]), a;
-}
-function i({ query: e, children: a }) {
-  return n(e) ? /* @__PURE__ */ t.jsx(t.Fragment, { children: a }) : null;
-}
-function w() {
-  return n(u);
-}
-function B() {
-  return n(c);
-}
-function M() {
-  return n(d);
-}
-function E({ children: e }) {
-  return /* @__PURE__ */ t.jsx(i, { query: u, children: e });
-}
-function T({ children: e }) {
-  return /* @__PURE__ */ t.jsx(i, { query: c, children: e });
-}
-function k({ children: e }) {
-  return /* @__PURE__ */ t.jsx(i, { query: d, children: e });
-}
-export {
-  u as B,
-  k as D,
-  i as M,
-  T,
-  c as a,
-  d as b,
-  w as c,
-  B as d,
-  M as e,
-  E as f,
-  n as u
-};