dhanasekar-ui 1.2.0 → 1.4.0

package/dist/{chunk-2TXYJ7YE.js → chunk-ZPJSBORX.js}

@@ -1,4 +1,4 @@
-'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var N=`
+'use strict';var chunkMLURKSJZ_js=require('./chunk-MLURKSJZ.js'),react=require('react'),jsxRuntime=require('react/jsx-runtime');var T=`
   :root {
     --df-primary: #3b82f6;
     --df-primary-hover: #2563eb;
@@ -197,5 +197,5 @@
   body.df-modal-open {
     overflow: hidden;
   }
-`,D=["Today","Yesterday","Last 7 Days","Last 30 Days","This Month","Last Month","Custom"],C=({open:r,title:x="Date Filter",options:g=D,initialValue:t,onClose:d,onApply:u})=>{let[s,f]=react.useState(t?.option||"Today"),[n,p]=react.useState(t?.from||""),[c,b]=react.useState(t?.to||""),m=react.useRef(null);react.useEffect(()=>{r&&t&&(f(t.option),p(t.from||""),b(t.to||""));},[r,t]),react.useEffect(()=>(r?document.body.classList.add("df-modal-open"):document.body.classList.remove("df-modal-open"),()=>document.body.classList.remove("df-modal-open")),[r]);let v=e=>{e.target===m.current&&d();};react.useEffect(()=>{let e=w=>{w.key==="Escape"&&r&&d();};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[r,d]);let y=()=>{u({option:s,...s==="Custom"?{from:n,to:c}:{}});},h=new Date().toISOString().split("T")[0];return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:N}}),jsxRuntime.jsx("div",{ref:m,className:`df-backdrop ${r?"df-open":""}`,onClick:v,role:"dialog","aria-modal":"true","aria-labelledby":"df-dialog-title",children:jsxRuntime.jsxs("div",{className:"df-dialog",children:[jsxRuntime.jsx("div",{className:"df-header",children:jsxRuntime.jsx("h2",{id:"df-dialog-title",className:"df-title",children:x})}),jsxRuntime.jsxs("div",{className:"df-content",children:[jsxRuntime.jsxs("div",{className:"df-form-group",children:[jsxRuntime.jsx("label",{className:"df-label",children:"Select Range"}),jsxRuntime.jsx("div",{className:"df-select-wrapper",children:jsxRuntime.jsx("select",{className:"df-input df-select",value:s,onChange:e=>f(e.target.value),children:g.map(e=>jsxRuntime.jsx("option",{value:e,children:e},e))})})]}),s==="Custom"&&jsxRuntime.jsxs("div",{className:"df-custom-range",children:[jsxRuntime.jsxs("div",{className:"df-form-group",children:[jsxRuntime.jsx("label",{className:"df-label",children:"From Date"}),jsxRuntime.jsx("input",{type:"date",className:"df-input",value:n,onChange:e=>p(e.target.value),max:h})]}),jsxRuntime.jsxs("div",{className:"df-form-group",children:[jsxRuntime.jsx("label",{className:"df-label",children:"To Date"}),jsxRuntime.jsx("input",{type:"date",className:"df-input",value:c,onChange:e=>b(e.target.value),min:n||void 0})]})]})]}),jsxRuntime.jsxs("div",{className:"df-footer",children:[jsxRuntime.jsx("button",{className:"df-btn df-btn-cancel",onClick:d,children:"Cancel"}),jsxRuntime.jsx("button",{className:"df-btn df-btn-apply",onClick:y,children:"Apply"})]})]})})]})};exports.a=C;//# sourceMappingURL=chunk-2TXYJ7YE.js.map
-//# sourceMappingURL=chunk-2TXYJ7YE.js.map
+`,C=["Today","Yesterday","Last 7 Days","Last 30 Days","This Month","Last Month","Custom"],M=({open:r,title:g="Date Filter",options:u=C,initialValue:t,onClose:d,onApply:v,sx:y,style:h,className:w=""})=>{let[s,f]=react.useState(t?.option||"Today"),[n,p]=react.useState(t?.from||""),[c,b]=react.useState(t?.to||""),m=react.useRef(null);react.useEffect(()=>{r&&t&&(f(t.option),p(t.from||""),b(t.to||""));},[r,t]),react.useEffect(()=>(r?document.body.classList.add("df-modal-open"):document.body.classList.remove("df-modal-open"),()=>document.body.classList.remove("df-modal-open")),[r]);let k=e=>{e.target===m.current&&d();};react.useEffect(()=>{let e=S=>{S.key==="Escape"&&r&&d();};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[r,d]);let N=()=>{v({option:s,...s==="Custom"?{from:n,to:c}:{}});},D=new Date().toISOString().split("T")[0];return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:T}}),jsxRuntime.jsx("div",{ref:m,className:`df-backdrop ${r?"df-open":""} ${w}`,onClick:k,role:"dialog","aria-modal":"true","aria-labelledby":"df-dialog-title",style:{...chunkMLURKSJZ_js.a(y),...h},children:jsxRuntime.jsxs("div",{className:"df-dialog",children:[jsxRuntime.jsx("div",{className:"df-header",children:jsxRuntime.jsx("h2",{id:"df-dialog-title",className:"df-title",children:g})}),jsxRuntime.jsxs("div",{className:"df-content",children:[jsxRuntime.jsxs("div",{className:"df-form-group",children:[jsxRuntime.jsx("label",{className:"df-label",children:"Select Range"}),jsxRuntime.jsx("div",{className:"df-select-wrapper",children:jsxRuntime.jsx("select",{className:"df-input df-select",value:s,onChange:e=>f(e.target.value),children:u.map(e=>jsxRuntime.jsx("option",{value:e,children:e},e))})})]}),s==="Custom"&&jsxRuntime.jsxs("div",{className:"df-custom-range",children:[jsxRuntime.jsxs("div",{className:"df-form-group",children:[jsxRuntime.jsx("label",{className:"df-label",children:"From Date"}),jsxRuntime.jsx("input",{type:"date",className:"df-input",value:n,onChange:e=>p(e.target.value),max:D})]}),jsxRuntime.jsxs("div",{className:"df-form-group",children:[jsxRuntime.jsx("label",{className:"df-label",children:"To Date"}),jsxRuntime.jsx("input",{type:"date",className:"df-input",value:c,onChange:e=>b(e.target.value),min:n||void 0})]})]})]}),jsxRuntime.jsxs("div",{className:"df-footer",children:[jsxRuntime.jsx("button",{className:"df-btn df-btn-cancel",onClick:d,children:"Cancel"}),jsxRuntime.jsx("button",{className:"df-btn df-btn-apply",onClick:N,children:"Apply"})]})]})})]})};exports.a=M;//# sourceMappingURL=chunk-ZPJSBORX.js.map
+//# sourceMappingURL=chunk-ZPJSBORX.js.map

package/dist/chunk-ZPJSBORX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DateFilter/DateFilter.tsx"],"names":["STYLES","DEFAULT_OPTIONS","DateFilter","open","title","options","initialValue","onClose","onApply","sx","style","className","option","setOption","useState","from","setFrom","to","setTo","backdropRef","useRef","useEffect","handleBackdropClick","handleKeyDown","e","handleApply","todayStr","jsxs","Fragment","jsx","handleSx","opt"],"mappings":"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","file":"chunk-ZPJSBORX.js","sourcesContent":["'use client';\n\nimport React, { useState, useEffect, useRef } from 'react';\nimport { handleSx } from '../../utils/handleSx';\nimport { DateFilterProps, DateFilterValue } from './DateFilter.types';\n\nconst STYLES = `\n  :root {\n    --df-primary: #3b82f6;\n    --df-primary-hover: #2563eb;\n    --df-text-main: #1e293b;\n    --df-text-secondary: #64748b;\n    --df-bg-main: #ffffff;\n    --df-bg-glass: rgba(255, 255, 255, 0.85);\n    --df-border: #e2e8f0;\n    --df-border-focus: #3b82f6;\n    --df-radius-lg: 12px;\n    --df-radius-md: 8px;\n    --df-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  }\n\n  .df-backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(15, 23, 42, 0.4);\n    backdrop-filter: blur(4px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n  }\n\n  .df-backdrop.df-open {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .df-dialog {\n    background: var(--df-bg-glass);\n    backdrop-filter: blur(16px);\n    width: 100%;\n    max-width: 400px;\n    border-radius: var(--df-radius-lg);\n    box-shadow: var(--df-shadow);\n    display: flex;\n    flex-direction: column;\n    transform: scale(0.95) translateY(10px);\n    opacity: 0;\n    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;\n    font-family: 'Inter', system-ui, -apple-system, sans-serif;\n    border: 1px solid rgba(255, 255, 255, 0.5);\n    margin: 16px;\n  }\n\n  .df-backdrop.df-open .df-dialog {\n    transform: scale(1) translateY(0);\n    opacity: 1;\n  }\n\n  .df-header {\n    padding: 20px 24px 16px;\n    border-bottom: 1px solid var(--df-border);\n  }\n\n  .df-title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--df-primary);\n  }\n\n  .df-content {\n    padding: 24px;\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n\n  .df-form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    position: relative;\n  }\n\n  .df-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--df-text-secondary);\n  }\n\n  .df-input {\n    width: 100%;\n    padding: 10px 14px;\n    font-size: 14px;\n    color: var(--df-text-main);\n    background: var(--df-bg-main);\n    border: 1px solid var(--df-border);\n    border-radius: var(--df-radius-md);\n    outline: none;\n    transition: all 0.2s ease;\n    box-sizing: border-box;\n    appearance: none;\n    font-family: inherit;\n  }\n\n  .df-input:focus {\n    border-color: var(--df-border-focus);\n    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n  }\n\n  /* Custom Select Wrapper for arrow */\n  .df-select-wrapper {\n    position: relative;\n    width: 100%;\n  }\n\n  .df-select-wrapper::after {\n    content: '';\n    position: absolute;\n    right: 14px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 0;\n    height: 0;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 5px solid var(--df-text-secondary);\n    pointer-events: none;\n  }\n\n  .df-select {\n    padding-right: 32px;\n    cursor: pointer;\n  }\n\n  .df-custom-range {\n    display: flex;\n    gap: 16px;\n    animation: dfSlideDown 0.3s ease-out;\n  }\n\n  .df-custom-range .df-form-group {\n    flex: 1;\n  }\n\n  @keyframes dfSlideDown {\n    from { opacity: 0; transform: translateY(-10px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .df-footer {\n    padding: 16px 24px 24px;\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n  }\n\n  .df-btn {\n    padding: 8px 16px;\n    font-size: 14px;\n    font-weight: 600;\n    border-radius: var(--df-radius-md);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    border: 1px solid transparent;\n    font-family: inherit;\n  }\n\n  .df-btn-cancel {\n    background: transparent;\n    color: var(--df-text-secondary);\n  }\n\n  .df-btn-cancel:hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: var(--df-text-main);\n  }\n\n  .df-btn-apply {\n    background: var(--df-primary);\n    color: white;\n    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\n  }\n\n  .df-btn-apply:hover {\n    background: var(--df-primary-hover);\n    transform: translateY(-1px);\n    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.4);\n  }\n\n  .df-btn-apply:active {\n    transform: translateY(0);\n  }\n  \n  /* Prevent background scrolling when modal is open */\n  body.df-modal-open {\n    overflow: hidden;\n  }\n`;\n\nconst DEFAULT_OPTIONS = [\n  'Today',\n  'Yesterday',\n  'Last 7 Days',\n  'Last 30 Days',\n  'This Month',\n  'Last Month',\n  'Custom'\n];\n\nexport const DateFilter = ({\n  open,\n  title = 'Date Filter',\n  options = DEFAULT_OPTIONS,\n  initialValue,\n  onClose,\n  onApply,\n  sx,\n  style,\n  className = '',\n}: DateFilterProps) => {\n  const [option, setOption] = useState<string>(initialValue?.option || 'Today');\n  const [from, setFrom] = useState<string>(initialValue?.from || '');\n  const [to, setTo] = useState<string>(initialValue?.to || '');\n  \n  const backdropRef = useRef<HTMLDivElement>(null);\n\n  // Sync state with prop if it changes\n  useEffect(() => {\n    if (open && initialValue) {\n      setOption(initialValue.option);\n      setFrom(initialValue.from || '');\n      setTo(initialValue.to || '');\n    }\n  }, [open, initialValue]);\n\n  // Handle body scroll locking\n  useEffect(() => {\n    if (open) {\n      document.body.classList.add('df-modal-open');\n    } else {\n      document.body.classList.remove('df-modal-open');\n    }\n    return () => document.body.classList.remove('df-modal-open');\n  }, [open]);\n\n  // Handle click outside\n  const handleBackdropClick = (e: React.MouseEvent) => {\n    if (e.target === backdropRef.current) {\n      onClose();\n    }\n  };\n\n  // Handle Escape key\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && open) {\n        onClose();\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [open, onClose]);\n\n  const handleApply = () => {\n    onApply({\n      option,\n      ...(option === 'Custom' ? { from, to } : {})\n    });\n  };\n\n  const todayStr = new Date().toISOString().split('T')[0];\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: STYLES }} />\n      <div \n        ref={backdropRef}\n        className={`df-backdrop ${open ? 'df-open' : ''} ${className}`}\n        onClick={handleBackdropClick}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"df-dialog-title\"\n        style={{ ...handleSx(sx), ...style }}\n      >\n        <div className=\"df-dialog\">\n          <div className=\"df-header\">\n            <h2 id=\"df-dialog-title\" className=\"df-title\">{title}</h2>\n          </div>\n          \n          <div className=\"df-content\">\n            <div className=\"df-form-group\">\n              <label className=\"df-label\">Select Range</label>\n              <div className=\"df-select-wrapper\">\n                <select \n                  className=\"df-input df-select\"\n                  value={option}\n                  onChange={(e) => setOption(e.target.value)}\n                >\n                  {options.map((opt) => (\n                    <option key={opt} value={opt}>{opt}</option>\n                  ))}\n                </select>\n              </div>\n            </div>\n\n            {option === 'Custom' && (\n              <div className=\"df-custom-range\">\n                <div className=\"df-form-group\">\n                  <label className=\"df-label\">From Date</label>\n                  <input \n                    type=\"date\"\n                    className=\"df-input\"\n                    value={from}\n                    onChange={(e) => setFrom(e.target.value)}\n                    max={todayStr}\n                  />\n                </div>\n                <div className=\"df-form-group\">\n                  <label className=\"df-label\">To Date</label>\n                  <input \n                    type=\"date\"\n                    className=\"df-input\"\n                    value={to}\n                    onChange={(e) => setTo(e.target.value)}\n                    min={from || undefined}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n\n          <div className=\"df-footer\">\n            <button className=\"df-btn df-btn-cancel\" onClick={onClose}>\n              Cancel\n            </button>\n            <button className=\"df-btn df-btn-apply\" onClick={handleApply}>\n              Apply\n            </button>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n};\n"]}

package/dist/components/AppBar/index.d.mts

@@ -0,0 +1,89 @@
+import * as react from 'react';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { S as SxProp } from '../../types-BJWJOB_w.mjs';
+
+interface AppBarClasses {
+    /** Styles applied to the root element. */
+    root?: string;
+    /** Styles applied to the root element if `position="fixed"`. */
+    positionFixed?: string;
+    /** Styles applied to the root element if `position="absolute"`. */
+    positionAbsolute?: string;
+    /** Styles applied to the root element if `position="sticky"`. */
+    positionSticky?: string;
+    /** Styles applied to the root element if `position="static"`. */
+    positionStatic?: string;
+    /** Styles applied to the root element if `position="relative"`. */
+    positionRelative?: string;
+    /** Styles applied to the root element if `color="default"`. */
+    colorDefault?: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary?: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary?: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit?: string;
+    /** Styles applied to the root element if `color="transparent"`. */
+    colorTransparent?: string;
+    /** Styles applied to the root element if `color="error"`. */
+    colorError?: string;
+    /** Styles applied to the root element if `color="info"`. */
+    colorInfo?: string;
+    /** Styles applied to the root element if `color="success"`. */
+    colorSuccess?: string;
+    /** Styles applied to the root element if `color="warning"`. */
+    colorWarning?: string;
+}
+interface AppBarBaseProps {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: AppBarClasses;
+    /**
+     * The color of the component. It supports both default and custom theme colors.
+     * @default 'primary'
+     */
+    color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'transparent' | 'error' | 'info' | 'success' | 'warning' | string;
+    /**
+     * Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive.
+     * @default 4
+     */
+    elevation?: number;
+    /**
+     * If true, the color prop is applied in dark mode.
+     * @default false
+     */
+    enableColorOnDark?: boolean;
+    /**
+     * The positioning type.
+     * @default 'fixed'
+     */
+    position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
+    /**
+     * If false, rounded corners are enabled.
+     * @default true
+     */
+    square?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProp;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+type AppBarProps<T extends ElementType = 'header'> = AppBarBaseProps & Omit<ComponentPropsWithoutRef<T>, keyof AppBarBaseProps | 'component'> & {
+    component?: T;
+};
+
+/**
+ * The AppBar displays information and actions relating to the current screen.
+ */
+declare const AppBar: react.ForwardRefExoticComponent<Omit<AppBarProps<ElementType>, "ref"> & react.RefAttributes<unknown>>;
+
+export { AppBar, type AppBarBaseProps, type AppBarClasses, type AppBarProps, SxProp };

package/dist/components/AppBar/index.d.ts

@@ -0,0 +1,89 @@
+import * as react from 'react';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { S as SxProp } from '../../types-BJWJOB_w.js';
+
+interface AppBarClasses {
+    /** Styles applied to the root element. */
+    root?: string;
+    /** Styles applied to the root element if `position="fixed"`. */
+    positionFixed?: string;
+    /** Styles applied to the root element if `position="absolute"`. */
+    positionAbsolute?: string;
+    /** Styles applied to the root element if `position="sticky"`. */
+    positionSticky?: string;
+    /** Styles applied to the root element if `position="static"`. */
+    positionStatic?: string;
+    /** Styles applied to the root element if `position="relative"`. */
+    positionRelative?: string;
+    /** Styles applied to the root element if `color="default"`. */
+    colorDefault?: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary?: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary?: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit?: string;
+    /** Styles applied to the root element if `color="transparent"`. */
+    colorTransparent?: string;
+    /** Styles applied to the root element if `color="error"`. */
+    colorError?: string;
+    /** Styles applied to the root element if `color="info"`. */
+    colorInfo?: string;
+    /** Styles applied to the root element if `color="success"`. */
+    colorSuccess?: string;
+    /** Styles applied to the root element if `color="warning"`. */
+    colorWarning?: string;
+}
+interface AppBarBaseProps {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: AppBarClasses;
+    /**
+     * The color of the component. It supports both default and custom theme colors.
+     * @default 'primary'
+     */
+    color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'transparent' | 'error' | 'info' | 'success' | 'warning' | string;
+    /**
+     * Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive.
+     * @default 4
+     */
+    elevation?: number;
+    /**
+     * If true, the color prop is applied in dark mode.
+     * @default false
+     */
+    enableColorOnDark?: boolean;
+    /**
+     * The positioning type.
+     * @default 'fixed'
+     */
+    position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
+    /**
+     * If false, rounded corners are enabled.
+     * @default true
+     */
+    square?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProp;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+type AppBarProps<T extends ElementType = 'header'> = AppBarBaseProps & Omit<ComponentPropsWithoutRef<T>, keyof AppBarBaseProps | 'component'> & {
+    component?: T;
+};
+
+/**
+ * The AppBar displays information and actions relating to the current screen.
+ */
+declare const AppBar: react.ForwardRefExoticComponent<Omit<AppBarProps<ElementType>, "ref"> & react.RefAttributes<unknown>>;
+
+export { AppBar, type AppBarBaseProps, type AppBarClasses, type AppBarProps, SxProp };

package/dist/components/AppBar/index.js

@@ -0,0 +1,2 @@
+'use strict';var chunk7XVF6WPJ_js=require('../../chunk-7XVF6WPJ.js');require('../../chunk-DDGBDWFC.js');Object.defineProperty(exports,"AppBar",{enumerable:true,get:function(){return chunk7XVF6WPJ_js.a}});//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/AppBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/components/AppBar/index.mjs

@@ -0,0 +1,2 @@
+export{a as AppBar}from'../../chunk-UYHBKE7G.mjs';import'../../chunk-547MQ4FI.mjs';//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/AppBar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}

package/dist/components/Box/index.d.mts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { ElementType, ComponentPropsWithoutRef } from 'react';
+import { S as SxProp } from '../../types-BJWJOB_w.mjs';
+
+interface BoxBaseProps<T extends ElementType = 'div'> {
+    /**
+     * The component used for the root node. Either a string to use a HTML element or a component.
+     * @default 'div'
+     */
+    component?: T;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProp;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+type BoxProps<T extends ElementType = 'div'> = BoxBaseProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof BoxBaseProps<T>>;
+
+/**
+ * Box is a basic building block component that provides a way to render any HTML element
+ * and apply styles using the sx prop.
+ */
+declare const Box: react.ForwardRefExoticComponent<Omit<BoxProps<ElementType>, "ref"> & react.RefAttributes<unknown>>;
+
+export { Box, type BoxBaseProps, type BoxProps, SxProp };

package/dist/components/Box/index.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { ElementType, ComponentPropsWithoutRef } from 'react';
+import { S as SxProp } from '../../types-BJWJOB_w.js';
+
+interface BoxBaseProps<T extends ElementType = 'div'> {
+    /**
+     * The component used for the root node. Either a string to use a HTML element or a component.
+     * @default 'div'
+     */
+    component?: T;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProp;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+type BoxProps<T extends ElementType = 'div'> = BoxBaseProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof BoxBaseProps<T>>;
+
+/**
+ * Box is a basic building block component that provides a way to render any HTML element
+ * and apply styles using the sx prop.
+ */
+declare const Box: react.ForwardRefExoticComponent<Omit<BoxProps<ElementType>, "ref"> & react.RefAttributes<unknown>>;
+
+export { Box, type BoxBaseProps, type BoxProps, SxProp };

package/dist/components/Box/index.js

@@ -0,0 +1,2 @@
+'use strict';var chunkLIBHUJ27_js=require('../../chunk-LIBHUJ27.js');require('../../chunk-DDGBDWFC.js');Object.defineProperty(exports,"Box",{enumerable:true,get:function(){return chunkLIBHUJ27_js.a}});//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Box/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/components/Box/index.mjs

@@ -0,0 +1,2 @@
+export{a as Box}from'../../chunk-I6OJHQZX.mjs';import'../../chunk-547MQ4FI.mjs';//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Box/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}

package/dist/components/Container/index.d.mts

@@ -0,0 +1,71 @@
+import * as react from 'react';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { S as SxProp } from '../../types-BJWJOB_w.mjs';
+
+interface ContainerClasses {
+    /** Styles applied to the root element. */
+    root?: string;
+    /** Styles applied to the root element if `disableGutters={true}`. */
+    disableGutters?: string;
+    /** Styles applied to the root element if `fixed={true}`. */
+    fixed?: string;
+    /** Styles applied to the root element if `maxWidth="xs"`. */
+    maxWidthXs?: string;
+    /** Styles applied to the root element if `maxWidth="sm"`. */
+    maxWidthSm?: string;
+    /** Styles applied to the root element if `maxWidth="md"`. */
+    maxWidthMd?: string;
+    /** Styles applied to the root element if `maxWidth="lg"`. */
+    maxWidthLg?: string;
+    /** Styles applied to the root element if `maxWidth="xl"`. */
+    maxWidthXl?: string;
+}
+interface ContainerBaseProps<T extends ElementType = 'div'> {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: ContainerClasses;
+    /**
+     * The component used for the root node. Either a string to use a HTML element or a component.
+     * @default 'div'
+     */
+    component?: T;
+    /**
+     * If `true`, the left and right padding is removed.
+     * @default false
+     */
+    disableGutters?: boolean;
+    /**
+     * Set the max-width to match the min-width of the current breakpoint.
+     * This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport.
+     * It's fluid by default.
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * Determine the max-width of the container. The container width grows with the size of the screen.
+     * Set to `false` to disable `maxWidth`.
+     * @default 'lg'
+     */
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false | string;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProp;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+type ContainerProps<T extends ElementType = 'div'> = ContainerBaseProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof ContainerBaseProps<T>>;
+
+/**
+ * Container centers your content horizontally. It's the most basic layout element.
+ */
+declare const Container: react.ForwardRefExoticComponent<Omit<ContainerProps<ElementType>, "ref"> & react.RefAttributes<unknown>>;
+
+export { Container, type ContainerBaseProps, type ContainerClasses, type ContainerProps, SxProp };

package/dist/components/Container/index.d.ts

@@ -0,0 +1,71 @@
+import * as react from 'react';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { S as SxProp } from '../../types-BJWJOB_w.js';
+
+interface ContainerClasses {
+    /** Styles applied to the root element. */
+    root?: string;
+    /** Styles applied to the root element if `disableGutters={true}`. */
+    disableGutters?: string;
+    /** Styles applied to the root element if `fixed={true}`. */
+    fixed?: string;
+    /** Styles applied to the root element if `maxWidth="xs"`. */
+    maxWidthXs?: string;
+    /** Styles applied to the root element if `maxWidth="sm"`. */
+    maxWidthSm?: string;
+    /** Styles applied to the root element if `maxWidth="md"`. */
+    maxWidthMd?: string;
+    /** Styles applied to the root element if `maxWidth="lg"`. */
+    maxWidthLg?: string;
+    /** Styles applied to the root element if `maxWidth="xl"`. */
+    maxWidthXl?: string;
+}
+interface ContainerBaseProps<T extends ElementType = 'div'> {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: ContainerClasses;
+    /**
+     * The component used for the root node. Either a string to use a HTML element or a component.
+     * @default 'div'
+     */
+    component?: T;
+    /**
+     * If `true`, the left and right padding is removed.
+     * @default false
+     */
+    disableGutters?: boolean;
+    /**
+     * Set the max-width to match the min-width of the current breakpoint.
+     * This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport.
+     * It's fluid by default.
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * Determine the max-width of the container. The container width grows with the size of the screen.
+     * Set to `false` to disable `maxWidth`.
+     * @default 'lg'
+     */
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false | string;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProp;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+type ContainerProps<T extends ElementType = 'div'> = ContainerBaseProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof ContainerBaseProps<T>>;
+
+/**
+ * Container centers your content horizontally. It's the most basic layout element.
+ */
+declare const Container: react.ForwardRefExoticComponent<Omit<ContainerProps<ElementType>, "ref"> & react.RefAttributes<unknown>>;
+
+export { Container, type ContainerBaseProps, type ContainerClasses, type ContainerProps, SxProp };

package/dist/components/Container/index.js

@@ -0,0 +1,2 @@
+'use strict';var chunk3HGMPMXD_js=require('../../chunk-3HGMPMXD.js');require('../../chunk-DDGBDWFC.js');Object.defineProperty(exports,"Container",{enumerable:true,get:function(){return chunk3HGMPMXD_js.a}});//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/components/Container/index.mjs

@@ -0,0 +1,2 @@
+export{a as Container}from'../../chunk-BNBEIMM2.mjs';import'../../chunk-547MQ4FI.mjs';//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Container/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}

package/dist/components/DateFilter/index.d.mts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
 
 type DateFilterOption = 'Today' | 'Yesterday' | 'Last 7 Days' | 'Last 30 Days' | 'This Month' | 'Last Month' | 'Custom';
 interface DateFilterValue {
@@ -19,8 +20,14 @@ interface DateFilterProps {
     onClose: () => void;
     /** Callback fired when user clicks Apply */
     onApply: (value: DateFilterValue) => void;
+    /** Custom styles using the sx prop pattern */
+    sx?: CSSProperties;
+    /** Custom style object */
+    style?: CSSProperties;
+    /** Custom class name */
+    className?: string;
 }
 
-declare const DateFilter: ({ open, title, options, initialValue, onClose, onApply }: DateFilterProps) => react_jsx_runtime.JSX.Element;
+declare const DateFilter: ({ open, title, options, initialValue, onClose, onApply, sx, style, className, }: DateFilterProps) => react_jsx_runtime.JSX.Element;
 
 export { DateFilter, type DateFilterOption, type DateFilterProps, type DateFilterValue };

package/dist/components/DateFilter/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
 
 type DateFilterOption = 'Today' | 'Yesterday' | 'Last 7 Days' | 'Last 30 Days' | 'This Month' | 'Last Month' | 'Custom';
 interface DateFilterValue {
@@ -19,8 +20,14 @@ interface DateFilterProps {
     onClose: () => void;
     /** Callback fired when user clicks Apply */
     onApply: (value: DateFilterValue) => void;
+    /** Custom styles using the sx prop pattern */
+    sx?: CSSProperties;
+    /** Custom style object */
+    style?: CSSProperties;
+    /** Custom class name */
+    className?: string;
 }
 
-declare const DateFilter: ({ open, title, options, initialValue, onClose, onApply }: DateFilterProps) => react_jsx_runtime.JSX.Element;
+declare const DateFilter: ({ open, title, options, initialValue, onClose, onApply, sx, style, className, }: DateFilterProps) => react_jsx_runtime.JSX.Element;
 
 export { DateFilter, type DateFilterOption, type DateFilterProps, type DateFilterValue };

package/dist/components/DateFilter/index.js

@@ -1,2 +1,2 @@
-'use strict';var chunk2TXYJ7YE_js=require('../../chunk-2TXYJ7YE.js');Object.defineProperty(exports,"DateFilter",{enumerable:true,get:function(){return chunk2TXYJ7YE_js.a}});//# sourceMappingURL=index.js.map
+'use strict';var chunkZPJSBORX_js=require('../../chunk-ZPJSBORX.js');require('../../chunk-MLURKSJZ.js');Object.defineProperty(exports,"DateFilter",{enumerable:true,get:function(){return chunkZPJSBORX_js.a}});//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/DateFilter/index.mjs

@@ -1,2 +1,2 @@
-export{a as DateFilter}from'../../chunk-GNMGJBBO.mjs';//# sourceMappingURL=index.mjs.map
+export{a as DateFilter}from'../../chunk-AK3NQBYU.mjs';import'../../chunk-HGGQFNUJ.mjs';//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/components/FileUploadField/index.d.mts

@@ -1,4 +1,4 @@
-import react__default from 'react';
+import react__default, { CSSProperties } from 'react';
 
 type FileUploadType = 'image' | 'file';
 interface FileUploadFieldBaseProps {
@@ -29,7 +29,9 @@ interface FileUploadFieldBaseProps {
     /** Custom class name for the root element */
     className?: string;
     /** Inline styles for the root element */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
+    /** Custom styles using the sx prop pattern */
+    sx?: CSSProperties;
     /** Whether to allow multiple file selection */
     multiple?: boolean;
     /** Callback called when user removes a file. Index provided if multiple */

package/dist/components/FileUploadField/index.d.ts

@@ -1,4 +1,4 @@
-import react__default from 'react';
+import react__default, { CSSProperties } from 'react';
 
 type FileUploadType = 'image' | 'file';
 interface FileUploadFieldBaseProps {
@@ -29,7 +29,9 @@ interface FileUploadFieldBaseProps {
     /** Custom class name for the root element */
     className?: string;
     /** Inline styles for the root element */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
+    /** Custom styles using the sx prop pattern */
+    sx?: CSSProperties;
     /** Whether to allow multiple file selection */
     multiple?: boolean;
     /** Callback called when user removes a file. Index provided if multiple */

package/dist/components/FileUploadField/index.js

@@ -1,2 +1,2 @@
-'use strict';var chunkZEMR63S4_js=require('../../chunk-ZEMR63S4.js');Object.defineProperty(exports,"FileUploadField",{enumerable:true,get:function(){return chunkZEMR63S4_js.a}});//# sourceMappingURL=index.js.map
+'use strict';var chunkP5HHRCE5_js=require('../../chunk-P5HHRCE5.js');require('../../chunk-MLURKSJZ.js');Object.defineProperty(exports,"FileUploadField",{enumerable:true,get:function(){return chunkP5HHRCE5_js.a}});//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/FileUploadField/index.mjs

@@ -1,2 +1,2 @@
-export{a as FileUploadField}from'../../chunk-ZY5AHZYZ.mjs';//# sourceMappingURL=index.mjs.map
+export{a as FileUploadField}from'../../chunk-PL2R3LYL.mjs';import'../../chunk-HGGQFNUJ.mjs';//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/components/FormLayout/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
 interface StepItem {
     label: string;
@@ -43,8 +43,14 @@ interface FormLayoutProps {
     extraHeaderActions?: ReactNode;
     /** Custom back button action (defaults to onCancel) */
     onBack?: () => void;
+    /** Inline styles for the root element */
+    style?: CSSProperties;
+    /** Custom styles using the sx prop pattern */
+    sx?: CSSProperties;
+    /** Custom class name */
+    className?: string;
 }
 
-declare const FormLayout: ({ title, mode, onCancel, onSubmit, children, steps, validateStep, loading, layoutType, onSaveDraft, onApprove, hideSubmitButton, hideCancelButton, showbutton, errors, extraHeaderActions, onBack }: FormLayoutProps) => react_jsx_runtime.JSX.Element;
+declare const FormLayout: ({ title, mode, onCancel, onSubmit, children, steps, validateStep, loading, layoutType, onSaveDraft, onApprove, hideSubmitButton, hideCancelButton, showbutton, errors, extraHeaderActions, onBack, style, sx, className, }: FormLayoutProps) => react_jsx_runtime.JSX.Element;
 
 export { FormLayout, type FormLayoutProps, type StepItem };

package/dist/components/FormLayout/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
 interface StepItem {
     label: string;
@@ -43,8 +43,14 @@ interface FormLayoutProps {
     extraHeaderActions?: ReactNode;
     /** Custom back button action (defaults to onCancel) */
     onBack?: () => void;
+    /** Inline styles for the root element */
+    style?: CSSProperties;
+    /** Custom styles using the sx prop pattern */
+    sx?: CSSProperties;
+    /** Custom class name */
+    className?: string;
 }
 
-declare const FormLayout: ({ title, mode, onCancel, onSubmit, children, steps, validateStep, loading, layoutType, onSaveDraft, onApprove, hideSubmitButton, hideCancelButton, showbutton, errors, extraHeaderActions, onBack }: FormLayoutProps) => react_jsx_runtime.JSX.Element;
+declare const FormLayout: ({ title, mode, onCancel, onSubmit, children, steps, validateStep, loading, layoutType, onSaveDraft, onApprove, hideSubmitButton, hideCancelButton, showbutton, errors, extraHeaderActions, onBack, style, sx, className, }: FormLayoutProps) => react_jsx_runtime.JSX.Element;
 
 export { FormLayout, type FormLayoutProps, type StepItem };